From 04cb9c32f86f0fcbd18731f4e467bde7aeb0a894 Mon Sep 17 00:00:00 2001
From: johnytiago <joaosao10@gmail.com>
Date: Mon, 14 May 2018 13:10:09 +0100
Subject: [PATCH] feat(instances): Firewall empty state update, more QA

---
 .../my-joy-images/src/components/empty.js     |    4 +-
 .../__snapshots__/metadata.spec.js.snap       | 2436 ++++++-------
 .../__snapshots__/snapshots.spec.js.snap      | 2952 +++++++++-------
 .../__snapshots__/summary.spec.js.snap        |   43 -
 .../__snapshots__/toolbar.spec.js.snap        |    7 -
 .../src/components/instances/summary.js       |    2 +-
 .../__tests__/__snapshots__/cns.spec.js.snap  |  396 +--
 .../__snapshots__/firewall.spec.js.snap       | 3050 +++++++++--------
 .../__tests__/__snapshots__/list.spec.js.snap |   21 -
 .../__snapshots__/metadata.spec.js.snap       |  886 ++---
 .../__snapshots__/networks.spec.js.snap       |  492 +--
 .../__snapshots__/summary.spec.js.snap        |   14 -
 .../__tests__/__snapshots__/tags.spec.js.snap | 1139 +++---
 packages/icons/src/empty-state.js             |  126 +
 packages/icons/src/index.js                   |    1 +
 packages/instance-steps/src/firewall/index.js |   22 +-
 packages/instance-steps/src/name/index.js     |    8 +-
 .../instance-steps/src/package/components.js  |    4 +-
 packages/logos/assets/empty-state.svg         |    1 +
 packages/resource-step/src/index.js           |    1 +
 .../__tests__/__snapshots__/cns.spec.js.snap  |    2 -
 .../__snapshots__/firewall.spec.js.snap       |  127 +-
 packages/resource-widgets/src/cns/index.js    |   28 +-
 packages/resource-widgets/src/empty/index.js  |    4 +-
 .../__snapshots__/button.spec.js.snap         |    5 -
 packages/ui-toolkit/src/button/index.js       |    1 -
 .../__snapshots__/key-value.spec.js.snap      | 2957 ++++++++--------
 packages/ui-toolkit/src/key-value/index.js    |    8 +-
 packages/ui-toolkit/src/tags/item.js          |   30 +-
 packages/ui-toolkit/src/tags/list.js          |    1 +
 30 files changed, 7758 insertions(+), 7010 deletions(-)
 create mode 100644 packages/icons/src/empty-state.js
 create mode 100644 packages/logos/assets/empty-state.svg

diff --git a/consoles/my-joy-images/src/components/empty.js b/consoles/my-joy-images/src/components/empty.js
index 213c7b92..56bfa3c9 100644
--- a/consoles/my-joy-images/src/components/empty.js
+++ b/consoles/my-joy-images/src/components/empty.js
@@ -4,7 +4,7 @@ import { Margin, Padding } from 'styled-components-spacing';
 import Flex from 'styled-flex-component';
 
 import { H3, Card } from 'joyent-ui-toolkit';
-import { NoPackages } from 'joyent-logo-assets';
+import { EmptyState } from 'joyent-icons';
 
 const NoPackagesTitle = styled(H3)`
   color: ${props => props.theme.greyDark};
@@ -20,7 +20,7 @@ export default ({ children }) => (
     <Padding all={6}>
       <Flex alignCenter justifyCenter column>
         <Margin bottom={2}>
-          <NoPackages />
+          <EmptyState />
         </Margin>
         <NoPackagesTitle>{children}</NoPackagesTitle>
       </Flex>
diff --git a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
index bb125c25..041180aa 100644
--- a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
@@ -1,1061 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <AddForm /> without throwing 1`] = `
-.c30 {
-  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;
-}
-
-.c30::-moz-focus-inner,
-.c30[type='button']::-moz-focus-inner,
-.c30[type='reset']::-moz-focus-inner,
-.c30[type='submit']::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c30:-moz-focusring,
-.c30[type='button']:-moz-focusring,
-.c30[type='reset']:-moz-focusring,
-.c30[type='submit']:-moz-focusring {
-  outline: 0.0625rem dotted ButtonText;
-}
-
-.c29 {
-  min-width: 7.5rem;
-}
-
-.c28 {
-  display: inline-block;
-}
-
-.c27 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c27:focus {
-  outline: 0;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c27:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c27[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c27:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c27:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c31 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c31:focus {
-  outline: 0;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c31:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c31[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c31:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c31:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c33 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  color: rgb(210,67,58);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  float: right;
-}
-
-.c33:focus {
-  outline: 0;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c33:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c33[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c33:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c33:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c33:focus {
-  color: rgb(205,37,27);
-  background-color: rgb(255,255,255);
-  border-color: rgb(205,37,27);
-}
-
-.c33:hover {
-  color: rgb(205,37,27);
-  background-color: rgb(255,255,255);
-  border-color: rgb(205,37,27);
-}
-
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
-  background-color: rgba(210,67,58,0.1);
-  border-color: rgb(205,37,27);
-}
-
-.c17 {
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-}
-
-.c13 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
-.c25 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
-.c14 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c20 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c32 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c9 {
-  margin: 0;
-  color: rgb(73,73,73);
-  font-weight: 600;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
-.c21 {
-  height: 1px;
-  background-color: rgb(216,216,216);
-  background-color: transparent;
-}
-
-.c18 {
-  margin-top: 0.1875rem;
-}
-
-.c24 {
-  margin-top: 0.75rem;
-}
-
-.c34 {
-  margin-right: 0.75rem;
-}
-
-.c5 {
-  padding-right: 1.125rem;
-  padding-left: 1.125rem;
-}
-
-.c12 {
-  padding-left: 1.125rem;
-  padding-right: 1.125rem;
-  padding-top: 1.125rem;
-  padding-bottom: 1.125rem;
-}
-
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c0 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
-}
-
-.c3 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  min-height: auto;
-  height: 2.875rem;
-  -webkit-flex: 0 0 2.875rem;
-  -ms-flex: 0 0 2.875rem;
-  flex: 0 0 2.875rem;
-}
-
-.c11 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c10 {
-  box-sizing: border-box;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  border-width: 0;
-  background-color: transparent;
-}
-
-.c2 {
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  z-index: 1;
-  line-height: 1.5rem;
-  max-width: 100%;
-  border-top: 0;
-  border-left: 0;
-  border-right: 0;
-}
-
-.c8 {
-  box-sizing: border-box;
-  min-height: 2.9375rem;
-  max-width: 100%;
-  width: auto;
-  height: auto;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  overflow: hidden;
-  background-color: transparent;
-  border-width: 0;
-  box-shadow: none;
-  color: inherit;
-}
-
-.c15 {
-  display: inline-block;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  height: auto;
-  -webkit-padding-before: 0;
-  -webkit-padding-start: 0;
-  -webkit-padding-end: 0;
-  -webkit-padding-after: 0;
-  width: 100%;
-}
-
-.c19 {
-  box-sizing: border-box;
-  width: 18.75rem;
-  height: 3rem;
-  min-height: 3rem;
-  padding: 0.8125rem 0.75rem;
-  border-radius: 0.25rem;
-  background-color: rgb(255,255,255);
-  border: 0.0625rem solid rgb(216,216,216);
-  color: rgb(73,73,73);
-  font-size: 0.9375rem;
-  line-height: normal !important;
-  font-style: normal;
-  font-stretch: normal;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  outline: 0;
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
-}
-
-.c19:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
-.c19::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c19::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c19:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c19:invalid {
-  box-shadow: none;
-}
-
-.c19:disabled {
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-  cursor: not-allowed;
-}
-
-.c19:disabled::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c19:disabled::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c19:disabled:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c23 {
-  box-sizing: border-box;
-  width: 18.75rem;
-  height: 6rem;
-  min-height: 6rem;
-  padding: 0.8125rem 0.75rem;
-  border-radius: 0.25rem;
-  background-color: rgb(255,255,255);
-  border: 0.0625rem solid rgb(216,216,216);
-  color: rgb(73,73,73);
-  font-size: 0.9375rem;
-  line-height: normal !important;
-  font-style: normal;
-  font-stretch: normal;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  outline: 0;
-  font-family: "Roboto Mono",monospace;
-  width: 100%;
-  min-width: 100%;
-  text-overflow: ellipsis;
-  resize: vertical;
-}
-
-.c23:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
-.c23::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c23::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c23:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c23:invalid {
-  box-shadow: none;
-}
-
-.c23:disabled {
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-  cursor: not-allowed;
-}
-
-.c23:disabled::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c23:disabled::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c23:disabled:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c23:disabled {
-  color: rgb(73,73,73);
-}
-
-.c23:disabled::-webkit-input-placeholder {
-  color: rgb(73,73,73);
-}
-
-.c23:disabled::-moz-placeholder {
-  color: rgb(73,73,73);
-}
-
-.c23:disabled:-ms-input-placeholder {
-  color: rgb(73,73,73);
-}
-
-.c22 {
-  position: relative;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  width: 100%;
-  max-width: 100%;
-}
-
-.c16 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-}
-
-.c1 {
-  border-top: 0;
-  border-left: 0;
-  border-right: 0;
-}
-
-.c26 {
-  margin-right: 0.375rem;
-}
-
-.c4 {
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.c7 {
-  height: 2.9375rem;
-  max-width: 98%;
-}
-
-@media only screen and (min-width:0em) {
-  .c25 {
-    -webkit-align-items: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c25 {
-    -webkit-box-pack: justify;
-    -webkit-justify-content: space-between;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c14 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-
-@media only screen and (min-width:48em) {
-  .c20 {
-    -webkit-flex-basis: 58.333333333333336%;
-    -ms-flex-preferred-size: 58.333333333333336%;
-    flex-basis: 58.333333333333336%;
-    max-width: 58.333333333333336%;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c32 {
-    display: none;
-  }
-}
-
-<form
-  onSubmit={undefined}
->
-  <div
-    className="c0"
-    disabled={false}
-    name="card"
-  >
-    <div
-      className="c1 c2 c3"
-      disabled={false}
-      name="card-header"
-      onClick={false}
-    >
-      <div
-        className="c4 c5"
-      >
-        <div
-          className="c6"
-        >
-          <div
-            className="c7 c8 c3"
-            disabled={false}
-            name="card-header-meta"
-          >
-            <h4
-              className="c9"
-            >
-              Add metadata
-            </h4>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="c10 c11"
-      disabled={false}
-      name="card-outlet"
-    >
-      <div
-        className="c12"
-      >
-        <div
-          className="c13"
-        >
-          <div
-            className="c14"
-          >
-            <div
-              className="c15"
-              name="name"
-              role="group"
-              style={undefined}
-            >
-              <label
-                className="c16 c17"
-                htmlFor="k"
-              >
-                Metadata
-                 key
-              </label>
-              <div
-                className="c18"
-              >
-                <input
-                  className="c19"
-                  disabled={false}
-                  id="k"
-                  onBlur={null}
-                />
-                <div
-                  className="c13"
-                >
-                  <div
-                    className="c20"
-                  />
-                </div>
-              </div>
-            </div>
-            <div
-              className="c21 c13"
-              height="0.75rem"
-            />
-          </div>
-        </div>
-        <div
-          className="c13"
-        >
-          <div
-            className="c14"
-          >
-            <div
-              className="c15"
-              name="value"
-              role="group"
-              style={undefined}
-            >
-              <label
-                className="c16 c17"
-                htmlFor="l"
-              >
-                Metadata
-                 value
-              </label>
-              <div
-                className="c18"
-              >
-                <textarea
-                  className="c22 c23"
-                  disabled={false}
-                  id="l"
-                  name="name"
-                  onBlur={undefined}
-                />
-              </div>
-              <div
-                className="c13"
-              >
-                <div
-                  className="c20"
-                />
-              </div>
-            </div>
-            <div
-              className="c21 c13"
-              height="0.75rem"
-            />
-          </div>
-        </div>
-        <div
-          className="c24"
-        >
-          <div
-            className="c25"
-          >
-            <div
-              className="c14"
-            >
-              <button
-                className="c26 c27 c28 c29 c30"
-                data-ui-button="true"
-                disabled={false}
-                href=""
-                onClick={[Function]}
-                type="button"
-              >
-                <span>
-                  Cancel
-                </span>
-              </button>
-              <button
-                className="c31 c28 c29 c30"
-                data-ui-button="true"
-                disabled={true}
-                href=""
-                type="submit"
-              >
-                <span>
-                  Create
-                </span>
-              </button>
-            </div>
-            <div
-              className="c32"
-            >
-              <button
-                className="c33 c28 c29 c30"
-                data-ui-button="true"
-                disabled={false}
-                href=""
-                icon={true}
-                onClick={[Function]}
-                type="button"
-              >
-                <div
-                  className="c34"
-                >
-                  <svg
-                    height="16"
-                    style={
-                      Object {
-                        "transform": "rotate(0deg)",
-                      }
-                    }
-                    viewBox="0 0 12 16"
-                    width="12"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
-                      fill="rgb(210, 67, 58)"
-                    />
-                  </svg>
-                </div>
-                <span>
-                  Remove
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders <EditForm /> without throwing 1`] = `
 .c31 {
   font-family: sans-serif;
   font-size: 100%;
@@ -1112,7 +57,6 @@ exports[`renders <EditForm /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1200,7 +144,6 @@ exports[`renders <EditForm /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1289,7 +232,6 @@ exports[`renders <EditForm /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1388,7 +330,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   border-color: rgb(205,37,27);
 }
 
-.c17 {
+.c18 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -1398,65 +340,55 @@ exports[`renders <EditForm /> without throwing 1`] = `
   text-align: left;
 }
 
-.c13 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
-.c25 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
 .c14 {
   box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c20 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
 }
 
 .c26 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.c15 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c21 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1476,17 +408,25 @@ exports[`renders <EditForm /> without throwing 1`] = `
   display: block;
 }
 
-.c21 {
+.c10 {
+  margin: 0;
+  color: rgb(73,73,73);
+  font-weight: 600;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c22 {
   height: 1px;
   background-color: rgb(216,216,216);
   background-color: transparent;
 }
 
-.c18 {
+.c19 {
   margin-top: 0.1875rem;
 }
 
-.c24 {
+.c25 {
   margin-top: 0.75rem;
 }
 
@@ -1494,19 +434,19 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin-right: 0.75rem;
 }
 
-.c5 {
+.c6 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
 }
 
-.c12 {
+.c13 {
   padding-left: 1.125rem;
   padding-right: 1.125rem;
   padding-top: 1.125rem;
   padding-bottom: 1.125rem;
 }
 
-.c6 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1534,7 +474,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   align-items: center;
 }
 
-.c0 {
+.c1 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1557,7 +497,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c3 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1584,7 +524,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   flex: 0 0 2.875rem;
 }
 
-.c11 {
+.c12 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1606,7 +546,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c10 {
+.c11 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1622,7 +562,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c2 {
+.c3 {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -1634,7 +574,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   min-height: 2.9375rem;
   max-width: 100%;
@@ -1668,7 +608,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   color: inherit;
 }
 
-.c15 {
+.c16 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -1681,7 +621,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   width: 100%;
 }
 
-.c19 {
+.c20 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -1703,46 +643,46 @@ exports[`renders <EditForm /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c19:focus {
+.c20:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c19::-webkit-input-placeholder {
+.c20::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19::-moz-placeholder {
+.c20::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:-ms-input-placeholder {
+.c20:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:invalid {
+.c20:invalid {
   box-shadow: none;
 }
 
-.c19:disabled {
+.c20:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c19:disabled::-webkit-input-placeholder {
+.c20:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:disabled::-moz-placeholder {
+.c20:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:disabled:-ms-input-placeholder {
+.c20:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c23 {
+.c24 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -1767,62 +707,62 @@ exports[`renders <EditForm /> without throwing 1`] = `
   resize: vertical;
 }
 
-.c23:focus {
+.c24:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c23::-webkit-input-placeholder {
+.c24::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c23::-moz-placeholder {
+.c24::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c23:-ms-input-placeholder {
+.c24:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c23:invalid {
+.c24:invalid {
   box-shadow: none;
 }
 
-.c23:disabled {
+.c24:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c23:disabled::-webkit-input-placeholder {
+.c24:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c23:disabled::-moz-placeholder {
+.c24:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c23:disabled:-ms-input-placeholder {
+.c24:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c23:disabled {
+.c24:disabled {
   color: rgb(73,73,73);
 }
 
-.c23:disabled::-webkit-input-placeholder {
+.c24:disabled::-webkit-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c23:disabled::-moz-placeholder {
+.c24:disabled::-moz-placeholder {
   color: rgb(73,73,73);
 }
 
-.c23:disabled:-ms-input-placeholder {
+.c24:disabled:-ms-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c22 {
+.c23 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1835,22 +775,17 @@ exports[`renders <EditForm /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c16 {
+.c17 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c9 {
-  word-break: break-all;
-  line-height: 1.5;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: block;
+.c0 {
+  margin-bottom: 0;
 }
 
-.c1 {
+.c2 {
   border-top: 0;
   border-left: 0;
   border-right: 0;
@@ -1860,20 +795,20 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin-right: 0.375rem;
 }
 
-.c4 {
+.c5 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 
-.c7 {
+.c8 {
   height: 2.9375rem;
   max-width: 98%;
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c26 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1882,7 +817,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c26 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1891,7 +826,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c14 {
+  .c15 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -1900,16 +835,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c20 {
-    -webkit-flex-basis: 58.333333333333336%;
-    -ms-flex-preferred-size: 58.333333333333336%;
-    flex-basis: 58.333333333333336%;
-    max-width: 58.333333333333336%;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c26 {
+  .c21 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -1919,148 +845,148 @@ exports[`renders <EditForm /> without throwing 1`] = `
 
 @media only screen and (min-width:0em) {
   .c33 {
-    -webkit-flex-basis: 41.66666666666667%;
-    -ms-flex-preferred-size: 41.66666666666667%;
-    flex-basis: 41.66666666666667%;
-    max-width: 41.66666666666667%;
+    display: none;
   }
 }
 
 <form
+  className="c0"
   onSubmit={undefined}
 >
   <div
-    className="c0"
+    className="c1"
     disabled={false}
     name="card"
   >
     <div
-      className="c1 c2 c3"
+      className="c2 c3 c4"
       disabled={false}
       name="card-header"
-      onClick={undefined}
+      onClick={false}
     >
       <div
-        className="c4 c5"
+        className="c5 c6"
       >
         <div
-          className="c6"
+          className="c7"
         >
           <div
-            className="c7 c8 c3"
+            className="c8 c9 c4"
             disabled={false}
             name="card-header-meta"
           >
-            <div
-              className="c9"
-            />
+            <h4
+              className="c10"
+            >
+              Add metadata
+            </h4>
           </div>
         </div>
       </div>
     </div>
     <div
-      className="c10 c11"
+      className="c11 c12"
       disabled={false}
       name="card-outlet"
     >
       <div
-        className="c12"
+        className="c13"
       >
         <div
-          className="c13"
+          className="c14"
         >
           <div
-            className="c14"
+            className="c15"
           >
             <div
-              className="c15"
+              className="c16"
               name="name"
               role="group"
               style={undefined}
             >
               <label
-                className="c16 c17"
-                htmlFor="m"
+                className="c17 c18"
+                htmlFor="k"
               >
                 Metadata
                  key
               </label>
               <div
-                className="c18"
+                className="c19"
               >
                 <input
-                  className="c19"
+                  className="c20"
                   disabled={false}
-                  id="m"
+                  id="k"
                   onBlur={null}
                 />
                 <div
-                  className="c13"
+                  className="c14"
                 >
                   <div
-                    className="c20"
+                    className="c21"
                   />
                 </div>
               </div>
             </div>
             <div
-              className="c21 c13"
+              className="c22 c14"
               height="0.75rem"
             />
           </div>
         </div>
         <div
-          className="c13"
+          className="c14"
         >
           <div
-            className="c14"
+            className="c15"
           >
             <div
-              className="c15"
+              className="c16"
               name="value"
               role="group"
               style={undefined}
             >
               <label
-                className="c16 c17"
-                htmlFor="n"
+                className="c17 c18"
+                htmlFor="l"
               >
                 Metadata
                  value
               </label>
               <div
-                className="c18"
+                className="c19"
               >
                 <textarea
-                  className="c22 c23"
+                  className="c23 c24"
                   disabled={false}
-                  id="n"
+                  id="l"
                   name="name"
                   onBlur={undefined}
                 />
               </div>
               <div
-                className="c13"
+                className="c14"
               >
                 <div
-                  className="c20"
+                  className="c21"
                 />
               </div>
             </div>
             <div
-              className="c21 c13"
+              className="c22 c14"
               height="0.75rem"
             />
           </div>
         </div>
         <div
-          className="c24"
+          className="c25"
         >
           <div
-            className="c25"
+            className="c26"
           >
             <div
-              className="c26"
+              className="c15"
             >
               <button
                 className="c27 c28 c29 c30 c31"
@@ -2082,7 +1008,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
                 type="submit"
               >
                 <span>
-                  Save
+                  Create
                 </span>
               </button>
             </div>
@@ -2130,3 +1056,1081 @@ exports[`renders <EditForm /> without throwing 1`] = `
   </div>
 </form>
 `;
+
+exports[`renders <EditForm /> without throwing 1`] = `
+.c32 {
+  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;
+}
+
+.c32::-moz-focus-inner,
+.c32[type='button']::-moz-focus-inner,
+.c32[type='reset']::-moz-focus-inner,
+.c32[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c32:-moz-focusring,
+.c32[type='button']:-moz-focusring,
+.c32[type='reset']:-moz-focusring,
+.c32[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c31 {
+  min-width: 7.5rem;
+}
+
+.c30 {
+  display: inline-block;
+}
+
+.c29 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c29:focus {
+  outline: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c29:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c29:active,
+.c29:active:hover,
+.c29:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c29[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c29:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c29:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c29:active,
+.c29:active:hover,
+.c29:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c33 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c33:focus {
+  outline: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c33:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c33[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c33:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c33:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c35 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  float: right;
+}
+
+.c35:focus {
+  outline: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c35:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c35[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c35:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c35:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c35:focus {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c35:hover {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
+}
+
+.c18 {
+  font-size: 0.9375rem;
+  line-height: 1.125rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+}
+
+.c14 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.c26 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.c15 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c21 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c27 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c34 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c22 {
+  height: 1px;
+  background-color: rgb(216,216,216);
+  background-color: transparent;
+}
+
+.c19 {
+  margin-top: 0.1875rem;
+}
+
+.c25 {
+  margin-top: 0.75rem;
+}
+
+.c36 {
+  margin-right: 0.75rem;
+}
+
+.c6 {
+  padding-right: 1.125rem;
+  padding-left: 1.125rem;
+}
+
+.c13 {
+  padding-left: 1.125rem;
+  padding-right: 1.125rem;
+  padding-top: 1.125rem;
+  padding-bottom: 1.125rem;
+}
+
+.c7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c1 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+}
+
+.c4 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+}
+
+.c12 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c11 {
+  box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  border-width: 0;
+  background-color: transparent;
+}
+
+.c3 {
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  z-index: 1;
+  line-height: 1.5rem;
+  max-width: 100%;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+}
+
+.c9 {
+  box-sizing: border-box;
+  min-height: 2.9375rem;
+  max-width: 100%;
+  width: auto;
+  height: auto;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  overflow: hidden;
+  background-color: transparent;
+  border-width: 0;
+  box-shadow: none;
+  color: inherit;
+}
+
+.c16 {
+  display: inline-block;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+  width: 100%;
+}
+
+.c20 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 3rem;
+  min-height: 3rem;
+  padding: 0.8125rem 0.75rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgb(73,73,73);
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c20:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c20::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c20::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c20:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c20:invalid {
+  box-shadow: none;
+}
+
+.c20:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c20:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c20:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c20:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c24 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 6rem;
+  min-height: 6rem;
+  padding: 0.8125rem 0.75rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgb(73,73,73);
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+  font-family: "Roboto Mono",monospace;
+  width: 100%;
+  min-width: 100%;
+  text-overflow: ellipsis;
+  resize: vertical;
+}
+
+.c24:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c24::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c24::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c24:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c24:invalid {
+  box-shadow: none;
+}
+
+.c24:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c24:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c24:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c24:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c24:disabled {
+  color: rgb(73,73,73);
+}
+
+.c24:disabled::-webkit-input-placeholder {
+  color: rgb(73,73,73);
+}
+
+.c24:disabled::-moz-placeholder {
+  color: rgb(73,73,73);
+}
+
+.c24:disabled:-ms-input-placeholder {
+  color: rgb(73,73,73);
+}
+
+.c23 {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 100%;
+  max-width: 100%;
+}
+
+.c17 {
+  font-weight: 600;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c0 {
+  margin-bottom: 0;
+}
+
+.c10 {
+  word-break: break-all;
+  line-height: 1.5;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+
+.c2 {
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+}
+
+.c28 {
+  margin-right: 0.375rem;
+}
+
+.c5 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.c8 {
+  height: 2.9375rem;
+  max-width: 98%;
+}
+
+@media only screen and (min-width:0em) {
+  .c26 {
+    -webkit-align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c26 {
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c15 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c21 {
+    -webkit-flex-basis: 58.333333333333336%;
+    -ms-flex-preferred-size: 58.333333333333336%;
+    flex-basis: 58.333333333333336%;
+    max-width: 58.333333333333336%;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c27 {
+    -webkit-flex-basis: 58.333333333333336%;
+    -ms-flex-preferred-size: 58.333333333333336%;
+    flex-basis: 58.333333333333336%;
+    max-width: 58.333333333333336%;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c34 {
+    -webkit-flex-basis: 41.66666666666667%;
+    -ms-flex-preferred-size: 41.66666666666667%;
+    flex-basis: 41.66666666666667%;
+    max-width: 41.66666666666667%;
+  }
+}
+
+<form
+  className="c0"
+  onSubmit={undefined}
+>
+  <div
+    className="c1"
+    disabled={false}
+    name="card"
+  >
+    <div
+      className="c2 c3 c4"
+      disabled={false}
+      name="card-header"
+      onClick={undefined}
+    >
+      <div
+        className="c5 c6"
+      >
+        <div
+          className="c7"
+        >
+          <div
+            className="c8 c9 c4"
+            disabled={false}
+            name="card-header-meta"
+          >
+            <div
+              className="c10"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="c11 c12"
+      disabled={false}
+      name="card-outlet"
+    >
+      <div
+        className="c13"
+      >
+        <div
+          className="c14"
+        >
+          <div
+            className="c15"
+          >
+            <div
+              className="c16"
+              name="name"
+              role="group"
+              style={undefined}
+            >
+              <label
+                className="c17 c18"
+                htmlFor="m"
+              >
+                Metadata
+                 key
+              </label>
+              <div
+                className="c19"
+              >
+                <input
+                  className="c20"
+                  disabled={false}
+                  id="m"
+                  onBlur={null}
+                />
+                <div
+                  className="c14"
+                >
+                  <div
+                    className="c21"
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              className="c22 c14"
+              height="0.75rem"
+            />
+          </div>
+        </div>
+        <div
+          className="c14"
+        >
+          <div
+            className="c15"
+          >
+            <div
+              className="c16"
+              name="value"
+              role="group"
+              style={undefined}
+            >
+              <label
+                className="c17 c18"
+                htmlFor="n"
+              >
+                Metadata
+                 value
+              </label>
+              <div
+                className="c19"
+              >
+                <textarea
+                  className="c23 c24"
+                  disabled={false}
+                  id="n"
+                  name="name"
+                  onBlur={undefined}
+                />
+              </div>
+              <div
+                className="c14"
+              >
+                <div
+                  className="c21"
+                />
+              </div>
+            </div>
+            <div
+              className="c22 c14"
+              height="0.75rem"
+            />
+          </div>
+        </div>
+        <div
+          className="c25"
+        >
+          <div
+            className="c26"
+          >
+            <div
+              className="c27"
+            >
+              <button
+                className="c28 c29 c30 c31 c32"
+                data-ui-button="true"
+                disabled={false}
+                href=""
+                onClick={[Function]}
+                type="button"
+              >
+                <span>
+                  Cancel
+                </span>
+              </button>
+              <button
+                className="c33 c30 c31 c32"
+                data-ui-button="true"
+                disabled={true}
+                href=""
+                type="submit"
+              >
+                <span>
+                  Save
+                </span>
+              </button>
+            </div>
+            <div
+              className="c34"
+            >
+              <button
+                className="c35 c30 c31 c32"
+                data-ui-button="true"
+                disabled={false}
+                href=""
+                icon={true}
+                onClick={[Function]}
+                type="button"
+              >
+                <div
+                  className="c36"
+                >
+                  <svg
+                    height="16"
+                    style={
+                      Object {
+                        "transform": "rotate(0deg)",
+                      }
+                    }
+                    viewBox="0 0 12 16"
+                    width="12"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
+                      fill="rgb(210, 67, 58)"
+                    />
+                  </svg>
+                </div>
+                <span>
+                  Remove
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
diff --git a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap
index 87127132..c3fd585d 100644
--- a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap
@@ -579,227 +579,289 @@ Array [
                 className="c4"
             >
                 <svg
-                    height={60}
-                    viewBox="0 0 79 60"
-                    width={79}
+                    height={109}
+                    viewBox="0 0 119.34 109.47"
+                    width={119}
                     xmlns="http://www.w3.org/2000/svg"
                     xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
-                    <title>
-                        Guilty_Salamander
-                    </title>
-                    <desc>
-                        Created using Figma
-                    </desc>
-                    <use
-                        fill="#FAA427"
-                        transform="translate(23.8 22)"
-                        xlinkHref="#a"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(27.3 25.5)"
-                        xlinkHref="#b"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(4.8 32.1)"
-                        xlinkHref="#c"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(12.2 31.8)"
-                        xlinkHref="#d"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(54.4 31.9)"
-                        xlinkHref="#e"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(54.4 32)"
-                        xlinkHref="#f"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(15.8 26.8)"
-                        xlinkHref="#g"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(5)"
-                        xlinkHref="#h"
-                    />
-                    <use
-                        fill="#FAFBFC"
-                        transform="rotate(-15.13 41.037 5.45)"
-                        xlinkHref="#i"
-                    />
-                    <use
-                        fill="#412B13"
-                        transform="rotate(-15.13 67.273 -24.78)"
-                        xlinkHref="#j"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(2.2 8)"
-                        xlinkHref="#k"
-                    />
-                    <use
-                        fill="#FAFBFC"
-                        transform="rotate(-74.87 40.46 -20.511)"
-                        xlinkHref="#l"
-                    />
-                    <use
-                        fill="#412B13"
-                        transform="rotate(-74.87 41.364 -22.098)"
-                        xlinkHref="#m"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(52.1 8)"
-                        xlinkHref="#n"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(31.5 34.3)"
-                        xlinkHref="#o"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(14.3)"
-                        xlinkHref="#p"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(30.9 18.9)"
-                        xlinkHref="#q"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(37.6 18.9)"
-                        xlinkHref="#r"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(27.4 53.9)"
-                        xlinkHref="#s"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(39.1 53.9)"
-                        xlinkHref="#t"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(27.4 53.9)"
-                        xlinkHref="#u"
-                    />
-                    <use
-                        fill="#342013"
-                        transform="translate(28.6 26.2)"
-                        xlinkHref="#v"
-                    />
-                    <use
-                        fill="#FFF"
-                        transform="translate(32.6 28.7)"
-                        xlinkHref="#w"
-                    />
                     <defs>
-                        <path
-                            d="M54.921 36.053L0 0l1.413 24.908c.359 6.249 5.752 11.145 12.283 11.145H54.92z"
-                            id="a"
-                        />
-                        <path
-                            d="M42.12 32.526L13.47 0 0 23.737c.282 4.924 4.527 8.778 9.672 8.778l32.448.01z"
-                            id="b"
-                        />
-                        <path
-                            d="M3.326 17.01a3.312 3.312 0 0 1-1.545-6.25C6.059 8.52 8.482 2.226 8.52 2.165a3.313 3.313 0 0 1 6.216 2.296c-.133.354-3.312 8.717-9.86 12.145-.475.26-1.008.4-1.55.403z"
-                            id="c"
-                        />
-                        <path
-                            d="M5.079 9.205A28.654 28.654 0 0 0 7.287 4.75a3.312 3.312 0 1 0-6.183-2.296C.781 3.234.412 3.996 0 4.734c1.33 1.181 3.544 3.152 5.079 4.471z"
-                            id="d"
-                        />
-                        <path
-                            d="M11.682 17.27a3.312 3.312 0 0 0 1.545-6.248C8.95 8.78 6.526 2.487 6.504 2.427A3.312 3.312 0 1 0 .316 4.723c.126.353 3.312 8.717 9.853 12.145.464.254.983.393 1.513.403z"
-                            id="e"
-                        />
-                        <path
-                            d="M2.45 9.01A28.33 28.33 0 0 1 .242 4.553a3.312 3.312 0 1 1 6.21-2.296c.326.78.695 1.54 1.104 2.28C6.187 5.719 3.973 7.69 2.45 9.009z"
-                            id="f"
-                        />
-                        <path
-                            d="M35.159 0H6.542A6.542 6.542 0 0 0 0 6.542v14.016a6.542 6.542 0 0 0 6.542 6.541h28.617a6.541 6.541 0 0 0 6.541-6.541V6.542A6.542 6.542 0 0 0 35.16 0z"
-                            id="g"
-                        />
-                        <path
-                            d="M54.254 0H9.026A9.026 9.026 0 0 0 0 9.026v17.207a9.026 9.026 0 0 0 9.026 9.025h45.228a9.026 9.026 0 0 0 9.025-9.026V9.027A9.026 9.026 0 0 0 54.253 0z"
-                            id="h"
-                        />
-                        <path
-                            d="M9.721 18.637c5.37 0 9.721-4.172 9.721-9.319C19.442 4.172 15.09 0 9.722 0 4.351 0 0 4.172 0 9.318c0 5.147 4.352 9.319 9.721 9.319z"
-                            id="i"
-                        />
-                        <path
-                            d="M5.19 9.959c2.865 0 5.188-2.23 5.188-4.98C10.378 2.23 8.055 0 5.19 0S0 2.23 0 4.98c0 2.75 2.323 4.979 5.19 4.979z"
-                            id="j"
-                        />
-                        <path
-                            d="M7.262.351C2.078 1.753-1.018 6.921.306 11.89l18.77-5.073C17.705 1.847 12.411-1.045 7.261.35z"
-                            id="k"
-                        />
-                        <path
-                            d="M9.318 19.442c5.147 0 9.319-4.352 9.319-9.72C18.637 4.351 14.465 0 9.318 0 4.172 0 0 4.352 0 9.721c0 5.37 4.172 9.721 9.318 9.721z"
-                            id="l"
-                        />
-                        <path
-                            d="M4.98 10.378c2.75 0 4.979-2.323 4.979-5.189S7.729 0 4.979 0C2.23 0 0 2.323 0 5.19c0 2.865 2.23 5.188 4.98 5.188z"
-                            id="m"
-                        />
-                        <path
-                            d="M11.819.351c5.178 1.402 8.28 6.57 6.95 11.538L0 6.816C1.347 1.847 6.635-1.045 11.819.35z"
-                            id="n"
-                        />
-                        <path
-                            d="M5.106 4.897A5.007 5.007 0 0 0 10.218 0H0a5.001 5.001 0 0 0 5.106 4.897z"
-                            id="o"
-                        />
-                        <path
-                            d="M0 0l22.258 18.498L44.516 0H0z"
-                            id="p"
-                        />
-                        <path
-                            d="M2.445 0A2.396 2.396 0 0 0 0 2.342h4.885a2.39 2.39 0 0 0-2.44-2.34z"
-                            id="q"
-                        />
-                        <path
-                            d="M2.462 0A2.396 2.396 0 0 0 0 2.343h4.885A2.39 2.39 0 0 0 2.462 0z"
-                            id="r"
-                        />
-                        <path
-                            d="M0 0h6.227v3.091A3.047 3.047 0 0 1 3.18 6.14h-.127A3.047 3.047 0 0 1 .006 3.09V0H0z"
-                            id="s"
-                        />
-                        <path
-                            d="M.006 0H6.22v3.091A3.047 3.047 0 0 1 3.174 6.14h-.127A3.047 3.047 0 0 1 0 3.09V0h.006z"
-                            id="t"
-                        />
-                        <path
-                            d="M31.328 0H0v1.474h31.328V0z"
-                            id="u"
-                        />
-                        <path
-                            d="M15.422 1.503A17.422 17.422 0 0 0 8.113.002 17.4 17.4 0 0 0 .805 1.503a1.457 1.457 0 0 0 .629 2.76h2.572V4.06a1.579 1.579 0 0 1 2.126-1.468 6.194 6.194 0 0 0 3.963 0 1.574 1.574 0 0 1 2.12 1.468v.204h2.572a1.463 1.463 0 0 0 .635-2.76z"
-                            id="v"
-                        />
-                        <path
-                            d="M6.072.104a6.194 6.194 0 0 1-3.963 0A1.579 1.579 0 0 0 0 1.573v.204h8.209v-.204A1.573 1.573 0 0 0 6.072.104z"
-                            id="w"
+                        <style
+                            dangerouslySetInnerHTML={
+                                Object {
+                                    "__html": ".cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}",
+                                  }
+                            }
                         />
+                        <radialGradient
+                            cx="208.79"
+                            cy="99.06"
+                            gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)"
+                            gradientUnits="userSpaceOnUse"
+                            id="radial-gradient"
+                            r="57.13"
+                        >
+                            <stop
+                                offset="0.05"
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.1"
+                                stopColor="#415f72"
+                            />
+                            <stop
+                                offset="0.13"
+                                stopColor="#3a5769"
+                            />
+                            <stop
+                                offset="0.16"
+                                stopColor="#2e4959"
+                            />
+                            <stop
+                                offset="0.19"
+                                stopColor="#1d3543"
+                            />
+                            <stop
+                                offset="0.19"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.26"
+                                stopColor="#1e3644"
+                            />
+                            <stop
+                                offset="0.32"
+                                stopColor="#274150"
+                            />
+                            <stop
+                                offset="0.39"
+                                stopColor="#365364"
+                            />
+                            <stop
+                                offset="0.43"
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.49"
+                                stopColor="#3f5d6f"
+                            />
+                            <stop
+                                offset="0.56"
+                                stopColor="#324e5f"
+                            />
+                            <stop
+                                offset="0.65"
+                                stopColor="#1e3644"
+                            />
+                            <stop
+                                offset="0.66"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.85"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.9"
+                                stopColor="#2c4656"
+                            />
+                            <stop
+                                offset="0.95"
+                                stopColor="#436275"
+                            />
+                        </radialGradient>
+                        <radialGradient
+                            cx="59.15"
+                            cy="56.86"
+                            gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)"
+                            gradientUnits="userSpaceOnUse"
+                            id="radial-gradient-2"
+                            r="46.01"
+                        >
+                            <stop
+                                offset={0}
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.1"
+                                stopColor="#426073"
+                            />
+                            <stop
+                                offset="0.13"
+                                stopColor="#3c5a6c"
+                            />
+                            <stop
+                                offset="0.16"
+                                stopColor="#344f61"
+                            />
+                            <stop
+                                offset="0.18"
+                                stopColor="#274050"
+                            />
+                            <stop
+                                offset="0.19"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.26"
+                                stopColor="#1e3644"
+                            />
+                            <stop
+                                offset="0.32"
+                                stopColor="#274150"
+                            />
+                            <stop
+                                offset="0.39"
+                                stopColor="#365364"
+                            />
+                            <stop
+                                offset="0.43"
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.49"
+                                stopColor="#3f5d6f"
+                            />
+                            <stop
+                                offset="0.56"
+                                stopColor="#324e5f"
+                            />
+                            <stop
+                                offset="0.65"
+                                stopColor="#1e3644"
+                            />
+                            <stop
+                                offset="0.66"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.85"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.92"
+                                stopColor="#2c4656"
+                            />
+                            <stop
+                                offset={1}
+                                stopColor="#436275"
+                            />
+                        </radialGradient>
+                        <radialGradient
+                            cx="-521.06"
+                            cy="366.16"
+                            gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)"
+                            gradientUnits="userSpaceOnUse"
+                            id="radial-gradient-3"
+                            r="32.44"
+                        >
+                            <stop
+                                offset={0}
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.02"
+                                stopColor="#436275"
+                                stopOpacity="0.97"
+                            />
+                            <stop
+                                offset="0.34"
+                                stopColor="#436275"
+                                stopOpacity="0.55"
+                            />
+                            <stop
+                                offset="0.62"
+                                stopColor="#436275"
+                                stopOpacity="0.25"
+                            />
+                            <stop
+                                offset="0.85"
+                                stopColor="#436275"
+                                stopOpacity="0.07"
+                            />
+                            <stop
+                                offset={1}
+                                stopColor="#436275"
+                                stopOpacity={0}
+                            />
+                        </radialGradient>
+                        <radialGradient
+                            cx="-136.43"
+                            cy="140.9"
+                            gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)"
+                            gradientUnits="userSpaceOnUse"
+                            id="radial-gradient-4"
+                            r="54.82"
+                        >
+                            <stop
+                                offset={0}
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.58"
+                                stopColor="#436275"
+                                stopOpacity="0.4"
+                            />
+                            <stop
+                                offset={1}
+                                stopColor="#436275"
+                                stopOpacity={0}
+                            />
+                        </radialGradient>
                     </defs>
+                    <title>
+                        Empty-state-illustration
+                    </title>
+                    <g
+                        data-name="Layer 2"
+                        id="Layer_2"
+                    >
+                        <g
+                            data-name="Layer 1"
+                            id="Layer_1-2"
+                        >
+                            <g
+                                className="cls-1"
+                            >
+                                <path
+                                    className="cls-2"
+                                    d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"
+                                />
+                            </g>
+                            <g
+                                className="cls-1"
+                            >
+                                <path
+                                    className="cls-3"
+                                    d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"
+                                />
+                            </g>
+                            <circle
+                                className="cls-4"
+                                cx="23.53"
+                                cy="73.77"
+                                r="11.93"
+                            />
+                            <circle
+                                className="cls-5"
+                                cx="23.53"
+                                cy="73.77"
+                                r="11.93"
+                            />
+                            <circle
+                                className="cls-6"
+                                cx="61.95"
+                                cy="55.24"
+                                r="34.25"
+                            />
+                            <circle
+                                className="cls-7"
+                                cx="61.95"
+                                cy="55.24"
+                                r="34.25"
+                            />
+                        </g>
+                    </g>
                 </svg>
             </div>
             <h3
@@ -2409,227 +2471,289 @@ Array [
                 className="c4"
             >
                 <svg
-                    height={60}
-                    viewBox="0 0 79 60"
-                    width={79}
+                    height={109}
+                    viewBox="0 0 119.34 109.47"
+                    width={119}
                     xmlns="http://www.w3.org/2000/svg"
                     xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
-                    <title>
-                        Guilty_Salamander
-                    </title>
-                    <desc>
-                        Created using Figma
-                    </desc>
-                    <use
-                        fill="#FAA427"
-                        transform="translate(23.8 22)"
-                        xlinkHref="#a"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(27.3 25.5)"
-                        xlinkHref="#b"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(4.8 32.1)"
-                        xlinkHref="#c"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(12.2 31.8)"
-                        xlinkHref="#d"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(54.4 31.9)"
-                        xlinkHref="#e"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(54.4 32)"
-                        xlinkHref="#f"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(15.8 26.8)"
-                        xlinkHref="#g"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(5)"
-                        xlinkHref="#h"
-                    />
-                    <use
-                        fill="#FAFBFC"
-                        transform="rotate(-15.13 41.037 5.45)"
-                        xlinkHref="#i"
-                    />
-                    <use
-                        fill="#412B13"
-                        transform="rotate(-15.13 67.273 -24.78)"
-                        xlinkHref="#j"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(2.2 8)"
-                        xlinkHref="#k"
-                    />
-                    <use
-                        fill="#FAFBFC"
-                        transform="rotate(-74.87 40.46 -20.511)"
-                        xlinkHref="#l"
-                    />
-                    <use
-                        fill="#412B13"
-                        transform="rotate(-74.87 41.364 -22.098)"
-                        xlinkHref="#m"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(52.1 8)"
-                        xlinkHref="#n"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(31.5 34.3)"
-                        xlinkHref="#o"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(14.3)"
-                        xlinkHref="#p"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(30.9 18.9)"
-                        xlinkHref="#q"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(37.6 18.9)"
-                        xlinkHref="#r"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(27.4 53.9)"
-                        xlinkHref="#s"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(39.1 53.9)"
-                        xlinkHref="#t"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(27.4 53.9)"
-                        xlinkHref="#u"
-                    />
-                    <use
-                        fill="#342013"
-                        transform="translate(28.6 26.2)"
-                        xlinkHref="#v"
-                    />
-                    <use
-                        fill="#FFF"
-                        transform="translate(32.6 28.7)"
-                        xlinkHref="#w"
-                    />
                     <defs>
-                        <path
-                            d="M54.921 36.053L0 0l1.413 24.908c.359 6.249 5.752 11.145 12.283 11.145H54.92z"
-                            id="a"
-                        />
-                        <path
-                            d="M42.12 32.526L13.47 0 0 23.737c.282 4.924 4.527 8.778 9.672 8.778l32.448.01z"
-                            id="b"
-                        />
-                        <path
-                            d="M3.326 17.01a3.312 3.312 0 0 1-1.545-6.25C6.059 8.52 8.482 2.226 8.52 2.165a3.313 3.313 0 0 1 6.216 2.296c-.133.354-3.312 8.717-9.86 12.145-.475.26-1.008.4-1.55.403z"
-                            id="c"
-                        />
-                        <path
-                            d="M5.079 9.205A28.654 28.654 0 0 0 7.287 4.75a3.312 3.312 0 1 0-6.183-2.296C.781 3.234.412 3.996 0 4.734c1.33 1.181 3.544 3.152 5.079 4.471z"
-                            id="d"
-                        />
-                        <path
-                            d="M11.682 17.27a3.312 3.312 0 0 0 1.545-6.248C8.95 8.78 6.526 2.487 6.504 2.427A3.312 3.312 0 1 0 .316 4.723c.126.353 3.312 8.717 9.853 12.145.464.254.983.393 1.513.403z"
-                            id="e"
-                        />
-                        <path
-                            d="M2.45 9.01A28.33 28.33 0 0 1 .242 4.553a3.312 3.312 0 1 1 6.21-2.296c.326.78.695 1.54 1.104 2.28C6.187 5.719 3.973 7.69 2.45 9.009z"
-                            id="f"
-                        />
-                        <path
-                            d="M35.159 0H6.542A6.542 6.542 0 0 0 0 6.542v14.016a6.542 6.542 0 0 0 6.542 6.541h28.617a6.541 6.541 0 0 0 6.541-6.541V6.542A6.542 6.542 0 0 0 35.16 0z"
-                            id="g"
-                        />
-                        <path
-                            d="M54.254 0H9.026A9.026 9.026 0 0 0 0 9.026v17.207a9.026 9.026 0 0 0 9.026 9.025h45.228a9.026 9.026 0 0 0 9.025-9.026V9.027A9.026 9.026 0 0 0 54.253 0z"
-                            id="h"
-                        />
-                        <path
-                            d="M9.721 18.637c5.37 0 9.721-4.172 9.721-9.319C19.442 4.172 15.09 0 9.722 0 4.351 0 0 4.172 0 9.318c0 5.147 4.352 9.319 9.721 9.319z"
-                            id="i"
-                        />
-                        <path
-                            d="M5.19 9.959c2.865 0 5.188-2.23 5.188-4.98C10.378 2.23 8.055 0 5.19 0S0 2.23 0 4.98c0 2.75 2.323 4.979 5.19 4.979z"
-                            id="j"
-                        />
-                        <path
-                            d="M7.262.351C2.078 1.753-1.018 6.921.306 11.89l18.77-5.073C17.705 1.847 12.411-1.045 7.261.35z"
-                            id="k"
-                        />
-                        <path
-                            d="M9.318 19.442c5.147 0 9.319-4.352 9.319-9.72C18.637 4.351 14.465 0 9.318 0 4.172 0 0 4.352 0 9.721c0 5.37 4.172 9.721 9.318 9.721z"
-                            id="l"
-                        />
-                        <path
-                            d="M4.98 10.378c2.75 0 4.979-2.323 4.979-5.189S7.729 0 4.979 0C2.23 0 0 2.323 0 5.19c0 2.865 2.23 5.188 4.98 5.188z"
-                            id="m"
-                        />
-                        <path
-                            d="M11.819.351c5.178 1.402 8.28 6.57 6.95 11.538L0 6.816C1.347 1.847 6.635-1.045 11.819.35z"
-                            id="n"
-                        />
-                        <path
-                            d="M5.106 4.897A5.007 5.007 0 0 0 10.218 0H0a5.001 5.001 0 0 0 5.106 4.897z"
-                            id="o"
-                        />
-                        <path
-                            d="M0 0l22.258 18.498L44.516 0H0z"
-                            id="p"
-                        />
-                        <path
-                            d="M2.445 0A2.396 2.396 0 0 0 0 2.342h4.885a2.39 2.39 0 0 0-2.44-2.34z"
-                            id="q"
-                        />
-                        <path
-                            d="M2.462 0A2.396 2.396 0 0 0 0 2.343h4.885A2.39 2.39 0 0 0 2.462 0z"
-                            id="r"
-                        />
-                        <path
-                            d="M0 0h6.227v3.091A3.047 3.047 0 0 1 3.18 6.14h-.127A3.047 3.047 0 0 1 .006 3.09V0H0z"
-                            id="s"
-                        />
-                        <path
-                            d="M.006 0H6.22v3.091A3.047 3.047 0 0 1 3.174 6.14h-.127A3.047 3.047 0 0 1 0 3.09V0h.006z"
-                            id="t"
-                        />
-                        <path
-                            d="M31.328 0H0v1.474h31.328V0z"
-                            id="u"
-                        />
-                        <path
-                            d="M15.422 1.503A17.422 17.422 0 0 0 8.113.002 17.4 17.4 0 0 0 .805 1.503a1.457 1.457 0 0 0 .629 2.76h2.572V4.06a1.579 1.579 0 0 1 2.126-1.468 6.194 6.194 0 0 0 3.963 0 1.574 1.574 0 0 1 2.12 1.468v.204h2.572a1.463 1.463 0 0 0 .635-2.76z"
-                            id="v"
-                        />
-                        <path
-                            d="M6.072.104a6.194 6.194 0 0 1-3.963 0A1.579 1.579 0 0 0 0 1.573v.204h8.209v-.204A1.573 1.573 0 0 0 6.072.104z"
-                            id="w"
+                        <style
+                            dangerouslySetInnerHTML={
+                                Object {
+                                    "__html": ".cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}",
+                                  }
+                            }
                         />
+                        <radialGradient
+                            cx="208.79"
+                            cy="99.06"
+                            gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)"
+                            gradientUnits="userSpaceOnUse"
+                            id="radial-gradient"
+                            r="57.13"
+                        >
+                            <stop
+                                offset="0.05"
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.1"
+                                stopColor="#415f72"
+                            />
+                            <stop
+                                offset="0.13"
+                                stopColor="#3a5769"
+                            />
+                            <stop
+                                offset="0.16"
+                                stopColor="#2e4959"
+                            />
+                            <stop
+                                offset="0.19"
+                                stopColor="#1d3543"
+                            />
+                            <stop
+                                offset="0.19"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.26"
+                                stopColor="#1e3644"
+                            />
+                            <stop
+                                offset="0.32"
+                                stopColor="#274150"
+                            />
+                            <stop
+                                offset="0.39"
+                                stopColor="#365364"
+                            />
+                            <stop
+                                offset="0.43"
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.49"
+                                stopColor="#3f5d6f"
+                            />
+                            <stop
+                                offset="0.56"
+                                stopColor="#324e5f"
+                            />
+                            <stop
+                                offset="0.65"
+                                stopColor="#1e3644"
+                            />
+                            <stop
+                                offset="0.66"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.85"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.9"
+                                stopColor="#2c4656"
+                            />
+                            <stop
+                                offset="0.95"
+                                stopColor="#436275"
+                            />
+                        </radialGradient>
+                        <radialGradient
+                            cx="59.15"
+                            cy="56.86"
+                            gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)"
+                            gradientUnits="userSpaceOnUse"
+                            id="radial-gradient-2"
+                            r="46.01"
+                        >
+                            <stop
+                                offset={0}
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.1"
+                                stopColor="#426073"
+                            />
+                            <stop
+                                offset="0.13"
+                                stopColor="#3c5a6c"
+                            />
+                            <stop
+                                offset="0.16"
+                                stopColor="#344f61"
+                            />
+                            <stop
+                                offset="0.18"
+                                stopColor="#274050"
+                            />
+                            <stop
+                                offset="0.19"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.26"
+                                stopColor="#1e3644"
+                            />
+                            <stop
+                                offset="0.32"
+                                stopColor="#274150"
+                            />
+                            <stop
+                                offset="0.39"
+                                stopColor="#365364"
+                            />
+                            <stop
+                                offset="0.43"
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.49"
+                                stopColor="#3f5d6f"
+                            />
+                            <stop
+                                offset="0.56"
+                                stopColor="#324e5f"
+                            />
+                            <stop
+                                offset="0.65"
+                                stopColor="#1e3644"
+                            />
+                            <stop
+                                offset="0.66"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.85"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.92"
+                                stopColor="#2c4656"
+                            />
+                            <stop
+                                offset={1}
+                                stopColor="#436275"
+                            />
+                        </radialGradient>
+                        <radialGradient
+                            cx="-521.06"
+                            cy="366.16"
+                            gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)"
+                            gradientUnits="userSpaceOnUse"
+                            id="radial-gradient-3"
+                            r="32.44"
+                        >
+                            <stop
+                                offset={0}
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.02"
+                                stopColor="#436275"
+                                stopOpacity="0.97"
+                            />
+                            <stop
+                                offset="0.34"
+                                stopColor="#436275"
+                                stopOpacity="0.55"
+                            />
+                            <stop
+                                offset="0.62"
+                                stopColor="#436275"
+                                stopOpacity="0.25"
+                            />
+                            <stop
+                                offset="0.85"
+                                stopColor="#436275"
+                                stopOpacity="0.07"
+                            />
+                            <stop
+                                offset={1}
+                                stopColor="#436275"
+                                stopOpacity={0}
+                            />
+                        </radialGradient>
+                        <radialGradient
+                            cx="-136.43"
+                            cy="140.9"
+                            gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)"
+                            gradientUnits="userSpaceOnUse"
+                            id="radial-gradient-4"
+                            r="54.82"
+                        >
+                            <stop
+                                offset={0}
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.58"
+                                stopColor="#436275"
+                                stopOpacity="0.4"
+                            />
+                            <stop
+                                offset={1}
+                                stopColor="#436275"
+                                stopOpacity={0}
+                            />
+                        </radialGradient>
                     </defs>
+                    <title>
+                        Empty-state-illustration
+                    </title>
+                    <g
+                        data-name="Layer 2"
+                        id="Layer_2"
+                    >
+                        <g
+                            data-name="Layer 1"
+                            id="Layer_1-2"
+                        >
+                            <g
+                                className="cls-1"
+                            >
+                                <path
+                                    className="cls-2"
+                                    d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"
+                                />
+                            </g>
+                            <g
+                                className="cls-1"
+                            >
+                                <path
+                                    className="cls-3"
+                                    d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"
+                                />
+                            </g>
+                            <circle
+                                className="cls-4"
+                                cx="23.53"
+                                cy="73.77"
+                                r="11.93"
+                            />
+                            <circle
+                                className="cls-5"
+                                cx="23.53"
+                                cy="73.77"
+                                r="11.93"
+                            />
+                            <circle
+                                className="cls-6"
+                                cx="61.95"
+                                cy="55.24"
+                                r="34.25"
+                            />
+                            <circle
+                                className="cls-7"
+                                cx="61.95"
+                                cy="55.24"
+                                r="34.25"
+                            />
+                        </g>
+                    </g>
                 </svg>
             </div>
             <h3
@@ -3222,227 +3346,289 @@ Array [
                 className="c4"
             >
                 <svg
-                    height={60}
-                    viewBox="0 0 79 60"
-                    width={79}
+                    height={109}
+                    viewBox="0 0 119.34 109.47"
+                    width={119}
                     xmlns="http://www.w3.org/2000/svg"
                     xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
-                    <title>
-                        Guilty_Salamander
-                    </title>
-                    <desc>
-                        Created using Figma
-                    </desc>
-                    <use
-                        fill="#FAA427"
-                        transform="translate(23.8 22)"
-                        xlinkHref="#a"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(27.3 25.5)"
-                        xlinkHref="#b"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(4.8 32.1)"
-                        xlinkHref="#c"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(12.2 31.8)"
-                        xlinkHref="#d"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(54.4 31.9)"
-                        xlinkHref="#e"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(54.4 32)"
-                        xlinkHref="#f"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(15.8 26.8)"
-                        xlinkHref="#g"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(5)"
-                        xlinkHref="#h"
-                    />
-                    <use
-                        fill="#FAFBFC"
-                        transform="rotate(-15.13 41.037 5.45)"
-                        xlinkHref="#i"
-                    />
-                    <use
-                        fill="#412B13"
-                        transform="rotate(-15.13 67.273 -24.78)"
-                        xlinkHref="#j"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(2.2 8)"
-                        xlinkHref="#k"
-                    />
-                    <use
-                        fill="#FAFBFC"
-                        transform="rotate(-74.87 40.46 -20.511)"
-                        xlinkHref="#l"
-                    />
-                    <use
-                        fill="#412B13"
-                        transform="rotate(-74.87 41.364 -22.098)"
-                        xlinkHref="#m"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(52.1 8)"
-                        xlinkHref="#n"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(31.5 34.3)"
-                        xlinkHref="#o"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(14.3)"
-                        xlinkHref="#p"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(30.9 18.9)"
-                        xlinkHref="#q"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(37.6 18.9)"
-                        xlinkHref="#r"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(27.4 53.9)"
-                        xlinkHref="#s"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(39.1 53.9)"
-                        xlinkHref="#t"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(27.4 53.9)"
-                        xlinkHref="#u"
-                    />
-                    <use
-                        fill="#342013"
-                        transform="translate(28.6 26.2)"
-                        xlinkHref="#v"
-                    />
-                    <use
-                        fill="#FFF"
-                        transform="translate(32.6 28.7)"
-                        xlinkHref="#w"
-                    />
                     <defs>
-                        <path
-                            d="M54.921 36.053L0 0l1.413 24.908c.359 6.249 5.752 11.145 12.283 11.145H54.92z"
-                            id="a"
-                        />
-                        <path
-                            d="M42.12 32.526L13.47 0 0 23.737c.282 4.924 4.527 8.778 9.672 8.778l32.448.01z"
-                            id="b"
-                        />
-                        <path
-                            d="M3.326 17.01a3.312 3.312 0 0 1-1.545-6.25C6.059 8.52 8.482 2.226 8.52 2.165a3.313 3.313 0 0 1 6.216 2.296c-.133.354-3.312 8.717-9.86 12.145-.475.26-1.008.4-1.55.403z"
-                            id="c"
-                        />
-                        <path
-                            d="M5.079 9.205A28.654 28.654 0 0 0 7.287 4.75a3.312 3.312 0 1 0-6.183-2.296C.781 3.234.412 3.996 0 4.734c1.33 1.181 3.544 3.152 5.079 4.471z"
-                            id="d"
-                        />
-                        <path
-                            d="M11.682 17.27a3.312 3.312 0 0 0 1.545-6.248C8.95 8.78 6.526 2.487 6.504 2.427A3.312 3.312 0 1 0 .316 4.723c.126.353 3.312 8.717 9.853 12.145.464.254.983.393 1.513.403z"
-                            id="e"
-                        />
-                        <path
-                            d="M2.45 9.01A28.33 28.33 0 0 1 .242 4.553a3.312 3.312 0 1 1 6.21-2.296c.326.78.695 1.54 1.104 2.28C6.187 5.719 3.973 7.69 2.45 9.009z"
-                            id="f"
-                        />
-                        <path
-                            d="M35.159 0H6.542A6.542 6.542 0 0 0 0 6.542v14.016a6.542 6.542 0 0 0 6.542 6.541h28.617a6.541 6.541 0 0 0 6.541-6.541V6.542A6.542 6.542 0 0 0 35.16 0z"
-                            id="g"
-                        />
-                        <path
-                            d="M54.254 0H9.026A9.026 9.026 0 0 0 0 9.026v17.207a9.026 9.026 0 0 0 9.026 9.025h45.228a9.026 9.026 0 0 0 9.025-9.026V9.027A9.026 9.026 0 0 0 54.253 0z"
-                            id="h"
-                        />
-                        <path
-                            d="M9.721 18.637c5.37 0 9.721-4.172 9.721-9.319C19.442 4.172 15.09 0 9.722 0 4.351 0 0 4.172 0 9.318c0 5.147 4.352 9.319 9.721 9.319z"
-                            id="i"
-                        />
-                        <path
-                            d="M5.19 9.959c2.865 0 5.188-2.23 5.188-4.98C10.378 2.23 8.055 0 5.19 0S0 2.23 0 4.98c0 2.75 2.323 4.979 5.19 4.979z"
-                            id="j"
-                        />
-                        <path
-                            d="M7.262.351C2.078 1.753-1.018 6.921.306 11.89l18.77-5.073C17.705 1.847 12.411-1.045 7.261.35z"
-                            id="k"
-                        />
-                        <path
-                            d="M9.318 19.442c5.147 0 9.319-4.352 9.319-9.72C18.637 4.351 14.465 0 9.318 0 4.172 0 0 4.352 0 9.721c0 5.37 4.172 9.721 9.318 9.721z"
-                            id="l"
-                        />
-                        <path
-                            d="M4.98 10.378c2.75 0 4.979-2.323 4.979-5.189S7.729 0 4.979 0C2.23 0 0 2.323 0 5.19c0 2.865 2.23 5.188 4.98 5.188z"
-                            id="m"
-                        />
-                        <path
-                            d="M11.819.351c5.178 1.402 8.28 6.57 6.95 11.538L0 6.816C1.347 1.847 6.635-1.045 11.819.35z"
-                            id="n"
-                        />
-                        <path
-                            d="M5.106 4.897A5.007 5.007 0 0 0 10.218 0H0a5.001 5.001 0 0 0 5.106 4.897z"
-                            id="o"
-                        />
-                        <path
-                            d="M0 0l22.258 18.498L44.516 0H0z"
-                            id="p"
-                        />
-                        <path
-                            d="M2.445 0A2.396 2.396 0 0 0 0 2.342h4.885a2.39 2.39 0 0 0-2.44-2.34z"
-                            id="q"
-                        />
-                        <path
-                            d="M2.462 0A2.396 2.396 0 0 0 0 2.343h4.885A2.39 2.39 0 0 0 2.462 0z"
-                            id="r"
-                        />
-                        <path
-                            d="M0 0h6.227v3.091A3.047 3.047 0 0 1 3.18 6.14h-.127A3.047 3.047 0 0 1 .006 3.09V0H0z"
-                            id="s"
-                        />
-                        <path
-                            d="M.006 0H6.22v3.091A3.047 3.047 0 0 1 3.174 6.14h-.127A3.047 3.047 0 0 1 0 3.09V0h.006z"
-                            id="t"
-                        />
-                        <path
-                            d="M31.328 0H0v1.474h31.328V0z"
-                            id="u"
-                        />
-                        <path
-                            d="M15.422 1.503A17.422 17.422 0 0 0 8.113.002 17.4 17.4 0 0 0 .805 1.503a1.457 1.457 0 0 0 .629 2.76h2.572V4.06a1.579 1.579 0 0 1 2.126-1.468 6.194 6.194 0 0 0 3.963 0 1.574 1.574 0 0 1 2.12 1.468v.204h2.572a1.463 1.463 0 0 0 .635-2.76z"
-                            id="v"
-                        />
-                        <path
-                            d="M6.072.104a6.194 6.194 0 0 1-3.963 0A1.579 1.579 0 0 0 0 1.573v.204h8.209v-.204A1.573 1.573 0 0 0 6.072.104z"
-                            id="w"
+                        <style
+                            dangerouslySetInnerHTML={
+                                Object {
+                                    "__html": ".cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}",
+                                  }
+                            }
                         />
+                        <radialGradient
+                            cx="208.79"
+                            cy="99.06"
+                            gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)"
+                            gradientUnits="userSpaceOnUse"
+                            id="radial-gradient"
+                            r="57.13"
+                        >
+                            <stop
+                                offset="0.05"
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.1"
+                                stopColor="#415f72"
+                            />
+                            <stop
+                                offset="0.13"
+                                stopColor="#3a5769"
+                            />
+                            <stop
+                                offset="0.16"
+                                stopColor="#2e4959"
+                            />
+                            <stop
+                                offset="0.19"
+                                stopColor="#1d3543"
+                            />
+                            <stop
+                                offset="0.19"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.26"
+                                stopColor="#1e3644"
+                            />
+                            <stop
+                                offset="0.32"
+                                stopColor="#274150"
+                            />
+                            <stop
+                                offset="0.39"
+                                stopColor="#365364"
+                            />
+                            <stop
+                                offset="0.43"
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.49"
+                                stopColor="#3f5d6f"
+                            />
+                            <stop
+                                offset="0.56"
+                                stopColor="#324e5f"
+                            />
+                            <stop
+                                offset="0.65"
+                                stopColor="#1e3644"
+                            />
+                            <stop
+                                offset="0.66"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.85"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.9"
+                                stopColor="#2c4656"
+                            />
+                            <stop
+                                offset="0.95"
+                                stopColor="#436275"
+                            />
+                        </radialGradient>
+                        <radialGradient
+                            cx="59.15"
+                            cy="56.86"
+                            gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)"
+                            gradientUnits="userSpaceOnUse"
+                            id="radial-gradient-2"
+                            r="46.01"
+                        >
+                            <stop
+                                offset={0}
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.1"
+                                stopColor="#426073"
+                            />
+                            <stop
+                                offset="0.13"
+                                stopColor="#3c5a6c"
+                            />
+                            <stop
+                                offset="0.16"
+                                stopColor="#344f61"
+                            />
+                            <stop
+                                offset="0.18"
+                                stopColor="#274050"
+                            />
+                            <stop
+                                offset="0.19"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.26"
+                                stopColor="#1e3644"
+                            />
+                            <stop
+                                offset="0.32"
+                                stopColor="#274150"
+                            />
+                            <stop
+                                offset="0.39"
+                                stopColor="#365364"
+                            />
+                            <stop
+                                offset="0.43"
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.49"
+                                stopColor="#3f5d6f"
+                            />
+                            <stop
+                                offset="0.56"
+                                stopColor="#324e5f"
+                            />
+                            <stop
+                                offset="0.65"
+                                stopColor="#1e3644"
+                            />
+                            <stop
+                                offset="0.66"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.85"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.92"
+                                stopColor="#2c4656"
+                            />
+                            <stop
+                                offset={1}
+                                stopColor="#436275"
+                            />
+                        </radialGradient>
+                        <radialGradient
+                            cx="-521.06"
+                            cy="366.16"
+                            gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)"
+                            gradientUnits="userSpaceOnUse"
+                            id="radial-gradient-3"
+                            r="32.44"
+                        >
+                            <stop
+                                offset={0}
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.02"
+                                stopColor="#436275"
+                                stopOpacity="0.97"
+                            />
+                            <stop
+                                offset="0.34"
+                                stopColor="#436275"
+                                stopOpacity="0.55"
+                            />
+                            <stop
+                                offset="0.62"
+                                stopColor="#436275"
+                                stopOpacity="0.25"
+                            />
+                            <stop
+                                offset="0.85"
+                                stopColor="#436275"
+                                stopOpacity="0.07"
+                            />
+                            <stop
+                                offset={1}
+                                stopColor="#436275"
+                                stopOpacity={0}
+                            />
+                        </radialGradient>
+                        <radialGradient
+                            cx="-136.43"
+                            cy="140.9"
+                            gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)"
+                            gradientUnits="userSpaceOnUse"
+                            id="radial-gradient-4"
+                            r="54.82"
+                        >
+                            <stop
+                                offset={0}
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.58"
+                                stopColor="#436275"
+                                stopOpacity="0.4"
+                            />
+                            <stop
+                                offset={1}
+                                stopColor="#436275"
+                                stopOpacity={0}
+                            />
+                        </radialGradient>
                     </defs>
+                    <title>
+                        Empty-state-illustration
+                    </title>
+                    <g
+                        data-name="Layer 2"
+                        id="Layer_2"
+                    >
+                        <g
+                            data-name="Layer 1"
+                            id="Layer_1-2"
+                        >
+                            <g
+                                className="cls-1"
+                            >
+                                <path
+                                    className="cls-2"
+                                    d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"
+                                />
+                            </g>
+                            <g
+                                className="cls-1"
+                            >
+                                <path
+                                    className="cls-3"
+                                    d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"
+                                />
+                            </g>
+                            <circle
+                                className="cls-4"
+                                cx="23.53"
+                                cy="73.77"
+                                r="11.93"
+                            />
+                            <circle
+                                className="cls-5"
+                                cx="23.53"
+                                cy="73.77"
+                                r="11.93"
+                            />
+                            <circle
+                                className="cls-6"
+                                cx="61.95"
+                                cy="55.24"
+                                r="34.25"
+                            />
+                            <circle
+                                className="cls-7"
+                                cx="61.95"
+                                cy="55.24"
+                                r="34.25"
+                            />
+                        </g>
+                    </g>
                 </svg>
             </div>
             <h3
@@ -4035,227 +4221,289 @@ Array [
                 className="c4"
             >
                 <svg
-                    height={60}
-                    viewBox="0 0 79 60"
-                    width={79}
+                    height={109}
+                    viewBox="0 0 119.34 109.47"
+                    width={119}
                     xmlns="http://www.w3.org/2000/svg"
                     xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
-                    <title>
-                        Guilty_Salamander
-                    </title>
-                    <desc>
-                        Created using Figma
-                    </desc>
-                    <use
-                        fill="#FAA427"
-                        transform="translate(23.8 22)"
-                        xlinkHref="#a"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(27.3 25.5)"
-                        xlinkHref="#b"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(4.8 32.1)"
-                        xlinkHref="#c"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(12.2 31.8)"
-                        xlinkHref="#d"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(54.4 31.9)"
-                        xlinkHref="#e"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(54.4 32)"
-                        xlinkHref="#f"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(15.8 26.8)"
-                        xlinkHref="#g"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(5)"
-                        xlinkHref="#h"
-                    />
-                    <use
-                        fill="#FAFBFC"
-                        transform="rotate(-15.13 41.037 5.45)"
-                        xlinkHref="#i"
-                    />
-                    <use
-                        fill="#412B13"
-                        transform="rotate(-15.13 67.273 -24.78)"
-                        xlinkHref="#j"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(2.2 8)"
-                        xlinkHref="#k"
-                    />
-                    <use
-                        fill="#FAFBFC"
-                        transform="rotate(-74.87 40.46 -20.511)"
-                        xlinkHref="#l"
-                    />
-                    <use
-                        fill="#412B13"
-                        transform="rotate(-74.87 41.364 -22.098)"
-                        xlinkHref="#m"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(52.1 8)"
-                        xlinkHref="#n"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(31.5 34.3)"
-                        xlinkHref="#o"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(14.3)"
-                        xlinkHref="#p"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(30.9 18.9)"
-                        xlinkHref="#q"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(37.6 18.9)"
-                        xlinkHref="#r"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(27.4 53.9)"
-                        xlinkHref="#s"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(39.1 53.9)"
-                        xlinkHref="#t"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(27.4 53.9)"
-                        xlinkHref="#u"
-                    />
-                    <use
-                        fill="#342013"
-                        transform="translate(28.6 26.2)"
-                        xlinkHref="#v"
-                    />
-                    <use
-                        fill="#FFF"
-                        transform="translate(32.6 28.7)"
-                        xlinkHref="#w"
-                    />
                     <defs>
-                        <path
-                            d="M54.921 36.053L0 0l1.413 24.908c.359 6.249 5.752 11.145 12.283 11.145H54.92z"
-                            id="a"
-                        />
-                        <path
-                            d="M42.12 32.526L13.47 0 0 23.737c.282 4.924 4.527 8.778 9.672 8.778l32.448.01z"
-                            id="b"
-                        />
-                        <path
-                            d="M3.326 17.01a3.312 3.312 0 0 1-1.545-6.25C6.059 8.52 8.482 2.226 8.52 2.165a3.313 3.313 0 0 1 6.216 2.296c-.133.354-3.312 8.717-9.86 12.145-.475.26-1.008.4-1.55.403z"
-                            id="c"
-                        />
-                        <path
-                            d="M5.079 9.205A28.654 28.654 0 0 0 7.287 4.75a3.312 3.312 0 1 0-6.183-2.296C.781 3.234.412 3.996 0 4.734c1.33 1.181 3.544 3.152 5.079 4.471z"
-                            id="d"
-                        />
-                        <path
-                            d="M11.682 17.27a3.312 3.312 0 0 0 1.545-6.248C8.95 8.78 6.526 2.487 6.504 2.427A3.312 3.312 0 1 0 .316 4.723c.126.353 3.312 8.717 9.853 12.145.464.254.983.393 1.513.403z"
-                            id="e"
-                        />
-                        <path
-                            d="M2.45 9.01A28.33 28.33 0 0 1 .242 4.553a3.312 3.312 0 1 1 6.21-2.296c.326.78.695 1.54 1.104 2.28C6.187 5.719 3.973 7.69 2.45 9.009z"
-                            id="f"
-                        />
-                        <path
-                            d="M35.159 0H6.542A6.542 6.542 0 0 0 0 6.542v14.016a6.542 6.542 0 0 0 6.542 6.541h28.617a6.541 6.541 0 0 0 6.541-6.541V6.542A6.542 6.542 0 0 0 35.16 0z"
-                            id="g"
-                        />
-                        <path
-                            d="M54.254 0H9.026A9.026 9.026 0 0 0 0 9.026v17.207a9.026 9.026 0 0 0 9.026 9.025h45.228a9.026 9.026 0 0 0 9.025-9.026V9.027A9.026 9.026 0 0 0 54.253 0z"
-                            id="h"
-                        />
-                        <path
-                            d="M9.721 18.637c5.37 0 9.721-4.172 9.721-9.319C19.442 4.172 15.09 0 9.722 0 4.351 0 0 4.172 0 9.318c0 5.147 4.352 9.319 9.721 9.319z"
-                            id="i"
-                        />
-                        <path
-                            d="M5.19 9.959c2.865 0 5.188-2.23 5.188-4.98C10.378 2.23 8.055 0 5.19 0S0 2.23 0 4.98c0 2.75 2.323 4.979 5.19 4.979z"
-                            id="j"
-                        />
-                        <path
-                            d="M7.262.351C2.078 1.753-1.018 6.921.306 11.89l18.77-5.073C17.705 1.847 12.411-1.045 7.261.35z"
-                            id="k"
-                        />
-                        <path
-                            d="M9.318 19.442c5.147 0 9.319-4.352 9.319-9.72C18.637 4.351 14.465 0 9.318 0 4.172 0 0 4.352 0 9.721c0 5.37 4.172 9.721 9.318 9.721z"
-                            id="l"
-                        />
-                        <path
-                            d="M4.98 10.378c2.75 0 4.979-2.323 4.979-5.189S7.729 0 4.979 0C2.23 0 0 2.323 0 5.19c0 2.865 2.23 5.188 4.98 5.188z"
-                            id="m"
-                        />
-                        <path
-                            d="M11.819.351c5.178 1.402 8.28 6.57 6.95 11.538L0 6.816C1.347 1.847 6.635-1.045 11.819.35z"
-                            id="n"
-                        />
-                        <path
-                            d="M5.106 4.897A5.007 5.007 0 0 0 10.218 0H0a5.001 5.001 0 0 0 5.106 4.897z"
-                            id="o"
-                        />
-                        <path
-                            d="M0 0l22.258 18.498L44.516 0H0z"
-                            id="p"
-                        />
-                        <path
-                            d="M2.445 0A2.396 2.396 0 0 0 0 2.342h4.885a2.39 2.39 0 0 0-2.44-2.34z"
-                            id="q"
-                        />
-                        <path
-                            d="M2.462 0A2.396 2.396 0 0 0 0 2.343h4.885A2.39 2.39 0 0 0 2.462 0z"
-                            id="r"
-                        />
-                        <path
-                            d="M0 0h6.227v3.091A3.047 3.047 0 0 1 3.18 6.14h-.127A3.047 3.047 0 0 1 .006 3.09V0H0z"
-                            id="s"
-                        />
-                        <path
-                            d="M.006 0H6.22v3.091A3.047 3.047 0 0 1 3.174 6.14h-.127A3.047 3.047 0 0 1 0 3.09V0h.006z"
-                            id="t"
-                        />
-                        <path
-                            d="M31.328 0H0v1.474h31.328V0z"
-                            id="u"
-                        />
-                        <path
-                            d="M15.422 1.503A17.422 17.422 0 0 0 8.113.002 17.4 17.4 0 0 0 .805 1.503a1.457 1.457 0 0 0 .629 2.76h2.572V4.06a1.579 1.579 0 0 1 2.126-1.468 6.194 6.194 0 0 0 3.963 0 1.574 1.574 0 0 1 2.12 1.468v.204h2.572a1.463 1.463 0 0 0 .635-2.76z"
-                            id="v"
-                        />
-                        <path
-                            d="M6.072.104a6.194 6.194 0 0 1-3.963 0A1.579 1.579 0 0 0 0 1.573v.204h8.209v-.204A1.573 1.573 0 0 0 6.072.104z"
-                            id="w"
+                        <style
+                            dangerouslySetInnerHTML={
+                                Object {
+                                    "__html": ".cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}",
+                                  }
+                            }
                         />
+                        <radialGradient
+                            cx="208.79"
+                            cy="99.06"
+                            gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)"
+                            gradientUnits="userSpaceOnUse"
+                            id="radial-gradient"
+                            r="57.13"
+                        >
+                            <stop
+                                offset="0.05"
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.1"
+                                stopColor="#415f72"
+                            />
+                            <stop
+                                offset="0.13"
+                                stopColor="#3a5769"
+                            />
+                            <stop
+                                offset="0.16"
+                                stopColor="#2e4959"
+                            />
+                            <stop
+                                offset="0.19"
+                                stopColor="#1d3543"
+                            />
+                            <stop
+                                offset="0.19"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.26"
+                                stopColor="#1e3644"
+                            />
+                            <stop
+                                offset="0.32"
+                                stopColor="#274150"
+                            />
+                            <stop
+                                offset="0.39"
+                                stopColor="#365364"
+                            />
+                            <stop
+                                offset="0.43"
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.49"
+                                stopColor="#3f5d6f"
+                            />
+                            <stop
+                                offset="0.56"
+                                stopColor="#324e5f"
+                            />
+                            <stop
+                                offset="0.65"
+                                stopColor="#1e3644"
+                            />
+                            <stop
+                                offset="0.66"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.85"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.9"
+                                stopColor="#2c4656"
+                            />
+                            <stop
+                                offset="0.95"
+                                stopColor="#436275"
+                            />
+                        </radialGradient>
+                        <radialGradient
+                            cx="59.15"
+                            cy="56.86"
+                            gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)"
+                            gradientUnits="userSpaceOnUse"
+                            id="radial-gradient-2"
+                            r="46.01"
+                        >
+                            <stop
+                                offset={0}
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.1"
+                                stopColor="#426073"
+                            />
+                            <stop
+                                offset="0.13"
+                                stopColor="#3c5a6c"
+                            />
+                            <stop
+                                offset="0.16"
+                                stopColor="#344f61"
+                            />
+                            <stop
+                                offset="0.18"
+                                stopColor="#274050"
+                            />
+                            <stop
+                                offset="0.19"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.26"
+                                stopColor="#1e3644"
+                            />
+                            <stop
+                                offset="0.32"
+                                stopColor="#274150"
+                            />
+                            <stop
+                                offset="0.39"
+                                stopColor="#365364"
+                            />
+                            <stop
+                                offset="0.43"
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.49"
+                                stopColor="#3f5d6f"
+                            />
+                            <stop
+                                offset="0.56"
+                                stopColor="#324e5f"
+                            />
+                            <stop
+                                offset="0.65"
+                                stopColor="#1e3644"
+                            />
+                            <stop
+                                offset="0.66"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.85"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.92"
+                                stopColor="#2c4656"
+                            />
+                            <stop
+                                offset={1}
+                                stopColor="#436275"
+                            />
+                        </radialGradient>
+                        <radialGradient
+                            cx="-521.06"
+                            cy="366.16"
+                            gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)"
+                            gradientUnits="userSpaceOnUse"
+                            id="radial-gradient-3"
+                            r="32.44"
+                        >
+                            <stop
+                                offset={0}
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.02"
+                                stopColor="#436275"
+                                stopOpacity="0.97"
+                            />
+                            <stop
+                                offset="0.34"
+                                stopColor="#436275"
+                                stopOpacity="0.55"
+                            />
+                            <stop
+                                offset="0.62"
+                                stopColor="#436275"
+                                stopOpacity="0.25"
+                            />
+                            <stop
+                                offset="0.85"
+                                stopColor="#436275"
+                                stopOpacity="0.07"
+                            />
+                            <stop
+                                offset={1}
+                                stopColor="#436275"
+                                stopOpacity={0}
+                            />
+                        </radialGradient>
+                        <radialGradient
+                            cx="-136.43"
+                            cy="140.9"
+                            gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)"
+                            gradientUnits="userSpaceOnUse"
+                            id="radial-gradient-4"
+                            r="54.82"
+                        >
+                            <stop
+                                offset={0}
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.58"
+                                stopColor="#436275"
+                                stopOpacity="0.4"
+                            />
+                            <stop
+                                offset={1}
+                                stopColor="#436275"
+                                stopOpacity={0}
+                            />
+                        </radialGradient>
                     </defs>
+                    <title>
+                        Empty-state-illustration
+                    </title>
+                    <g
+                        data-name="Layer 2"
+                        id="Layer_2"
+                    >
+                        <g
+                            data-name="Layer 1"
+                            id="Layer_1-2"
+                        >
+                            <g
+                                className="cls-1"
+                            >
+                                <path
+                                    className="cls-2"
+                                    d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"
+                                />
+                            </g>
+                            <g
+                                className="cls-1"
+                            >
+                                <path
+                                    className="cls-3"
+                                    d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"
+                                />
+                            </g>
+                            <circle
+                                className="cls-4"
+                                cx="23.53"
+                                cy="73.77"
+                                r="11.93"
+                            />
+                            <circle
+                                className="cls-5"
+                                cx="23.53"
+                                cy="73.77"
+                                r="11.93"
+                            />
+                            <circle
+                                className="cls-6"
+                                cx="61.95"
+                                cy="55.24"
+                                r="34.25"
+                            />
+                            <circle
+                                className="cls-7"
+                                cx="61.95"
+                                cy="55.24"
+                                r="34.25"
+                            />
+                        </g>
+                    </g>
                 </svg>
             </div>
             <h3
@@ -4848,227 +5096,289 @@ Array [
                 className="c4"
             >
                 <svg
-                    height={60}
-                    viewBox="0 0 79 60"
-                    width={79}
+                    height={109}
+                    viewBox="0 0 119.34 109.47"
+                    width={119}
                     xmlns="http://www.w3.org/2000/svg"
                     xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
-                    <title>
-                        Guilty_Salamander
-                    </title>
-                    <desc>
-                        Created using Figma
-                    </desc>
-                    <use
-                        fill="#FAA427"
-                        transform="translate(23.8 22)"
-                        xlinkHref="#a"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(27.3 25.5)"
-                        xlinkHref="#b"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(4.8 32.1)"
-                        xlinkHref="#c"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(12.2 31.8)"
-                        xlinkHref="#d"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(54.4 31.9)"
-                        xlinkHref="#e"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(54.4 32)"
-                        xlinkHref="#f"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(15.8 26.8)"
-                        xlinkHref="#g"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(5)"
-                        xlinkHref="#h"
-                    />
-                    <use
-                        fill="#FAFBFC"
-                        transform="rotate(-15.13 41.037 5.45)"
-                        xlinkHref="#i"
-                    />
-                    <use
-                        fill="#412B13"
-                        transform="rotate(-15.13 67.273 -24.78)"
-                        xlinkHref="#j"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(2.2 8)"
-                        xlinkHref="#k"
-                    />
-                    <use
-                        fill="#FAFBFC"
-                        transform="rotate(-74.87 40.46 -20.511)"
-                        xlinkHref="#l"
-                    />
-                    <use
-                        fill="#412B13"
-                        transform="rotate(-74.87 41.364 -22.098)"
-                        xlinkHref="#m"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(52.1 8)"
-                        xlinkHref="#n"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(31.5 34.3)"
-                        xlinkHref="#o"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(14.3)"
-                        xlinkHref="#p"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(30.9 18.9)"
-                        xlinkHref="#q"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(37.6 18.9)"
-                        xlinkHref="#r"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(27.4 53.9)"
-                        xlinkHref="#s"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(39.1 53.9)"
-                        xlinkHref="#t"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(27.4 53.9)"
-                        xlinkHref="#u"
-                    />
-                    <use
-                        fill="#342013"
-                        transform="translate(28.6 26.2)"
-                        xlinkHref="#v"
-                    />
-                    <use
-                        fill="#FFF"
-                        transform="translate(32.6 28.7)"
-                        xlinkHref="#w"
-                    />
                     <defs>
-                        <path
-                            d="M54.921 36.053L0 0l1.413 24.908c.359 6.249 5.752 11.145 12.283 11.145H54.92z"
-                            id="a"
-                        />
-                        <path
-                            d="M42.12 32.526L13.47 0 0 23.737c.282 4.924 4.527 8.778 9.672 8.778l32.448.01z"
-                            id="b"
-                        />
-                        <path
-                            d="M3.326 17.01a3.312 3.312 0 0 1-1.545-6.25C6.059 8.52 8.482 2.226 8.52 2.165a3.313 3.313 0 0 1 6.216 2.296c-.133.354-3.312 8.717-9.86 12.145-.475.26-1.008.4-1.55.403z"
-                            id="c"
-                        />
-                        <path
-                            d="M5.079 9.205A28.654 28.654 0 0 0 7.287 4.75a3.312 3.312 0 1 0-6.183-2.296C.781 3.234.412 3.996 0 4.734c1.33 1.181 3.544 3.152 5.079 4.471z"
-                            id="d"
-                        />
-                        <path
-                            d="M11.682 17.27a3.312 3.312 0 0 0 1.545-6.248C8.95 8.78 6.526 2.487 6.504 2.427A3.312 3.312 0 1 0 .316 4.723c.126.353 3.312 8.717 9.853 12.145.464.254.983.393 1.513.403z"
-                            id="e"
-                        />
-                        <path
-                            d="M2.45 9.01A28.33 28.33 0 0 1 .242 4.553a3.312 3.312 0 1 1 6.21-2.296c.326.78.695 1.54 1.104 2.28C6.187 5.719 3.973 7.69 2.45 9.009z"
-                            id="f"
-                        />
-                        <path
-                            d="M35.159 0H6.542A6.542 6.542 0 0 0 0 6.542v14.016a6.542 6.542 0 0 0 6.542 6.541h28.617a6.541 6.541 0 0 0 6.541-6.541V6.542A6.542 6.542 0 0 0 35.16 0z"
-                            id="g"
-                        />
-                        <path
-                            d="M54.254 0H9.026A9.026 9.026 0 0 0 0 9.026v17.207a9.026 9.026 0 0 0 9.026 9.025h45.228a9.026 9.026 0 0 0 9.025-9.026V9.027A9.026 9.026 0 0 0 54.253 0z"
-                            id="h"
-                        />
-                        <path
-                            d="M9.721 18.637c5.37 0 9.721-4.172 9.721-9.319C19.442 4.172 15.09 0 9.722 0 4.351 0 0 4.172 0 9.318c0 5.147 4.352 9.319 9.721 9.319z"
-                            id="i"
-                        />
-                        <path
-                            d="M5.19 9.959c2.865 0 5.188-2.23 5.188-4.98C10.378 2.23 8.055 0 5.19 0S0 2.23 0 4.98c0 2.75 2.323 4.979 5.19 4.979z"
-                            id="j"
-                        />
-                        <path
-                            d="M7.262.351C2.078 1.753-1.018 6.921.306 11.89l18.77-5.073C17.705 1.847 12.411-1.045 7.261.35z"
-                            id="k"
-                        />
-                        <path
-                            d="M9.318 19.442c5.147 0 9.319-4.352 9.319-9.72C18.637 4.351 14.465 0 9.318 0 4.172 0 0 4.352 0 9.721c0 5.37 4.172 9.721 9.318 9.721z"
-                            id="l"
-                        />
-                        <path
-                            d="M4.98 10.378c2.75 0 4.979-2.323 4.979-5.189S7.729 0 4.979 0C2.23 0 0 2.323 0 5.19c0 2.865 2.23 5.188 4.98 5.188z"
-                            id="m"
-                        />
-                        <path
-                            d="M11.819.351c5.178 1.402 8.28 6.57 6.95 11.538L0 6.816C1.347 1.847 6.635-1.045 11.819.35z"
-                            id="n"
-                        />
-                        <path
-                            d="M5.106 4.897A5.007 5.007 0 0 0 10.218 0H0a5.001 5.001 0 0 0 5.106 4.897z"
-                            id="o"
-                        />
-                        <path
-                            d="M0 0l22.258 18.498L44.516 0H0z"
-                            id="p"
-                        />
-                        <path
-                            d="M2.445 0A2.396 2.396 0 0 0 0 2.342h4.885a2.39 2.39 0 0 0-2.44-2.34z"
-                            id="q"
-                        />
-                        <path
-                            d="M2.462 0A2.396 2.396 0 0 0 0 2.343h4.885A2.39 2.39 0 0 0 2.462 0z"
-                            id="r"
-                        />
-                        <path
-                            d="M0 0h6.227v3.091A3.047 3.047 0 0 1 3.18 6.14h-.127A3.047 3.047 0 0 1 .006 3.09V0H0z"
-                            id="s"
-                        />
-                        <path
-                            d="M.006 0H6.22v3.091A3.047 3.047 0 0 1 3.174 6.14h-.127A3.047 3.047 0 0 1 0 3.09V0h.006z"
-                            id="t"
-                        />
-                        <path
-                            d="M31.328 0H0v1.474h31.328V0z"
-                            id="u"
-                        />
-                        <path
-                            d="M15.422 1.503A17.422 17.422 0 0 0 8.113.002 17.4 17.4 0 0 0 .805 1.503a1.457 1.457 0 0 0 .629 2.76h2.572V4.06a1.579 1.579 0 0 1 2.126-1.468 6.194 6.194 0 0 0 3.963 0 1.574 1.574 0 0 1 2.12 1.468v.204h2.572a1.463 1.463 0 0 0 .635-2.76z"
-                            id="v"
-                        />
-                        <path
-                            d="M6.072.104a6.194 6.194 0 0 1-3.963 0A1.579 1.579 0 0 0 0 1.573v.204h8.209v-.204A1.573 1.573 0 0 0 6.072.104z"
-                            id="w"
+                        <style
+                            dangerouslySetInnerHTML={
+                                Object {
+                                    "__html": ".cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}",
+                                  }
+                            }
                         />
+                        <radialGradient
+                            cx="208.79"
+                            cy="99.06"
+                            gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)"
+                            gradientUnits="userSpaceOnUse"
+                            id="radial-gradient"
+                            r="57.13"
+                        >
+                            <stop
+                                offset="0.05"
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.1"
+                                stopColor="#415f72"
+                            />
+                            <stop
+                                offset="0.13"
+                                stopColor="#3a5769"
+                            />
+                            <stop
+                                offset="0.16"
+                                stopColor="#2e4959"
+                            />
+                            <stop
+                                offset="0.19"
+                                stopColor="#1d3543"
+                            />
+                            <stop
+                                offset="0.19"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.26"
+                                stopColor="#1e3644"
+                            />
+                            <stop
+                                offset="0.32"
+                                stopColor="#274150"
+                            />
+                            <stop
+                                offset="0.39"
+                                stopColor="#365364"
+                            />
+                            <stop
+                                offset="0.43"
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.49"
+                                stopColor="#3f5d6f"
+                            />
+                            <stop
+                                offset="0.56"
+                                stopColor="#324e5f"
+                            />
+                            <stop
+                                offset="0.65"
+                                stopColor="#1e3644"
+                            />
+                            <stop
+                                offset="0.66"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.85"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.9"
+                                stopColor="#2c4656"
+                            />
+                            <stop
+                                offset="0.95"
+                                stopColor="#436275"
+                            />
+                        </radialGradient>
+                        <radialGradient
+                            cx="59.15"
+                            cy="56.86"
+                            gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)"
+                            gradientUnits="userSpaceOnUse"
+                            id="radial-gradient-2"
+                            r="46.01"
+                        >
+                            <stop
+                                offset={0}
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.1"
+                                stopColor="#426073"
+                            />
+                            <stop
+                                offset="0.13"
+                                stopColor="#3c5a6c"
+                            />
+                            <stop
+                                offset="0.16"
+                                stopColor="#344f61"
+                            />
+                            <stop
+                                offset="0.18"
+                                stopColor="#274050"
+                            />
+                            <stop
+                                offset="0.19"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.26"
+                                stopColor="#1e3644"
+                            />
+                            <stop
+                                offset="0.32"
+                                stopColor="#274150"
+                            />
+                            <stop
+                                offset="0.39"
+                                stopColor="#365364"
+                            />
+                            <stop
+                                offset="0.43"
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.49"
+                                stopColor="#3f5d6f"
+                            />
+                            <stop
+                                offset="0.56"
+                                stopColor="#324e5f"
+                            />
+                            <stop
+                                offset="0.65"
+                                stopColor="#1e3644"
+                            />
+                            <stop
+                                offset="0.66"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.85"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.92"
+                                stopColor="#2c4656"
+                            />
+                            <stop
+                                offset={1}
+                                stopColor="#436275"
+                            />
+                        </radialGradient>
+                        <radialGradient
+                            cx="-521.06"
+                            cy="366.16"
+                            gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)"
+                            gradientUnits="userSpaceOnUse"
+                            id="radial-gradient-3"
+                            r="32.44"
+                        >
+                            <stop
+                                offset={0}
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.02"
+                                stopColor="#436275"
+                                stopOpacity="0.97"
+                            />
+                            <stop
+                                offset="0.34"
+                                stopColor="#436275"
+                                stopOpacity="0.55"
+                            />
+                            <stop
+                                offset="0.62"
+                                stopColor="#436275"
+                                stopOpacity="0.25"
+                            />
+                            <stop
+                                offset="0.85"
+                                stopColor="#436275"
+                                stopOpacity="0.07"
+                            />
+                            <stop
+                                offset={1}
+                                stopColor="#436275"
+                                stopOpacity={0}
+                            />
+                        </radialGradient>
+                        <radialGradient
+                            cx="-136.43"
+                            cy="140.9"
+                            gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)"
+                            gradientUnits="userSpaceOnUse"
+                            id="radial-gradient-4"
+                            r="54.82"
+                        >
+                            <stop
+                                offset={0}
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.58"
+                                stopColor="#436275"
+                                stopOpacity="0.4"
+                            />
+                            <stop
+                                offset={1}
+                                stopColor="#436275"
+                                stopOpacity={0}
+                            />
+                        </radialGradient>
                     </defs>
+                    <title>
+                        Empty-state-illustration
+                    </title>
+                    <g
+                        data-name="Layer 2"
+                        id="Layer_2"
+                    >
+                        <g
+                            data-name="Layer 1"
+                            id="Layer_1-2"
+                        >
+                            <g
+                                className="cls-1"
+                            >
+                                <path
+                                    className="cls-2"
+                                    d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"
+                                />
+                            </g>
+                            <g
+                                className="cls-1"
+                            >
+                                <path
+                                    className="cls-3"
+                                    d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"
+                                />
+                            </g>
+                            <circle
+                                className="cls-4"
+                                cx="23.53"
+                                cy="73.77"
+                                r="11.93"
+                            />
+                            <circle
+                                className="cls-5"
+                                cx="23.53"
+                                cy="73.77"
+                                r="11.93"
+                            />
+                            <circle
+                                className="cls-6"
+                                cx="61.95"
+                                cy="55.24"
+                                r="34.25"
+                            />
+                            <circle
+                                className="cls-7"
+                                cx="61.95"
+                                cy="55.24"
+                                r="34.25"
+                            />
+                        </g>
+                    </g>
                 </svg>
             </div>
             <h3
@@ -5661,227 +5971,289 @@ Array [
                 className="c4"
             >
                 <svg
-                    height={60}
-                    viewBox="0 0 79 60"
-                    width={79}
+                    height={109}
+                    viewBox="0 0 119.34 109.47"
+                    width={119}
                     xmlns="http://www.w3.org/2000/svg"
                     xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
-                    <title>
-                        Guilty_Salamander
-                    </title>
-                    <desc>
-                        Created using Figma
-                    </desc>
-                    <use
-                        fill="#FAA427"
-                        transform="translate(23.8 22)"
-                        xlinkHref="#a"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(27.3 25.5)"
-                        xlinkHref="#b"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(4.8 32.1)"
-                        xlinkHref="#c"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(12.2 31.8)"
-                        xlinkHref="#d"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(54.4 31.9)"
-                        xlinkHref="#e"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(54.4 32)"
-                        xlinkHref="#f"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(15.8 26.8)"
-                        xlinkHref="#g"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(5)"
-                        xlinkHref="#h"
-                    />
-                    <use
-                        fill="#FAFBFC"
-                        transform="rotate(-15.13 41.037 5.45)"
-                        xlinkHref="#i"
-                    />
-                    <use
-                        fill="#412B13"
-                        transform="rotate(-15.13 67.273 -24.78)"
-                        xlinkHref="#j"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(2.2 8)"
-                        xlinkHref="#k"
-                    />
-                    <use
-                        fill="#FAFBFC"
-                        transform="rotate(-74.87 40.46 -20.511)"
-                        xlinkHref="#l"
-                    />
-                    <use
-                        fill="#412B13"
-                        transform="rotate(-74.87 41.364 -22.098)"
-                        xlinkHref="#m"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(52.1 8)"
-                        xlinkHref="#n"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(31.5 34.3)"
-                        xlinkHref="#o"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(14.3)"
-                        xlinkHref="#p"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(30.9 18.9)"
-                        xlinkHref="#q"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(37.6 18.9)"
-                        xlinkHref="#r"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(27.4 53.9)"
-                        xlinkHref="#s"
-                    />
-                    <use
-                        fill="#FAA427"
-                        transform="translate(39.1 53.9)"
-                        xlinkHref="#t"
-                    />
-                    <use
-                        fill="#F3722C"
-                        transform="translate(27.4 53.9)"
-                        xlinkHref="#u"
-                    />
-                    <use
-                        fill="#342013"
-                        transform="translate(28.6 26.2)"
-                        xlinkHref="#v"
-                    />
-                    <use
-                        fill="#FFF"
-                        transform="translate(32.6 28.7)"
-                        xlinkHref="#w"
-                    />
                     <defs>
-                        <path
-                            d="M54.921 36.053L0 0l1.413 24.908c.359 6.249 5.752 11.145 12.283 11.145H54.92z"
-                            id="a"
-                        />
-                        <path
-                            d="M42.12 32.526L13.47 0 0 23.737c.282 4.924 4.527 8.778 9.672 8.778l32.448.01z"
-                            id="b"
-                        />
-                        <path
-                            d="M3.326 17.01a3.312 3.312 0 0 1-1.545-6.25C6.059 8.52 8.482 2.226 8.52 2.165a3.313 3.313 0 0 1 6.216 2.296c-.133.354-3.312 8.717-9.86 12.145-.475.26-1.008.4-1.55.403z"
-                            id="c"
-                        />
-                        <path
-                            d="M5.079 9.205A28.654 28.654 0 0 0 7.287 4.75a3.312 3.312 0 1 0-6.183-2.296C.781 3.234.412 3.996 0 4.734c1.33 1.181 3.544 3.152 5.079 4.471z"
-                            id="d"
-                        />
-                        <path
-                            d="M11.682 17.27a3.312 3.312 0 0 0 1.545-6.248C8.95 8.78 6.526 2.487 6.504 2.427A3.312 3.312 0 1 0 .316 4.723c.126.353 3.312 8.717 9.853 12.145.464.254.983.393 1.513.403z"
-                            id="e"
-                        />
-                        <path
-                            d="M2.45 9.01A28.33 28.33 0 0 1 .242 4.553a3.312 3.312 0 1 1 6.21-2.296c.326.78.695 1.54 1.104 2.28C6.187 5.719 3.973 7.69 2.45 9.009z"
-                            id="f"
-                        />
-                        <path
-                            d="M35.159 0H6.542A6.542 6.542 0 0 0 0 6.542v14.016a6.542 6.542 0 0 0 6.542 6.541h28.617a6.541 6.541 0 0 0 6.541-6.541V6.542A6.542 6.542 0 0 0 35.16 0z"
-                            id="g"
-                        />
-                        <path
-                            d="M54.254 0H9.026A9.026 9.026 0 0 0 0 9.026v17.207a9.026 9.026 0 0 0 9.026 9.025h45.228a9.026 9.026 0 0 0 9.025-9.026V9.027A9.026 9.026 0 0 0 54.253 0z"
-                            id="h"
-                        />
-                        <path
-                            d="M9.721 18.637c5.37 0 9.721-4.172 9.721-9.319C19.442 4.172 15.09 0 9.722 0 4.351 0 0 4.172 0 9.318c0 5.147 4.352 9.319 9.721 9.319z"
-                            id="i"
-                        />
-                        <path
-                            d="M5.19 9.959c2.865 0 5.188-2.23 5.188-4.98C10.378 2.23 8.055 0 5.19 0S0 2.23 0 4.98c0 2.75 2.323 4.979 5.19 4.979z"
-                            id="j"
-                        />
-                        <path
-                            d="M7.262.351C2.078 1.753-1.018 6.921.306 11.89l18.77-5.073C17.705 1.847 12.411-1.045 7.261.35z"
-                            id="k"
-                        />
-                        <path
-                            d="M9.318 19.442c5.147 0 9.319-4.352 9.319-9.72C18.637 4.351 14.465 0 9.318 0 4.172 0 0 4.352 0 9.721c0 5.37 4.172 9.721 9.318 9.721z"
-                            id="l"
-                        />
-                        <path
-                            d="M4.98 10.378c2.75 0 4.979-2.323 4.979-5.189S7.729 0 4.979 0C2.23 0 0 2.323 0 5.19c0 2.865 2.23 5.188 4.98 5.188z"
-                            id="m"
-                        />
-                        <path
-                            d="M11.819.351c5.178 1.402 8.28 6.57 6.95 11.538L0 6.816C1.347 1.847 6.635-1.045 11.819.35z"
-                            id="n"
-                        />
-                        <path
-                            d="M5.106 4.897A5.007 5.007 0 0 0 10.218 0H0a5.001 5.001 0 0 0 5.106 4.897z"
-                            id="o"
-                        />
-                        <path
-                            d="M0 0l22.258 18.498L44.516 0H0z"
-                            id="p"
-                        />
-                        <path
-                            d="M2.445 0A2.396 2.396 0 0 0 0 2.342h4.885a2.39 2.39 0 0 0-2.44-2.34z"
-                            id="q"
-                        />
-                        <path
-                            d="M2.462 0A2.396 2.396 0 0 0 0 2.343h4.885A2.39 2.39 0 0 0 2.462 0z"
-                            id="r"
-                        />
-                        <path
-                            d="M0 0h6.227v3.091A3.047 3.047 0 0 1 3.18 6.14h-.127A3.047 3.047 0 0 1 .006 3.09V0H0z"
-                            id="s"
-                        />
-                        <path
-                            d="M.006 0H6.22v3.091A3.047 3.047 0 0 1 3.174 6.14h-.127A3.047 3.047 0 0 1 0 3.09V0h.006z"
-                            id="t"
-                        />
-                        <path
-                            d="M31.328 0H0v1.474h31.328V0z"
-                            id="u"
-                        />
-                        <path
-                            d="M15.422 1.503A17.422 17.422 0 0 0 8.113.002 17.4 17.4 0 0 0 .805 1.503a1.457 1.457 0 0 0 .629 2.76h2.572V4.06a1.579 1.579 0 0 1 2.126-1.468 6.194 6.194 0 0 0 3.963 0 1.574 1.574 0 0 1 2.12 1.468v.204h2.572a1.463 1.463 0 0 0 .635-2.76z"
-                            id="v"
-                        />
-                        <path
-                            d="M6.072.104a6.194 6.194 0 0 1-3.963 0A1.579 1.579 0 0 0 0 1.573v.204h8.209v-.204A1.573 1.573 0 0 0 6.072.104z"
-                            id="w"
+                        <style
+                            dangerouslySetInnerHTML={
+                                Object {
+                                    "__html": ".cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}",
+                                  }
+                            }
                         />
+                        <radialGradient
+                            cx="208.79"
+                            cy="99.06"
+                            gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)"
+                            gradientUnits="userSpaceOnUse"
+                            id="radial-gradient"
+                            r="57.13"
+                        >
+                            <stop
+                                offset="0.05"
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.1"
+                                stopColor="#415f72"
+                            />
+                            <stop
+                                offset="0.13"
+                                stopColor="#3a5769"
+                            />
+                            <stop
+                                offset="0.16"
+                                stopColor="#2e4959"
+                            />
+                            <stop
+                                offset="0.19"
+                                stopColor="#1d3543"
+                            />
+                            <stop
+                                offset="0.19"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.26"
+                                stopColor="#1e3644"
+                            />
+                            <stop
+                                offset="0.32"
+                                stopColor="#274150"
+                            />
+                            <stop
+                                offset="0.39"
+                                stopColor="#365364"
+                            />
+                            <stop
+                                offset="0.43"
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.49"
+                                stopColor="#3f5d6f"
+                            />
+                            <stop
+                                offset="0.56"
+                                stopColor="#324e5f"
+                            />
+                            <stop
+                                offset="0.65"
+                                stopColor="#1e3644"
+                            />
+                            <stop
+                                offset="0.66"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.85"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.9"
+                                stopColor="#2c4656"
+                            />
+                            <stop
+                                offset="0.95"
+                                stopColor="#436275"
+                            />
+                        </radialGradient>
+                        <radialGradient
+                            cx="59.15"
+                            cy="56.86"
+                            gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)"
+                            gradientUnits="userSpaceOnUse"
+                            id="radial-gradient-2"
+                            r="46.01"
+                        >
+                            <stop
+                                offset={0}
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.1"
+                                stopColor="#426073"
+                            />
+                            <stop
+                                offset="0.13"
+                                stopColor="#3c5a6c"
+                            />
+                            <stop
+                                offset="0.16"
+                                stopColor="#344f61"
+                            />
+                            <stop
+                                offset="0.18"
+                                stopColor="#274050"
+                            />
+                            <stop
+                                offset="0.19"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.26"
+                                stopColor="#1e3644"
+                            />
+                            <stop
+                                offset="0.32"
+                                stopColor="#274150"
+                            />
+                            <stop
+                                offset="0.39"
+                                stopColor="#365364"
+                            />
+                            <stop
+                                offset="0.43"
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.49"
+                                stopColor="#3f5d6f"
+                            />
+                            <stop
+                                offset="0.56"
+                                stopColor="#324e5f"
+                            />
+                            <stop
+                                offset="0.65"
+                                stopColor="#1e3644"
+                            />
+                            <stop
+                                offset="0.66"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.85"
+                                stopColor="#1b3240"
+                            />
+                            <stop
+                                offset="0.92"
+                                stopColor="#2c4656"
+                            />
+                            <stop
+                                offset={1}
+                                stopColor="#436275"
+                            />
+                        </radialGradient>
+                        <radialGradient
+                            cx="-521.06"
+                            cy="366.16"
+                            gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)"
+                            gradientUnits="userSpaceOnUse"
+                            id="radial-gradient-3"
+                            r="32.44"
+                        >
+                            <stop
+                                offset={0}
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.02"
+                                stopColor="#436275"
+                                stopOpacity="0.97"
+                            />
+                            <stop
+                                offset="0.34"
+                                stopColor="#436275"
+                                stopOpacity="0.55"
+                            />
+                            <stop
+                                offset="0.62"
+                                stopColor="#436275"
+                                stopOpacity="0.25"
+                            />
+                            <stop
+                                offset="0.85"
+                                stopColor="#436275"
+                                stopOpacity="0.07"
+                            />
+                            <stop
+                                offset={1}
+                                stopColor="#436275"
+                                stopOpacity={0}
+                            />
+                        </radialGradient>
+                        <radialGradient
+                            cx="-136.43"
+                            cy="140.9"
+                            gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)"
+                            gradientUnits="userSpaceOnUse"
+                            id="radial-gradient-4"
+                            r="54.82"
+                        >
+                            <stop
+                                offset={0}
+                                stopColor="#436275"
+                            />
+                            <stop
+                                offset="0.58"
+                                stopColor="#436275"
+                                stopOpacity="0.4"
+                            />
+                            <stop
+                                offset={1}
+                                stopColor="#436275"
+                                stopOpacity={0}
+                            />
+                        </radialGradient>
                     </defs>
+                    <title>
+                        Empty-state-illustration
+                    </title>
+                    <g
+                        data-name="Layer 2"
+                        id="Layer_2"
+                    >
+                        <g
+                            data-name="Layer 1"
+                            id="Layer_1-2"
+                        >
+                            <g
+                                className="cls-1"
+                            >
+                                <path
+                                    className="cls-2"
+                                    d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"
+                                />
+                            </g>
+                            <g
+                                className="cls-1"
+                            >
+                                <path
+                                    className="cls-3"
+                                    d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"
+                                />
+                            </g>
+                            <circle
+                                className="cls-4"
+                                cx="23.53"
+                                cy="73.77"
+                                r="11.93"
+                            />
+                            <circle
+                                className="cls-5"
+                                cx="23.53"
+                                cy="73.77"
+                                r="11.93"
+                            />
+                            <circle
+                                className="cls-6"
+                                cx="61.95"
+                                cy="55.24"
+                                r="34.25"
+                            />
+                            <circle
+                                className="cls-7"
+                                cx="61.95"
+                                cy="55.24"
+                                r="34.25"
+                            />
+                        </g>
+                    </g>
                 </svg>
             </div>
             <h3
diff --git a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
index a19b42fa..e94c69ce 100644
--- a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
@@ -236,7 +236,6 @@ exports[`renders <Summary /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -338,7 +337,6 @@ exports[`renders <Summary /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -461,7 +459,6 @@ exports[`renders <Summary /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -580,7 +577,6 @@ exports[`renders <Summary /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -727,7 +723,6 @@ exports[`renders <Summary /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -2304,7 +2299,6 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -2406,7 +2400,6 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -2529,7 +2522,6 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -2648,7 +2640,6 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -2749,7 +2740,6 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -2846,7 +2836,6 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -2971,7 +2960,6 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -4765,7 +4753,6 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -4867,7 +4854,6 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -4990,7 +4976,6 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -5109,7 +5094,6 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -5210,7 +5194,6 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -5307,7 +5290,6 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -5432,7 +5414,6 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -7267,7 +7248,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -7369,7 +7349,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -7492,7 +7471,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -7611,7 +7589,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -7758,7 +7735,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -9371,7 +9347,6 @@ exports[`renders <Summary state /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -9473,7 +9448,6 @@ exports[`renders <Summary state /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -9596,7 +9570,6 @@ exports[`renders <Summary state /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -9715,7 +9688,6 @@ exports[`renders <Summary state /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -9816,7 +9788,6 @@ exports[`renders <Summary state /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -9913,7 +9884,6 @@ exports[`renders <Summary state /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -10038,7 +10008,6 @@ exports[`renders <Summary state /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -11594,7 +11563,6 @@ exports[`renders <Summary state /> without throwing 2`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -11696,7 +11664,6 @@ exports[`renders <Summary state /> without throwing 2`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -11819,7 +11786,6 @@ exports[`renders <Summary state /> without throwing 2`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -11938,7 +11904,6 @@ exports[`renders <Summary state /> without throwing 2`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -12039,7 +12004,6 @@ exports[`renders <Summary state /> without throwing 2`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -12136,7 +12100,6 @@ exports[`renders <Summary state /> without throwing 2`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -12261,7 +12224,6 @@ exports[`renders <Summary state /> without throwing 2`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -13817,7 +13779,6 @@ exports[`renders <Summary state /> without throwing 3`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -13919,7 +13880,6 @@ exports[`renders <Summary state /> without throwing 3`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -14042,7 +14002,6 @@ exports[`renders <Summary state /> without throwing 3`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -14161,7 +14120,6 @@ exports[`renders <Summary state /> without throwing 3`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -14308,7 +14266,6 @@ exports[`renders <Summary state /> without throwing 3`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
diff --git a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/toolbar.spec.js.snap b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/toolbar.spec.js.snap
index eb041aca..ddadd19b 100644
--- a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/toolbar.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/toolbar.spec.js.snap
@@ -89,7 +89,6 @@ exports[`renders <Toolbar /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -384,7 +383,6 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -679,7 +677,6 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -996,7 +993,6 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1291,7 +1287,6 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1586,7 +1581,6 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1881,7 +1875,6 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
diff --git a/consoles/my-joy-instances/src/components/instances/summary.js b/consoles/my-joy-instances/src/components/instances/summary.js
index e056bb15..50fc0a3b 100644
--- a/consoles/my-joy-instances/src/components/instances/summary.js
+++ b/consoles/my-joy-instances/src/components/instances/summary.js
@@ -124,7 +124,7 @@ export const Meta = ({
                     loading={submitting}
                     inline
                   >
-                    Add
+                    Save
                   </Button>
                 </Margin>
               </Flex>
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap
index 2e29a055..a7db3a7f 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap
@@ -145,7 +145,6 @@ exports[`renders <Cns /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1500,7 +1499,6 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3500,7 +3498,6 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -4173,11 +4170,11 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c43 {
+.c44 {
   margin-left: 0.75rem;
 }
 
-.c52 {
+.c53 {
   margin-left: 0.375rem;
 }
 
@@ -4194,12 +4191,17 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   margin-top: 0.375rem;
 }
 
-.c48 {
-  margin-top: 0.1875rem;
+.c39 {
+  margin-right: 0.375rem;
   margin-bottom: 0.375rem;
 }
 
 .c49 {
+  margin-top: 0.1875rem;
+  margin-bottom: 0.375rem;
+}
+
+.c50 {
   margin-bottom: 0rem;
 }
 
@@ -4211,7 +4213,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   font-size: 80%;
 }
 
-.c47 {
+.c48 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -4223,18 +4225,18 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   appearance: button;
 }
 
-.c47::-moz-focus-inner,
-.c47[type='button']::-moz-focus-inner,
-.c47[type='reset']::-moz-focus-inner,
-.c47[type='submit']::-moz-focus-inner {
+.c48::-moz-focus-inner,
+.c48[type='button']::-moz-focus-inner,
+.c48[type='reset']::-moz-focus-inner,
+.c48[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c47:-moz-focusring,
-.c47[type='button']:-moz-focusring,
-.c47[type='reset']:-moz-focusring,
-.c47[type='submit']:-moz-focusring {
+.c48:-moz-focusring,
+.c48[type='button']:-moz-focusring,
+.c48[type='reset']:-moz-focusring,
+.c48[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
@@ -4245,15 +4247,15 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c46 {
+.c47 {
   min-width: 7.5rem;
 }
 
-.c45 {
+.c46 {
   display: inline-block;
 }
 
-.c44 {
+.c45 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4274,7 +4276,6 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -4293,7 +4294,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c44:focus {
+.c45:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -4301,21 +4302,21 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c44:hover {
+.c45:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c44:active,
-.c44:active:hover,
-.c44:active:focus {
+.c45:active,
+.c45:active:hover,
+.c45:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c44[disabled] {
+.c45[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
@@ -4388,7 +4389,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   flex-direction: column;
 }
 
-.c40 {
+.c41 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4435,7 +4436,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c50 {
+.c51 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4514,7 +4515,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c41 {
+.c42 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -4619,7 +4620,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   color: rgb(73,73,73);
 }
 
-.c42 {
+.c43 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -4644,54 +4645,54 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c42:focus {
+.c43:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c42::-webkit-input-placeholder {
+.c43::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c42::-moz-placeholder {
+.c43::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c42:-ms-input-placeholder {
+.c43:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c42:invalid {
+.c43:invalid {
   box-shadow: none;
 }
 
-.c42::-webkit-input-placeholder {
+.c43::-webkit-input-placeholder {
   color: rgb(216,216,216);
 }
 
-.c42::-moz-placeholder {
+.c43::-moz-placeholder {
   color: rgb(216,216,216);
 }
 
-.c42:-ms-input-placeholder {
+.c43:-ms-input-placeholder {
   color: rgb(216,216,216);
 }
 
-.c42:disabled {
+.c43:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c42:disabled::-webkit-input-placeholder {
+.c43:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c42:disabled::-moz-placeholder {
+.c43:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c42:disabled:-ms-input-placeholder {
+.c43:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
@@ -4701,14 +4702,14 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c51 {
+.c52 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
   color: rgb(216,216,216);
 }
 
-.c53 {
+.c54 {
   position: relative;
   vertical-align: text-bottom;
   display: -webkit-box;
@@ -4721,36 +4722,36 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   align-items: center;
 }
 
-.c55 {
+.c56 {
   display: none;
 }
 
-.c55:checked + label {
+.c56:checked + label {
   background: #3B46CC;
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c55:checked + label:after {
+.c56:checked + label:after {
   -webkit-transform: translateX(100%);
   -ms-transform: translateX(100%);
   transform: translateX(100%);
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c55:checked + label:active {
+.c56:checked + label:active {
   box-shadow: none;
 }
 
-.c55:checked + label {
+.c56:checked + label {
   background: rgb(250,250,250);
   border: 0.0625rem solid rgb(216,216,216);
 }
 
-.c55:checked + label:after {
+.c56:checked + label:after {
   box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
 }
 
-.c56 {
+.c57 {
   outline: 0;
   display: block;
   width: 2.875rem;
@@ -4770,24 +4771,24 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   cursor: not-allowed;
 }
 
-.c56::selection {
+.c57::selection {
   background: none;
 }
 
-.c56:active {
+.c57:active {
   box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
 }
 
-.c56:hover {
+.c57:hover {
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c56:hover:after {
+.c57:hover:after {
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c56:after,
-.c56:before {
+.c57:after,
+.c57:before {
   position: relative;
   display: block;
   content: '';
@@ -4795,7 +4796,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   height: 100%;
 }
 
-.c56:after {
+.c57:after {
   -webkit-transform: translateX(0%);
   -ms-transform: translateX(0%);
   transform: translateX(0%);
@@ -4807,36 +4808,36 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
 }
 
-.c56:active {
+.c57:active {
   box-shadow: inset 0 0 0 2em rgb(216,216,216);
 }
 
-.c56:before {
+.c57:before {
   display: none;
 }
 
-.c56:active {
+.c57:active {
   box-shadow: none;
 }
 
-.c56:active:after {
+.c57:active:after {
   padding-right: 0;
 }
 
-.c56:before {
+.c57:before {
   cursor: not-allowed;
 }
 
-.c56:after {
+.c57:after {
   cursor: not-allowed;
   background: rgb(230,230,230);
 }
 
-.c56:hover {
+.c57:hover {
   border: 0.0625rem solid rgb(216,216,216);
 }
 
-.c56:hover:after {
+.c57:hover:after {
   box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
 }
 
@@ -4864,22 +4865,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   cursor: pointer;
 }
 
-.c38 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c39 {
+.c40 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
   border-radius: 0.125rem;
@@ -4902,7 +4888,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   border: 0.0625rem solid rgb(45,56,132);
 }
 
-.c37 {
+.c38 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -4919,6 +4905,10 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   font-weight: 200;
 }
 
+.c37 {
+  margin-bottom: -0.375rem;
+}
+
 .c18 {
   padding-right: 0.75rem;
   margin-right: 0.75rem;
@@ -4933,7 +4923,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   margin: 0;
 }
 
-.c54 {
+.c55 {
   margin: 0 6px;
 }
 
@@ -5352,33 +5342,33 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                   className="c36"
                 >
                   <ul
-                    className="c37"
+                    className="c37 c38"
                   >
                     <div
-                      className="c38"
+                      className="c39"
                     >
                       <li
-                        className="c39"
+                        className="c40"
                         fill="rgba(66, 134, 244, 0.1)"
                       >
                         serbice
                       </li>
                     </div>
                     <div
-                      className="c38"
+                      className="c39"
                     >
                       <li
-                        className="c39"
+                        className="c40"
                         fill="rgba(66, 134, 244, 0.1)"
                       >
                         dssasda
                       </li>
                     </div>
                     <div
-                      className="c38"
+                      className="c39"
                     >
                       <li
-                        className="c39"
+                        className="c40"
                         fill="rgba(66, 134, 244, 0.1)"
                       >
                         dsasd
@@ -5391,7 +5381,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                 onSubmit={undefined}
               >
                 <div
-                  className="c40"
+                  className="c41"
                   wrap={true}
                 >
                   <div
@@ -5401,7 +5391,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                       className="c17"
                     >
                       <div
-                        className="c41"
+                        className="c42"
                         name="name"
                         role="group"
                         style={undefined}
@@ -5416,7 +5406,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                           className="c24"
                         >
                           <input
-                            className="c42"
+                            className="c43"
                             disabled={true}
                             id="p"
                             onBlur={null}
@@ -5430,10 +5420,10 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                     className="c21"
                   >
                     <div
-                      className="c43"
+                      className="c44"
                     >
                       <button
-                        className="c44 c45 c46 c47"
+                        className="c45 c46 c47 c48"
                         data-ui-button="true"
                         disabled={undefined}
                         href=""
@@ -5499,7 +5489,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                       </div>
                     </div>
                     <div
-                      className="c48"
+                      className="c49"
                     >
                       <div
                         className="c3"
@@ -5556,7 +5546,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                       </div>
                     </div>
                     <div
-                      className="c48"
+                      className="c49"
                     >
                       <div
                         className="c3"
@@ -5671,7 +5661,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                     </div>
                   </div>
                   <div
-                    className="c49"
+                    className="c50"
                   >
                     <div
                       className="c17"
@@ -5719,7 +5709,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                       </div>
                     </div>
                     <div
-                      className="c48"
+                      className="c49"
                     >
                       <div
                         className="c3"
@@ -5776,7 +5766,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                       </div>
                     </div>
                     <div
-                      className="c48"
+                      className="c49"
                     >
                       <div
                         className="c3"
@@ -5903,30 +5893,30 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
           className="c2"
         >
           <div
-            className="c41"
+            className="c42"
             name="cns-enabled"
             role="group"
             style={undefined}
           >
             <div
-              className="c50"
+              className="c51"
             >
               <label
-                className="c51 c35"
+                className="c52 c35"
                 disabled={true}
                 htmlFor="q"
               >
                 Disabled CNS
               </label>
               <div
-                className="c52"
+                className="c53"
               >
                 <div
-                  className="c53"
+                  className="c54"
                 >
                   <input
                     checked={true}
-                    className="c54 c55"
+                    className="c55 c56"
                     disabled={true}
                     id="q"
                     onBlur={undefined}
@@ -5935,7 +5925,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                   />
                   <label
                     checked={true}
-                    className="c54 c56"
+                    className="c55 c57"
                     disabled={true}
                     htmlFor="q"
                     id="q"
@@ -5944,7 +5934,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                   />
                   <label
                     checked={true}
-                    className="c54 c51 c35"
+                    className="c55 c52 c35"
                     disabled={true}
                     htmlFor="q"
                     id="q"
@@ -6110,7 +6100,6 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -6958,15 +6947,15 @@ exports[`renders <Cns services /> without throwing 1`] = `
   margin-bottom: 1.875rem;
 }
 
-.c32 {
+.c33 {
   margin-top: 0.1875rem;
 }
 
-.c34 {
+.c35 {
   margin-left: 0.75rem;
 }
 
-.c40 {
+.c41 {
   margin-left: 0.375rem;
 }
 
@@ -6974,11 +6963,16 @@ exports[`renders <Cns services /> without throwing 1`] = `
   margin-top: 0.375rem;
 }
 
+.c26 {
+  margin-right: 0.375rem;
+  margin-bottom: 0.375rem;
+}
+
 .c10 {
   padding: 1.875rem;
 }
 
-.c38 {
+.c39 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -6990,18 +6984,18 @@ exports[`renders <Cns services /> without throwing 1`] = `
   appearance: button;
 }
 
-.c38::-moz-focus-inner,
-.c38[type='button']::-moz-focus-inner,
-.c38[type='reset']::-moz-focus-inner,
-.c38[type='submit']::-moz-focus-inner {
+.c39::-moz-focus-inner,
+.c39[type='button']::-moz-focus-inner,
+.c39[type='reset']::-moz-focus-inner,
+.c39[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c38:-moz-focusring,
-.c38[type='button']:-moz-focusring,
-.c38[type='reset']:-moz-focusring,
-.c38[type='submit']:-moz-focusring {
+.c39:-moz-focusring,
+.c39[type='button']:-moz-focusring,
+.c39[type='reset']:-moz-focusring,
+.c39[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
@@ -7012,15 +7006,15 @@ exports[`renders <Cns services /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c37 {
+.c38 {
   min-width: 7.5rem;
 }
 
-.c36 {
+.c37 {
   display: inline-block;
 }
 
-.c35 {
+.c36 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -7041,7 +7035,6 @@ exports[`renders <Cns services /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -7060,7 +7053,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c35:focus {
+.c36:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -7068,21 +7061,21 @@ exports[`renders <Cns services /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c35:hover {
+.c36:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c35:active,
-.c35:active:hover,
-.c35:active:focus {
+.c36:active,
+.c36:active:hover,
+.c36:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c35[disabled] {
+.c36[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
@@ -7140,7 +7133,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   flex-direction: column;
 }
 
-.c28 {
+.c29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7167,7 +7160,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c30 {
+.c31 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7187,7 +7180,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c39 {
+.c40 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7211,7 +7204,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   align-items: center;
 }
 
-.c29 {
+.c30 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -7266,7 +7259,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c31 {
+.c32 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -7278,7 +7271,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c33 {
+.c34 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -7300,42 +7293,42 @@ exports[`renders <Cns services /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c33:focus {
+.c34:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c33::-webkit-input-placeholder {
+.c34::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c33::-moz-placeholder {
+.c34::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c33:-ms-input-placeholder {
+.c34:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c33:invalid {
+.c34:invalid {
   box-shadow: none;
 }
 
-.c33:disabled {
+.c34:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c33:disabled::-webkit-input-placeholder {
+.c34:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c33:disabled::-moz-placeholder {
+.c34:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c33:disabled:-ms-input-placeholder {
+.c34:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
@@ -7345,7 +7338,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c41 {
+.c42 {
   position: relative;
   vertical-align: text-bottom;
   display: -webkit-box;
@@ -7358,27 +7351,27 @@ exports[`renders <Cns services /> without throwing 1`] = `
   align-items: center;
 }
 
-.c43 {
+.c44 {
   display: none;
 }
 
-.c43:checked + label {
+.c44:checked + label {
   background: #3B46CC;
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c43:checked + label:after {
+.c44:checked + label:after {
   -webkit-transform: translateX(100%);
   -ms-transform: translateX(100%);
   transform: translateX(100%);
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c43:checked + label:active {
+.c44:checked + label:active {
   box-shadow: none;
 }
 
-.c44 {
+.c45 {
   outline: 0;
   display: block;
   width: 2.875rem;
@@ -7397,24 +7390,24 @@ exports[`renders <Cns services /> without throwing 1`] = `
   border: 0.0625rem solid rgb(216,216,216);
 }
 
-.c44::selection {
+.c45::selection {
   background: none;
 }
 
-.c44:active {
+.c45:active {
   box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
 }
 
-.c44:hover {
+.c45:hover {
   border: 0.0625rem solid rgb(59,70,204);
 }
 
-.c44:hover:after {
+.c45:hover:after {
   box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
 }
 
-.c44:after,
-.c44:before {
+.c45:after,
+.c45:before {
   position: relative;
   display: block;
   content: '';
@@ -7422,7 +7415,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   height: 100%;
 }
 
-.c44:after {
+.c45:after {
   -webkit-transform: translateX(0%);
   -ms-transform: translateX(0%);
   transform: translateX(0%);
@@ -7434,35 +7427,20 @@ exports[`renders <Cns services /> without throwing 1`] = `
   box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
 }
 
-.c44:active {
+.c45:active {
   box-shadow: inset 0 0 0 2em rgb(216,216,216);
 }
 
-.c44:before {
+.c45:before {
   display: none;
 }
 
-.c25 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c27 {
+.c28 {
   margin-left: 0.75rem;
   cursor: pointer;
 }
 
-.c26 {
+.c27 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
   border-radius: 0.125rem;
@@ -7485,7 +7463,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   border: 0.0625rem solid rgb(45,56,132);
 }
 
-.c24 {
+.c25 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -7502,6 +7480,10 @@ exports[`renders <Cns services /> without throwing 1`] = `
   font-weight: 200;
 }
 
+.c24 {
+  margin-bottom: -0.375rem;
+}
+
 .c12 {
   margin: 0;
 }
@@ -7510,7 +7492,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
   margin: 0;
 }
 
-.c42 {
+.c43 {
   margin: 0 6px;
 }
 
@@ -7699,18 +7681,18 @@ exports[`renders <Cns services /> without throwing 1`] = `
                   className="c23"
                 >
                   <ul
-                    className="c24"
+                    className="c24 c25"
                   >
                     <div
-                      className="c25"
+                      className="c26"
                     >
                       <li
-                        className="c26"
+                        className="c27"
                         fill="rgba(66, 134, 244, 0.1)"
                       >
                         serbice
                         <svg
-                          className="c27"
+                          className="c28"
                           height="11.31"
                           innerRef={undefined}
                           onClick={[Function]}
@@ -7731,15 +7713,15 @@ exports[`renders <Cns services /> without throwing 1`] = `
                       </li>
                     </div>
                     <div
-                      className="c25"
+                      className="c26"
                     >
                       <li
-                        className="c26"
+                        className="c27"
                         fill="rgba(66, 134, 244, 0.1)"
                       >
                         dssasda
                         <svg
-                          className="c27"
+                          className="c28"
                           height="11.31"
                           innerRef={undefined}
                           onClick={[Function]}
@@ -7760,15 +7742,15 @@ exports[`renders <Cns services /> without throwing 1`] = `
                       </li>
                     </div>
                     <div
-                      className="c25"
+                      className="c26"
                     >
                       <li
-                        className="c26"
+                        className="c27"
                         fill="rgba(66, 134, 244, 0.1)"
                       >
                         dsasd
                         <svg
-                          className="c27"
+                          className="c28"
                           height="11.31"
                           innerRef={undefined}
                           onClick={[Function]}
@@ -7795,17 +7777,17 @@ exports[`renders <Cns services /> without throwing 1`] = `
                 onSubmit={undefined}
               >
                 <div
-                  className="c28"
+                  className="c29"
                   wrap={true}
                 >
                   <div
-                    className="c29"
+                    className="c30"
                   >
                     <div
-                      className="c30"
+                      className="c31"
                     >
                       <div
-                        className="c31"
+                        className="c32"
                         name="name"
                         role="group"
                         style={undefined}
@@ -7817,10 +7799,10 @@ exports[`renders <Cns services /> without throwing 1`] = `
                           Attach to new CNS service name
                         </label>
                         <div
-                          className="c32"
+                          className="c33"
                         >
                           <input
-                            className="c33"
+                            className="c34"
                             disabled={false}
                             id="s"
                             onBlur={null}
@@ -7831,13 +7813,13 @@ exports[`renders <Cns services /> without throwing 1`] = `
                     </div>
                   </div>
                   <div
-                    className="c29"
+                    className="c30"
                   >
                     <div
-                      className="c34"
+                      className="c35"
                     >
                       <button
-                        className="c35 c36 c37 c38"
+                        className="c36 c37 c38 c39"
                         data-ui-button="true"
                         disabled={undefined}
                         href=""
@@ -7860,13 +7842,13 @@ exports[`renders <Cns services /> without throwing 1`] = `
           className="c2"
         >
           <div
-            className="c31"
+            className="c32"
             name="cns-enabled"
             role="group"
             style={undefined}
           >
             <div
-              className="c39"
+              className="c40"
             >
               <label
                 className="c21 c22"
@@ -7876,14 +7858,14 @@ exports[`renders <Cns services /> without throwing 1`] = `
                 Disabled CNS
               </label>
               <div
-                className="c40"
+                className="c41"
               >
                 <div
-                  className="c41"
+                  className="c42"
                 >
                   <input
                     checked={true}
-                    className="c42 c43"
+                    className="c43 c44"
                     disabled={false}
                     id="t"
                     onBlur={undefined}
@@ -7892,7 +7874,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
                   />
                   <label
                     checked={true}
-                    className="c42 c44"
+                    className="c43 c45"
                     disabled={false}
                     htmlFor="t"
                     id="t"
@@ -7901,7 +7883,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
                   />
                   <label
                     checked={true}
-                    className="c42 c21 c22"
+                    className="c43 c21 c22"
                     disabled={false}
                     htmlFor="t"
                     id="t"
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
index a5bfac82..1666bf3f 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
@@ -497,227 +497,289 @@ Array [
                         className="c25"
                     >
                         <svg
-                            height={60}
-                            viewBox="0 0 79 60"
-                            width={79}
+                            height={109}
+                            viewBox="0 0 119.34 109.47"
+                            width={119}
                             xmlns="http://www.w3.org/2000/svg"
                             xmlnsXlink="http://www.w3.org/1999/xlink"
                         >
-                            <title>
-                                Guilty_Salamander
-                            </title>
-                            <desc>
-                                Created using Figma
-                            </desc>
-                            <use
-                                fill="#FAA427"
-                                transform="translate(23.8 22)"
-                                xlinkHref="#a"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(27.3 25.5)"
-                                xlinkHref="#b"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(4.8 32.1)"
-                                xlinkHref="#c"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(12.2 31.8)"
-                                xlinkHref="#d"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(54.4 31.9)"
-                                xlinkHref="#e"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(54.4 32)"
-                                xlinkHref="#f"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(15.8 26.8)"
-                                xlinkHref="#g"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(5)"
-                                xlinkHref="#h"
-                            />
-                            <use
-                                fill="#FAFBFC"
-                                transform="rotate(-15.13 41.037 5.45)"
-                                xlinkHref="#i"
-                            />
-                            <use
-                                fill="#412B13"
-                                transform="rotate(-15.13 67.273 -24.78)"
-                                xlinkHref="#j"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(2.2 8)"
-                                xlinkHref="#k"
-                            />
-                            <use
-                                fill="#FAFBFC"
-                                transform="rotate(-74.87 40.46 -20.511)"
-                                xlinkHref="#l"
-                            />
-                            <use
-                                fill="#412B13"
-                                transform="rotate(-74.87 41.364 -22.098)"
-                                xlinkHref="#m"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(52.1 8)"
-                                xlinkHref="#n"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(31.5 34.3)"
-                                xlinkHref="#o"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(14.3)"
-                                xlinkHref="#p"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(30.9 18.9)"
-                                xlinkHref="#q"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(37.6 18.9)"
-                                xlinkHref="#r"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(27.4 53.9)"
-                                xlinkHref="#s"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(39.1 53.9)"
-                                xlinkHref="#t"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(27.4 53.9)"
-                                xlinkHref="#u"
-                            />
-                            <use
-                                fill="#342013"
-                                transform="translate(28.6 26.2)"
-                                xlinkHref="#v"
-                            />
-                            <use
-                                fill="#FFF"
-                                transform="translate(32.6 28.7)"
-                                xlinkHref="#w"
-                            />
                             <defs>
-                                <path
-                                    d="M54.921 36.053L0 0l1.413 24.908c.359 6.249 5.752 11.145 12.283 11.145H54.92z"
-                                    id="a"
-                                />
-                                <path
-                                    d="M42.12 32.526L13.47 0 0 23.737c.282 4.924 4.527 8.778 9.672 8.778l32.448.01z"
-                                    id="b"
-                                />
-                                <path
-                                    d="M3.326 17.01a3.312 3.312 0 0 1-1.545-6.25C6.059 8.52 8.482 2.226 8.52 2.165a3.313 3.313 0 0 1 6.216 2.296c-.133.354-3.312 8.717-9.86 12.145-.475.26-1.008.4-1.55.403z"
-                                    id="c"
-                                />
-                                <path
-                                    d="M5.079 9.205A28.654 28.654 0 0 0 7.287 4.75a3.312 3.312 0 1 0-6.183-2.296C.781 3.234.412 3.996 0 4.734c1.33 1.181 3.544 3.152 5.079 4.471z"
-                                    id="d"
-                                />
-                                <path
-                                    d="M11.682 17.27a3.312 3.312 0 0 0 1.545-6.248C8.95 8.78 6.526 2.487 6.504 2.427A3.312 3.312 0 1 0 .316 4.723c.126.353 3.312 8.717 9.853 12.145.464.254.983.393 1.513.403z"
-                                    id="e"
-                                />
-                                <path
-                                    d="M2.45 9.01A28.33 28.33 0 0 1 .242 4.553a3.312 3.312 0 1 1 6.21-2.296c.326.78.695 1.54 1.104 2.28C6.187 5.719 3.973 7.69 2.45 9.009z"
-                                    id="f"
-                                />
-                                <path
-                                    d="M35.159 0H6.542A6.542 6.542 0 0 0 0 6.542v14.016a6.542 6.542 0 0 0 6.542 6.541h28.617a6.541 6.541 0 0 0 6.541-6.541V6.542A6.542 6.542 0 0 0 35.16 0z"
-                                    id="g"
-                                />
-                                <path
-                                    d="M54.254 0H9.026A9.026 9.026 0 0 0 0 9.026v17.207a9.026 9.026 0 0 0 9.026 9.025h45.228a9.026 9.026 0 0 0 9.025-9.026V9.027A9.026 9.026 0 0 0 54.253 0z"
-                                    id="h"
-                                />
-                                <path
-                                    d="M9.721 18.637c5.37 0 9.721-4.172 9.721-9.319C19.442 4.172 15.09 0 9.722 0 4.351 0 0 4.172 0 9.318c0 5.147 4.352 9.319 9.721 9.319z"
-                                    id="i"
-                                />
-                                <path
-                                    d="M5.19 9.959c2.865 0 5.188-2.23 5.188-4.98C10.378 2.23 8.055 0 5.19 0S0 2.23 0 4.98c0 2.75 2.323 4.979 5.19 4.979z"
-                                    id="j"
-                                />
-                                <path
-                                    d="M7.262.351C2.078 1.753-1.018 6.921.306 11.89l18.77-5.073C17.705 1.847 12.411-1.045 7.261.35z"
-                                    id="k"
-                                />
-                                <path
-                                    d="M9.318 19.442c5.147 0 9.319-4.352 9.319-9.72C18.637 4.351 14.465 0 9.318 0 4.172 0 0 4.352 0 9.721c0 5.37 4.172 9.721 9.318 9.721z"
-                                    id="l"
-                                />
-                                <path
-                                    d="M4.98 10.378c2.75 0 4.979-2.323 4.979-5.189S7.729 0 4.979 0C2.23 0 0 2.323 0 5.19c0 2.865 2.23 5.188 4.98 5.188z"
-                                    id="m"
-                                />
-                                <path
-                                    d="M11.819.351c5.178 1.402 8.28 6.57 6.95 11.538L0 6.816C1.347 1.847 6.635-1.045 11.819.35z"
-                                    id="n"
-                                />
-                                <path
-                                    d="M5.106 4.897A5.007 5.007 0 0 0 10.218 0H0a5.001 5.001 0 0 0 5.106 4.897z"
-                                    id="o"
-                                />
-                                <path
-                                    d="M0 0l22.258 18.498L44.516 0H0z"
-                                    id="p"
-                                />
-                                <path
-                                    d="M2.445 0A2.396 2.396 0 0 0 0 2.342h4.885a2.39 2.39 0 0 0-2.44-2.34z"
-                                    id="q"
-                                />
-                                <path
-                                    d="M2.462 0A2.396 2.396 0 0 0 0 2.343h4.885A2.39 2.39 0 0 0 2.462 0z"
-                                    id="r"
-                                />
-                                <path
-                                    d="M0 0h6.227v3.091A3.047 3.047 0 0 1 3.18 6.14h-.127A3.047 3.047 0 0 1 .006 3.09V0H0z"
-                                    id="s"
-                                />
-                                <path
-                                    d="M.006 0H6.22v3.091A3.047 3.047 0 0 1 3.174 6.14h-.127A3.047 3.047 0 0 1 0 3.09V0h.006z"
-                                    id="t"
-                                />
-                                <path
-                                    d="M31.328 0H0v1.474h31.328V0z"
-                                    id="u"
-                                />
-                                <path
-                                    d="M15.422 1.503A17.422 17.422 0 0 0 8.113.002 17.4 17.4 0 0 0 .805 1.503a1.457 1.457 0 0 0 .629 2.76h2.572V4.06a1.579 1.579 0 0 1 2.126-1.468 6.194 6.194 0 0 0 3.963 0 1.574 1.574 0 0 1 2.12 1.468v.204h2.572a1.463 1.463 0 0 0 .635-2.76z"
-                                    id="v"
-                                />
-                                <path
-                                    d="M6.072.104a6.194 6.194 0 0 1-3.963 0A1.579 1.579 0 0 0 0 1.573v.204h8.209v-.204A1.573 1.573 0 0 0 6.072.104z"
-                                    id="w"
+                                <style
+                                    dangerouslySetInnerHTML={
+                                        Object {
+                                            "__html": ".cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}",
+                                          }
+                                    }
                                 />
+                                <radialGradient
+                                    cx="208.79"
+                                    cy="99.06"
+                                    gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)"
+                                    gradientUnits="userSpaceOnUse"
+                                    id="radial-gradient"
+                                    r="57.13"
+                                >
+                                    <stop
+                                        offset="0.05"
+                                        stopColor="#436275"
+                                    />
+                                    <stop
+                                        offset="0.1"
+                                        stopColor="#415f72"
+                                    />
+                                    <stop
+                                        offset="0.13"
+                                        stopColor="#3a5769"
+                                    />
+                                    <stop
+                                        offset="0.16"
+                                        stopColor="#2e4959"
+                                    />
+                                    <stop
+                                        offset="0.19"
+                                        stopColor="#1d3543"
+                                    />
+                                    <stop
+                                        offset="0.19"
+                                        stopColor="#1b3240"
+                                    />
+                                    <stop
+                                        offset="0.26"
+                                        stopColor="#1e3644"
+                                    />
+                                    <stop
+                                        offset="0.32"
+                                        stopColor="#274150"
+                                    />
+                                    <stop
+                                        offset="0.39"
+                                        stopColor="#365364"
+                                    />
+                                    <stop
+                                        offset="0.43"
+                                        stopColor="#436275"
+                                    />
+                                    <stop
+                                        offset="0.49"
+                                        stopColor="#3f5d6f"
+                                    />
+                                    <stop
+                                        offset="0.56"
+                                        stopColor="#324e5f"
+                                    />
+                                    <stop
+                                        offset="0.65"
+                                        stopColor="#1e3644"
+                                    />
+                                    <stop
+                                        offset="0.66"
+                                        stopColor="#1b3240"
+                                    />
+                                    <stop
+                                        offset="0.85"
+                                        stopColor="#1b3240"
+                                    />
+                                    <stop
+                                        offset="0.9"
+                                        stopColor="#2c4656"
+                                    />
+                                    <stop
+                                        offset="0.95"
+                                        stopColor="#436275"
+                                    />
+                                </radialGradient>
+                                <radialGradient
+                                    cx="59.15"
+                                    cy="56.86"
+                                    gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)"
+                                    gradientUnits="userSpaceOnUse"
+                                    id="radial-gradient-2"
+                                    r="46.01"
+                                >
+                                    <stop
+                                        offset={0}
+                                        stopColor="#436275"
+                                    />
+                                    <stop
+                                        offset="0.1"
+                                        stopColor="#426073"
+                                    />
+                                    <stop
+                                        offset="0.13"
+                                        stopColor="#3c5a6c"
+                                    />
+                                    <stop
+                                        offset="0.16"
+                                        stopColor="#344f61"
+                                    />
+                                    <stop
+                                        offset="0.18"
+                                        stopColor="#274050"
+                                    />
+                                    <stop
+                                        offset="0.19"
+                                        stopColor="#1b3240"
+                                    />
+                                    <stop
+                                        offset="0.26"
+                                        stopColor="#1e3644"
+                                    />
+                                    <stop
+                                        offset="0.32"
+                                        stopColor="#274150"
+                                    />
+                                    <stop
+                                        offset="0.39"
+                                        stopColor="#365364"
+                                    />
+                                    <stop
+                                        offset="0.43"
+                                        stopColor="#436275"
+                                    />
+                                    <stop
+                                        offset="0.49"
+                                        stopColor="#3f5d6f"
+                                    />
+                                    <stop
+                                        offset="0.56"
+                                        stopColor="#324e5f"
+                                    />
+                                    <stop
+                                        offset="0.65"
+                                        stopColor="#1e3644"
+                                    />
+                                    <stop
+                                        offset="0.66"
+                                        stopColor="#1b3240"
+                                    />
+                                    <stop
+                                        offset="0.85"
+                                        stopColor="#1b3240"
+                                    />
+                                    <stop
+                                        offset="0.92"
+                                        stopColor="#2c4656"
+                                    />
+                                    <stop
+                                        offset={1}
+                                        stopColor="#436275"
+                                    />
+                                </radialGradient>
+                                <radialGradient
+                                    cx="-521.06"
+                                    cy="366.16"
+                                    gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)"
+                                    gradientUnits="userSpaceOnUse"
+                                    id="radial-gradient-3"
+                                    r="32.44"
+                                >
+                                    <stop
+                                        offset={0}
+                                        stopColor="#436275"
+                                    />
+                                    <stop
+                                        offset="0.02"
+                                        stopColor="#436275"
+                                        stopOpacity="0.97"
+                                    />
+                                    <stop
+                                        offset="0.34"
+                                        stopColor="#436275"
+                                        stopOpacity="0.55"
+                                    />
+                                    <stop
+                                        offset="0.62"
+                                        stopColor="#436275"
+                                        stopOpacity="0.25"
+                                    />
+                                    <stop
+                                        offset="0.85"
+                                        stopColor="#436275"
+                                        stopOpacity="0.07"
+                                    />
+                                    <stop
+                                        offset={1}
+                                        stopColor="#436275"
+                                        stopOpacity={0}
+                                    />
+                                </radialGradient>
+                                <radialGradient
+                                    cx="-136.43"
+                                    cy="140.9"
+                                    gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)"
+                                    gradientUnits="userSpaceOnUse"
+                                    id="radial-gradient-4"
+                                    r="54.82"
+                                >
+                                    <stop
+                                        offset={0}
+                                        stopColor="#436275"
+                                    />
+                                    <stop
+                                        offset="0.58"
+                                        stopColor="#436275"
+                                        stopOpacity="0.4"
+                                    />
+                                    <stop
+                                        offset={1}
+                                        stopColor="#436275"
+                                        stopOpacity={0}
+                                    />
+                                </radialGradient>
                             </defs>
+                            <title>
+                                Empty-state-illustration
+                            </title>
+                            <g
+                                data-name="Layer 2"
+                                id="Layer_2"
+                            >
+                                <g
+                                    data-name="Layer 1"
+                                    id="Layer_1-2"
+                                >
+                                    <g
+                                        className="cls-1"
+                                    >
+                                        <path
+                                            className="cls-2"
+                                            d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"
+                                        />
+                                    </g>
+                                    <g
+                                        className="cls-1"
+                                    >
+                                        <path
+                                            className="cls-3"
+                                            d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"
+                                        />
+                                    </g>
+                                    <circle
+                                        className="cls-4"
+                                        cx="23.53"
+                                        cy="73.77"
+                                        r="11.93"
+                                    />
+                                    <circle
+                                        className="cls-5"
+                                        cx="23.53"
+                                        cy="73.77"
+                                        r="11.93"
+                                    />
+                                    <circle
+                                        className="cls-6"
+                                        cx="61.95"
+                                        cy="55.24"
+                                        r="34.25"
+                                    />
+                                    <circle
+                                        className="cls-7"
+                                        cx="61.95"
+                                        cy="55.24"
+                                        r="34.25"
+                                    />
+                                </g>
+                            </g>
                         </svg>
                     </div>
                     <h3
@@ -1288,227 +1350,289 @@ Array [
                         className="c26"
                     >
                         <svg
-                            height={60}
-                            viewBox="0 0 79 60"
-                            width={79}
+                            height={109}
+                            viewBox="0 0 119.34 109.47"
+                            width={119}
                             xmlns="http://www.w3.org/2000/svg"
                             xmlnsXlink="http://www.w3.org/1999/xlink"
                         >
-                            <title>
-                                Guilty_Salamander
-                            </title>
-                            <desc>
-                                Created using Figma
-                            </desc>
-                            <use
-                                fill="#FAA427"
-                                transform="translate(23.8 22)"
-                                xlinkHref="#a"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(27.3 25.5)"
-                                xlinkHref="#b"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(4.8 32.1)"
-                                xlinkHref="#c"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(12.2 31.8)"
-                                xlinkHref="#d"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(54.4 31.9)"
-                                xlinkHref="#e"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(54.4 32)"
-                                xlinkHref="#f"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(15.8 26.8)"
-                                xlinkHref="#g"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(5)"
-                                xlinkHref="#h"
-                            />
-                            <use
-                                fill="#FAFBFC"
-                                transform="rotate(-15.13 41.037 5.45)"
-                                xlinkHref="#i"
-                            />
-                            <use
-                                fill="#412B13"
-                                transform="rotate(-15.13 67.273 -24.78)"
-                                xlinkHref="#j"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(2.2 8)"
-                                xlinkHref="#k"
-                            />
-                            <use
-                                fill="#FAFBFC"
-                                transform="rotate(-74.87 40.46 -20.511)"
-                                xlinkHref="#l"
-                            />
-                            <use
-                                fill="#412B13"
-                                transform="rotate(-74.87 41.364 -22.098)"
-                                xlinkHref="#m"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(52.1 8)"
-                                xlinkHref="#n"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(31.5 34.3)"
-                                xlinkHref="#o"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(14.3)"
-                                xlinkHref="#p"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(30.9 18.9)"
-                                xlinkHref="#q"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(37.6 18.9)"
-                                xlinkHref="#r"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(27.4 53.9)"
-                                xlinkHref="#s"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(39.1 53.9)"
-                                xlinkHref="#t"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(27.4 53.9)"
-                                xlinkHref="#u"
-                            />
-                            <use
-                                fill="#342013"
-                                transform="translate(28.6 26.2)"
-                                xlinkHref="#v"
-                            />
-                            <use
-                                fill="#FFF"
-                                transform="translate(32.6 28.7)"
-                                xlinkHref="#w"
-                            />
                             <defs>
-                                <path
-                                    d="M54.921 36.053L0 0l1.413 24.908c.359 6.249 5.752 11.145 12.283 11.145H54.92z"
-                                    id="a"
-                                />
-                                <path
-                                    d="M42.12 32.526L13.47 0 0 23.737c.282 4.924 4.527 8.778 9.672 8.778l32.448.01z"
-                                    id="b"
-                                />
-                                <path
-                                    d="M3.326 17.01a3.312 3.312 0 0 1-1.545-6.25C6.059 8.52 8.482 2.226 8.52 2.165a3.313 3.313 0 0 1 6.216 2.296c-.133.354-3.312 8.717-9.86 12.145-.475.26-1.008.4-1.55.403z"
-                                    id="c"
-                                />
-                                <path
-                                    d="M5.079 9.205A28.654 28.654 0 0 0 7.287 4.75a3.312 3.312 0 1 0-6.183-2.296C.781 3.234.412 3.996 0 4.734c1.33 1.181 3.544 3.152 5.079 4.471z"
-                                    id="d"
-                                />
-                                <path
-                                    d="M11.682 17.27a3.312 3.312 0 0 0 1.545-6.248C8.95 8.78 6.526 2.487 6.504 2.427A3.312 3.312 0 1 0 .316 4.723c.126.353 3.312 8.717 9.853 12.145.464.254.983.393 1.513.403z"
-                                    id="e"
-                                />
-                                <path
-                                    d="M2.45 9.01A28.33 28.33 0 0 1 .242 4.553a3.312 3.312 0 1 1 6.21-2.296c.326.78.695 1.54 1.104 2.28C6.187 5.719 3.973 7.69 2.45 9.009z"
-                                    id="f"
-                                />
-                                <path
-                                    d="M35.159 0H6.542A6.542 6.542 0 0 0 0 6.542v14.016a6.542 6.542 0 0 0 6.542 6.541h28.617a6.541 6.541 0 0 0 6.541-6.541V6.542A6.542 6.542 0 0 0 35.16 0z"
-                                    id="g"
-                                />
-                                <path
-                                    d="M54.254 0H9.026A9.026 9.026 0 0 0 0 9.026v17.207a9.026 9.026 0 0 0 9.026 9.025h45.228a9.026 9.026 0 0 0 9.025-9.026V9.027A9.026 9.026 0 0 0 54.253 0z"
-                                    id="h"
-                                />
-                                <path
-                                    d="M9.721 18.637c5.37 0 9.721-4.172 9.721-9.319C19.442 4.172 15.09 0 9.722 0 4.351 0 0 4.172 0 9.318c0 5.147 4.352 9.319 9.721 9.319z"
-                                    id="i"
-                                />
-                                <path
-                                    d="M5.19 9.959c2.865 0 5.188-2.23 5.188-4.98C10.378 2.23 8.055 0 5.19 0S0 2.23 0 4.98c0 2.75 2.323 4.979 5.19 4.979z"
-                                    id="j"
-                                />
-                                <path
-                                    d="M7.262.351C2.078 1.753-1.018 6.921.306 11.89l18.77-5.073C17.705 1.847 12.411-1.045 7.261.35z"
-                                    id="k"
-                                />
-                                <path
-                                    d="M9.318 19.442c5.147 0 9.319-4.352 9.319-9.72C18.637 4.351 14.465 0 9.318 0 4.172 0 0 4.352 0 9.721c0 5.37 4.172 9.721 9.318 9.721z"
-                                    id="l"
-                                />
-                                <path
-                                    d="M4.98 10.378c2.75 0 4.979-2.323 4.979-5.189S7.729 0 4.979 0C2.23 0 0 2.323 0 5.19c0 2.865 2.23 5.188 4.98 5.188z"
-                                    id="m"
-                                />
-                                <path
-                                    d="M11.819.351c5.178 1.402 8.28 6.57 6.95 11.538L0 6.816C1.347 1.847 6.635-1.045 11.819.35z"
-                                    id="n"
-                                />
-                                <path
-                                    d="M5.106 4.897A5.007 5.007 0 0 0 10.218 0H0a5.001 5.001 0 0 0 5.106 4.897z"
-                                    id="o"
-                                />
-                                <path
-                                    d="M0 0l22.258 18.498L44.516 0H0z"
-                                    id="p"
-                                />
-                                <path
-                                    d="M2.445 0A2.396 2.396 0 0 0 0 2.342h4.885a2.39 2.39 0 0 0-2.44-2.34z"
-                                    id="q"
-                                />
-                                <path
-                                    d="M2.462 0A2.396 2.396 0 0 0 0 2.343h4.885A2.39 2.39 0 0 0 2.462 0z"
-                                    id="r"
-                                />
-                                <path
-                                    d="M0 0h6.227v3.091A3.047 3.047 0 0 1 3.18 6.14h-.127A3.047 3.047 0 0 1 .006 3.09V0H0z"
-                                    id="s"
-                                />
-                                <path
-                                    d="M.006 0H6.22v3.091A3.047 3.047 0 0 1 3.174 6.14h-.127A3.047 3.047 0 0 1 0 3.09V0h.006z"
-                                    id="t"
-                                />
-                                <path
-                                    d="M31.328 0H0v1.474h31.328V0z"
-                                    id="u"
-                                />
-                                <path
-                                    d="M15.422 1.503A17.422 17.422 0 0 0 8.113.002 17.4 17.4 0 0 0 .805 1.503a1.457 1.457 0 0 0 .629 2.76h2.572V4.06a1.579 1.579 0 0 1 2.126-1.468 6.194 6.194 0 0 0 3.963 0 1.574 1.574 0 0 1 2.12 1.468v.204h2.572a1.463 1.463 0 0 0 .635-2.76z"
-                                    id="v"
-                                />
-                                <path
-                                    d="M6.072.104a6.194 6.194 0 0 1-3.963 0A1.579 1.579 0 0 0 0 1.573v.204h8.209v-.204A1.573 1.573 0 0 0 6.072.104z"
-                                    id="w"
+                                <style
+                                    dangerouslySetInnerHTML={
+                                        Object {
+                                            "__html": ".cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}",
+                                          }
+                                    }
                                 />
+                                <radialGradient
+                                    cx="208.79"
+                                    cy="99.06"
+                                    gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)"
+                                    gradientUnits="userSpaceOnUse"
+                                    id="radial-gradient"
+                                    r="57.13"
+                                >
+                                    <stop
+                                        offset="0.05"
+                                        stopColor="#436275"
+                                    />
+                                    <stop
+                                        offset="0.1"
+                                        stopColor="#415f72"
+                                    />
+                                    <stop
+                                        offset="0.13"
+                                        stopColor="#3a5769"
+                                    />
+                                    <stop
+                                        offset="0.16"
+                                        stopColor="#2e4959"
+                                    />
+                                    <stop
+                                        offset="0.19"
+                                        stopColor="#1d3543"
+                                    />
+                                    <stop
+                                        offset="0.19"
+                                        stopColor="#1b3240"
+                                    />
+                                    <stop
+                                        offset="0.26"
+                                        stopColor="#1e3644"
+                                    />
+                                    <stop
+                                        offset="0.32"
+                                        stopColor="#274150"
+                                    />
+                                    <stop
+                                        offset="0.39"
+                                        stopColor="#365364"
+                                    />
+                                    <stop
+                                        offset="0.43"
+                                        stopColor="#436275"
+                                    />
+                                    <stop
+                                        offset="0.49"
+                                        stopColor="#3f5d6f"
+                                    />
+                                    <stop
+                                        offset="0.56"
+                                        stopColor="#324e5f"
+                                    />
+                                    <stop
+                                        offset="0.65"
+                                        stopColor="#1e3644"
+                                    />
+                                    <stop
+                                        offset="0.66"
+                                        stopColor="#1b3240"
+                                    />
+                                    <stop
+                                        offset="0.85"
+                                        stopColor="#1b3240"
+                                    />
+                                    <stop
+                                        offset="0.9"
+                                        stopColor="#2c4656"
+                                    />
+                                    <stop
+                                        offset="0.95"
+                                        stopColor="#436275"
+                                    />
+                                </radialGradient>
+                                <radialGradient
+                                    cx="59.15"
+                                    cy="56.86"
+                                    gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)"
+                                    gradientUnits="userSpaceOnUse"
+                                    id="radial-gradient-2"
+                                    r="46.01"
+                                >
+                                    <stop
+                                        offset={0}
+                                        stopColor="#436275"
+                                    />
+                                    <stop
+                                        offset="0.1"
+                                        stopColor="#426073"
+                                    />
+                                    <stop
+                                        offset="0.13"
+                                        stopColor="#3c5a6c"
+                                    />
+                                    <stop
+                                        offset="0.16"
+                                        stopColor="#344f61"
+                                    />
+                                    <stop
+                                        offset="0.18"
+                                        stopColor="#274050"
+                                    />
+                                    <stop
+                                        offset="0.19"
+                                        stopColor="#1b3240"
+                                    />
+                                    <stop
+                                        offset="0.26"
+                                        stopColor="#1e3644"
+                                    />
+                                    <stop
+                                        offset="0.32"
+                                        stopColor="#274150"
+                                    />
+                                    <stop
+                                        offset="0.39"
+                                        stopColor="#365364"
+                                    />
+                                    <stop
+                                        offset="0.43"
+                                        stopColor="#436275"
+                                    />
+                                    <stop
+                                        offset="0.49"
+                                        stopColor="#3f5d6f"
+                                    />
+                                    <stop
+                                        offset="0.56"
+                                        stopColor="#324e5f"
+                                    />
+                                    <stop
+                                        offset="0.65"
+                                        stopColor="#1e3644"
+                                    />
+                                    <stop
+                                        offset="0.66"
+                                        stopColor="#1b3240"
+                                    />
+                                    <stop
+                                        offset="0.85"
+                                        stopColor="#1b3240"
+                                    />
+                                    <stop
+                                        offset="0.92"
+                                        stopColor="#2c4656"
+                                    />
+                                    <stop
+                                        offset={1}
+                                        stopColor="#436275"
+                                    />
+                                </radialGradient>
+                                <radialGradient
+                                    cx="-521.06"
+                                    cy="366.16"
+                                    gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)"
+                                    gradientUnits="userSpaceOnUse"
+                                    id="radial-gradient-3"
+                                    r="32.44"
+                                >
+                                    <stop
+                                        offset={0}
+                                        stopColor="#436275"
+                                    />
+                                    <stop
+                                        offset="0.02"
+                                        stopColor="#436275"
+                                        stopOpacity="0.97"
+                                    />
+                                    <stop
+                                        offset="0.34"
+                                        stopColor="#436275"
+                                        stopOpacity="0.55"
+                                    />
+                                    <stop
+                                        offset="0.62"
+                                        stopColor="#436275"
+                                        stopOpacity="0.25"
+                                    />
+                                    <stop
+                                        offset="0.85"
+                                        stopColor="#436275"
+                                        stopOpacity="0.07"
+                                    />
+                                    <stop
+                                        offset={1}
+                                        stopColor="#436275"
+                                        stopOpacity={0}
+                                    />
+                                </radialGradient>
+                                <radialGradient
+                                    cx="-136.43"
+                                    cy="140.9"
+                                    gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)"
+                                    gradientUnits="userSpaceOnUse"
+                                    id="radial-gradient-4"
+                                    r="54.82"
+                                >
+                                    <stop
+                                        offset={0}
+                                        stopColor="#436275"
+                                    />
+                                    <stop
+                                        offset="0.58"
+                                        stopColor="#436275"
+                                        stopOpacity="0.4"
+                                    />
+                                    <stop
+                                        offset={1}
+                                        stopColor="#436275"
+                                        stopOpacity={0}
+                                    />
+                                </radialGradient>
                             </defs>
+                            <title>
+                                Empty-state-illustration
+                            </title>
+                            <g
+                                data-name="Layer 2"
+                                id="Layer_2"
+                            >
+                                <g
+                                    data-name="Layer 1"
+                                    id="Layer_1-2"
+                                >
+                                    <g
+                                        className="cls-1"
+                                    >
+                                        <path
+                                            className="cls-2"
+                                            d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"
+                                        />
+                                    </g>
+                                    <g
+                                        className="cls-1"
+                                    >
+                                        <path
+                                            className="cls-3"
+                                            d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"
+                                        />
+                                    </g>
+                                    <circle
+                                        className="cls-4"
+                                        cx="23.53"
+                                        cy="73.77"
+                                        r="11.93"
+                                    />
+                                    <circle
+                                        className="cls-5"
+                                        cx="23.53"
+                                        cy="73.77"
+                                        r="11.93"
+                                    />
+                                    <circle
+                                        className="cls-6"
+                                        cx="61.95"
+                                        cy="55.24"
+                                        r="34.25"
+                                    />
+                                    <circle
+                                        className="cls-7"
+                                        cx="61.95"
+                                        cy="55.24"
+                                        r="34.25"
+                                    />
+                                </g>
+                            </g>
                         </svg>
                     </div>
                     <h3
@@ -2021,227 +2145,289 @@ Array [
                         className="c25"
                     >
                         <svg
-                            height={60}
-                            viewBox="0 0 79 60"
-                            width={79}
+                            height={109}
+                            viewBox="0 0 119.34 109.47"
+                            width={119}
                             xmlns="http://www.w3.org/2000/svg"
                             xmlnsXlink="http://www.w3.org/1999/xlink"
                         >
-                            <title>
-                                Guilty_Salamander
-                            </title>
-                            <desc>
-                                Created using Figma
-                            </desc>
-                            <use
-                                fill="#FAA427"
-                                transform="translate(23.8 22)"
-                                xlinkHref="#a"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(27.3 25.5)"
-                                xlinkHref="#b"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(4.8 32.1)"
-                                xlinkHref="#c"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(12.2 31.8)"
-                                xlinkHref="#d"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(54.4 31.9)"
-                                xlinkHref="#e"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(54.4 32)"
-                                xlinkHref="#f"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(15.8 26.8)"
-                                xlinkHref="#g"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(5)"
-                                xlinkHref="#h"
-                            />
-                            <use
-                                fill="#FAFBFC"
-                                transform="rotate(-15.13 41.037 5.45)"
-                                xlinkHref="#i"
-                            />
-                            <use
-                                fill="#412B13"
-                                transform="rotate(-15.13 67.273 -24.78)"
-                                xlinkHref="#j"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(2.2 8)"
-                                xlinkHref="#k"
-                            />
-                            <use
-                                fill="#FAFBFC"
-                                transform="rotate(-74.87 40.46 -20.511)"
-                                xlinkHref="#l"
-                            />
-                            <use
-                                fill="#412B13"
-                                transform="rotate(-74.87 41.364 -22.098)"
-                                xlinkHref="#m"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(52.1 8)"
-                                xlinkHref="#n"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(31.5 34.3)"
-                                xlinkHref="#o"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(14.3)"
-                                xlinkHref="#p"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(30.9 18.9)"
-                                xlinkHref="#q"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(37.6 18.9)"
-                                xlinkHref="#r"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(27.4 53.9)"
-                                xlinkHref="#s"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(39.1 53.9)"
-                                xlinkHref="#t"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(27.4 53.9)"
-                                xlinkHref="#u"
-                            />
-                            <use
-                                fill="#342013"
-                                transform="translate(28.6 26.2)"
-                                xlinkHref="#v"
-                            />
-                            <use
-                                fill="#FFF"
-                                transform="translate(32.6 28.7)"
-                                xlinkHref="#w"
-                            />
                             <defs>
-                                <path
-                                    d="M54.921 36.053L0 0l1.413 24.908c.359 6.249 5.752 11.145 12.283 11.145H54.92z"
-                                    id="a"
-                                />
-                                <path
-                                    d="M42.12 32.526L13.47 0 0 23.737c.282 4.924 4.527 8.778 9.672 8.778l32.448.01z"
-                                    id="b"
-                                />
-                                <path
-                                    d="M3.326 17.01a3.312 3.312 0 0 1-1.545-6.25C6.059 8.52 8.482 2.226 8.52 2.165a3.313 3.313 0 0 1 6.216 2.296c-.133.354-3.312 8.717-9.86 12.145-.475.26-1.008.4-1.55.403z"
-                                    id="c"
-                                />
-                                <path
-                                    d="M5.079 9.205A28.654 28.654 0 0 0 7.287 4.75a3.312 3.312 0 1 0-6.183-2.296C.781 3.234.412 3.996 0 4.734c1.33 1.181 3.544 3.152 5.079 4.471z"
-                                    id="d"
-                                />
-                                <path
-                                    d="M11.682 17.27a3.312 3.312 0 0 0 1.545-6.248C8.95 8.78 6.526 2.487 6.504 2.427A3.312 3.312 0 1 0 .316 4.723c.126.353 3.312 8.717 9.853 12.145.464.254.983.393 1.513.403z"
-                                    id="e"
-                                />
-                                <path
-                                    d="M2.45 9.01A28.33 28.33 0 0 1 .242 4.553a3.312 3.312 0 1 1 6.21-2.296c.326.78.695 1.54 1.104 2.28C6.187 5.719 3.973 7.69 2.45 9.009z"
-                                    id="f"
-                                />
-                                <path
-                                    d="M35.159 0H6.542A6.542 6.542 0 0 0 0 6.542v14.016a6.542 6.542 0 0 0 6.542 6.541h28.617a6.541 6.541 0 0 0 6.541-6.541V6.542A6.542 6.542 0 0 0 35.16 0z"
-                                    id="g"
-                                />
-                                <path
-                                    d="M54.254 0H9.026A9.026 9.026 0 0 0 0 9.026v17.207a9.026 9.026 0 0 0 9.026 9.025h45.228a9.026 9.026 0 0 0 9.025-9.026V9.027A9.026 9.026 0 0 0 54.253 0z"
-                                    id="h"
-                                />
-                                <path
-                                    d="M9.721 18.637c5.37 0 9.721-4.172 9.721-9.319C19.442 4.172 15.09 0 9.722 0 4.351 0 0 4.172 0 9.318c0 5.147 4.352 9.319 9.721 9.319z"
-                                    id="i"
-                                />
-                                <path
-                                    d="M5.19 9.959c2.865 0 5.188-2.23 5.188-4.98C10.378 2.23 8.055 0 5.19 0S0 2.23 0 4.98c0 2.75 2.323 4.979 5.19 4.979z"
-                                    id="j"
-                                />
-                                <path
-                                    d="M7.262.351C2.078 1.753-1.018 6.921.306 11.89l18.77-5.073C17.705 1.847 12.411-1.045 7.261.35z"
-                                    id="k"
-                                />
-                                <path
-                                    d="M9.318 19.442c5.147 0 9.319-4.352 9.319-9.72C18.637 4.351 14.465 0 9.318 0 4.172 0 0 4.352 0 9.721c0 5.37 4.172 9.721 9.318 9.721z"
-                                    id="l"
-                                />
-                                <path
-                                    d="M4.98 10.378c2.75 0 4.979-2.323 4.979-5.189S7.729 0 4.979 0C2.23 0 0 2.323 0 5.19c0 2.865 2.23 5.188 4.98 5.188z"
-                                    id="m"
-                                />
-                                <path
-                                    d="M11.819.351c5.178 1.402 8.28 6.57 6.95 11.538L0 6.816C1.347 1.847 6.635-1.045 11.819.35z"
-                                    id="n"
-                                />
-                                <path
-                                    d="M5.106 4.897A5.007 5.007 0 0 0 10.218 0H0a5.001 5.001 0 0 0 5.106 4.897z"
-                                    id="o"
-                                />
-                                <path
-                                    d="M0 0l22.258 18.498L44.516 0H0z"
-                                    id="p"
-                                />
-                                <path
-                                    d="M2.445 0A2.396 2.396 0 0 0 0 2.342h4.885a2.39 2.39 0 0 0-2.44-2.34z"
-                                    id="q"
-                                />
-                                <path
-                                    d="M2.462 0A2.396 2.396 0 0 0 0 2.343h4.885A2.39 2.39 0 0 0 2.462 0z"
-                                    id="r"
-                                />
-                                <path
-                                    d="M0 0h6.227v3.091A3.047 3.047 0 0 1 3.18 6.14h-.127A3.047 3.047 0 0 1 .006 3.09V0H0z"
-                                    id="s"
-                                />
-                                <path
-                                    d="M.006 0H6.22v3.091A3.047 3.047 0 0 1 3.174 6.14h-.127A3.047 3.047 0 0 1 0 3.09V0h.006z"
-                                    id="t"
-                                />
-                                <path
-                                    d="M31.328 0H0v1.474h31.328V0z"
-                                    id="u"
-                                />
-                                <path
-                                    d="M15.422 1.503A17.422 17.422 0 0 0 8.113.002 17.4 17.4 0 0 0 .805 1.503a1.457 1.457 0 0 0 .629 2.76h2.572V4.06a1.579 1.579 0 0 1 2.126-1.468 6.194 6.194 0 0 0 3.963 0 1.574 1.574 0 0 1 2.12 1.468v.204h2.572a1.463 1.463 0 0 0 .635-2.76z"
-                                    id="v"
-                                />
-                                <path
-                                    d="M6.072.104a6.194 6.194 0 0 1-3.963 0A1.579 1.579 0 0 0 0 1.573v.204h8.209v-.204A1.573 1.573 0 0 0 6.072.104z"
-                                    id="w"
+                                <style
+                                    dangerouslySetInnerHTML={
+                                        Object {
+                                            "__html": ".cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}",
+                                          }
+                                    }
                                 />
+                                <radialGradient
+                                    cx="208.79"
+                                    cy="99.06"
+                                    gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)"
+                                    gradientUnits="userSpaceOnUse"
+                                    id="radial-gradient"
+                                    r="57.13"
+                                >
+                                    <stop
+                                        offset="0.05"
+                                        stopColor="#436275"
+                                    />
+                                    <stop
+                                        offset="0.1"
+                                        stopColor="#415f72"
+                                    />
+                                    <stop
+                                        offset="0.13"
+                                        stopColor="#3a5769"
+                                    />
+                                    <stop
+                                        offset="0.16"
+                                        stopColor="#2e4959"
+                                    />
+                                    <stop
+                                        offset="0.19"
+                                        stopColor="#1d3543"
+                                    />
+                                    <stop
+                                        offset="0.19"
+                                        stopColor="#1b3240"
+                                    />
+                                    <stop
+                                        offset="0.26"
+                                        stopColor="#1e3644"
+                                    />
+                                    <stop
+                                        offset="0.32"
+                                        stopColor="#274150"
+                                    />
+                                    <stop
+                                        offset="0.39"
+                                        stopColor="#365364"
+                                    />
+                                    <stop
+                                        offset="0.43"
+                                        stopColor="#436275"
+                                    />
+                                    <stop
+                                        offset="0.49"
+                                        stopColor="#3f5d6f"
+                                    />
+                                    <stop
+                                        offset="0.56"
+                                        stopColor="#324e5f"
+                                    />
+                                    <stop
+                                        offset="0.65"
+                                        stopColor="#1e3644"
+                                    />
+                                    <stop
+                                        offset="0.66"
+                                        stopColor="#1b3240"
+                                    />
+                                    <stop
+                                        offset="0.85"
+                                        stopColor="#1b3240"
+                                    />
+                                    <stop
+                                        offset="0.9"
+                                        stopColor="#2c4656"
+                                    />
+                                    <stop
+                                        offset="0.95"
+                                        stopColor="#436275"
+                                    />
+                                </radialGradient>
+                                <radialGradient
+                                    cx="59.15"
+                                    cy="56.86"
+                                    gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)"
+                                    gradientUnits="userSpaceOnUse"
+                                    id="radial-gradient-2"
+                                    r="46.01"
+                                >
+                                    <stop
+                                        offset={0}
+                                        stopColor="#436275"
+                                    />
+                                    <stop
+                                        offset="0.1"
+                                        stopColor="#426073"
+                                    />
+                                    <stop
+                                        offset="0.13"
+                                        stopColor="#3c5a6c"
+                                    />
+                                    <stop
+                                        offset="0.16"
+                                        stopColor="#344f61"
+                                    />
+                                    <stop
+                                        offset="0.18"
+                                        stopColor="#274050"
+                                    />
+                                    <stop
+                                        offset="0.19"
+                                        stopColor="#1b3240"
+                                    />
+                                    <stop
+                                        offset="0.26"
+                                        stopColor="#1e3644"
+                                    />
+                                    <stop
+                                        offset="0.32"
+                                        stopColor="#274150"
+                                    />
+                                    <stop
+                                        offset="0.39"
+                                        stopColor="#365364"
+                                    />
+                                    <stop
+                                        offset="0.43"
+                                        stopColor="#436275"
+                                    />
+                                    <stop
+                                        offset="0.49"
+                                        stopColor="#3f5d6f"
+                                    />
+                                    <stop
+                                        offset="0.56"
+                                        stopColor="#324e5f"
+                                    />
+                                    <stop
+                                        offset="0.65"
+                                        stopColor="#1e3644"
+                                    />
+                                    <stop
+                                        offset="0.66"
+                                        stopColor="#1b3240"
+                                    />
+                                    <stop
+                                        offset="0.85"
+                                        stopColor="#1b3240"
+                                    />
+                                    <stop
+                                        offset="0.92"
+                                        stopColor="#2c4656"
+                                    />
+                                    <stop
+                                        offset={1}
+                                        stopColor="#436275"
+                                    />
+                                </radialGradient>
+                                <radialGradient
+                                    cx="-521.06"
+                                    cy="366.16"
+                                    gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)"
+                                    gradientUnits="userSpaceOnUse"
+                                    id="radial-gradient-3"
+                                    r="32.44"
+                                >
+                                    <stop
+                                        offset={0}
+                                        stopColor="#436275"
+                                    />
+                                    <stop
+                                        offset="0.02"
+                                        stopColor="#436275"
+                                        stopOpacity="0.97"
+                                    />
+                                    <stop
+                                        offset="0.34"
+                                        stopColor="#436275"
+                                        stopOpacity="0.55"
+                                    />
+                                    <stop
+                                        offset="0.62"
+                                        stopColor="#436275"
+                                        stopOpacity="0.25"
+                                    />
+                                    <stop
+                                        offset="0.85"
+                                        stopColor="#436275"
+                                        stopOpacity="0.07"
+                                    />
+                                    <stop
+                                        offset={1}
+                                        stopColor="#436275"
+                                        stopOpacity={0}
+                                    />
+                                </radialGradient>
+                                <radialGradient
+                                    cx="-136.43"
+                                    cy="140.9"
+                                    gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)"
+                                    gradientUnits="userSpaceOnUse"
+                                    id="radial-gradient-4"
+                                    r="54.82"
+                                >
+                                    <stop
+                                        offset={0}
+                                        stopColor="#436275"
+                                    />
+                                    <stop
+                                        offset="0.58"
+                                        stopColor="#436275"
+                                        stopOpacity="0.4"
+                                    />
+                                    <stop
+                                        offset={1}
+                                        stopColor="#436275"
+                                        stopOpacity={0}
+                                    />
+                                </radialGradient>
                             </defs>
+                            <title>
+                                Empty-state-illustration
+                            </title>
+                            <g
+                                data-name="Layer 2"
+                                id="Layer_2"
+                            >
+                                <g
+                                    data-name="Layer 1"
+                                    id="Layer_1-2"
+                                >
+                                    <g
+                                        className="cls-1"
+                                    >
+                                        <path
+                                            className="cls-2"
+                                            d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"
+                                        />
+                                    </g>
+                                    <g
+                                        className="cls-1"
+                                    >
+                                        <path
+                                            className="cls-3"
+                                            d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"
+                                        />
+                                    </g>
+                                    <circle
+                                        className="cls-4"
+                                        cx="23.53"
+                                        cy="73.77"
+                                        r="11.93"
+                                    />
+                                    <circle
+                                        className="cls-5"
+                                        cx="23.53"
+                                        cy="73.77"
+                                        r="11.93"
+                                    />
+                                    <circle
+                                        className="cls-6"
+                                        cx="61.95"
+                                        cy="55.24"
+                                        r="34.25"
+                                    />
+                                    <circle
+                                        className="cls-7"
+                                        cx="61.95"
+                                        cy="55.24"
+                                        r="34.25"
+                                    />
+                                </g>
+                            </g>
                         </svg>
                     </div>
                     <h3
@@ -2812,227 +2998,289 @@ Array [
                         className="c26"
                     >
                         <svg
-                            height={60}
-                            viewBox="0 0 79 60"
-                            width={79}
+                            height={109}
+                            viewBox="0 0 119.34 109.47"
+                            width={119}
                             xmlns="http://www.w3.org/2000/svg"
                             xmlnsXlink="http://www.w3.org/1999/xlink"
                         >
-                            <title>
-                                Guilty_Salamander
-                            </title>
-                            <desc>
-                                Created using Figma
-                            </desc>
-                            <use
-                                fill="#FAA427"
-                                transform="translate(23.8 22)"
-                                xlinkHref="#a"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(27.3 25.5)"
-                                xlinkHref="#b"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(4.8 32.1)"
-                                xlinkHref="#c"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(12.2 31.8)"
-                                xlinkHref="#d"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(54.4 31.9)"
-                                xlinkHref="#e"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(54.4 32)"
-                                xlinkHref="#f"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(15.8 26.8)"
-                                xlinkHref="#g"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(5)"
-                                xlinkHref="#h"
-                            />
-                            <use
-                                fill="#FAFBFC"
-                                transform="rotate(-15.13 41.037 5.45)"
-                                xlinkHref="#i"
-                            />
-                            <use
-                                fill="#412B13"
-                                transform="rotate(-15.13 67.273 -24.78)"
-                                xlinkHref="#j"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(2.2 8)"
-                                xlinkHref="#k"
-                            />
-                            <use
-                                fill="#FAFBFC"
-                                transform="rotate(-74.87 40.46 -20.511)"
-                                xlinkHref="#l"
-                            />
-                            <use
-                                fill="#412B13"
-                                transform="rotate(-74.87 41.364 -22.098)"
-                                xlinkHref="#m"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(52.1 8)"
-                                xlinkHref="#n"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(31.5 34.3)"
-                                xlinkHref="#o"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(14.3)"
-                                xlinkHref="#p"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(30.9 18.9)"
-                                xlinkHref="#q"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(37.6 18.9)"
-                                xlinkHref="#r"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(27.4 53.9)"
-                                xlinkHref="#s"
-                            />
-                            <use
-                                fill="#FAA427"
-                                transform="translate(39.1 53.9)"
-                                xlinkHref="#t"
-                            />
-                            <use
-                                fill="#F3722C"
-                                transform="translate(27.4 53.9)"
-                                xlinkHref="#u"
-                            />
-                            <use
-                                fill="#342013"
-                                transform="translate(28.6 26.2)"
-                                xlinkHref="#v"
-                            />
-                            <use
-                                fill="#FFF"
-                                transform="translate(32.6 28.7)"
-                                xlinkHref="#w"
-                            />
                             <defs>
-                                <path
-                                    d="M54.921 36.053L0 0l1.413 24.908c.359 6.249 5.752 11.145 12.283 11.145H54.92z"
-                                    id="a"
-                                />
-                                <path
-                                    d="M42.12 32.526L13.47 0 0 23.737c.282 4.924 4.527 8.778 9.672 8.778l32.448.01z"
-                                    id="b"
-                                />
-                                <path
-                                    d="M3.326 17.01a3.312 3.312 0 0 1-1.545-6.25C6.059 8.52 8.482 2.226 8.52 2.165a3.313 3.313 0 0 1 6.216 2.296c-.133.354-3.312 8.717-9.86 12.145-.475.26-1.008.4-1.55.403z"
-                                    id="c"
-                                />
-                                <path
-                                    d="M5.079 9.205A28.654 28.654 0 0 0 7.287 4.75a3.312 3.312 0 1 0-6.183-2.296C.781 3.234.412 3.996 0 4.734c1.33 1.181 3.544 3.152 5.079 4.471z"
-                                    id="d"
-                                />
-                                <path
-                                    d="M11.682 17.27a3.312 3.312 0 0 0 1.545-6.248C8.95 8.78 6.526 2.487 6.504 2.427A3.312 3.312 0 1 0 .316 4.723c.126.353 3.312 8.717 9.853 12.145.464.254.983.393 1.513.403z"
-                                    id="e"
-                                />
-                                <path
-                                    d="M2.45 9.01A28.33 28.33 0 0 1 .242 4.553a3.312 3.312 0 1 1 6.21-2.296c.326.78.695 1.54 1.104 2.28C6.187 5.719 3.973 7.69 2.45 9.009z"
-                                    id="f"
-                                />
-                                <path
-                                    d="M35.159 0H6.542A6.542 6.542 0 0 0 0 6.542v14.016a6.542 6.542 0 0 0 6.542 6.541h28.617a6.541 6.541 0 0 0 6.541-6.541V6.542A6.542 6.542 0 0 0 35.16 0z"
-                                    id="g"
-                                />
-                                <path
-                                    d="M54.254 0H9.026A9.026 9.026 0 0 0 0 9.026v17.207a9.026 9.026 0 0 0 9.026 9.025h45.228a9.026 9.026 0 0 0 9.025-9.026V9.027A9.026 9.026 0 0 0 54.253 0z"
-                                    id="h"
-                                />
-                                <path
-                                    d="M9.721 18.637c5.37 0 9.721-4.172 9.721-9.319C19.442 4.172 15.09 0 9.722 0 4.351 0 0 4.172 0 9.318c0 5.147 4.352 9.319 9.721 9.319z"
-                                    id="i"
-                                />
-                                <path
-                                    d="M5.19 9.959c2.865 0 5.188-2.23 5.188-4.98C10.378 2.23 8.055 0 5.19 0S0 2.23 0 4.98c0 2.75 2.323 4.979 5.19 4.979z"
-                                    id="j"
-                                />
-                                <path
-                                    d="M7.262.351C2.078 1.753-1.018 6.921.306 11.89l18.77-5.073C17.705 1.847 12.411-1.045 7.261.35z"
-                                    id="k"
-                                />
-                                <path
-                                    d="M9.318 19.442c5.147 0 9.319-4.352 9.319-9.72C18.637 4.351 14.465 0 9.318 0 4.172 0 0 4.352 0 9.721c0 5.37 4.172 9.721 9.318 9.721z"
-                                    id="l"
-                                />
-                                <path
-                                    d="M4.98 10.378c2.75 0 4.979-2.323 4.979-5.189S7.729 0 4.979 0C2.23 0 0 2.323 0 5.19c0 2.865 2.23 5.188 4.98 5.188z"
-                                    id="m"
-                                />
-                                <path
-                                    d="M11.819.351c5.178 1.402 8.28 6.57 6.95 11.538L0 6.816C1.347 1.847 6.635-1.045 11.819.35z"
-                                    id="n"
-                                />
-                                <path
-                                    d="M5.106 4.897A5.007 5.007 0 0 0 10.218 0H0a5.001 5.001 0 0 0 5.106 4.897z"
-                                    id="o"
-                                />
-                                <path
-                                    d="M0 0l22.258 18.498L44.516 0H0z"
-                                    id="p"
-                                />
-                                <path
-                                    d="M2.445 0A2.396 2.396 0 0 0 0 2.342h4.885a2.39 2.39 0 0 0-2.44-2.34z"
-                                    id="q"
-                                />
-                                <path
-                                    d="M2.462 0A2.396 2.396 0 0 0 0 2.343h4.885A2.39 2.39 0 0 0 2.462 0z"
-                                    id="r"
-                                />
-                                <path
-                                    d="M0 0h6.227v3.091A3.047 3.047 0 0 1 3.18 6.14h-.127A3.047 3.047 0 0 1 .006 3.09V0H0z"
-                                    id="s"
-                                />
-                                <path
-                                    d="M.006 0H6.22v3.091A3.047 3.047 0 0 1 3.174 6.14h-.127A3.047 3.047 0 0 1 0 3.09V0h.006z"
-                                    id="t"
-                                />
-                                <path
-                                    d="M31.328 0H0v1.474h31.328V0z"
-                                    id="u"
-                                />
-                                <path
-                                    d="M15.422 1.503A17.422 17.422 0 0 0 8.113.002 17.4 17.4 0 0 0 .805 1.503a1.457 1.457 0 0 0 .629 2.76h2.572V4.06a1.579 1.579 0 0 1 2.126-1.468 6.194 6.194 0 0 0 3.963 0 1.574 1.574 0 0 1 2.12 1.468v.204h2.572a1.463 1.463 0 0 0 .635-2.76z"
-                                    id="v"
-                                />
-                                <path
-                                    d="M6.072.104a6.194 6.194 0 0 1-3.963 0A1.579 1.579 0 0 0 0 1.573v.204h8.209v-.204A1.573 1.573 0 0 0 6.072.104z"
-                                    id="w"
+                                <style
+                                    dangerouslySetInnerHTML={
+                                        Object {
+                                            "__html": ".cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}",
+                                          }
+                                    }
                                 />
+                                <radialGradient
+                                    cx="208.79"
+                                    cy="99.06"
+                                    gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)"
+                                    gradientUnits="userSpaceOnUse"
+                                    id="radial-gradient"
+                                    r="57.13"
+                                >
+                                    <stop
+                                        offset="0.05"
+                                        stopColor="#436275"
+                                    />
+                                    <stop
+                                        offset="0.1"
+                                        stopColor="#415f72"
+                                    />
+                                    <stop
+                                        offset="0.13"
+                                        stopColor="#3a5769"
+                                    />
+                                    <stop
+                                        offset="0.16"
+                                        stopColor="#2e4959"
+                                    />
+                                    <stop
+                                        offset="0.19"
+                                        stopColor="#1d3543"
+                                    />
+                                    <stop
+                                        offset="0.19"
+                                        stopColor="#1b3240"
+                                    />
+                                    <stop
+                                        offset="0.26"
+                                        stopColor="#1e3644"
+                                    />
+                                    <stop
+                                        offset="0.32"
+                                        stopColor="#274150"
+                                    />
+                                    <stop
+                                        offset="0.39"
+                                        stopColor="#365364"
+                                    />
+                                    <stop
+                                        offset="0.43"
+                                        stopColor="#436275"
+                                    />
+                                    <stop
+                                        offset="0.49"
+                                        stopColor="#3f5d6f"
+                                    />
+                                    <stop
+                                        offset="0.56"
+                                        stopColor="#324e5f"
+                                    />
+                                    <stop
+                                        offset="0.65"
+                                        stopColor="#1e3644"
+                                    />
+                                    <stop
+                                        offset="0.66"
+                                        stopColor="#1b3240"
+                                    />
+                                    <stop
+                                        offset="0.85"
+                                        stopColor="#1b3240"
+                                    />
+                                    <stop
+                                        offset="0.9"
+                                        stopColor="#2c4656"
+                                    />
+                                    <stop
+                                        offset="0.95"
+                                        stopColor="#436275"
+                                    />
+                                </radialGradient>
+                                <radialGradient
+                                    cx="59.15"
+                                    cy="56.86"
+                                    gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)"
+                                    gradientUnits="userSpaceOnUse"
+                                    id="radial-gradient-2"
+                                    r="46.01"
+                                >
+                                    <stop
+                                        offset={0}
+                                        stopColor="#436275"
+                                    />
+                                    <stop
+                                        offset="0.1"
+                                        stopColor="#426073"
+                                    />
+                                    <stop
+                                        offset="0.13"
+                                        stopColor="#3c5a6c"
+                                    />
+                                    <stop
+                                        offset="0.16"
+                                        stopColor="#344f61"
+                                    />
+                                    <stop
+                                        offset="0.18"
+                                        stopColor="#274050"
+                                    />
+                                    <stop
+                                        offset="0.19"
+                                        stopColor="#1b3240"
+                                    />
+                                    <stop
+                                        offset="0.26"
+                                        stopColor="#1e3644"
+                                    />
+                                    <stop
+                                        offset="0.32"
+                                        stopColor="#274150"
+                                    />
+                                    <stop
+                                        offset="0.39"
+                                        stopColor="#365364"
+                                    />
+                                    <stop
+                                        offset="0.43"
+                                        stopColor="#436275"
+                                    />
+                                    <stop
+                                        offset="0.49"
+                                        stopColor="#3f5d6f"
+                                    />
+                                    <stop
+                                        offset="0.56"
+                                        stopColor="#324e5f"
+                                    />
+                                    <stop
+                                        offset="0.65"
+                                        stopColor="#1e3644"
+                                    />
+                                    <stop
+                                        offset="0.66"
+                                        stopColor="#1b3240"
+                                    />
+                                    <stop
+                                        offset="0.85"
+                                        stopColor="#1b3240"
+                                    />
+                                    <stop
+                                        offset="0.92"
+                                        stopColor="#2c4656"
+                                    />
+                                    <stop
+                                        offset={1}
+                                        stopColor="#436275"
+                                    />
+                                </radialGradient>
+                                <radialGradient
+                                    cx="-521.06"
+                                    cy="366.16"
+                                    gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)"
+                                    gradientUnits="userSpaceOnUse"
+                                    id="radial-gradient-3"
+                                    r="32.44"
+                                >
+                                    <stop
+                                        offset={0}
+                                        stopColor="#436275"
+                                    />
+                                    <stop
+                                        offset="0.02"
+                                        stopColor="#436275"
+                                        stopOpacity="0.97"
+                                    />
+                                    <stop
+                                        offset="0.34"
+                                        stopColor="#436275"
+                                        stopOpacity="0.55"
+                                    />
+                                    <stop
+                                        offset="0.62"
+                                        stopColor="#436275"
+                                        stopOpacity="0.25"
+                                    />
+                                    <stop
+                                        offset="0.85"
+                                        stopColor="#436275"
+                                        stopOpacity="0.07"
+                                    />
+                                    <stop
+                                        offset={1}
+                                        stopColor="#436275"
+                                        stopOpacity={0}
+                                    />
+                                </radialGradient>
+                                <radialGradient
+                                    cx="-136.43"
+                                    cy="140.9"
+                                    gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)"
+                                    gradientUnits="userSpaceOnUse"
+                                    id="radial-gradient-4"
+                                    r="54.82"
+                                >
+                                    <stop
+                                        offset={0}
+                                        stopColor="#436275"
+                                    />
+                                    <stop
+                                        offset="0.58"
+                                        stopColor="#436275"
+                                        stopOpacity="0.4"
+                                    />
+                                    <stop
+                                        offset={1}
+                                        stopColor="#436275"
+                                        stopOpacity={0}
+                                    />
+                                </radialGradient>
                             </defs>
+                            <title>
+                                Empty-state-illustration
+                            </title>
+                            <g
+                                data-name="Layer 2"
+                                id="Layer_2"
+                            >
+                                <g
+                                    data-name="Layer 1"
+                                    id="Layer_1-2"
+                                >
+                                    <g
+                                        className="cls-1"
+                                    >
+                                        <path
+                                            className="cls-2"
+                                            d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"
+                                        />
+                                    </g>
+                                    <g
+                                        className="cls-1"
+                                    >
+                                        <path
+                                            className="cls-3"
+                                            d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"
+                                        />
+                                    </g>
+                                    <circle
+                                        className="cls-4"
+                                        cx="23.53"
+                                        cy="73.77"
+                                        r="11.93"
+                                    />
+                                    <circle
+                                        className="cls-5"
+                                        cx="23.53"
+                                        cy="73.77"
+                                        r="11.93"
+                                    />
+                                    <circle
+                                        className="cls-6"
+                                        cx="61.95"
+                                        cy="55.24"
+                                        r="34.25"
+                                    />
+                                    <circle
+                                        className="cls-7"
+                                        cx="61.95"
+                                        cy="55.24"
+                                        r="34.25"
+                                    />
+                                </g>
+                            </g>
                         </svg>
                     </div>
                     <h3
@@ -4047,227 +4295,289 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
             className="c30"
           >
             <svg
-              height={60}
-              viewBox="0 0 79 60"
-              width={79}
+              height={109}
+              viewBox="0 0 119.34 109.47"
+              width={119}
               xmlns="http://www.w3.org/2000/svg"
               xmlnsXlink="http://www.w3.org/1999/xlink"
             >
-              <title>
-                Guilty_Salamander
-              </title>
-              <desc>
-                Created using Figma
-              </desc>
-              <use
-                fill="#FAA427"
-                transform="translate(23.8 22)"
-                xlinkHref="#a"
-              />
-              <use
-                fill="#F3722C"
-                transform="translate(27.3 25.5)"
-                xlinkHref="#b"
-              />
-              <use
-                fill="#FAA427"
-                transform="translate(4.8 32.1)"
-                xlinkHref="#c"
-              />
-              <use
-                fill="#F3722C"
-                transform="translate(12.2 31.8)"
-                xlinkHref="#d"
-              />
-              <use
-                fill="#FAA427"
-                transform="translate(54.4 31.9)"
-                xlinkHref="#e"
-              />
-              <use
-                fill="#F3722C"
-                transform="translate(54.4 32)"
-                xlinkHref="#f"
-              />
-              <use
-                fill="#FAA427"
-                transform="translate(15.8 26.8)"
-                xlinkHref="#g"
-              />
-              <use
-                fill="#FAA427"
-                transform="translate(5)"
-                xlinkHref="#h"
-              />
-              <use
-                fill="#FAFBFC"
-                transform="rotate(-15.13 41.037 5.45)"
-                xlinkHref="#i"
-              />
-              <use
-                fill="#412B13"
-                transform="rotate(-15.13 67.273 -24.78)"
-                xlinkHref="#j"
-              />
-              <use
-                fill="#F3722C"
-                transform="translate(2.2 8)"
-                xlinkHref="#k"
-              />
-              <use
-                fill="#FAFBFC"
-                transform="rotate(-74.87 40.46 -20.511)"
-                xlinkHref="#l"
-              />
-              <use
-                fill="#412B13"
-                transform="rotate(-74.87 41.364 -22.098)"
-                xlinkHref="#m"
-              />
-              <use
-                fill="#F3722C"
-                transform="translate(52.1 8)"
-                xlinkHref="#n"
-              />
-              <use
-                fill="#F3722C"
-                transform="translate(31.5 34.3)"
-                xlinkHref="#o"
-              />
-              <use
-                fill="#F3722C"
-                transform="translate(14.3)"
-                xlinkHref="#p"
-              />
-              <use
-                fill="#F3722C"
-                transform="translate(30.9 18.9)"
-                xlinkHref="#q"
-              />
-              <use
-                fill="#F3722C"
-                transform="translate(37.6 18.9)"
-                xlinkHref="#r"
-              />
-              <use
-                fill="#FAA427"
-                transform="translate(27.4 53.9)"
-                xlinkHref="#s"
-              />
-              <use
-                fill="#FAA427"
-                transform="translate(39.1 53.9)"
-                xlinkHref="#t"
-              />
-              <use
-                fill="#F3722C"
-                transform="translate(27.4 53.9)"
-                xlinkHref="#u"
-              />
-              <use
-                fill="#342013"
-                transform="translate(28.6 26.2)"
-                xlinkHref="#v"
-              />
-              <use
-                fill="#FFF"
-                transform="translate(32.6 28.7)"
-                xlinkHref="#w"
-              />
               <defs>
-                <path
-                  d="M54.921 36.053L0 0l1.413 24.908c.359 6.249 5.752 11.145 12.283 11.145H54.92z"
-                  id="a"
-                />
-                <path
-                  d="M42.12 32.526L13.47 0 0 23.737c.282 4.924 4.527 8.778 9.672 8.778l32.448.01z"
-                  id="b"
-                />
-                <path
-                  d="M3.326 17.01a3.312 3.312 0 0 1-1.545-6.25C6.059 8.52 8.482 2.226 8.52 2.165a3.313 3.313 0 0 1 6.216 2.296c-.133.354-3.312 8.717-9.86 12.145-.475.26-1.008.4-1.55.403z"
-                  id="c"
-                />
-                <path
-                  d="M5.079 9.205A28.654 28.654 0 0 0 7.287 4.75a3.312 3.312 0 1 0-6.183-2.296C.781 3.234.412 3.996 0 4.734c1.33 1.181 3.544 3.152 5.079 4.471z"
-                  id="d"
-                />
-                <path
-                  d="M11.682 17.27a3.312 3.312 0 0 0 1.545-6.248C8.95 8.78 6.526 2.487 6.504 2.427A3.312 3.312 0 1 0 .316 4.723c.126.353 3.312 8.717 9.853 12.145.464.254.983.393 1.513.403z"
-                  id="e"
-                />
-                <path
-                  d="M2.45 9.01A28.33 28.33 0 0 1 .242 4.553a3.312 3.312 0 1 1 6.21-2.296c.326.78.695 1.54 1.104 2.28C6.187 5.719 3.973 7.69 2.45 9.009z"
-                  id="f"
-                />
-                <path
-                  d="M35.159 0H6.542A6.542 6.542 0 0 0 0 6.542v14.016a6.542 6.542 0 0 0 6.542 6.541h28.617a6.541 6.541 0 0 0 6.541-6.541V6.542A6.542 6.542 0 0 0 35.16 0z"
-                  id="g"
-                />
-                <path
-                  d="M54.254 0H9.026A9.026 9.026 0 0 0 0 9.026v17.207a9.026 9.026 0 0 0 9.026 9.025h45.228a9.026 9.026 0 0 0 9.025-9.026V9.027A9.026 9.026 0 0 0 54.253 0z"
-                  id="h"
-                />
-                <path
-                  d="M9.721 18.637c5.37 0 9.721-4.172 9.721-9.319C19.442 4.172 15.09 0 9.722 0 4.351 0 0 4.172 0 9.318c0 5.147 4.352 9.319 9.721 9.319z"
-                  id="i"
-                />
-                <path
-                  d="M5.19 9.959c2.865 0 5.188-2.23 5.188-4.98C10.378 2.23 8.055 0 5.19 0S0 2.23 0 4.98c0 2.75 2.323 4.979 5.19 4.979z"
-                  id="j"
-                />
-                <path
-                  d="M7.262.351C2.078 1.753-1.018 6.921.306 11.89l18.77-5.073C17.705 1.847 12.411-1.045 7.261.35z"
-                  id="k"
-                />
-                <path
-                  d="M9.318 19.442c5.147 0 9.319-4.352 9.319-9.72C18.637 4.351 14.465 0 9.318 0 4.172 0 0 4.352 0 9.721c0 5.37 4.172 9.721 9.318 9.721z"
-                  id="l"
-                />
-                <path
-                  d="M4.98 10.378c2.75 0 4.979-2.323 4.979-5.189S7.729 0 4.979 0C2.23 0 0 2.323 0 5.19c0 2.865 2.23 5.188 4.98 5.188z"
-                  id="m"
-                />
-                <path
-                  d="M11.819.351c5.178 1.402 8.28 6.57 6.95 11.538L0 6.816C1.347 1.847 6.635-1.045 11.819.35z"
-                  id="n"
-                />
-                <path
-                  d="M5.106 4.897A5.007 5.007 0 0 0 10.218 0H0a5.001 5.001 0 0 0 5.106 4.897z"
-                  id="o"
-                />
-                <path
-                  d="M0 0l22.258 18.498L44.516 0H0z"
-                  id="p"
-                />
-                <path
-                  d="M2.445 0A2.396 2.396 0 0 0 0 2.342h4.885a2.39 2.39 0 0 0-2.44-2.34z"
-                  id="q"
-                />
-                <path
-                  d="M2.462 0A2.396 2.396 0 0 0 0 2.343h4.885A2.39 2.39 0 0 0 2.462 0z"
-                  id="r"
-                />
-                <path
-                  d="M0 0h6.227v3.091A3.047 3.047 0 0 1 3.18 6.14h-.127A3.047 3.047 0 0 1 .006 3.09V0H0z"
-                  id="s"
-                />
-                <path
-                  d="M.006 0H6.22v3.091A3.047 3.047 0 0 1 3.174 6.14h-.127A3.047 3.047 0 0 1 0 3.09V0h.006z"
-                  id="t"
-                />
-                <path
-                  d="M31.328 0H0v1.474h31.328V0z"
-                  id="u"
-                />
-                <path
-                  d="M15.422 1.503A17.422 17.422 0 0 0 8.113.002 17.4 17.4 0 0 0 .805 1.503a1.457 1.457 0 0 0 .629 2.76h2.572V4.06a1.579 1.579 0 0 1 2.126-1.468 6.194 6.194 0 0 0 3.963 0 1.574 1.574 0 0 1 2.12 1.468v.204h2.572a1.463 1.463 0 0 0 .635-2.76z"
-                  id="v"
-                />
-                <path
-                  d="M6.072.104a6.194 6.194 0 0 1-3.963 0A1.579 1.579 0 0 0 0 1.573v.204h8.209v-.204A1.573 1.573 0 0 0 6.072.104z"
-                  id="w"
+                <style
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": ".cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}",
+                    }
+                  }
                 />
+                <radialGradient
+                  cx="208.79"
+                  cy="99.06"
+                  gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)"
+                  gradientUnits="userSpaceOnUse"
+                  id="radial-gradient"
+                  r="57.13"
+                >
+                  <stop
+                    offset="0.05"
+                    stopColor="#436275"
+                  />
+                  <stop
+                    offset="0.1"
+                    stopColor="#415f72"
+                  />
+                  <stop
+                    offset="0.13"
+                    stopColor="#3a5769"
+                  />
+                  <stop
+                    offset="0.16"
+                    stopColor="#2e4959"
+                  />
+                  <stop
+                    offset="0.19"
+                    stopColor="#1d3543"
+                  />
+                  <stop
+                    offset="0.19"
+                    stopColor="#1b3240"
+                  />
+                  <stop
+                    offset="0.26"
+                    stopColor="#1e3644"
+                  />
+                  <stop
+                    offset="0.32"
+                    stopColor="#274150"
+                  />
+                  <stop
+                    offset="0.39"
+                    stopColor="#365364"
+                  />
+                  <stop
+                    offset="0.43"
+                    stopColor="#436275"
+                  />
+                  <stop
+                    offset="0.49"
+                    stopColor="#3f5d6f"
+                  />
+                  <stop
+                    offset="0.56"
+                    stopColor="#324e5f"
+                  />
+                  <stop
+                    offset="0.65"
+                    stopColor="#1e3644"
+                  />
+                  <stop
+                    offset="0.66"
+                    stopColor="#1b3240"
+                  />
+                  <stop
+                    offset="0.85"
+                    stopColor="#1b3240"
+                  />
+                  <stop
+                    offset="0.9"
+                    stopColor="#2c4656"
+                  />
+                  <stop
+                    offset="0.95"
+                    stopColor="#436275"
+                  />
+                </radialGradient>
+                <radialGradient
+                  cx="59.15"
+                  cy="56.86"
+                  gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)"
+                  gradientUnits="userSpaceOnUse"
+                  id="radial-gradient-2"
+                  r="46.01"
+                >
+                  <stop
+                    offset={0}
+                    stopColor="#436275"
+                  />
+                  <stop
+                    offset="0.1"
+                    stopColor="#426073"
+                  />
+                  <stop
+                    offset="0.13"
+                    stopColor="#3c5a6c"
+                  />
+                  <stop
+                    offset="0.16"
+                    stopColor="#344f61"
+                  />
+                  <stop
+                    offset="0.18"
+                    stopColor="#274050"
+                  />
+                  <stop
+                    offset="0.19"
+                    stopColor="#1b3240"
+                  />
+                  <stop
+                    offset="0.26"
+                    stopColor="#1e3644"
+                  />
+                  <stop
+                    offset="0.32"
+                    stopColor="#274150"
+                  />
+                  <stop
+                    offset="0.39"
+                    stopColor="#365364"
+                  />
+                  <stop
+                    offset="0.43"
+                    stopColor="#436275"
+                  />
+                  <stop
+                    offset="0.49"
+                    stopColor="#3f5d6f"
+                  />
+                  <stop
+                    offset="0.56"
+                    stopColor="#324e5f"
+                  />
+                  <stop
+                    offset="0.65"
+                    stopColor="#1e3644"
+                  />
+                  <stop
+                    offset="0.66"
+                    stopColor="#1b3240"
+                  />
+                  <stop
+                    offset="0.85"
+                    stopColor="#1b3240"
+                  />
+                  <stop
+                    offset="0.92"
+                    stopColor="#2c4656"
+                  />
+                  <stop
+                    offset={1}
+                    stopColor="#436275"
+                  />
+                </radialGradient>
+                <radialGradient
+                  cx="-521.06"
+                  cy="366.16"
+                  gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)"
+                  gradientUnits="userSpaceOnUse"
+                  id="radial-gradient-3"
+                  r="32.44"
+                >
+                  <stop
+                    offset={0}
+                    stopColor="#436275"
+                  />
+                  <stop
+                    offset="0.02"
+                    stopColor="#436275"
+                    stopOpacity="0.97"
+                  />
+                  <stop
+                    offset="0.34"
+                    stopColor="#436275"
+                    stopOpacity="0.55"
+                  />
+                  <stop
+                    offset="0.62"
+                    stopColor="#436275"
+                    stopOpacity="0.25"
+                  />
+                  <stop
+                    offset="0.85"
+                    stopColor="#436275"
+                    stopOpacity="0.07"
+                  />
+                  <stop
+                    offset={1}
+                    stopColor="#436275"
+                    stopOpacity={0}
+                  />
+                </radialGradient>
+                <radialGradient
+                  cx="-136.43"
+                  cy="140.9"
+                  gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)"
+                  gradientUnits="userSpaceOnUse"
+                  id="radial-gradient-4"
+                  r="54.82"
+                >
+                  <stop
+                    offset={0}
+                    stopColor="#436275"
+                  />
+                  <stop
+                    offset="0.58"
+                    stopColor="#436275"
+                    stopOpacity="0.4"
+                  />
+                  <stop
+                    offset={1}
+                    stopColor="#436275"
+                    stopOpacity={0}
+                  />
+                </radialGradient>
               </defs>
+              <title>
+                Empty-state-illustration
+              </title>
+              <g
+                data-name="Layer 2"
+                id="Layer_2"
+              >
+                <g
+                  data-name="Layer 1"
+                  id="Layer_1-2"
+                >
+                  <g
+                    className="cls-1"
+                  >
+                    <path
+                      className="cls-2"
+                      d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"
+                    />
+                  </g>
+                  <g
+                    className="cls-1"
+                  >
+                    <path
+                      className="cls-3"
+                      d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"
+                    />
+                  </g>
+                  <circle
+                    className="cls-4"
+                    cx="23.53"
+                    cy="73.77"
+                    r="11.93"
+                  />
+                  <circle
+                    className="cls-5"
+                    cx="23.53"
+                    cy="73.77"
+                    r="11.93"
+                  />
+                  <circle
+                    className="cls-6"
+                    cx="61.95"
+                    cy="55.24"
+                    r="34.25"
+                  />
+                  <circle
+                    className="cls-7"
+                    cx="61.95"
+                    cy="55.24"
+                    r="34.25"
+                  />
+                </g>
+              </g>
             </svg>
           </div>
           <h3
@@ -4840,227 +5150,289 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
             className="c30"
           >
             <svg
-              height={60}
-              viewBox="0 0 79 60"
-              width={79}
+              height={109}
+              viewBox="0 0 119.34 109.47"
+              width={119}
               xmlns="http://www.w3.org/2000/svg"
               xmlnsXlink="http://www.w3.org/1999/xlink"
             >
-              <title>
-                Guilty_Salamander
-              </title>
-              <desc>
-                Created using Figma
-              </desc>
-              <use
-                fill="#FAA427"
-                transform="translate(23.8 22)"
-                xlinkHref="#a"
-              />
-              <use
-                fill="#F3722C"
-                transform="translate(27.3 25.5)"
-                xlinkHref="#b"
-              />
-              <use
-                fill="#FAA427"
-                transform="translate(4.8 32.1)"
-                xlinkHref="#c"
-              />
-              <use
-                fill="#F3722C"
-                transform="translate(12.2 31.8)"
-                xlinkHref="#d"
-              />
-              <use
-                fill="#FAA427"
-                transform="translate(54.4 31.9)"
-                xlinkHref="#e"
-              />
-              <use
-                fill="#F3722C"
-                transform="translate(54.4 32)"
-                xlinkHref="#f"
-              />
-              <use
-                fill="#FAA427"
-                transform="translate(15.8 26.8)"
-                xlinkHref="#g"
-              />
-              <use
-                fill="#FAA427"
-                transform="translate(5)"
-                xlinkHref="#h"
-              />
-              <use
-                fill="#FAFBFC"
-                transform="rotate(-15.13 41.037 5.45)"
-                xlinkHref="#i"
-              />
-              <use
-                fill="#412B13"
-                transform="rotate(-15.13 67.273 -24.78)"
-                xlinkHref="#j"
-              />
-              <use
-                fill="#F3722C"
-                transform="translate(2.2 8)"
-                xlinkHref="#k"
-              />
-              <use
-                fill="#FAFBFC"
-                transform="rotate(-74.87 40.46 -20.511)"
-                xlinkHref="#l"
-              />
-              <use
-                fill="#412B13"
-                transform="rotate(-74.87 41.364 -22.098)"
-                xlinkHref="#m"
-              />
-              <use
-                fill="#F3722C"
-                transform="translate(52.1 8)"
-                xlinkHref="#n"
-              />
-              <use
-                fill="#F3722C"
-                transform="translate(31.5 34.3)"
-                xlinkHref="#o"
-              />
-              <use
-                fill="#F3722C"
-                transform="translate(14.3)"
-                xlinkHref="#p"
-              />
-              <use
-                fill="#F3722C"
-                transform="translate(30.9 18.9)"
-                xlinkHref="#q"
-              />
-              <use
-                fill="#F3722C"
-                transform="translate(37.6 18.9)"
-                xlinkHref="#r"
-              />
-              <use
-                fill="#FAA427"
-                transform="translate(27.4 53.9)"
-                xlinkHref="#s"
-              />
-              <use
-                fill="#FAA427"
-                transform="translate(39.1 53.9)"
-                xlinkHref="#t"
-              />
-              <use
-                fill="#F3722C"
-                transform="translate(27.4 53.9)"
-                xlinkHref="#u"
-              />
-              <use
-                fill="#342013"
-                transform="translate(28.6 26.2)"
-                xlinkHref="#v"
-              />
-              <use
-                fill="#FFF"
-                transform="translate(32.6 28.7)"
-                xlinkHref="#w"
-              />
               <defs>
-                <path
-                  d="M54.921 36.053L0 0l1.413 24.908c.359 6.249 5.752 11.145 12.283 11.145H54.92z"
-                  id="a"
-                />
-                <path
-                  d="M42.12 32.526L13.47 0 0 23.737c.282 4.924 4.527 8.778 9.672 8.778l32.448.01z"
-                  id="b"
-                />
-                <path
-                  d="M3.326 17.01a3.312 3.312 0 0 1-1.545-6.25C6.059 8.52 8.482 2.226 8.52 2.165a3.313 3.313 0 0 1 6.216 2.296c-.133.354-3.312 8.717-9.86 12.145-.475.26-1.008.4-1.55.403z"
-                  id="c"
-                />
-                <path
-                  d="M5.079 9.205A28.654 28.654 0 0 0 7.287 4.75a3.312 3.312 0 1 0-6.183-2.296C.781 3.234.412 3.996 0 4.734c1.33 1.181 3.544 3.152 5.079 4.471z"
-                  id="d"
-                />
-                <path
-                  d="M11.682 17.27a3.312 3.312 0 0 0 1.545-6.248C8.95 8.78 6.526 2.487 6.504 2.427A3.312 3.312 0 1 0 .316 4.723c.126.353 3.312 8.717 9.853 12.145.464.254.983.393 1.513.403z"
-                  id="e"
-                />
-                <path
-                  d="M2.45 9.01A28.33 28.33 0 0 1 .242 4.553a3.312 3.312 0 1 1 6.21-2.296c.326.78.695 1.54 1.104 2.28C6.187 5.719 3.973 7.69 2.45 9.009z"
-                  id="f"
-                />
-                <path
-                  d="M35.159 0H6.542A6.542 6.542 0 0 0 0 6.542v14.016a6.542 6.542 0 0 0 6.542 6.541h28.617a6.541 6.541 0 0 0 6.541-6.541V6.542A6.542 6.542 0 0 0 35.16 0z"
-                  id="g"
-                />
-                <path
-                  d="M54.254 0H9.026A9.026 9.026 0 0 0 0 9.026v17.207a9.026 9.026 0 0 0 9.026 9.025h45.228a9.026 9.026 0 0 0 9.025-9.026V9.027A9.026 9.026 0 0 0 54.253 0z"
-                  id="h"
-                />
-                <path
-                  d="M9.721 18.637c5.37 0 9.721-4.172 9.721-9.319C19.442 4.172 15.09 0 9.722 0 4.351 0 0 4.172 0 9.318c0 5.147 4.352 9.319 9.721 9.319z"
-                  id="i"
-                />
-                <path
-                  d="M5.19 9.959c2.865 0 5.188-2.23 5.188-4.98C10.378 2.23 8.055 0 5.19 0S0 2.23 0 4.98c0 2.75 2.323 4.979 5.19 4.979z"
-                  id="j"
-                />
-                <path
-                  d="M7.262.351C2.078 1.753-1.018 6.921.306 11.89l18.77-5.073C17.705 1.847 12.411-1.045 7.261.35z"
-                  id="k"
-                />
-                <path
-                  d="M9.318 19.442c5.147 0 9.319-4.352 9.319-9.72C18.637 4.351 14.465 0 9.318 0 4.172 0 0 4.352 0 9.721c0 5.37 4.172 9.721 9.318 9.721z"
-                  id="l"
-                />
-                <path
-                  d="M4.98 10.378c2.75 0 4.979-2.323 4.979-5.189S7.729 0 4.979 0C2.23 0 0 2.323 0 5.19c0 2.865 2.23 5.188 4.98 5.188z"
-                  id="m"
-                />
-                <path
-                  d="M11.819.351c5.178 1.402 8.28 6.57 6.95 11.538L0 6.816C1.347 1.847 6.635-1.045 11.819.35z"
-                  id="n"
-                />
-                <path
-                  d="M5.106 4.897A5.007 5.007 0 0 0 10.218 0H0a5.001 5.001 0 0 0 5.106 4.897z"
-                  id="o"
-                />
-                <path
-                  d="M0 0l22.258 18.498L44.516 0H0z"
-                  id="p"
-                />
-                <path
-                  d="M2.445 0A2.396 2.396 0 0 0 0 2.342h4.885a2.39 2.39 0 0 0-2.44-2.34z"
-                  id="q"
-                />
-                <path
-                  d="M2.462 0A2.396 2.396 0 0 0 0 2.343h4.885A2.39 2.39 0 0 0 2.462 0z"
-                  id="r"
-                />
-                <path
-                  d="M0 0h6.227v3.091A3.047 3.047 0 0 1 3.18 6.14h-.127A3.047 3.047 0 0 1 .006 3.09V0H0z"
-                  id="s"
-                />
-                <path
-                  d="M.006 0H6.22v3.091A3.047 3.047 0 0 1 3.174 6.14h-.127A3.047 3.047 0 0 1 0 3.09V0h.006z"
-                  id="t"
-                />
-                <path
-                  d="M31.328 0H0v1.474h31.328V0z"
-                  id="u"
-                />
-                <path
-                  d="M15.422 1.503A17.422 17.422 0 0 0 8.113.002 17.4 17.4 0 0 0 .805 1.503a1.457 1.457 0 0 0 .629 2.76h2.572V4.06a1.579 1.579 0 0 1 2.126-1.468 6.194 6.194 0 0 0 3.963 0 1.574 1.574 0 0 1 2.12 1.468v.204h2.572a1.463 1.463 0 0 0 .635-2.76z"
-                  id="v"
-                />
-                <path
-                  d="M6.072.104a6.194 6.194 0 0 1-3.963 0A1.579 1.579 0 0 0 0 1.573v.204h8.209v-.204A1.573 1.573 0 0 0 6.072.104z"
-                  id="w"
+                <style
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": ".cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}",
+                    }
+                  }
                 />
+                <radialGradient
+                  cx="208.79"
+                  cy="99.06"
+                  gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)"
+                  gradientUnits="userSpaceOnUse"
+                  id="radial-gradient"
+                  r="57.13"
+                >
+                  <stop
+                    offset="0.05"
+                    stopColor="#436275"
+                  />
+                  <stop
+                    offset="0.1"
+                    stopColor="#415f72"
+                  />
+                  <stop
+                    offset="0.13"
+                    stopColor="#3a5769"
+                  />
+                  <stop
+                    offset="0.16"
+                    stopColor="#2e4959"
+                  />
+                  <stop
+                    offset="0.19"
+                    stopColor="#1d3543"
+                  />
+                  <stop
+                    offset="0.19"
+                    stopColor="#1b3240"
+                  />
+                  <stop
+                    offset="0.26"
+                    stopColor="#1e3644"
+                  />
+                  <stop
+                    offset="0.32"
+                    stopColor="#274150"
+                  />
+                  <stop
+                    offset="0.39"
+                    stopColor="#365364"
+                  />
+                  <stop
+                    offset="0.43"
+                    stopColor="#436275"
+                  />
+                  <stop
+                    offset="0.49"
+                    stopColor="#3f5d6f"
+                  />
+                  <stop
+                    offset="0.56"
+                    stopColor="#324e5f"
+                  />
+                  <stop
+                    offset="0.65"
+                    stopColor="#1e3644"
+                  />
+                  <stop
+                    offset="0.66"
+                    stopColor="#1b3240"
+                  />
+                  <stop
+                    offset="0.85"
+                    stopColor="#1b3240"
+                  />
+                  <stop
+                    offset="0.9"
+                    stopColor="#2c4656"
+                  />
+                  <stop
+                    offset="0.95"
+                    stopColor="#436275"
+                  />
+                </radialGradient>
+                <radialGradient
+                  cx="59.15"
+                  cy="56.86"
+                  gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)"
+                  gradientUnits="userSpaceOnUse"
+                  id="radial-gradient-2"
+                  r="46.01"
+                >
+                  <stop
+                    offset={0}
+                    stopColor="#436275"
+                  />
+                  <stop
+                    offset="0.1"
+                    stopColor="#426073"
+                  />
+                  <stop
+                    offset="0.13"
+                    stopColor="#3c5a6c"
+                  />
+                  <stop
+                    offset="0.16"
+                    stopColor="#344f61"
+                  />
+                  <stop
+                    offset="0.18"
+                    stopColor="#274050"
+                  />
+                  <stop
+                    offset="0.19"
+                    stopColor="#1b3240"
+                  />
+                  <stop
+                    offset="0.26"
+                    stopColor="#1e3644"
+                  />
+                  <stop
+                    offset="0.32"
+                    stopColor="#274150"
+                  />
+                  <stop
+                    offset="0.39"
+                    stopColor="#365364"
+                  />
+                  <stop
+                    offset="0.43"
+                    stopColor="#436275"
+                  />
+                  <stop
+                    offset="0.49"
+                    stopColor="#3f5d6f"
+                  />
+                  <stop
+                    offset="0.56"
+                    stopColor="#324e5f"
+                  />
+                  <stop
+                    offset="0.65"
+                    stopColor="#1e3644"
+                  />
+                  <stop
+                    offset="0.66"
+                    stopColor="#1b3240"
+                  />
+                  <stop
+                    offset="0.85"
+                    stopColor="#1b3240"
+                  />
+                  <stop
+                    offset="0.92"
+                    stopColor="#2c4656"
+                  />
+                  <stop
+                    offset={1}
+                    stopColor="#436275"
+                  />
+                </radialGradient>
+                <radialGradient
+                  cx="-521.06"
+                  cy="366.16"
+                  gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)"
+                  gradientUnits="userSpaceOnUse"
+                  id="radial-gradient-3"
+                  r="32.44"
+                >
+                  <stop
+                    offset={0}
+                    stopColor="#436275"
+                  />
+                  <stop
+                    offset="0.02"
+                    stopColor="#436275"
+                    stopOpacity="0.97"
+                  />
+                  <stop
+                    offset="0.34"
+                    stopColor="#436275"
+                    stopOpacity="0.55"
+                  />
+                  <stop
+                    offset="0.62"
+                    stopColor="#436275"
+                    stopOpacity="0.25"
+                  />
+                  <stop
+                    offset="0.85"
+                    stopColor="#436275"
+                    stopOpacity="0.07"
+                  />
+                  <stop
+                    offset={1}
+                    stopColor="#436275"
+                    stopOpacity={0}
+                  />
+                </radialGradient>
+                <radialGradient
+                  cx="-136.43"
+                  cy="140.9"
+                  gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)"
+                  gradientUnits="userSpaceOnUse"
+                  id="radial-gradient-4"
+                  r="54.82"
+                >
+                  <stop
+                    offset={0}
+                    stopColor="#436275"
+                  />
+                  <stop
+                    offset="0.58"
+                    stopColor="#436275"
+                    stopOpacity="0.4"
+                  />
+                  <stop
+                    offset={1}
+                    stopColor="#436275"
+                    stopOpacity={0}
+                  />
+                </radialGradient>
               </defs>
+              <title>
+                Empty-state-illustration
+              </title>
+              <g
+                data-name="Layer 2"
+                id="Layer_2"
+              >
+                <g
+                  data-name="Layer 1"
+                  id="Layer_1-2"
+                >
+                  <g
+                    className="cls-1"
+                  >
+                    <path
+                      className="cls-2"
+                      d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"
+                    />
+                  </g>
+                  <g
+                    className="cls-1"
+                  >
+                    <path
+                      className="cls-3"
+                      d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"
+                    />
+                  </g>
+                  <circle
+                    className="cls-4"
+                    cx="23.53"
+                    cy="73.77"
+                    r="11.93"
+                  />
+                  <circle
+                    className="cls-5"
+                    cx="23.53"
+                    cy="73.77"
+                    r="11.93"
+                  />
+                  <circle
+                    className="cls-6"
+                    cx="61.95"
+                    cy="55.24"
+                    r="34.25"
+                  />
+                  <circle
+                    className="cls-7"
+                    cx="61.95"
+                    cy="55.24"
+                    r="34.25"
+                  />
+                </g>
+              </g>
             </svg>
           </div>
           <h3
@@ -6014,7 +6386,7 @@ Array [
   display: block;
 }
 
-.c37 {
+.c36 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -6291,21 +6663,6 @@ Array [
 }
 
 .c35 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c36 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
   border-radius: 0.125rem;
@@ -6393,7 +6750,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c37 {
+  .c36 {
     -webkit-flex-basis: 16.666666666666668%;
     -ms-flex-preferred-size: 16.666666666666668%;
     flex-basis: 16.666666666666668%;
@@ -6657,28 +7014,24 @@ Array [
                                             <ul
                                                 className="c34"
                                             >
-                                                <div
+                                                <li
                                                     className="c35"
-                                                >
-                                                    <li
-                                                        className="c36"
-                                                        fill={null}
-                                                        name="wat"
-                                                        style={
-                                                            Object {
-                                                                "color": "#D8D8D8",
-                                                              }
-                                                        }
-                                                        value=""
-                                                    />
-                                                </div>
+                                                    fill={null}
+                                                    name="wat"
+                                                    style={
+                                                        Object {
+                                                            "color": "#D8D8D8",
+                                                          }
+                                                    }
+                                                    value=""
+                                                />
                                             </ul>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                             <div
-                                className="c37"
+                                className="c36"
                             >
                                 <div
                                     className="c28"
@@ -6718,7 +7071,7 @@ Array [
                                 </div>
                             </div>
                             <div
-                                className="c37"
+                                className="c36"
                             >
                                 <div
                                     className="c28"
@@ -6758,7 +7111,7 @@ Array [
                                 </div>
                             </div>
                             <div
-                                className="c37"
+                                className="c36"
                             >
                                 <div
                                     className="c28"
@@ -7746,7 +8099,7 @@ Array [
   display: block;
 }
 
-.c37 {
+.c36 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -8023,21 +8376,6 @@ Array [
 }
 
 .c35 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c36 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
   border-radius: 0.125rem;
@@ -8125,7 +8463,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c37 {
+  .c36 {
     -webkit-flex-basis: 16.666666666666668%;
     -ms-flex-preferred-size: 16.666666666666668%;
     flex-basis: 16.666666666666668%;
@@ -8389,28 +8727,24 @@ Array [
                                             <ul
                                                 className="c34"
                                             >
-                                                <div
+                                                <li
                                                     className="c35"
-                                                >
-                                                    <li
-                                                        className="c36"
-                                                        fill={null}
-                                                        name="wat"
-                                                        style={
-                                                            Object {
-                                                                "color": "#D8D8D8",
-                                                              }
-                                                        }
-                                                        value=""
-                                                    />
-                                                </div>
+                                                    fill={null}
+                                                    name="wat"
+                                                    style={
+                                                        Object {
+                                                            "color": "#D8D8D8",
+                                                          }
+                                                    }
+                                                    value=""
+                                                />
                                             </ul>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                             <div
-                                className="c37"
+                                className="c36"
                             >
                                 <div
                                     className="c28"
@@ -8450,7 +8784,7 @@ Array [
                                 </div>
                             </div>
                             <div
-                                className="c37"
+                                className="c36"
                             >
                                 <div
                                     className="c28"
@@ -8490,7 +8824,7 @@ Array [
                                 </div>
                             </div>
                             <div
-                                className="c37"
+                                className="c36"
                             >
                                 <div
                                     className="c28"
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
index 80a5da75..029e426f 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
@@ -83,7 +83,6 @@ exports[`renders <List /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1022,7 +1021,6 @@ exports[`renders <List error /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -2028,7 +2026,6 @@ exports[`renders <List instances /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3568,7 +3565,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3645,7 +3641,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3768,7 +3763,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3886,7 +3880,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -4033,7 +4026,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -6092,7 +6084,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -6169,7 +6160,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -6292,7 +6282,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -6410,7 +6399,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -6557,7 +6545,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -8616,7 +8603,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -8693,7 +8679,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -8816,7 +8801,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -8934,7 +8918,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -9081,7 +9064,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -9223,7 +9205,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -9324,7 +9305,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -11308,7 +11288,6 @@ exports[`renders <List loading /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
index d949324a..a1e1105b 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
@@ -70,7 +70,6 @@ exports[`renders <Metadata /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -432,20 +431,20 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   margin-bottom: 1.125rem;
 }
 
-.c38 {
+.c39 {
   margin-top: 0.75rem;
 }
 
-.c45 {
+.c46 {
   margin-right: 0.75rem;
 }
 
-.c25 {
+.c26 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
 }
 
-.c32 {
+.c33 {
   padding-left: 1.125rem;
   padding-right: 1.125rem;
   padding-top: 1.125rem;
@@ -508,7 +507,6 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -564,94 +562,6 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   pointer-events: none;
 }
 
-.c41 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c41:focus {
-  outline: 0;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c41:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c41:active,
-.c41:active:hover,
-.c41:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c41[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c41:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c41:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c41:active,
-.c41:active:hover,
-.c41:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
 .c42 {
   box-sizing: border-box;
   display: inline-block;
@@ -673,7 +583,6 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -690,10 +599,9 @@ 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);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
@@ -725,23 +633,111 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 }
 
 .c42:focus {
-  background-color: rgb(250,250,250);
+  background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
 .c42:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
 }
 
 .c42:active,
 .c42:active:hover,
 .c42:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
 }
 
-.c44 {
+.c43 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c43:focus {
+  outline: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c43:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c43:active,
+.c43:active:hover,
+.c43:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c43[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c43:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c43:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c43:active,
+.c43:active:hover,
+.c43:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c45 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -762,7 +758,6 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -798,7 +793,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   float: right;
 }
 
-.c44:focus {
+.c45:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -806,57 +801,57 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c44:hover {
+.c45:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c44:active,
-.c44:active:hover,
-.c44:active:focus {
+.c45:active,
+.c45:active:hover,
+.c45:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c44[disabled] {
+.c45[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c44:focus {
+.c45:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c44:hover {
+.c45:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c44:active,
-.c44:active:hover,
-.c44:active:focus {
+.c45:active,
+.c45:active:hover,
+.c45:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c44:focus {
+.c45:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c44:hover {
+.c45:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c44:active,
-.c44:active:hover,
-.c44:active:focus {
+.c45:active,
+.c45:active:hover,
+.c45:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
@@ -895,7 +890,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c39 {
+.c40 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -914,7 +909,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c33 {
+.c34 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -924,7 +919,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   display: block;
 }
 
-.c35 {
+.c36 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -934,7 +929,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   display: block;
 }
 
-.c43 {
+.c44 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -959,7 +954,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   font-size: 1.3125rem;
 }
 
-.c29 {
+.c30 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: 600;
@@ -1006,7 +1001,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c26 {
+.c27 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1034,7 +1029,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   align-items: center;
 }
 
-.c20 {
+.c21 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1057,7 +1052,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c23 {
+.c24 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1084,7 +1079,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   flex: 0 0 2.875rem;
 }
 
-.c31 {
+.c32 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1106,7 +1101,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c30 {
+.c31 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1122,7 +1117,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c22 {
+.c23 {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -1134,7 +1129,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c28 {
+.c29 {
   box-sizing: border-box;
   min-height: 2.9375rem;
   max-width: 100%;
@@ -1193,7 +1188,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   float: right;
 }
 
-.c34 {
+.c35 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -1267,7 +1262,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c37 {
+.c38 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -1292,62 +1287,62 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   resize: vertical;
 }
 
-.c37:focus {
+.c38:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c37::-webkit-input-placeholder {
+.c38::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c37::-moz-placeholder {
+.c38::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c37:-ms-input-placeholder {
+.c38:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c37:invalid {
+.c38:invalid {
   box-shadow: none;
 }
 
-.c37:disabled {
+.c38:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c37:disabled::-webkit-input-placeholder {
+.c38:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c37:disabled::-moz-placeholder {
+.c38:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c37:disabled:-ms-input-placeholder {
+.c38:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c37:disabled {
+.c38:disabled {
   color: rgb(73,73,73);
 }
 
-.c37:disabled::-webkit-input-placeholder {
+.c38:disabled::-webkit-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c37:disabled::-moz-placeholder {
+.c38:disabled::-moz-placeholder {
   color: rgb(73,73,73);
 }
 
-.c37:disabled:-ms-input-placeholder {
+.c38:disabled:-ms-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c36 {
+.c37 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1366,24 +1361,28 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c21 {
+.c20 {
+  margin-bottom: 0;
+}
+
+.c22 {
   border-top: 0;
   border-left: 0;
   border-right: 0;
 }
 
-.c40 {
+.c41 {
   margin-right: 0.375rem;
 }
 
-.c24 {
+.c25 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 
-.c27 {
+.c28 {
   height: 2.9375rem;
   max-width: 98%;
 }
@@ -1407,7 +1406,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c39 {
+  .c40 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1416,7 +1415,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c39 {
+  .c40 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1425,7 +1424,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c33 {
+  .c34 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -1434,7 +1433,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c35 {
+  .c36 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -1443,7 +1442,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c43 {
+  .c44 {
     display: none;
   }
 }
@@ -1539,32 +1538,33 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
     className="c19"
   >
     <form
+      className="c20"
       onSubmit={undefined}
     >
       <div
-        className="c20"
+        className="c21"
         disabled={false}
         name="card"
       >
         <div
-          className="c21 c22 c23"
+          className="c22 c23 c24"
           disabled={false}
           name="card-header"
           onClick={false}
         >
           <div
-            className="c24 c25"
+            className="c25 c26"
           >
             <div
-              className="c26"
+              className="c27"
             >
               <div
-                className="c27 c28 c23"
+                className="c28 c29 c24"
                 disabled={false}
                 name="card-header-meta"
               >
                 <h4
-                  className="c29"
+                  className="c30"
                 >
                   Add metadata
                 </h4>
@@ -1573,21 +1573,21 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c30 c31"
+          className="c31 c32"
           disabled={false}
           name="card-outlet"
         >
           <div
-            className="c32"
+            className="c33"
           >
             <div
               className="c15"
             >
               <div
-                className="c33"
+                className="c34"
               >
                 <div
-                  className="c34"
+                  className="c35"
                   name="name"
                   role="group"
                   style={undefined}
@@ -1612,7 +1612,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                       className="c15"
                     >
                       <div
-                        className="c35"
+                        className="c36"
                       />
                     </div>
                   </div>
@@ -1627,10 +1627,10 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
               className="c15"
             >
               <div
-                className="c33"
+                className="c34"
               >
                 <div
-                  className="c34"
+                  className="c35"
                   name="value"
                   role="group"
                   style={undefined}
@@ -1646,7 +1646,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                     className="c7"
                   >
                     <textarea
-                      className="c36 c37"
+                      className="c37 c38"
                       disabled={false}
                       id="x"
                       name="name"
@@ -1657,7 +1657,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                     className="c15"
                   >
                     <div
-                      className="c35"
+                      className="c36"
                     />
                   </div>
                 </div>
@@ -1668,16 +1668,16 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
               </div>
             </div>
             <div
-              className="c38"
+              className="c39"
             >
               <div
-                className="c39"
+                className="c40"
               >
                 <div
-                  className="c33"
+                  className="c34"
                 >
                   <button
-                    className="c40 c41 c11 c12 c13"
+                    className="c41 c42 c11 c12 c13"
                     data-ui-button="true"
                     disabled={false}
                     href=""
@@ -1689,7 +1689,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                     </span>
                   </button>
                   <button
-                    className="c42 c11 c12 c13"
+                    className="c43 c11 c12 c13"
                     data-ui-button="true"
                     disabled={true}
                     href=""
@@ -1701,10 +1701,10 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                   </button>
                 </div>
                 <div
-                  className="c43"
+                  className="c44"
                 >
                   <button
-                    className="c44 c11 c12 c13"
+                    className="c45 c11 c12 c13"
                     data-ui-button="true"
                     disabled={false}
                     href=""
@@ -1713,7 +1713,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                     type="button"
                   >
                     <div
-                      className="c45"
+                      className="c46"
                     >
                       <svg
                         height="16"
@@ -1824,7 +1824,6 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -2357,7 +2356,6 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -2755,11 +2753,11 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   margin-bottom: 1.125rem;
 }
 
-.c38 {
+.c39 {
   margin-top: 0.75rem;
 }
 
-.c46 {
+.c47 {
   margin-right: 0.75rem;
 }
 
@@ -2767,12 +2765,12 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   margin-bottom: 0.75rem;
 }
 
-.c25 {
+.c26 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
 }
 
-.c32 {
+.c33 {
   padding-left: 1.125rem;
   padding-right: 1.125rem;
   padding-top: 1.125rem;
@@ -2806,24 +2804,24 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c49 {
+.c50 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
   animation: iCqDak 1.5s ease-out 0s infinite;
 }
 
-.c50 {
+.c51 {
   -webkit-animation-delay: 0.5s;
   animation-delay: 0.5s;
 }
 
-.c51 {
+.c52 {
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
 }
 
-.c48 {
+.c49 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2880,7 +2878,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -2936,94 +2933,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   pointer-events: none;
 }
 
-.c42 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c42:focus {
-  outline: 0;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c42:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c42:active,
-.c42:active:hover,
-.c42:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c42[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c42:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c42:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c42:active,
-.c42:active:hover,
-.c42:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
 .c43 {
   box-sizing: border-box;
   display: inline-block;
@@ -3045,7 +2954,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3062,10 +2970,9 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
@@ -3097,23 +3004,111 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 .c43:focus {
-  background-color: rgb(250,250,250);
+  background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
 .c43:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
 }
 
 .c43:active,
 .c43:active:hover,
 .c43:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
 }
 
-.c45 {
+.c44 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c44:focus {
+  outline: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c44:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c44:active,
+.c44:active:hover,
+.c44:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c44[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c44:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c44:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c44:active,
+.c44:active:hover,
+.c44:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c46 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3134,7 +3129,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3170,7 +3164,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   float: right;
 }
 
-.c45:focus {
+.c46:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -3178,62 +3172,62 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c45:hover {
+.c46:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c45:active,
-.c45:active:hover,
-.c45:active:focus {
+.c46:active,
+.c46:active:hover,
+.c46:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c45[disabled] {
+.c46[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c45:focus {
+.c46:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c45:hover {
+.c46:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c45:active,
-.c45:active:hover,
-.c45:active:focus {
+.c46:active,
+.c46:active:hover,
+.c46:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c45:focus {
+.c46:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c45:hover {
+.c46:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c45:active,
-.c45:active:hover,
-.c45:active:focus {
+.c46:active,
+.c46:active:hover,
+.c46:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c47 {
+.c48 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3254,7 +3248,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3295,7 +3288,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   float: right;
 }
 
-.c47:focus {
+.c48:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -3303,74 +3296,74 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c47:hover {
+.c48:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c47:active,
-.c47:active:hover,
-.c47:active:focus {
+.c48:active,
+.c48:active:hover,
+.c48:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c47[disabled] {
+.c48[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c47:focus {
+.c48:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c47:hover {
+.c48:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c47:active,
-.c47:active:hover,
-.c47:active:focus {
+.c48:active,
+.c48:active:hover,
+.c48:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c47:focus {
+.c48:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c47:hover {
+.c48:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c47:active,
-.c47:active:hover,
-.c47:active:focus {
+.c48:active,
+.c48:active:hover,
+.c48:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c47:focus {
+.c48:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c47:hover {
+.c48:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c47:active,
-.c47:active:hover,
-.c47:active:focus {
+.c48:active,
+.c48:active:hover,
+.c48:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
@@ -3409,7 +3402,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c39 {
+.c40 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3428,7 +3421,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c33 {
+.c34 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3438,7 +3431,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   display: block;
 }
 
-.c35 {
+.c36 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3448,7 +3441,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   display: block;
 }
 
-.c40 {
+.c41 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3458,7 +3451,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   display: block;
 }
 
-.c44 {
+.c45 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3522,7 +3515,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c26 {
+.c27 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3550,7 +3543,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   align-items: center;
 }
 
-.c31 {
+.c32 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3572,7 +3565,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c20 {
+.c21 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3596,7 +3589,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   cursor: pointer;
 }
 
-.c23 {
+.c24 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3624,7 +3617,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   flex: 0 0 2.875rem;
 }
 
-.c30 {
+.c31 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -3640,7 +3633,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c22 {
+.c23 {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -3652,7 +3645,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c28 {
+.c29 {
   box-sizing: border-box;
   min-height: 2.9375rem;
   max-width: 100%;
@@ -3711,7 +3704,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   float: right;
 }
 
-.c34 {
+.c35 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -3785,7 +3778,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c37 {
+.c38 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -3810,62 +3803,62 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   resize: vertical;
 }
 
-.c37:focus {
+.c38:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c37::-webkit-input-placeholder {
+.c38::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c37::-moz-placeholder {
+.c38::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c37:-ms-input-placeholder {
+.c38:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c37:invalid {
+.c38:invalid {
   box-shadow: none;
 }
 
-.c37:disabled {
+.c38:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c37:disabled::-webkit-input-placeholder {
+.c38:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c37:disabled::-moz-placeholder {
+.c38:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c37:disabled:-ms-input-placeholder {
+.c38:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c37:disabled {
+.c38:disabled {
   color: rgb(73,73,73);
 }
 
-.c37:disabled::-webkit-input-placeholder {
+.c38:disabled::-webkit-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c37:disabled::-moz-placeholder {
+.c38:disabled::-moz-placeholder {
   color: rgb(73,73,73);
 }
 
-.c37:disabled:-ms-input-placeholder {
+.c38:disabled:-ms-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c36 {
+.c37 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -3884,7 +3877,11 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c29 {
+.c20 {
+  margin-bottom: 0;
+}
+
+.c30 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -3893,24 +3890,24 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   display: block;
 }
 
-.c21 {
+.c22 {
   border-top: 0;
   border-left: 0;
   border-right: 0;
 }
 
-.c41 {
+.c42 {
   margin-right: 0.375rem;
 }
 
-.c24 {
+.c25 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 
-.c27 {
+.c28 {
   height: 2.9375rem;
   max-width: 98%;
 }
@@ -3934,7 +3931,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c39 {
+  .c40 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -3943,7 +3940,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c39 {
+  .c40 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -3952,7 +3949,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c33 {
+  .c34 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -3961,7 +3958,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c35 {
+  .c36 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -3970,7 +3967,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c40 {
+  .c41 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -3979,7 +3976,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c44 {
+  .c45 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -4078,32 +4075,33 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
     className="c19"
   >
     <form
+      className="c20"
       onSubmit={undefined}
     >
       <div
-        className="c20"
+        className="c21"
         disabled={false}
         name="card"
       >
         <div
-          className="c21 c22 c23"
+          className="c22 c23 c24"
           disabled={false}
           name="card-header"
           onClick={[Function]}
         >
           <div
-            className="c24 c25"
+            className="c25 c26"
           >
             <div
-              className="c26"
+              className="c27"
             >
               <div
-                className="c27 c28 c23"
+                className="c28 c29 c24"
                 disabled={false}
                 name="card-header-meta"
               >
                 <div
-                  className="c29"
+                  className="c30"
                 />
               </div>
               <svg
@@ -4127,21 +4125,21 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c30 c31"
+          className="c31 c32"
           disabled={false}
           name="card-outlet"
         >
           <div
-            className="c32"
+            className="c33"
           >
             <div
               className="c15"
             >
               <div
-                className="c33"
+                className="c34"
               >
                 <div
-                  className="c34"
+                  className="c35"
                   name="name"
                   role="group"
                   style={undefined}
@@ -4166,7 +4164,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                       className="c15"
                     >
                       <div
-                        className="c35"
+                        className="c36"
                       />
                     </div>
                   </div>
@@ -4181,10 +4179,10 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
               className="c15"
             >
               <div
-                className="c33"
+                className="c34"
               >
                 <div
-                  className="c34"
+                  className="c35"
                   name="value"
                   role="group"
                   style={undefined}
@@ -4200,7 +4198,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     className="c7"
                   >
                     <textarea
-                      className="c36 c37"
+                      className="c37 c38"
                       disabled={false}
                       id="C"
                       name="name"
@@ -4211,7 +4209,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     className="c15"
                   >
                     <div
-                      className="c35"
+                      className="c36"
                     />
                   </div>
                 </div>
@@ -4222,16 +4220,16 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
               </div>
             </div>
             <div
-              className="c38"
+              className="c39"
             >
               <div
-                className="c39"
+                className="c40"
               >
                 <div
-                  className="c40"
+                  className="c41"
                 >
                   <button
-                    className="c41 c42 c11 c12 c13"
+                    className="c42 c43 c11 c12 c13"
                     data-ui-button="true"
                     disabled={false}
                     href=""
@@ -4243,7 +4241,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     </span>
                   </button>
                   <button
-                    className="c43 c11 c12 c13"
+                    className="c44 c11 c12 c13"
                     data-ui-button="true"
                     disabled={true}
                     href=""
@@ -4255,10 +4253,10 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                   </button>
                 </div>
                 <div
-                  className="c44"
+                  className="c45"
                 >
                   <button
-                    className="c45 c11 c12 c13"
+                    className="c46 c11 c12 c13"
                     data-ui-button="true"
                     disabled={false}
                     href=""
@@ -4267,7 +4265,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     type="button"
                   >
                     <div
-                      className="c46"
+                      className="c47"
                     >
                       <svg
                         height="16"
@@ -4302,32 +4300,33 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
     className="c19"
   >
     <form
+      className="c20"
       onSubmit={undefined}
     >
       <div
-        className="c20"
+        className="c21"
         disabled={false}
         name="card"
       >
         <div
-          className="c21 c22 c23"
+          className="c22 c23 c24"
           disabled={false}
           name="card-header"
           onClick={[Function]}
         >
           <div
-            className="c24 c25"
+            className="c25 c26"
           >
             <div
-              className="c26"
+              className="c27"
             >
               <div
-                className="c27 c28 c23"
+                className="c28 c29 c24"
                 disabled={false}
                 name="card-header-meta"
               >
                 <div
-                  className="c29"
+                  className="c30"
                 />
               </div>
               <svg
@@ -4351,21 +4350,21 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c30 c31"
+          className="c31 c32"
           disabled={false}
           name="card-outlet"
         >
           <div
-            className="c32"
+            className="c33"
           >
             <div
               className="c15"
             >
               <div
-                className="c33"
+                className="c34"
               >
                 <div
-                  className="c34"
+                  className="c35"
                   name="name"
                   role="group"
                   style={undefined}
@@ -4390,7 +4389,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                       className="c15"
                     >
                       <div
-                        className="c35"
+                        className="c36"
                       />
                     </div>
                   </div>
@@ -4405,10 +4404,10 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
               className="c15"
             >
               <div
-                className="c33"
+                className="c34"
               >
                 <div
-                  className="c34"
+                  className="c35"
                   name="value"
                   role="group"
                   style={undefined}
@@ -4424,7 +4423,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     className="c7"
                   >
                     <textarea
-                      className="c36 c37"
+                      className="c37 c38"
                       disabled={false}
                       id="E"
                       name="name"
@@ -4435,7 +4434,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     className="c15"
                   >
                     <div
-                      className="c35"
+                      className="c36"
                     />
                   </div>
                 </div>
@@ -4446,16 +4445,16 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
               </div>
             </div>
             <div
-              className="c38"
+              className="c39"
             >
               <div
-                className="c39"
+                className="c40"
               >
                 <div
-                  className="c40"
+                  className="c41"
                 >
                   <button
-                    className="c41 c42 c11 c12 c13"
+                    className="c42 c43 c11 c12 c13"
                     data-ui-button="true"
                     disabled={false}
                     href=""
@@ -4467,7 +4466,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     </span>
                   </button>
                   <button
-                    className="c43 c11 c12 c13"
+                    className="c44 c11 c12 c13"
                     data-ui-button="true"
                     disabled={true}
                     href=""
@@ -4479,10 +4478,10 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                   </button>
                 </div>
                 <div
-                  className="c44"
+                  className="c45"
                 >
                   <button
-                    className="c45 c11 c12 c13"
+                    className="c46 c11 c12 c13"
                     data-ui-button="true"
                     disabled={false}
                     href=""
@@ -4491,7 +4490,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     type="button"
                   >
                     <div
-                      className="c46"
+                      className="c47"
                     >
                       <svg
                         height="16"
@@ -4526,32 +4525,33 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
     className="c19"
   >
     <form
+      className="c20"
       onSubmit={undefined}
     >
       <div
-        className="c20"
+        className="c21"
         disabled={false}
         name="card"
       >
         <div
-          className="c21 c22 c23"
+          className="c22 c23 c24"
           disabled={false}
           name="card-header"
           onClick={[Function]}
         >
           <div
-            className="c24 c25"
+            className="c25 c26"
           >
             <div
-              className="c26"
+              className="c27"
             >
               <div
-                className="c27 c28 c23"
+                className="c28 c29 c24"
                 disabled={false}
                 name="card-header-meta"
               >
                 <div
-                  className="c29"
+                  className="c30"
                 />
               </div>
               <svg
@@ -4575,21 +4575,21 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c30 c31"
+          className="c31 c32"
           disabled={false}
           name="card-outlet"
         >
           <div
-            className="c32"
+            className="c33"
           >
             <div
               className="c15"
             >
               <div
-                className="c33"
+                className="c34"
               >
                 <div
-                  className="c34"
+                  className="c35"
                   name="name"
                   role="group"
                   style={undefined}
@@ -4614,7 +4614,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                       className="c15"
                     >
                       <div
-                        className="c35"
+                        className="c36"
                       />
                     </div>
                   </div>
@@ -4629,10 +4629,10 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
               className="c15"
             >
               <div
-                className="c33"
+                className="c34"
               >
                 <div
-                  className="c34"
+                  className="c35"
                   name="value"
                   role="group"
                   style={undefined}
@@ -4648,7 +4648,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     className="c7"
                   >
                     <textarea
-                      className="c36 c37"
+                      className="c37 c38"
                       disabled={false}
                       id="G"
                       name="name"
@@ -4659,7 +4659,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     className="c15"
                   >
                     <div
-                      className="c35"
+                      className="c36"
                     />
                   </div>
                 </div>
@@ -4670,16 +4670,16 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
               </div>
             </div>
             <div
-              className="c38"
+              className="c39"
             >
               <div
-                className="c39"
+                className="c40"
               >
                 <div
-                  className="c40"
+                  className="c41"
                 >
                   <button
-                    className="c41 c42 c11 c12 c13"
+                    className="c42 c43 c11 c12 c13"
                     data-ui-button="true"
                     disabled={false}
                     href=""
@@ -4691,7 +4691,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     </span>
                   </button>
                   <button
-                    className="c43 c11 c12 c13"
+                    className="c44 c11 c12 c13"
                     data-ui-button="true"
                     disabled={true}
                     href=""
@@ -4703,10 +4703,10 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                   </button>
                 </div>
                 <div
-                  className="c44"
+                  className="c45"
                 >
                   <button
-                    className="c47 c11 c12 c13"
+                    className="c48 c11 c12 c13"
                     data-ui-button="true"
                     disabled={false}
                     href=""
@@ -4715,28 +4715,28 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     type="button"
                   >
                     <div
-                      className="c48"
+                      className="c49"
                     >
                       <svg
                         height="10"
                         width="28"
                       >
                         <rect
-                          className="c49"
+                          className="c50"
                           height="6"
                           width="6"
                           x="2"
                           y="2"
                         />
                         <rect
-                          className="c50 c49"
+                          className="c51 c50"
                           height="6"
                           width="6"
                           x="11"
                           y="2"
                         />
                         <rect
-                          className="c51 c49"
+                          className="c52 c50"
                           height="6"
                           width="6"
                           x="20"
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap
index d6f0c596..0e346b69 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap
@@ -227,227 +227,289 @@ exports[`renders <Networks /> without throwing 1`] = `
           className="c12"
         >
           <svg
-            height={60}
-            viewBox="0 0 79 60"
-            width={79}
+            height={109}
+            viewBox="0 0 119.34 109.47"
+            width={119}
             xmlns="http://www.w3.org/2000/svg"
             xmlnsXlink="http://www.w3.org/1999/xlink"
           >
-            <title>
-              Guilty_Salamander
-            </title>
-            <desc>
-              Created using Figma
-            </desc>
-            <use
-              fill="#FAA427"
-              transform="translate(23.8 22)"
-              xlinkHref="#a"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(27.3 25.5)"
-              xlinkHref="#b"
-            />
-            <use
-              fill="#FAA427"
-              transform="translate(4.8 32.1)"
-              xlinkHref="#c"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(12.2 31.8)"
-              xlinkHref="#d"
-            />
-            <use
-              fill="#FAA427"
-              transform="translate(54.4 31.9)"
-              xlinkHref="#e"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(54.4 32)"
-              xlinkHref="#f"
-            />
-            <use
-              fill="#FAA427"
-              transform="translate(15.8 26.8)"
-              xlinkHref="#g"
-            />
-            <use
-              fill="#FAA427"
-              transform="translate(5)"
-              xlinkHref="#h"
-            />
-            <use
-              fill="#FAFBFC"
-              transform="rotate(-15.13 41.037 5.45)"
-              xlinkHref="#i"
-            />
-            <use
-              fill="#412B13"
-              transform="rotate(-15.13 67.273 -24.78)"
-              xlinkHref="#j"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(2.2 8)"
-              xlinkHref="#k"
-            />
-            <use
-              fill="#FAFBFC"
-              transform="rotate(-74.87 40.46 -20.511)"
-              xlinkHref="#l"
-            />
-            <use
-              fill="#412B13"
-              transform="rotate(-74.87 41.364 -22.098)"
-              xlinkHref="#m"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(52.1 8)"
-              xlinkHref="#n"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(31.5 34.3)"
-              xlinkHref="#o"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(14.3)"
-              xlinkHref="#p"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(30.9 18.9)"
-              xlinkHref="#q"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(37.6 18.9)"
-              xlinkHref="#r"
-            />
-            <use
-              fill="#FAA427"
-              transform="translate(27.4 53.9)"
-              xlinkHref="#s"
-            />
-            <use
-              fill="#FAA427"
-              transform="translate(39.1 53.9)"
-              xlinkHref="#t"
-            />
-            <use
-              fill="#F3722C"
-              transform="translate(27.4 53.9)"
-              xlinkHref="#u"
-            />
-            <use
-              fill="#342013"
-              transform="translate(28.6 26.2)"
-              xlinkHref="#v"
-            />
-            <use
-              fill="#FFF"
-              transform="translate(32.6 28.7)"
-              xlinkHref="#w"
-            />
             <defs>
-              <path
-                d="M54.921 36.053L0 0l1.413 24.908c.359 6.249 5.752 11.145 12.283 11.145H54.92z"
-                id="a"
-              />
-              <path
-                d="M42.12 32.526L13.47 0 0 23.737c.282 4.924 4.527 8.778 9.672 8.778l32.448.01z"
-                id="b"
-              />
-              <path
-                d="M3.326 17.01a3.312 3.312 0 0 1-1.545-6.25C6.059 8.52 8.482 2.226 8.52 2.165a3.313 3.313 0 0 1 6.216 2.296c-.133.354-3.312 8.717-9.86 12.145-.475.26-1.008.4-1.55.403z"
-                id="c"
-              />
-              <path
-                d="M5.079 9.205A28.654 28.654 0 0 0 7.287 4.75a3.312 3.312 0 1 0-6.183-2.296C.781 3.234.412 3.996 0 4.734c1.33 1.181 3.544 3.152 5.079 4.471z"
-                id="d"
-              />
-              <path
-                d="M11.682 17.27a3.312 3.312 0 0 0 1.545-6.248C8.95 8.78 6.526 2.487 6.504 2.427A3.312 3.312 0 1 0 .316 4.723c.126.353 3.312 8.717 9.853 12.145.464.254.983.393 1.513.403z"
-                id="e"
-              />
-              <path
-                d="M2.45 9.01A28.33 28.33 0 0 1 .242 4.553a3.312 3.312 0 1 1 6.21-2.296c.326.78.695 1.54 1.104 2.28C6.187 5.719 3.973 7.69 2.45 9.009z"
-                id="f"
-              />
-              <path
-                d="M35.159 0H6.542A6.542 6.542 0 0 0 0 6.542v14.016a6.542 6.542 0 0 0 6.542 6.541h28.617a6.541 6.541 0 0 0 6.541-6.541V6.542A6.542 6.542 0 0 0 35.16 0z"
-                id="g"
-              />
-              <path
-                d="M54.254 0H9.026A9.026 9.026 0 0 0 0 9.026v17.207a9.026 9.026 0 0 0 9.026 9.025h45.228a9.026 9.026 0 0 0 9.025-9.026V9.027A9.026 9.026 0 0 0 54.253 0z"
-                id="h"
-              />
-              <path
-                d="M9.721 18.637c5.37 0 9.721-4.172 9.721-9.319C19.442 4.172 15.09 0 9.722 0 4.351 0 0 4.172 0 9.318c0 5.147 4.352 9.319 9.721 9.319z"
-                id="i"
-              />
-              <path
-                d="M5.19 9.959c2.865 0 5.188-2.23 5.188-4.98C10.378 2.23 8.055 0 5.19 0S0 2.23 0 4.98c0 2.75 2.323 4.979 5.19 4.979z"
-                id="j"
-              />
-              <path
-                d="M7.262.351C2.078 1.753-1.018 6.921.306 11.89l18.77-5.073C17.705 1.847 12.411-1.045 7.261.35z"
-                id="k"
-              />
-              <path
-                d="M9.318 19.442c5.147 0 9.319-4.352 9.319-9.72C18.637 4.351 14.465 0 9.318 0 4.172 0 0 4.352 0 9.721c0 5.37 4.172 9.721 9.318 9.721z"
-                id="l"
-              />
-              <path
-                d="M4.98 10.378c2.75 0 4.979-2.323 4.979-5.189S7.729 0 4.979 0C2.23 0 0 2.323 0 5.19c0 2.865 2.23 5.188 4.98 5.188z"
-                id="m"
-              />
-              <path
-                d="M11.819.351c5.178 1.402 8.28 6.57 6.95 11.538L0 6.816C1.347 1.847 6.635-1.045 11.819.35z"
-                id="n"
-              />
-              <path
-                d="M5.106 4.897A5.007 5.007 0 0 0 10.218 0H0a5.001 5.001 0 0 0 5.106 4.897z"
-                id="o"
-              />
-              <path
-                d="M0 0l22.258 18.498L44.516 0H0z"
-                id="p"
-              />
-              <path
-                d="M2.445 0A2.396 2.396 0 0 0 0 2.342h4.885a2.39 2.39 0 0 0-2.44-2.34z"
-                id="q"
-              />
-              <path
-                d="M2.462 0A2.396 2.396 0 0 0 0 2.343h4.885A2.39 2.39 0 0 0 2.462 0z"
-                id="r"
-              />
-              <path
-                d="M0 0h6.227v3.091A3.047 3.047 0 0 1 3.18 6.14h-.127A3.047 3.047 0 0 1 .006 3.09V0H0z"
-                id="s"
-              />
-              <path
-                d="M.006 0H6.22v3.091A3.047 3.047 0 0 1 3.174 6.14h-.127A3.047 3.047 0 0 1 0 3.09V0h.006z"
-                id="t"
-              />
-              <path
-                d="M31.328 0H0v1.474h31.328V0z"
-                id="u"
-              />
-              <path
-                d="M15.422 1.503A17.422 17.422 0 0 0 8.113.002 17.4 17.4 0 0 0 .805 1.503a1.457 1.457 0 0 0 .629 2.76h2.572V4.06a1.579 1.579 0 0 1 2.126-1.468 6.194 6.194 0 0 0 3.963 0 1.574 1.574 0 0 1 2.12 1.468v.204h2.572a1.463 1.463 0 0 0 .635-2.76z"
-                id="v"
-              />
-              <path
-                d="M6.072.104a6.194 6.194 0 0 1-3.963 0A1.579 1.579 0 0 0 0 1.573v.204h8.209v-.204A1.573 1.573 0 0 0 6.072.104z"
-                id="w"
+              <style
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": ".cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}",
+                  }
+                }
               />
+              <radialGradient
+                cx="208.79"
+                cy="99.06"
+                gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)"
+                gradientUnits="userSpaceOnUse"
+                id="radial-gradient"
+                r="57.13"
+              >
+                <stop
+                  offset="0.05"
+                  stopColor="#436275"
+                />
+                <stop
+                  offset="0.1"
+                  stopColor="#415f72"
+                />
+                <stop
+                  offset="0.13"
+                  stopColor="#3a5769"
+                />
+                <stop
+                  offset="0.16"
+                  stopColor="#2e4959"
+                />
+                <stop
+                  offset="0.19"
+                  stopColor="#1d3543"
+                />
+                <stop
+                  offset="0.19"
+                  stopColor="#1b3240"
+                />
+                <stop
+                  offset="0.26"
+                  stopColor="#1e3644"
+                />
+                <stop
+                  offset="0.32"
+                  stopColor="#274150"
+                />
+                <stop
+                  offset="0.39"
+                  stopColor="#365364"
+                />
+                <stop
+                  offset="0.43"
+                  stopColor="#436275"
+                />
+                <stop
+                  offset="0.49"
+                  stopColor="#3f5d6f"
+                />
+                <stop
+                  offset="0.56"
+                  stopColor="#324e5f"
+                />
+                <stop
+                  offset="0.65"
+                  stopColor="#1e3644"
+                />
+                <stop
+                  offset="0.66"
+                  stopColor="#1b3240"
+                />
+                <stop
+                  offset="0.85"
+                  stopColor="#1b3240"
+                />
+                <stop
+                  offset="0.9"
+                  stopColor="#2c4656"
+                />
+                <stop
+                  offset="0.95"
+                  stopColor="#436275"
+                />
+              </radialGradient>
+              <radialGradient
+                cx="59.15"
+                cy="56.86"
+                gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)"
+                gradientUnits="userSpaceOnUse"
+                id="radial-gradient-2"
+                r="46.01"
+              >
+                <stop
+                  offset={0}
+                  stopColor="#436275"
+                />
+                <stop
+                  offset="0.1"
+                  stopColor="#426073"
+                />
+                <stop
+                  offset="0.13"
+                  stopColor="#3c5a6c"
+                />
+                <stop
+                  offset="0.16"
+                  stopColor="#344f61"
+                />
+                <stop
+                  offset="0.18"
+                  stopColor="#274050"
+                />
+                <stop
+                  offset="0.19"
+                  stopColor="#1b3240"
+                />
+                <stop
+                  offset="0.26"
+                  stopColor="#1e3644"
+                />
+                <stop
+                  offset="0.32"
+                  stopColor="#274150"
+                />
+                <stop
+                  offset="0.39"
+                  stopColor="#365364"
+                />
+                <stop
+                  offset="0.43"
+                  stopColor="#436275"
+                />
+                <stop
+                  offset="0.49"
+                  stopColor="#3f5d6f"
+                />
+                <stop
+                  offset="0.56"
+                  stopColor="#324e5f"
+                />
+                <stop
+                  offset="0.65"
+                  stopColor="#1e3644"
+                />
+                <stop
+                  offset="0.66"
+                  stopColor="#1b3240"
+                />
+                <stop
+                  offset="0.85"
+                  stopColor="#1b3240"
+                />
+                <stop
+                  offset="0.92"
+                  stopColor="#2c4656"
+                />
+                <stop
+                  offset={1}
+                  stopColor="#436275"
+                />
+              </radialGradient>
+              <radialGradient
+                cx="-521.06"
+                cy="366.16"
+                gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)"
+                gradientUnits="userSpaceOnUse"
+                id="radial-gradient-3"
+                r="32.44"
+              >
+                <stop
+                  offset={0}
+                  stopColor="#436275"
+                />
+                <stop
+                  offset="0.02"
+                  stopColor="#436275"
+                  stopOpacity="0.97"
+                />
+                <stop
+                  offset="0.34"
+                  stopColor="#436275"
+                  stopOpacity="0.55"
+                />
+                <stop
+                  offset="0.62"
+                  stopColor="#436275"
+                  stopOpacity="0.25"
+                />
+                <stop
+                  offset="0.85"
+                  stopColor="#436275"
+                  stopOpacity="0.07"
+                />
+                <stop
+                  offset={1}
+                  stopColor="#436275"
+                  stopOpacity={0}
+                />
+              </radialGradient>
+              <radialGradient
+                cx="-136.43"
+                cy="140.9"
+                gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)"
+                gradientUnits="userSpaceOnUse"
+                id="radial-gradient-4"
+                r="54.82"
+              >
+                <stop
+                  offset={0}
+                  stopColor="#436275"
+                />
+                <stop
+                  offset="0.58"
+                  stopColor="#436275"
+                  stopOpacity="0.4"
+                />
+                <stop
+                  offset={1}
+                  stopColor="#436275"
+                  stopOpacity={0}
+                />
+              </radialGradient>
             </defs>
+            <title>
+              Empty-state-illustration
+            </title>
+            <g
+              data-name="Layer 2"
+              id="Layer_2"
+            >
+              <g
+                data-name="Layer 1"
+                id="Layer_1-2"
+              >
+                <g
+                  className="cls-1"
+                >
+                  <path
+                    className="cls-2"
+                    d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"
+                  />
+                </g>
+                <g
+                  className="cls-1"
+                >
+                  <path
+                    className="cls-3"
+                    d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"
+                  />
+                </g>
+                <circle
+                  className="cls-4"
+                  cx="23.53"
+                  cy="73.77"
+                  r="11.93"
+                />
+                <circle
+                  className="cls-5"
+                  cx="23.53"
+                  cy="73.77"
+                  r="11.93"
+                />
+                <circle
+                  className="cls-6"
+                  cx="61.95"
+                  cy="55.24"
+                  r="34.25"
+                />
+                <circle
+                  className="cls-7"
+                  cx="61.95"
+                  cy="55.24"
+                  r="34.25"
+                />
+              </g>
+            </g>
           </svg>
         </div>
         <h3
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
index 115220ed..1357eae6 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
@@ -952,7 +952,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1054,7 +1053,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1177,7 +1175,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1296,7 +1293,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1397,7 +1393,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1494,7 +1489,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1619,7 +1613,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3454,7 +3447,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3556,7 +3548,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3679,7 +3670,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3798,7 +3788,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3899,7 +3888,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3996,7 +3984,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -4121,7 +4108,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
index 82177a76..b9230356 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
@@ -70,7 +70,6 @@ exports[`renders <Tags /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -439,30 +438,30 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c43 {
+.c44 {
   margin-top: 1.875rem;
   margin-bottom: 1.125rem;
 }
 
-.c32 {
+.c33 {
   margin-top: 0.1875rem;
   margin-right: 1.125rem;
 }
 
-.c34 {
+.c35 {
   margin-top: 0.75rem;
 }
 
-.c42 {
+.c43 {
   margin-right: 0.75rem;
 }
 
-.c21 {
+.c22 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
 }
 
-.c28 {
+.c29 {
   padding-left: 1.125rem;
   padding-right: 1.125rem;
   padding-top: 1.125rem;
@@ -525,7 +524,6 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -581,94 +579,6 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   pointer-events: none;
 }
 
-.c38 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c38:focus {
-  outline: 0;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c38:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c38:active,
-.c38:active:hover,
-.c38:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c38[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c38:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c38:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c38:active,
-.c38:active:hover,
-.c38:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
 .c39 {
   box-sizing: border-box;
   display: inline-block;
@@ -690,7 +600,6 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -707,10 +616,9 @@ 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);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
@@ -742,23 +650,111 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }
 
 .c39:focus {
-  background-color: rgb(250,250,250);
+  background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
 .c39:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
 }
 
 .c39:active,
 .c39:active:hover,
 .c39:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
 }
 
-.c41 {
+.c40 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c40:focus {
+  outline: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c40:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c40:active,
+.c40:active:hover,
+.c40:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c40[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c40:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c40:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c40:active,
+.c40:active:hover,
+.c40:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c42 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -779,7 +775,6 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -815,7 +810,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   float: right;
 }
 
-.c41:focus {
+.c42:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -823,57 +818,57 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c41:hover {
+.c42:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c41:active,
-.c41:active:hover,
-.c41:active:focus {
+.c42:active,
+.c42:active:hover,
+.c42:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c41[disabled] {
+.c42[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c41:focus {
+.c42:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c41:hover {
+.c42:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c41:active,
-.c41:active:hover,
-.c41:active:focus {
+.c42:active,
+.c42:active:hover,
+.c42:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c41:focus {
+.c42:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c41:hover {
+.c42:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c41:active,
-.c41:active:hover,
-.c41:active:focus {
+.c42:active,
+.c42:active:hover,
+.c42:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
@@ -912,7 +907,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c35 {
+.c36 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -931,7 +926,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c33 {
+.c34 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -941,7 +936,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   display: block;
 }
 
-.c36 {
+.c37 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -951,7 +946,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   display: block;
 }
 
-.c40 {
+.c41 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -968,7 +963,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c44 {
+.c45 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -976,7 +971,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   font-size: 1.3125rem;
 }
 
-.c25 {
+.c26 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: 600;
@@ -1018,7 +1013,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c22 {
+.c23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1046,7 +1041,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   align-items: center;
 }
 
-.c29 {
+.c30 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1076,7 +1071,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c30 {
+.c31 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1096,7 +1091,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c16 {
+.c17 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1119,7 +1114,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c19 {
+.c20 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1146,7 +1141,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   flex: 0 0 2.875rem;
 }
 
-.c27 {
+.c28 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1168,7 +1163,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c26 {
+.c27 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1184,7 +1179,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c18 {
+.c19 {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -1196,7 +1191,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c24 {
+.c25 {
   box-sizing: border-box;
   min-height: 2.9375rem;
   max-width: 100%;
@@ -1255,7 +1250,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   float: right;
 }
 
-.c31 {
+.c32 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -1335,29 +1330,33 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c17 {
+.c16 {
+  margin-bottom: 0;
+}
+
+.c18 {
   border-top: 0;
   border-left: 0;
   border-right: 0;
 }
 
-.c37 {
+.c38 {
   margin-right: 0.375rem;
 }
 
-.c20 {
+.c21 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 
-.c23 {
+.c24 {
   height: 2.9375rem;
   max-width: 98%;
 }
 
-.c45 {
+.c46 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -1389,7 +1388,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c35 {
+  .c36 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1398,7 +1397,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c35 {
+  .c36 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1407,7 +1406,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c33 {
+  .c34 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -1416,7 +1415,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c36 {
+  .c37 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -1425,7 +1424,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c40 {
+  .c41 {
     display: none;
   }
 }
@@ -1499,32 +1498,33 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
     height="0.6875rem"
   />
   <form
+    className="c16"
     onSubmit={undefined}
   >
     <div
-      className="c16"
+      className="c17"
       disabled={false}
       name="card"
     >
       <div
-        className="c17 c18 c19"
+        className="c18 c19 c20"
         disabled={false}
         name="card-header"
         onClick={false}
       >
         <div
-          className="c20 c21"
+          className="c21 c22"
         >
           <div
-            className="c22"
+            className="c23"
           >
             <div
-              className="c23 c24 c19"
+              className="c24 c25 c20"
               disabled={false}
               name="card-header-meta"
             >
               <h4
-                className="c25"
+                className="c26"
               >
                 Add tag
               </h4>
@@ -1533,22 +1533,22 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
         </div>
       </div>
       <div
-        className="c26 c27"
+        className="c27 c28"
         disabled={false}
         name="card-outlet"
       >
         <div
-          className="c28"
+          className="c29"
         >
           <div
-            className="c29"
+            className="c30"
             wrap={true}
           >
             <div
-              className="c30"
+              className="c31"
             >
               <div
-                className="c31"
+                className="c32"
                 name="name"
                 role="group"
                 style={undefined}
@@ -1562,7 +1562,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                   key
                 </label>
                 <div
-                  className="c32"
+                  className="c33"
                 >
                   <input
                     className="c8"
@@ -1574,17 +1574,17 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                     className="c15"
                   >
                     <div
-                      className="c33"
+                      className="c34"
                     />
                   </div>
                 </div>
               </div>
             </div>
             <div
-              className="c30"
+              className="c31"
             >
               <div
-                className="c31"
+                className="c32"
                 name="value"
                 role="group"
                 style={undefined}
@@ -1609,7 +1609,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                     className="c15"
                   >
                     <div
-                      className="c33"
+                      className="c34"
                     />
                   </div>
                 </div>
@@ -1617,16 +1617,16 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
             </div>
           </div>
           <div
-            className="c34"
+            className="c35"
           >
             <div
-              className="c35"
+              className="c36"
             >
               <div
-                className="c36"
+                className="c37"
               >
                 <button
-                  className="c37 c38 c11 c12 c13"
+                  className="c38 c39 c11 c12 c13"
                   data-ui-button="true"
                   disabled={false}
                   href=""
@@ -1638,7 +1638,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                   </span>
                 </button>
                 <button
-                  className="c39 c11 c12 c13"
+                  className="c40 c11 c12 c13"
                   data-ui-button="true"
                   disabled={true}
                   href=""
@@ -1650,10 +1650,10 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                 </button>
               </div>
               <div
-                className="c40"
+                className="c41"
               >
                 <button
-                  className="c41 c11 c12 c13"
+                  className="c42 c11 c12 c13"
                   data-ui-button="true"
                   disabled={false}
                   href=""
@@ -1662,7 +1662,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                   type="button"
                 >
                   <div
-                    className="c42"
+                    className="c43"
                   >
                     <svg
                       height="16"
@@ -1693,10 +1693,10 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
     </div>
   </form>
   <div
-    className="c43"
+    className="c44"
   >
     <h3
-      className="c44"
+      className="c45"
     >
       0
        tag
@@ -1704,7 +1704,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
     </h3>
   </div>
   <ul
-    className="c45"
+    className="c46"
   />
 </div>
 `;
@@ -1779,7 +1779,6 @@ exports[`renders <Tags editable /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -2148,30 +2147,30 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c44 {
+.c45 {
   margin-top: 1.875rem;
   margin-bottom: 1.125rem;
 }
 
-.c33 {
+.c34 {
   margin-top: 0.1875rem;
   margin-right: 1.125rem;
 }
 
-.c35 {
+.c36 {
   margin-top: 0.75rem;
 }
 
-.c43 {
+.c44 {
   margin-right: 0.75rem;
 }
 
-.c22 {
+.c23 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
 }
 
-.c29 {
+.c30 {
   padding-left: 1.125rem;
   padding-right: 1.125rem;
   padding-top: 1.125rem;
@@ -2213,94 +2212,6 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   display: inline-block;
 }
 
-.c39 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c39:focus {
-  outline: 0;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c39:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c39:active,
-.c39:active:hover,
-.c39:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c39[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c39:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c39:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c39:active,
-.c39:active:hover,
-.c39:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
 .c40 {
   box-sizing: border-box;
   display: inline-block;
@@ -2322,7 +2233,6 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -2339,10 +2249,9 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
@@ -2374,23 +2283,111 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 }
 
 .c40:focus {
-  background-color: rgb(250,250,250);
+  background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
 .c40:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
 }
 
 .c40:active,
 .c40:active:hover,
 .c40:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
 }
 
-.c42 {
+.c41 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c41:focus {
+  outline: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c41:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c41:active,
+.c41:active:hover,
+.c41:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c41[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c41:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c41:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c41:active,
+.c41:active:hover,
+.c41:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c43 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2411,7 +2408,6 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -2447,7 +2443,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   float: right;
 }
 
-.c42:focus {
+.c43:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -2455,57 +2451,57 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c42:hover {
+.c43:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c42:active,
-.c42:active:hover,
-.c42:active:focus {
+.c43:active,
+.c43:active:hover,
+.c43:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c42[disabled] {
+.c43[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c42:focus {
+.c43:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c42:hover {
+.c43:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c42:active,
-.c42:active:hover,
-.c42:active:focus {
+.c43:active,
+.c43:active:hover,
+.c43:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c42:focus {
+.c43:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c42:hover {
+.c43:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c42:active,
-.c42:active:hover,
-.c42:active:focus {
+.c43:active,
+.c43:active:hover,
+.c43:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
@@ -2531,7 +2527,6 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -2643,7 +2638,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c36 {
+.c37 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2662,7 +2657,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c34 {
+.c35 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -2672,7 +2667,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   display: block;
 }
 
-.c37 {
+.c38 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -2682,7 +2677,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   display: block;
 }
 
-.c41 {
+.c42 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -2699,7 +2694,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c45 {
+.c46 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -2746,7 +2741,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c23 {
+.c24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2774,7 +2769,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   align-items: center;
 }
 
-.c30 {
+.c31 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2804,7 +2799,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c31 {
+.c32 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -2824,7 +2819,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c28 {
+.c29 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2846,7 +2841,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c17 {
+.c18 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2870,7 +2865,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   cursor: pointer;
 }
 
-.c20 {
+.c21 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2898,7 +2893,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   flex: 0 0 2.875rem;
 }
 
-.c27 {
+.c28 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -2914,7 +2909,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c19 {
+.c20 {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -2926,7 +2921,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c25 {
+.c26 {
   box-sizing: border-box;
   min-height: 2.9375rem;
   max-width: 100%;
@@ -2985,7 +2980,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   float: right;
 }
 
-.c32 {
+.c33 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -3065,7 +3060,11 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c26 {
+.c17 {
+  margin-bottom: 0;
+}
+
+.c27 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -3074,29 +3073,29 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   display: block;
 }
 
-.c18 {
+.c19 {
   border-top: 0;
   border-left: 0;
   border-right: 0;
 }
 
-.c38 {
+.c39 {
   margin-right: 0.375rem;
 }
 
-.c21 {
+.c22 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 
-.c24 {
+.c25 {
   height: 2.9375rem;
   max-width: 98%;
 }
 
-.c46 {
+.c47 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -3128,7 +3127,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c36 {
+  .c37 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -3137,7 +3136,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c36 {
+  .c37 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -3146,7 +3145,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c34 {
+  .c35 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -3155,7 +3154,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c37 {
+  .c38 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -3164,7 +3163,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c41 {
+  .c42 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -3249,32 +3248,33 @@ exports[`renders <Tags editing /> without throwing 1`] = `
     height="1.5rem"
   />
   <form
+    className="c17"
     onSubmit={undefined}
   >
     <div
-      className="c17"
+      className="c18"
       disabled={false}
       name="card"
     >
       <div
-        className="c18 c19 c20"
+        className="c19 c20 c21"
         disabled={false}
         name="card-header"
         onClick={[Function]}
       >
         <div
-          className="c21 c22"
+          className="c22 c23"
         >
           <div
-            className="c23"
+            className="c24"
           >
             <div
-              className="c24 c25 c20"
+              className="c25 c26 c21"
               disabled={false}
               name="card-header-meta"
             >
               <div
-                className="c26"
+                className="c27"
               >
                 <span>
                   name1: 
@@ -3305,22 +3305,22 @@ exports[`renders <Tags editing /> without throwing 1`] = `
         </div>
       </div>
       <div
-        className="c27 c28"
+        className="c28 c29"
         disabled={false}
         name="card-outlet"
       >
         <div
-          className="c29"
+          className="c30"
         >
           <div
-            className="c30"
+            className="c31"
             wrap={true}
           >
             <div
-              className="c31"
+              className="c32"
             >
               <div
-                className="c32"
+                className="c33"
                 name="name"
                 role="group"
                 style={undefined}
@@ -3334,7 +3334,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
                   key
                 </label>
                 <div
-                  className="c33"
+                  className="c34"
                 >
                   <input
                     className="c8"
@@ -3346,17 +3346,17 @@ exports[`renders <Tags editing /> without throwing 1`] = `
                     className="c15"
                   >
                     <div
-                      className="c34"
+                      className="c35"
                     />
                   </div>
                 </div>
               </div>
             </div>
             <div
-              className="c31"
+              className="c32"
             >
               <div
-                className="c32"
+                className="c33"
                 name="value"
                 role="group"
                 style={undefined}
@@ -3381,7 +3381,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
                     className="c15"
                   >
                     <div
-                      className="c34"
+                      className="c35"
                     />
                   </div>
                 </div>
@@ -3389,16 +3389,16 @@ exports[`renders <Tags editing /> without throwing 1`] = `
             </div>
           </div>
           <div
-            className="c35"
+            className="c36"
           >
             <div
-              className="c36"
+              className="c37"
             >
               <div
-                className="c37"
+                className="c38"
               >
                 <button
-                  className="c38 c39 c11 c12 c13"
+                  className="c39 c40 c11 c12 c13"
                   data-ui-button="true"
                   disabled={false}
                   href=""
@@ -3410,7 +3410,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
                   </span>
                 </button>
                 <button
-                  className="c40 c11 c12 c13"
+                  className="c41 c11 c12 c13"
                   data-ui-button="true"
                   disabled={true}
                   href=""
@@ -3422,10 +3422,10 @@ exports[`renders <Tags editing /> without throwing 1`] = `
                 </button>
               </div>
               <div
-                className="c41"
+                className="c42"
               >
                 <button
-                  className="c42 c11 c12 c13"
+                  className="c43 c11 c12 c13"
                   data-ui-button="true"
                   disabled={false}
                   href=""
@@ -3434,7 +3434,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
                   type="button"
                 >
                   <div
-                    className="c43"
+                    className="c44"
                   >
                     <svg
                       height="16"
@@ -3465,10 +3465,10 @@ exports[`renders <Tags editing /> without throwing 1`] = `
     </div>
   </form>
   <div
-    className="c44"
+    className="c45"
   >
     <h3
-      className="c45"
+      className="c46"
     >
       0
        tag
@@ -3476,7 +3476,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
     </h3>
   </div>
   <ul
-    className="c46"
+    className="c47"
   />
 </div>
 `;
@@ -3490,26 +3490,26 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c47 {
+.c48 {
   margin-top: 1.875rem;
   margin-bottom: 1.125rem;
 }
 
-.c33 {
+.c34 {
   margin-top: 0.1875rem;
   margin-right: 1.125rem;
 }
 
-.c35 {
+.c36 {
   margin-top: 0.75rem;
 }
 
-.c22 {
+.c23 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
 }
 
-.c29 {
+.c30 {
   padding-left: 1.125rem;
   padding-right: 1.125rem;
   padding-top: 1.125rem;
@@ -3543,24 +3543,24 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c44 {
+.c45 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
   animation: iCqDak 1.5s ease-out 0s infinite;
 }
 
-.c45 {
+.c46 {
   -webkit-animation-delay: 0.5s;
   animation-delay: 0.5s;
 }
 
-.c46 {
+.c47 {
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
 }
 
-.c43 {
+.c44 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3596,94 +3596,6 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   display: inline-block;
 }
 
-.c39 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c39:focus {
-  outline: 0;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c39:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c39:active,
-.c39:active:hover,
-.c39:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c39[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c39:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c39:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c39:active,
-.c39:active:hover,
-.c39:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
 .c40 {
   box-sizing: border-box;
   display: inline-block;
@@ -3705,7 +3617,6 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3722,10 +3633,9 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
@@ -3757,18 +3667,106 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 }
 
 .c40:focus {
-  background-color: rgb(250,250,250);
+  background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
 .c40:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
 }
 
 .c40:active,
 .c40:active:hover,
 .c40:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c41 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c41:focus {
+  outline: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c41:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c41:active,
+.c41:active:hover,
+.c41:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c41[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c41:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c41:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c41:active,
+.c41:active:hover,
+.c41:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
@@ -3794,7 +3792,6 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3872,7 +3869,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   border-color: rgb(250,250,250);
 }
 
-.c42 {
+.c43 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3893,7 +3890,6 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3934,7 +3930,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   float: right;
 }
 
-.c42:focus {
+.c43:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -3942,74 +3938,74 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c42:hover {
+.c43:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c42:active,
-.c42:active:hover,
-.c42:active:focus {
+.c43:active,
+.c43:active:hover,
+.c43:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c42[disabled] {
+.c43[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c42:focus {
+.c43:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c42:hover {
+.c43:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c42:active,
-.c42:active:hover,
-.c42:active:focus {
+.c43:active,
+.c43:active:hover,
+.c43:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c42:focus {
+.c43:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c42:hover {
+.c43:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c42:active,
-.c42:active:hover,
-.c42:active:focus {
+.c43:active,
+.c43:active:hover,
+.c43:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c42:focus {
+.c43:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c42:hover {
+.c43:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c42:active,
-.c42:active:hover,
-.c42:active:focus {
+.c43:active,
+.c43:active:hover,
+.c43:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
@@ -4048,7 +4044,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c36 {
+.c37 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4067,7 +4063,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c34 {
+.c35 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4077,7 +4073,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   display: block;
 }
 
-.c37 {
+.c38 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4087,7 +4083,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   display: block;
 }
 
-.c41 {
+.c42 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4104,7 +4100,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c48 {
+.c49 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -4151,7 +4147,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   align-items: flex-end;
 }
 
-.c23 {
+.c24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4179,7 +4175,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   align-items: center;
 }
 
-.c30 {
+.c31 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4209,7 +4205,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c31 {
+.c32 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -4229,7 +4225,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c28 {
+.c29 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4251,7 +4247,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c17 {
+.c18 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4275,7 +4271,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   cursor: pointer;
 }
 
-.c20 {
+.c21 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4303,7 +4299,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   flex: 0 0 2.875rem;
 }
 
-.c27 {
+.c28 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -4319,7 +4315,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c19 {
+.c20 {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -4331,7 +4327,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c25 {
+.c26 {
   box-sizing: border-box;
   min-height: 2.9375rem;
   max-width: 100%;
@@ -4390,7 +4386,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   float: right;
 }
 
-.c32 {
+.c33 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -4470,7 +4466,11 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c26 {
+.c17 {
+  margin-bottom: 0;
+}
+
+.c27 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -4479,29 +4479,29 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   display: block;
 }
 
-.c18 {
+.c19 {
   border-top: 0;
   border-left: 0;
   border-right: 0;
 }
 
-.c38 {
+.c39 {
   margin-right: 0.375rem;
 }
 
-.c21 {
+.c22 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 
-.c24 {
+.c25 {
   height: 2.9375rem;
   max-width: 98%;
 }
 
-.c49 {
+.c50 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -4533,7 +4533,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c36 {
+  .c37 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -4542,7 +4542,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c36 {
+  .c37 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -4551,7 +4551,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c34 {
+  .c35 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -4560,7 +4560,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c37 {
+  .c38 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -4569,7 +4569,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c41 {
+  .c42 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -4654,32 +4654,33 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
     height="1.5rem"
   />
   <form
+    className="c17"
     onSubmit={undefined}
   >
     <div
-      className="c17"
+      className="c18"
       disabled={false}
       name="card"
     >
       <div
-        className="c18 c19 c20"
+        className="c19 c20 c21"
         disabled={false}
         name="card-header"
         onClick={[Function]}
       >
         <div
-          className="c21 c22"
+          className="c22 c23"
         >
           <div
-            className="c23"
+            className="c24"
           >
             <div
-              className="c24 c25 c20"
+              className="c25 c26 c21"
               disabled={false}
               name="card-header-meta"
             >
               <div
-                className="c26"
+                className="c27"
               >
                 <span>
                   name1: 
@@ -4710,22 +4711,22 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
         </div>
       </div>
       <div
-        className="c27 c28"
+        className="c28 c29"
         disabled={false}
         name="card-outlet"
       >
         <div
-          className="c29"
+          className="c30"
         >
           <div
-            className="c30"
+            className="c31"
             wrap={true}
           >
             <div
-              className="c31"
+              className="c32"
             >
               <div
-                className="c32"
+                className="c33"
                 name="name"
                 role="group"
                 style={undefined}
@@ -4739,7 +4740,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                   key
                 </label>
                 <div
-                  className="c33"
+                  className="c34"
                 >
                   <input
                     className="c8"
@@ -4751,17 +4752,17 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                     className="c15"
                   >
                     <div
-                      className="c34"
+                      className="c35"
                     />
                   </div>
                 </div>
               </div>
             </div>
             <div
-              className="c31"
+              className="c32"
             >
               <div
-                className="c32"
+                className="c33"
                 name="value"
                 role="group"
                 style={undefined}
@@ -4786,7 +4787,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                     className="c15"
                   >
                     <div
-                      className="c34"
+                      className="c35"
                     />
                   </div>
                 </div>
@@ -4794,16 +4795,16 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
             </div>
           </div>
           <div
-            className="c35"
+            className="c36"
           >
             <div
-              className="c36"
+              className="c37"
             >
               <div
-                className="c37"
+                className="c38"
               >
                 <button
-                  className="c38 c39 c11 c12 c13"
+                  className="c39 c40 c11 c12 c13"
                   data-ui-button="true"
                   disabled={false}
                   href=""
@@ -4815,7 +4816,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                   </span>
                 </button>
                 <button
-                  className="c40 c11 c12 c13"
+                  className="c41 c11 c12 c13"
                   data-ui-button="true"
                   disabled={true}
                   href=""
@@ -4827,10 +4828,10 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                 </button>
               </div>
               <div
-                className="c41"
+                className="c42"
               >
                 <button
-                  className="c42 c11 c12 c13"
+                  className="c43 c11 c12 c13"
                   data-ui-button="true"
                   disabled={false}
                   href=""
@@ -4839,28 +4840,28 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                   type="button"
                 >
                   <div
-                    className="c43"
+                    className="c44"
                   >
                     <svg
                       height="10"
                       width="28"
                     >
                       <rect
-                        className="c44"
+                        className="c45"
                         height="6"
                         width="6"
                         x="2"
                         y="2"
                       />
                       <rect
-                        className="c45 c44"
+                        className="c46 c45"
                         height="6"
                         width="6"
                         x="11"
                         y="2"
                       />
                       <rect
-                        className="c46 c44"
+                        className="c47 c45"
                         height="6"
                         width="6"
                         x="20"
@@ -4877,10 +4878,10 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
     </div>
   </form>
   <div
-    className="c47"
+    className="c48"
   >
     <h3
-      className="c48"
+      className="c49"
     >
       0
        tag
@@ -4888,7 +4889,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
     </h3>
   </div>
   <ul
-    className="c49"
+    className="c50"
   />
 </div>
 `;
@@ -4963,7 +4964,6 @@ exports[`renders <Tags error /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -5450,7 +5450,6 @@ exports[`renders <Tags loading /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -5887,7 +5886,6 @@ exports[`renders <Tags tags /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -6124,21 +6122,6 @@ exports[`renders <Tags tags /> without throwing 1`] = `
 }
 
 .c21 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c22 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
   border-radius: 0.125rem;
@@ -6283,47 +6266,35 @@ exports[`renders <Tags tags /> without throwing 1`] = `
     <div
       className="c20"
     >
-      <div
+      <li
         className="c21"
+        fill={null}
+        onClick={undefined}
       >
-        <li
-          className="c22"
-          fill={null}
-          onClick={undefined}
-        >
-          name1: value1
-        </li>
-      </div>
+        name1: value1
+      </li>
     </div>
     <div
       className="c20"
     >
-      <div
+      <li
         className="c21"
+        fill={null}
+        onClick={undefined}
       >
-        <li
-          className="c22"
-          fill={null}
-          onClick={undefined}
-        >
-          name2: value2
-        </li>
-      </div>
+        name2: value2
+      </li>
     </div>
     <div
       className="c20"
     >
-      <div
+      <li
         className="c21"
+        fill={null}
+        onClick={undefined}
       >
-        <li
-          className="c22"
-          fill={null}
-          onClick={undefined}
-        >
-          name3: value3
-        </li>
-      </div>
+        name3: value3
+      </li>
     </div>
   </ul>
 </div>
diff --git a/packages/icons/src/empty-state.js b/packages/icons/src/empty-state.js
new file mode 100644
index 00000000..f5e0e758
--- /dev/null
+++ b/packages/icons/src/empty-state.js
@@ -0,0 +1,126 @@
+import React from 'react';
+
+export default ({
+  fill = null,
+  light = false,
+  disabled = false,
+  colors = {},
+  ...rest
+}) => (
+  <svg
+    width={119}
+    height={109}
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 119.34 109.47"
+  >
+    <defs>
+      <style
+        dangerouslySetInnerHTML={{
+          __html:
+            '.cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}'
+        }}
+      />
+      <radialGradient
+        id="radial-gradient"
+        cx="208.79"
+        cy="99.06"
+        r="57.13"
+        gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0.05" stopColor="#436275" />
+        <stop offset="0.1" stopColor="#415f72" />
+        <stop offset="0.13" stopColor="#3a5769" />
+        <stop offset="0.16" stopColor="#2e4959" />
+        <stop offset="0.19" stopColor="#1d3543" />
+        <stop offset="0.19" stopColor="#1b3240" />
+        <stop offset="0.26" stopColor="#1e3644" />
+        <stop offset="0.32" stopColor="#274150" />
+        <stop offset="0.39" stopColor="#365364" />
+        <stop offset="0.43" stopColor="#436275" />
+        <stop offset="0.49" stopColor="#3f5d6f" />
+        <stop offset="0.56" stopColor="#324e5f" />
+        <stop offset="0.65" stopColor="#1e3644" />
+        <stop offset="0.66" stopColor="#1b3240" />
+        <stop offset="0.85" stopColor="#1b3240" />
+        <stop offset="0.9" stopColor="#2c4656" />
+        <stop offset="0.95" stopColor="#436275" />
+      </radialGradient>
+      <radialGradient
+        id="radial-gradient-2"
+        cx="59.15"
+        cy="56.86"
+        r="46.01"
+        gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset={0} stopColor="#436275" />
+        <stop offset="0.1" stopColor="#426073" />
+        <stop offset="0.13" stopColor="#3c5a6c" />
+        <stop offset="0.16" stopColor="#344f61" />
+        <stop offset="0.18" stopColor="#274050" />
+        <stop offset="0.19" stopColor="#1b3240" />
+        <stop offset="0.26" stopColor="#1e3644" />
+        <stop offset="0.32" stopColor="#274150" />
+        <stop offset="0.39" stopColor="#365364" />
+        <stop offset="0.43" stopColor="#436275" />
+        <stop offset="0.49" stopColor="#3f5d6f" />
+        <stop offset="0.56" stopColor="#324e5f" />
+        <stop offset="0.65" stopColor="#1e3644" />
+        <stop offset="0.66" stopColor="#1b3240" />
+        <stop offset="0.85" stopColor="#1b3240" />
+        <stop offset="0.92" stopColor="#2c4656" />
+        <stop offset={1} stopColor="#436275" />
+      </radialGradient>
+      <radialGradient
+        id="radial-gradient-3"
+        cx="-521.06"
+        cy="366.16"
+        r="32.44"
+        gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset={0} stopColor="#436275" />
+        <stop offset="0.02" stopColor="#436275" stopOpacity="0.97" />
+        <stop offset="0.34" stopColor="#436275" stopOpacity="0.55" />
+        <stop offset="0.62" stopColor="#436275" stopOpacity="0.25" />
+        <stop offset="0.85" stopColor="#436275" stopOpacity="0.07" />
+        <stop offset={1} stopColor="#436275" stopOpacity={0} />
+      </radialGradient>
+      <radialGradient
+        id="radial-gradient-4"
+        cx="-136.43"
+        cy="140.9"
+        r="54.82"
+        gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset={0} stopColor="#436275" />
+        <stop offset="0.58" stopColor="#436275" stopOpacity="0.4" />
+        <stop offset={1} stopColor="#436275" stopOpacity={0} />
+      </radialGradient>
+    </defs>
+    <title>Empty-state-illustration</title>
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <g className="cls-1">
+          <path
+            className="cls-2"
+            d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"
+          />
+        </g>
+        <g className="cls-1">
+          <path
+            className="cls-3"
+            d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"
+          />
+        </g>
+        <circle className="cls-4" cx="23.53" cy="73.77" r="11.93" />
+        <circle className="cls-5" cx="23.53" cy="73.77" r="11.93" />
+        <circle className="cls-6" cx="61.95" cy="55.24" r="34.25" />
+        <circle className="cls-7" cx="61.95" cy="55.24" r="34.25" />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index 6fa67379..88385213 100644
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@@ -12,6 +12,7 @@ export { default as Delete } from './delete';
 export { default as Dot } from './dot';
 export { default as Duplicate } from './duplicate';
 export { default as Edit } from './edit';
+export { default as EmptyState } from './empty-state';
 export { default as Fabric } from './fabric';
 // export { default as Filter } from './filter';
 export { default as Firewall } from './firewall';
diff --git a/packages/instance-steps/src/firewall/index.js b/packages/instance-steps/src/firewall/index.js
index 302593cb..661da6d5 100644
--- a/packages/instance-steps/src/firewall/index.js
+++ b/packages/instance-steps/src/firewall/index.js
@@ -5,6 +5,7 @@ import { compose, graphql } from 'react-apollo';
 import { Link } from 'react-router-dom';
 import ReduxForm from 'declarative-redux-form';
 import { connect } from 'react-redux';
+import { change } from 'redux-form';
 import get from 'lodash.get';
 import forceArray from 'force-array';
 
@@ -39,6 +40,8 @@ const Firewall = ({
   tagRules = [],
   loading = false,
   enabled = false,
+  showInactiveRules = null,
+  showInactive = false,
   ...props
 }) => (
   <Step name="firewall" getValue={handleGetValue} {...props}>
@@ -98,6 +101,15 @@ const Firewall = ({
                       can potentially affect your instance
                     </P>
                   </Margin>
+                  <Margin top={2}>
+                    <Button
+                      secondary
+                      onClick={showInactiveRules}
+                      disabled={showInactive}
+                    >
+                      View Inactive Rules
+                    </Button>
+                  </Margin>
                 </Fragment>
               </Empty>
             </Margin>
@@ -142,7 +154,9 @@ const Firewall = ({
 export default compose(
   connect(({ form, values }, ownProps) => ({
     ...ownProps,
-    enabled: get(form, `${IC_FW_F_ENABLED}.values.enabled`, false),
+    enabled:
+      console.log(form, values) ||
+      get(form, `${IC_FW_F_ENABLED}.values.enabled`, false),
     showInactive: get(form, `${IC_FW_F_INACTIVE}.values.inactive`, false),
     tags: get(values, IC_TAG_V_TAGS, [])
   })),
@@ -184,5 +198,9 @@ export default compose(
         handleGetValue: () => ({ enabled, defaultRules, tagRules })
       };
     }
-  })
+  }),
+  connect(null, (dispatch, { ...args }) => ({
+    showInactiveRules: () =>
+      dispatch(change(IC_FW_F_INACTIVE, 'inactive', true))
+  }))
 )(Firewall);
diff --git a/packages/instance-steps/src/name/index.js b/packages/instance-steps/src/name/index.js
index b5169d6a..f787dd6d 100644
--- a/packages/instance-steps/src/name/index.js
+++ b/packages/instance-steps/src/name/index.js
@@ -42,6 +42,10 @@ const RandomizeIcon = styled(BaseRandomizeIcon)`
   width: ${remcalc(16)};
 `;
 
+const Form = styled.form`
+  margin-bottom: 0;
+`;
+
 const Name = ({
   initialValues,
   handleValidate,
@@ -79,7 +83,7 @@ const Name = ({
             keepDirtyOnReinitialize
           >
             {props => (
-              <form onSubmit={null}>
+              <Form onSubmit={null}>
                 <FormGroup name="name" fluid field={Field}>
                   <FormLabel>Instance name</FormLabel>
                   <Margin top="0.5">
@@ -113,7 +117,7 @@ const Name = ({
                     Next
                   </Button>
                 </Margin>
-              </form>
+              </Form>
             )}
           </ReduxForm>
         </Margin>
diff --git a/packages/instance-steps/src/package/components.js b/packages/instance-steps/src/package/components.js
index a0a00232..1ab3687c 100644
--- a/packages/instance-steps/src/package/components.js
+++ b/packages/instance-steps/src/package/components.js
@@ -30,7 +30,7 @@ import {
   MemoryIcon
 } from 'joyent-ui-toolkit';
 
-import { NoPackages } from 'joyent-logo-assets';
+import { EmptyState } from 'joyent-icons';
 
 const GroupIcons = {
   MEMORY: <MemoryIcon fill="#32ABCF" />,
@@ -304,7 +304,7 @@ export const Empty = ({ children, ...rest }) => (
     <Padding all={6}>
       <Flex alignCenter justifyCenter column>
         <Margin bottom={2}>
-          <NoPackages />
+          <EmptyState />
         </Margin>
         <NoPackagesTitle>{children}</NoPackagesTitle>
       </Flex>
diff --git a/packages/logos/assets/empty-state.svg b/packages/logos/assets/empty-state.svg
new file mode 100644
index 00000000..96fe5421
--- /dev/null
+++ b/packages/logos/assets/empty-state.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 119.34 109.47"><defs><style>.cls-1{opacity:0.5;}.cls-2{fill:url(#radial-gradient);}.cls-3{fill:url(#radial-gradient-2);}.cls-4{fill:#fff;}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:#1b3240;}.cls-7{fill:url(#radial-gradient-4);}</style><radialGradient id="radial-gradient" cx="208.79" cy="99.06" r="57.13" gradientTransform="translate(227.6 -122.69) rotate(102.18) scale(1 1.28)" gradientUnits="userSpaceOnUse"><stop offset="0.05" stop-color="#436275"/><stop offset="0.1" stop-color="#415f72"/><stop offset="0.13" stop-color="#3a5769"/><stop offset="0.16" stop-color="#2e4959"/><stop offset="0.19" stop-color="#1d3543"/><stop offset="0.19" stop-color="#1b3240"/><stop offset="0.26" stop-color="#1e3644"/><stop offset="0.32" stop-color="#274150"/><stop offset="0.39" stop-color="#365364"/><stop offset="0.43" stop-color="#436275"/><stop offset="0.49" stop-color="#3f5d6f"/><stop offset="0.56" stop-color="#324e5f"/><stop offset="0.65" stop-color="#1e3644"/><stop offset="0.66" stop-color="#1b3240"/><stop offset="0.85" stop-color="#1b3240"/><stop offset="0.9" stop-color="#2c4656"/><stop offset="0.95" stop-color="#436275"/></radialGradient><radialGradient id="radial-gradient-2" cx="59.15" cy="56.86" r="46.01" gradientTransform="matrix(-0.52, 0.85, -1.09, -0.66, 151.75, 43.43)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#436275"/><stop offset="0.1" stop-color="#426073"/><stop offset="0.13" stop-color="#3c5a6c"/><stop offset="0.16" stop-color="#344f61"/><stop offset="0.18" stop-color="#274050"/><stop offset="0.19" stop-color="#1b3240"/><stop offset="0.26" stop-color="#1e3644"/><stop offset="0.32" stop-color="#274150"/><stop offset="0.39" stop-color="#365364"/><stop offset="0.43" stop-color="#436275"/><stop offset="0.49" stop-color="#3f5d6f"/><stop offset="0.56" stop-color="#324e5f"/><stop offset="0.65" stop-color="#1e3644"/><stop offset="0.66" stop-color="#1b3240"/><stop offset="0.85" stop-color="#1b3240"/><stop offset="0.92" stop-color="#2c4656"/><stop offset="1" stop-color="#436275"/></radialGradient><radialGradient id="radial-gradient-3" cx="-521.06" cy="366.16" r="32.44" gradientTransform="translate(353.22 -558.2) rotate(-21.55) scale(1 1.28)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#436275"/><stop offset="0.02" stop-color="#436275" stop-opacity="0.97"/><stop offset="0.34" stop-color="#436275" stop-opacity="0.55"/><stop offset="0.62" stop-color="#436275" stop-opacity="0.25"/><stop offset="0.85" stop-color="#436275" stop-opacity="0.07"/><stop offset="1" stop-color="#436275" stop-opacity="0"/></radialGradient><radialGradient id="radial-gradient-4" cx="-136.43" cy="140.9" r="54.82" gradientTransform="translate(242.58 104.51) rotate(58.19) scale(1 0.7)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#436275"/><stop offset="0.58" stop-color="#436275" stop-opacity="0.4"/><stop offset="1" stop-color="#436275" stop-opacity="0"/></radialGradient></defs><title>Empty-state-illustration</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><path class="cls-2" d="M80.06,4.35c-13.32-6.18-29.35-5.57-42.71.53S13.26,22.2,6.63,35.31C1.14,46.16-1.69,58.78,1.08,70.63,3.79,82.22,11.75,92.21,21.73,98.69s21.86,9.66,33.73,10.54c11.45.85,23.26-.43,33.68-5.27,19-8.83,31.51-30,30.09-50.91s-20.11-40-38.57-48.3Z"/></g><g class="cls-1"><path class="cls-3" d="M91.49,23.42c-11.21-9.58-24.94-13-38.61-11.88A45.54,45.54,0,0,0,19,32.25a49.05,49.05,0,0,0-5.48,39.52,35.93,35.93,0,0,0,7.15,13.75C26,91.54,33.6,95,41.27,97.28a64.6,64.6,0,0,0,20.16,3,47.46,47.46,0,0,0,32-13.61,44.74,44.74,0,0,0,13.06-32.08,42.49,42.49,0,0,0-15-31.19Z"/></g><circle class="cls-4" cx="23.53" cy="73.77" r="11.93"/><circle class="cls-5" cx="23.53" cy="73.77" r="11.93"/><circle class="cls-6" cx="61.95" cy="55.24" r="34.25"/><circle class="cls-7" cx="61.95" cy="55.24" r="34.25"/></g></g></svg>
\ No newline at end of file
diff --git a/packages/resource-step/src/index.js b/packages/resource-step/src/index.js
index 6acbb833..04f1b64d 100644
--- a/packages/resource-step/src/index.js
+++ b/packages/resource-step/src/index.js
@@ -59,6 +59,7 @@ export const Header = ({ icon = null, children }) => (
                   <FlexItem alignCenter>
                     <Link
                       to={expanded ? `/${namespace}` : `/${namespace}/${name}`}
+                      id={'expand-card-' + name}
                     >
                       <Flex alignCenter>
                         {expanded ? 'Save and Collase' : 'Expand'}
diff --git a/packages/resource-widgets/src/__tests__/__snapshots__/cns.spec.js.snap b/packages/resource-widgets/src/__tests__/__snapshots__/cns.spec.js.snap
index 20099da2..b7da6300 100644
--- a/packages/resource-widgets/src/__tests__/__snapshots__/cns.spec.js.snap
+++ b/packages/resource-widgets/src/__tests__/__snapshots__/cns.spec.js.snap
@@ -129,7 +129,6 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -453,7 +452,6 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
diff --git a/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap b/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
index 6de8eca6..73381ff7 100644
--- a/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
+++ b/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
@@ -246,21 +246,6 @@ Array [
 }
 
 .c17 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c18 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
   border-radius: 0.125rem;
@@ -1274,21 +1259,17 @@ Array [
                                     <ul
                                         className="c16"
                                     >
-                                        <div
+                                        <li
                                             className="c17"
-                                        >
-                                            <li
-                                                className="c18"
-                                                fill={null}
-                                                name="wat"
-                                                style={
-                                                    Object {
-                                                        "color": "#D8D8D8",
-                                                      }
-                                                }
-                                                value=""
-                                            />
-                                        </div>
+                                            fill={null}
+                                            name="wat"
+                                            style={
+                                                Object {
+                                                    "color": "#D8D8D8",
+                                                  }
+                                            }
+                                            value=""
+                                        />
                                     </ul>
                                 </div>
                             </div>
@@ -3169,7 +3150,7 @@ Array [
   display: block;
 }
 
-.c15 {
+.c14 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3220,21 +3201,6 @@ Array [
 }
 
 .c13 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c14 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
   border-radius: 0.125rem;
@@ -3278,7 +3244,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c14 {
     -webkit-flex-basis: 16.666666666666668%;
     -ms-flex-preferred-size: 16.666666666666668%;
     flex-basis: 16.666666666666668%;
@@ -3373,28 +3339,24 @@ Array [
                                 <ul
                                     className="c12"
                                 >
-                                    <div
+                                    <li
                                         className="c13"
-                                    >
-                                        <li
-                                            className="c14"
-                                            fill={null}
-                                            name="wat"
-                                            style={
-                                                Object {
-                                                    "color": "#D8D8D8",
-                                                  }
-                                            }
-                                            value=""
-                                        />
-                                    </div>
+                                        fill={null}
+                                        name="wat"
+                                        style={
+                                            Object {
+                                                "color": "#D8D8D8",
+                                              }
+                                        }
+                                        value=""
+                                    />
                                 </ul>
                             </div>
                         </div>
                     </div>
                 </div>
                 <div
-                    className="c15"
+                    className="c14"
                 >
                     <div
                         className="c5"
@@ -3434,7 +3396,7 @@ Array [
                     </div>
                 </div>
                 <div
-                    className="c15"
+                    className="c14"
                 >
                     <div
                         className="c5"
@@ -3474,7 +3436,7 @@ Array [
                     </div>
                 </div>
                 <div
-                    className="c15"
+                    className="c14"
                 >
                     <div
                         className="c5"
@@ -3768,21 +3730,6 @@ Array [
 }
 
 .c17 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
-.c18 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
   border-radius: 0.125rem;
@@ -4796,21 +4743,17 @@ Array [
                                     <ul
                                         className="c16"
                                     >
-                                        <div
+                                        <li
                                             className="c17"
-                                        >
-                                            <li
-                                                className="c18"
-                                                fill={null}
-                                                name="wat"
-                                                style={
-                                                    Object {
-                                                        "color": "#D8D8D8",
-                                                      }
-                                                }
-                                                value=""
-                                            />
-                                        </div>
+                                            fill={null}
+                                            name="wat"
+                                            style={
+                                                Object {
+                                                    "color": "#D8D8D8",
+                                                  }
+                                            }
+                                            value=""
+                                        />
                                     </ul>
                                 </div>
                             </div>
diff --git a/packages/resource-widgets/src/cns/index.js b/packages/resource-widgets/src/cns/index.js
index 2cdc6c32..d48950bd 100644
--- a/packages/resource-widgets/src/cns/index.js
+++ b/packages/resource-widgets/src/cns/index.js
@@ -9,7 +9,7 @@ import {
   P as BaseP,
   H3 as BaseH3,
   Divider,
-  TagList,
+  TagList as BaseTagList,
   Input,
   Toggle as BaseToggle,
   Small,
@@ -23,6 +23,10 @@ import {
   TagItem
 } from 'joyent-ui-toolkit';
 
+const TagList = styled(BaseTagList)`
+  margin-bottom: ${remcalc(-6)};
+`;
+
 const SmallBordered = styled(Small)`
   padding-right: ${remcalc(12)};
   margin-right: ${remcalc(12)};
@@ -201,16 +205,18 @@ const CnsHostnames = ({
         <Margin top={1}>
           <TagList>
             {services.map(value => (
-              <TagItem
-                active
-                fill={'rgba(66, 134, 244, 0.1)'}
-                key={value}
-                onRemoveClick={
-                  onRemoveService && (() => onRemoveService(value))
-                }
-              >
-                {value}
-              </TagItem>
+              <Margin right={1} bottom={1}>
+                <TagItem
+                  active
+                  fill={'rgba(66, 134, 244, 0.1)'}
+                  key={value}
+                  onRemoveClick={
+                    onRemoveService && (() => onRemoveService(value))
+                  }
+                >
+                  {value}
+                </TagItem>
+              </Margin>
             ))}
           </TagList>
         </Margin>
diff --git a/packages/resource-widgets/src/empty/index.js b/packages/resource-widgets/src/empty/index.js
index 7d101792..7dc51012 100644
--- a/packages/resource-widgets/src/empty/index.js
+++ b/packages/resource-widgets/src/empty/index.js
@@ -6,7 +6,7 @@ import is, { isNot } from 'styled-is';
 import remcalc from 'remcalc';
 
 import { H3, Card } from 'joyent-ui-toolkit';
-import { NoPackages } from 'joyent-logo-assets';
+import { EmptyState } from 'joyent-icons';
 
 const NoPackagesTitle = styled(H3)`
   color: ${props => props.theme.greyDark};
@@ -28,7 +28,7 @@ export default ({ children, ...rest }) => (
     <Padding all={6}>
       <Flex alignCenter justifyCenter column>
         <Margin bottom={2}>
-          <NoPackages />
+          <EmptyState />
         </Margin>
         <NoPackagesTitle>{children}</NoPackagesTitle>
       </Flex>
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 66e0a6f5..9c704622 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
@@ -46,7 +46,6 @@ exports[`Button Default Button 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -155,7 +154,6 @@ exports[`Button Disabled Button 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -279,7 +277,6 @@ exports[`Button Error Button 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -411,7 +408,6 @@ exports[`Button Loading Button 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -537,7 +533,6 @@ exports[`Button Secondary Button 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
diff --git a/packages/ui-toolkit/src/button/index.js b/packages/ui-toolkit/src/button/index.js
index a2d940f1..def39919 100644
--- a/packages/ui-toolkit/src/button/index.js
+++ b/packages/ui-toolkit/src/button/index.js
@@ -87,7 +87,6 @@ const Button = styled(BaseButton)`
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   letter-spacing: normal;
   text-decoration: none;
 
diff --git a/packages/ui-toolkit/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap b/packages/ui-toolkit/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap
index ca9be177..6d420b5c 100644
--- a/packages/ui-toolkit/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap
+++ b/packages/ui-toolkit/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap
@@ -1,94 +1,74 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <KeyValue /> without throwing 1`] = `
-.c18 {
+.c19 {
   margin-top: 0.1875rem;
   margin-right: 1.125rem;
 }
 
-.c22 {
+.c23 {
   margin-top: 0.1875rem;
 }
 
-.c23 {
+.c24 {
   margin-top: 0.75rem;
 }
 
-.c34 {
+.c35 {
   margin-right: 0.75rem;
 }
 
-.c5 {
+.c6 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
 }
 
-.c12 {
+.c13 {
   padding-left: 1.125rem;
   padding-right: 1.125rem;
   padding-top: 1.125rem;
   padding-bottom: 1.125rem;
 }
 
-.c20 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
-.c24 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
 .c21 {
   box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
 }
 
 .c25 {
   box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
 }
 
-.c32 {
+.c22 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -98,7 +78,27 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   display: block;
 }
 
-.c6 {
+.c26 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c33 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -126,7 +126,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   align-items: center;
 }
 
-.c13 {
+.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -156,7 +156,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c14 {
+.c15 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -176,7 +176,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c30 {
+.c31 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -188,22 +188,22 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   appearance: button;
 }
 
-.c30::-moz-focus-inner,
-.c30[type='button']::-moz-focus-inner,
-.c30[type='reset']::-moz-focus-inner,
-.c30[type='submit']::-moz-focus-inner {
+.c31::-moz-focus-inner,
+.c31[type='button']::-moz-focus-inner,
+.c31[type='reset']::-moz-focus-inner,
+.c31[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c30:-moz-focusring,
-.c30[type='button']:-moz-focusring,
-.c30[type='reset']:-moz-focusring,
-.c30[type='submit']:-moz-focusring {
+.c31:-moz-focusring,
+.c31[type='button']:-moz-focusring,
+.c31[type='reset']:-moz-focusring,
+.c31[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9 {
+.c10 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: 600;
@@ -211,7 +211,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c0 {
+.c1 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -234,7 +234,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c3 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -261,7 +261,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   flex: 0 0 2.875rem;
 }
 
-.c11 {
+.c12 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -283,7 +283,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c10 {
+.c11 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -299,7 +299,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c2 {
+.c3 {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -311,7 +311,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   min-height: 2.9375rem;
   max-width: 100%;
@@ -345,7 +345,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   color: inherit;
 }
 
-.c15 {
+.c16 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -358,7 +358,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   width: 100%;
 }
 
-.c19 {
+.c20 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -380,46 +380,46 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c19:focus {
+.c20:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c19::-webkit-input-placeholder {
+.c20::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19::-moz-placeholder {
+.c20::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:-ms-input-placeholder {
+.c20:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:invalid {
+.c20:invalid {
   box-shadow: none;
 }
 
-.c19:disabled {
+.c20:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c19:disabled::-webkit-input-placeholder {
+.c20:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:disabled::-moz-placeholder {
+.c20:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:disabled:-ms-input-placeholder {
+.c20:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c17 {
+.c18 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -429,21 +429,21 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   text-align: left;
 }
 
-.c16 {
+.c17 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c29 {
+.c30 {
   min-width: 7.5rem;
 }
 
-.c28 {
+.c29 {
   display: inline-block;
 }
 
-.c27 {
+.c28 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -464,7 +464,6 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -487,7 +486,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c27:focus {
+.c28:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -495,43 +494,43 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c27:hover {
+.c28:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c28:active,
+.c28:active:hover,
+.c28:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c27[disabled] {
+.c28[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c27:focus {
+.c28:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c27:hover {
+.c28:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c28:active,
+.c28:active:hover,
+.c28:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c31 {
+.c32 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -552,7 +551,6 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -576,7 +574,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c31:focus {
+.c32:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -584,43 +582,43 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c31:hover {
+.c32:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c32:active,
+.c32:active:hover,
+.c32:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c31[disabled] {
+.c32[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c31:focus {
+.c32:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c31:hover {
+.c32:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c32:active,
+.c32:active:hover,
+.c32:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c33 {
+.c34 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -641,7 +639,6 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -677,7 +674,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   float: right;
 }
 
-.c33:focus {
+.c34:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -685,85 +682,89 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c33:hover {
+.c34:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c33[disabled] {
+.c34[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c33:focus {
+.c34:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c33:hover {
+.c34:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c33:focus {
+.c34:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c33:hover {
+.c34:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c1 {
+.c0 {
+  margin-bottom: 0;
+}
+
+.c2 {
   border-top: 0;
   border-left: 0;
   border-right: 0;
 }
 
-.c26 {
+.c27 {
   margin-right: 0.375rem;
 }
 
-.c4 {
+.c5 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 
-.c7 {
+.c8 {
   height: 2.9375rem;
   max-width: 98%;
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -772,7 +773,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -781,7 +782,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c21 {
+  .c22 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -790,7 +791,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c26 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -799,38 +800,39 @@ exports[`renders <KeyValue /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c32 {
+  .c33 {
     display: none;
   }
 }
 
 <form
+  className="c0"
   onSubmit={undefined}
 >
   <div
-    className="c0"
+    className="c1"
     disabled={false}
     name="card"
   >
     <div
-      className="c1 c2 c3"
+      className="c2 c3 c4"
       disabled={false}
       name="card-header"
       onClick={false}
     >
       <div
-        className="c4 c5"
+        className="c5 c6"
       >
         <div
-          className="c6"
+          className="c7"
         >
           <div
-            className="c7 c8 c3"
+            className="c8 c9 c4"
             disabled={false}
             name="card-header-meta"
           >
             <h4
-              className="c9"
+              className="c10"
             >
               Add metadata
             </h4>
@@ -839,28 +841,28 @@ exports[`renders <KeyValue /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c10 c11"
+      className="c11 c12"
       disabled={false}
       name="card-outlet"
     >
       <div
-        className="c12"
+        className="c13"
       >
         <div
-          className="c13"
+          className="c14"
           wrap={true}
         >
           <div
-            className="c14"
+            className="c15"
           >
             <div
-              className="c15"
+              className="c16"
               name="name"
               role="group"
               style={undefined}
             >
               <label
-                className="c16 c17"
+                className="c17 c18"
                 htmlFor="k"
               >
                 Metadata
@@ -868,54 +870,54 @@ exports[`renders <KeyValue /> without throwing 1`] = `
                 key
               </label>
               <div
-                className="c18"
+                className="c19"
               >
                 <input
-                  className="c19"
+                  className="c20"
                   disabled={false}
                   id="k"
                   onBlur={null}
                 />
                 <div
-                  className="c20"
+                  className="c21"
                 >
                   <div
-                    className="c21"
+                    className="c22"
                   />
                 </div>
               </div>
             </div>
           </div>
           <div
-            className="c14"
+            className="c15"
           >
             <div
-              className="c15"
+              className="c16"
               name="value"
               role="group"
               style={undefined}
             >
               <label
-                className="c16 c17"
+                className="c17 c18"
                 htmlFor="l"
               >
                 Metadata
                  value
               </label>
               <div
-                className="c22"
+                className="c23"
               >
                 <input
-                  className="c19"
+                  className="c20"
                   disabled={false}
                   id="l"
                   onBlur={null}
                 />
                 <div
-                  className="c20"
+                  className="c21"
                 >
                   <div
-                    className="c21"
+                    className="c22"
                   />
                 </div>
               </div>
@@ -923,16 +925,16 @@ exports[`renders <KeyValue /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c23"
+          className="c24"
         >
           <div
-            className="c24"
+            className="c25"
           >
             <div
-              className="c25"
+              className="c26"
             >
               <button
-                className="c26 c27 c28 c29 c30"
+                className="c27 c28 c29 c30 c31"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -944,7 +946,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c31 c28 c29 c30"
+                className="c32 c29 c30 c31"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -956,10 +958,10 @@ exports[`renders <KeyValue /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c32"
+              className="c33"
             >
               <button
-                className="c33 c28 c29 c30"
+                className="c34 c29 c30 c31"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -968,7 +970,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c34"
+                  className="c35"
                 >
                   <svg
                     height="16"
@@ -1001,12 +1003,12 @@ exports[`renders <KeyValue /> without throwing 1`] = `
 `;
 
 exports[`renders <KeyValue expanded={false} /> without throwing 1`] = `
-.c5 {
+.c6 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
 }
 
-.c6 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1034,7 +1036,7 @@ exports[`renders <KeyValue expanded={false} /> without throwing 1`] = `
   align-items: center;
 }
 
-.c9 {
+.c10 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: 600;
@@ -1042,7 +1044,7 @@ exports[`renders <KeyValue expanded={false} /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c3 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1069,7 +1071,7 @@ exports[`renders <KeyValue expanded={false} /> without throwing 1`] = `
   flex: 0 0 2.875rem;
 }
 
-.c0 {
+.c1 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1097,7 +1099,7 @@ exports[`renders <KeyValue expanded={false} /> without throwing 1`] = `
   flex: 0 0 2.875rem;
 }
 
-.c2 {
+.c3 {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -1110,7 +1112,7 @@ exports[`renders <KeyValue expanded={false} /> without throwing 1`] = `
   box-shadow: none;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   min-height: 2.9375rem;
   max-width: 100%;
@@ -1144,51 +1146,56 @@ exports[`renders <KeyValue expanded={false} /> without throwing 1`] = `
   color: inherit;
 }
 
-.c1 {
+.c0 {
+  margin-bottom: 0;
+}
+
+.c2 {
   border-top: 0;
   border-left: 0;
   border-right: 0;
 }
 
-.c4 {
+.c5 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 
-.c7 {
+.c8 {
   height: 2.9375rem;
   max-width: 98%;
 }
 
 <form
+  className="c0"
   onSubmit={undefined}
 >
   <div
-    className="c0"
+    className="c1"
     disabled={false}
     name="card"
   >
     <div
-      className="c1 c2 c3"
+      className="c2 c3 c4"
       disabled={false}
       name="card-header"
       onClick={false}
     >
       <div
-        className="c4 c5"
+        className="c5 c6"
       >
         <div
-          className="c6"
+          className="c7"
         >
           <div
-            className="c7 c8 c3"
+            className="c8 c9 c4"
             disabled={false}
             name="card-header-meta"
           >
             <h4
-              className="c9"
+              className="c10"
             >
               Add metadata
             </h4>
@@ -1201,94 +1208,74 @@ exports[`renders <KeyValue expanded={false} /> without throwing 1`] = `
 `;
 
 exports[`renders <KeyValue input="input" /> without throwing 1`] = `
-.c18 {
+.c19 {
   margin-top: 0.1875rem;
   margin-right: 1.125rem;
 }
 
-.c22 {
+.c23 {
   margin-top: 0.1875rem;
 }
 
-.c23 {
+.c24 {
   margin-top: 0.75rem;
 }
 
-.c34 {
+.c35 {
   margin-right: 0.75rem;
 }
 
-.c5 {
+.c6 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
 }
 
-.c12 {
+.c13 {
   padding-left: 1.125rem;
   padding-right: 1.125rem;
   padding-top: 1.125rem;
   padding-bottom: 1.125rem;
 }
 
-.c20 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
-.c24 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
 .c21 {
   box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
 }
 
 .c25 {
   box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
 }
 
-.c32 {
+.c22 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1298,7 +1285,27 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   display: block;
 }
 
-.c6 {
+.c26 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c33 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1326,7 +1333,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   align-items: center;
 }
 
-.c13 {
+.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1356,7 +1363,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c14 {
+.c15 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1376,7 +1383,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c30 {
+.c31 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1388,22 +1395,22 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   appearance: button;
 }
 
-.c30::-moz-focus-inner,
-.c30[type='button']::-moz-focus-inner,
-.c30[type='reset']::-moz-focus-inner,
-.c30[type='submit']::-moz-focus-inner {
+.c31::-moz-focus-inner,
+.c31[type='button']::-moz-focus-inner,
+.c31[type='reset']::-moz-focus-inner,
+.c31[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c30:-moz-focusring,
-.c30[type='button']:-moz-focusring,
-.c30[type='reset']:-moz-focusring,
-.c30[type='submit']:-moz-focusring {
+.c31:-moz-focusring,
+.c31[type='button']:-moz-focusring,
+.c31[type='reset']:-moz-focusring,
+.c31[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9 {
+.c10 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: 600;
@@ -1411,7 +1418,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c0 {
+.c1 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1434,7 +1441,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c3 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1461,7 +1468,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   flex: 0 0 2.875rem;
 }
 
-.c11 {
+.c12 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1483,7 +1490,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c10 {
+.c11 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1499,7 +1506,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c2 {
+.c3 {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -1511,7 +1518,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   min-height: 2.9375rem;
   max-width: 100%;
@@ -1545,7 +1552,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   color: inherit;
 }
 
-.c15 {
+.c16 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -1558,7 +1565,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   width: 100%;
 }
 
-.c19 {
+.c20 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -1580,46 +1587,46 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c19:focus {
+.c20:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c19::-webkit-input-placeholder {
+.c20::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19::-moz-placeholder {
+.c20::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:-ms-input-placeholder {
+.c20:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:invalid {
+.c20:invalid {
   box-shadow: none;
 }
 
-.c19:disabled {
+.c20:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c19:disabled::-webkit-input-placeholder {
+.c20:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:disabled::-moz-placeholder {
+.c20:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:disabled:-ms-input-placeholder {
+.c20:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c17 {
+.c18 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -1629,21 +1636,21 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   text-align: left;
 }
 
-.c16 {
+.c17 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c29 {
+.c30 {
   min-width: 7.5rem;
 }
 
-.c28 {
+.c29 {
   display: inline-block;
 }
 
-.c27 {
+.c28 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1664,7 +1671,6 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1687,7 +1693,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c27:focus {
+.c28:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1695,43 +1701,43 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c27:hover {
+.c28:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c28:active,
+.c28:active:hover,
+.c28:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c27[disabled] {
+.c28[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c27:focus {
+.c28:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c27:hover {
+.c28:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c28:active,
+.c28:active:hover,
+.c28:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c31 {
+.c32 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1752,7 +1758,6 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1776,7 +1781,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c31:focus {
+.c32:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1784,43 +1789,43 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c31:hover {
+.c32:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c32:active,
+.c32:active:hover,
+.c32:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c31[disabled] {
+.c32[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c31:focus {
+.c32:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c31:hover {
+.c32:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c32:active,
+.c32:active:hover,
+.c32:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c33 {
+.c34 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1841,7 +1846,6 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -1877,7 +1881,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   float: right;
 }
 
-.c33:focus {
+.c34:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1885,85 +1889,89 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c33:hover {
+.c34:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c33[disabled] {
+.c34[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c33:focus {
+.c34:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c33:hover {
+.c34:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c33:focus {
+.c34:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c33:hover {
+.c34:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c1 {
+.c0 {
+  margin-bottom: 0;
+}
+
+.c2 {
   border-top: 0;
   border-left: 0;
   border-right: 0;
 }
 
-.c26 {
+.c27 {
   margin-right: 0.375rem;
 }
 
-.c4 {
+.c5 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 
-.c7 {
+.c8 {
   height: 2.9375rem;
   max-width: 98%;
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1972,7 +1980,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1981,7 +1989,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c21 {
+  .c22 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -1990,7 +1998,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c26 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -1999,38 +2007,39 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c32 {
+  .c33 {
     display: none;
   }
 }
 
 <form
+  className="c0"
   onSubmit={undefined}
 >
   <div
-    className="c0"
+    className="c1"
     disabled={false}
     name="card"
   >
     <div
-      className="c1 c2 c3"
+      className="c2 c3 c4"
       disabled={false}
       name="card-header"
       onClick={false}
     >
       <div
-        className="c4 c5"
+        className="c5 c6"
       >
         <div
-          className="c6"
+          className="c7"
         >
           <div
-            className="c7 c8 c3"
+            className="c8 c9 c4"
             disabled={false}
             name="card-header-meta"
           >
             <h4
-              className="c9"
+              className="c10"
             >
               Add metadata
             </h4>
@@ -2039,28 +2048,28 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c10 c11"
+      className="c11 c12"
       disabled={false}
       name="card-outlet"
     >
       <div
-        className="c12"
+        className="c13"
       >
         <div
-          className="c13"
+          className="c14"
           wrap={true}
         >
           <div
-            className="c14"
+            className="c15"
           >
             <div
-              className="c15"
+              className="c16"
               name="name"
               role="group"
               style={undefined}
             >
               <label
-                className="c16 c17"
+                className="c17 c18"
                 htmlFor="m"
               >
                 Metadata
@@ -2068,54 +2077,54 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
                 key
               </label>
               <div
-                className="c18"
+                className="c19"
               >
                 <input
-                  className="c19"
+                  className="c20"
                   disabled={false}
                   id="m"
                   onBlur={null}
                 />
                 <div
-                  className="c20"
+                  className="c21"
                 >
                   <div
-                    className="c21"
+                    className="c22"
                   />
                 </div>
               </div>
             </div>
           </div>
           <div
-            className="c14"
+            className="c15"
           >
             <div
-              className="c15"
+              className="c16"
               name="value"
               role="group"
               style={undefined}
             >
               <label
-                className="c16 c17"
+                className="c17 c18"
                 htmlFor="n"
               >
                 Metadata
                  value
               </label>
               <div
-                className="c22"
+                className="c23"
               >
                 <input
-                  className="c19"
+                  className="c20"
                   disabled={false}
                   id="n"
                   onBlur={null}
                 />
                 <div
-                  className="c20"
+                  className="c21"
                 >
                   <div
-                    className="c21"
+                    className="c22"
                   />
                 </div>
               </div>
@@ -2123,16 +2132,16 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c23"
+          className="c24"
         >
           <div
-            className="c24"
+            className="c25"
           >
             <div
-              className="c25"
+              className="c26"
             >
               <button
-                className="c26 c27 c28 c29 c30"
+                className="c27 c28 c29 c30 c31"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -2144,7 +2153,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c31 c28 c29 c30"
+                className="c32 c29 c30 c31"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -2156,10 +2165,10 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c32"
+              className="c33"
             >
               <button
-                className="c33 c28 c29 c30"
+                className="c34 c29 c30 c31"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -2168,7 +2177,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c34"
+                  className="c35"
                 >
                   <svg
                     height="16"
@@ -2201,89 +2210,69 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
 `;
 
 exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
-.c18 {
+.c19 {
   margin-top: 0.1875rem;
 }
 
-.c24 {
+.c25 {
   margin-top: 0.75rem;
 }
 
-.c34 {
+.c35 {
   margin-right: 0.75rem;
 }
 
-.c5 {
+.c6 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
 }
 
-.c12 {
+.c13 {
   padding-left: 1.125rem;
   padding-right: 1.125rem;
   padding-top: 1.125rem;
   padding-bottom: 1.125rem;
 }
 
-.c13 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
-.c25 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
-.c20 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
 .c14 {
   box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
 }
 
-.c32 {
+.c26 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.c21 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -2293,7 +2282,27 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   display: block;
 }
 
-.c6 {
+.c15 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c33 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2321,7 +2330,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   align-items: center;
 }
 
-.c30 {
+.c31 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -2333,22 +2342,22 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   appearance: button;
 }
 
-.c30::-moz-focus-inner,
-.c30[type='button']::-moz-focus-inner,
-.c30[type='reset']::-moz-focus-inner,
-.c30[type='submit']::-moz-focus-inner {
+.c31::-moz-focus-inner,
+.c31[type='button']::-moz-focus-inner,
+.c31[type='reset']::-moz-focus-inner,
+.c31[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c30:-moz-focusring,
-.c30[type='button']:-moz-focusring,
-.c30[type='reset']:-moz-focusring,
-.c30[type='submit']:-moz-focusring {
+.c31:-moz-focusring,
+.c31[type='button']:-moz-focusring,
+.c31[type='reset']:-moz-focusring,
+.c31[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9 {
+.c10 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: 600;
@@ -2356,7 +2365,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c0 {
+.c1 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2379,7 +2388,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c3 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2406,7 +2415,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   flex: 0 0 2.875rem;
 }
 
-.c11 {
+.c12 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2428,7 +2437,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c10 {
+.c11 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -2444,7 +2453,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c2 {
+.c3 {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -2456,7 +2465,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   min-height: 2.9375rem;
   max-width: 100%;
@@ -2490,7 +2499,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   color: inherit;
 }
 
-.c15 {
+.c16 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -2503,7 +2512,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   width: 100%;
 }
 
-.c19 {
+.c20 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -2525,46 +2534,46 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c19:focus {
+.c20:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c19::-webkit-input-placeholder {
+.c20::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19::-moz-placeholder {
+.c20::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:-ms-input-placeholder {
+.c20:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:invalid {
+.c20:invalid {
   box-shadow: none;
 }
 
-.c19:disabled {
+.c20:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c19:disabled::-webkit-input-placeholder {
+.c20:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:disabled::-moz-placeholder {
+.c20:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:disabled:-ms-input-placeholder {
+.c20:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c23 {
+.c24 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -2589,62 +2598,62 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   resize: vertical;
 }
 
-.c23:focus {
+.c24:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c23::-webkit-input-placeholder {
+.c24::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c23::-moz-placeholder {
+.c24::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c23:-ms-input-placeholder {
+.c24:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c23:invalid {
+.c24:invalid {
   box-shadow: none;
 }
 
-.c23:disabled {
+.c24:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c23:disabled::-webkit-input-placeholder {
+.c24:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c23:disabled::-moz-placeholder {
+.c24:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c23:disabled:-ms-input-placeholder {
+.c24:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c23:disabled {
+.c24:disabled {
   color: rgb(73,73,73);
 }
 
-.c23:disabled::-webkit-input-placeholder {
+.c24:disabled::-webkit-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c23:disabled::-moz-placeholder {
+.c24:disabled::-moz-placeholder {
   color: rgb(73,73,73);
 }
 
-.c23:disabled:-ms-input-placeholder {
+.c24:disabled:-ms-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c22 {
+.c23 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -2657,7 +2666,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c17 {
+.c18 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -2667,21 +2676,21 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   text-align: left;
 }
 
-.c16 {
+.c17 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c29 {
+.c30 {
   min-width: 7.5rem;
 }
 
-.c28 {
+.c29 {
   display: inline-block;
 }
 
-.c27 {
+.c28 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2702,7 +2711,6 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -2725,7 +2733,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c27:focus {
+.c28:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -2733,43 +2741,43 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c27:hover {
+.c28:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c28:active,
+.c28:active:hover,
+.c28:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c27[disabled] {
+.c28[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c27:focus {
+.c28:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c27:hover {
+.c28:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c28:active,
+.c28:active:hover,
+.c28:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c31 {
+.c32 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2790,7 +2798,6 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -2814,7 +2821,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c31:focus {
+.c32:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -2822,43 +2829,43 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c31:hover {
+.c32:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c32:active,
+.c32:active:hover,
+.c32:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c31[disabled] {
+.c32[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c31:focus {
+.c32:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c31:hover {
+.c32:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c32:active,
+.c32:active:hover,
+.c32:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c33 {
+.c34 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2879,7 +2886,6 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -2915,7 +2921,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   float: right;
 }
 
-.c33:focus {
+.c34:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -2923,91 +2929,95 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c33:hover {
+.c34:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c33[disabled] {
+.c34[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c33:focus {
+.c34:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c33:hover {
+.c34:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c33:focus {
+.c34:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c33:hover {
+.c34:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c21 {
+.c22 {
   height: 1px;
   background-color: rgb(216,216,216);
   background-color: transparent;
 }
 
-.c1 {
+.c0 {
+  margin-bottom: 0;
+}
+
+.c2 {
   border-top: 0;
   border-left: 0;
   border-right: 0;
 }
 
-.c26 {
+.c27 {
   margin-right: 0.375rem;
 }
 
-.c4 {
+.c5 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 
-.c7 {
+.c8 {
   height: 2.9375rem;
   max-width: 98%;
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c26 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -3016,7 +3026,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c26 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -3025,7 +3035,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c20 {
+  .c21 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -3034,7 +3044,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c14 {
+  .c15 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -3043,38 +3053,39 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c32 {
+  .c33 {
     display: none;
   }
 }
 
 <form
+  className="c0"
   onSubmit={undefined}
 >
   <div
-    className="c0"
+    className="c1"
     disabled={false}
     name="card"
   >
     <div
-      className="c1 c2 c3"
+      className="c2 c3 c4"
       disabled={false}
       name="card-header"
       onClick={false}
     >
       <div
-        className="c4 c5"
+        className="c5 c6"
       >
         <div
-          className="c6"
+          className="c7"
         >
           <div
-            className="c7 c8 c3"
+            className="c8 c9 c4"
             disabled={false}
             name="card-header-meta"
           >
             <h4
-              className="c9"
+              className="c10"
             >
               Add metadata
             </h4>
@@ -3083,80 +3094,80 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c10 c11"
+      className="c11 c12"
       disabled={false}
       name="card-outlet"
     >
       <div
-        className="c12"
+        className="c13"
       >
         <div
-          className="c13"
+          className="c14"
         >
           <div
-            className="c14"
+            className="c15"
           >
             <div
-              className="c15"
+              className="c16"
               name="name"
               role="group"
               style={undefined}
             >
               <label
-                className="c16 c17"
+                className="c17 c18"
                 htmlFor="o"
               >
                 Metadata
                  key
               </label>
               <div
-                className="c18"
+                className="c19"
               >
                 <input
-                  className="c19"
+                  className="c20"
                   disabled={false}
                   id="o"
                   onBlur={null}
                 />
                 <div
-                  className="c13"
+                  className="c14"
                 >
                   <div
-                    className="c20"
+                    className="c21"
                   />
                 </div>
               </div>
             </div>
             <div
-              className="c21 c13"
+              className="c22 c14"
               height="0.75rem"
             />
           </div>
         </div>
         <div
-          className="c13"
+          className="c14"
         >
           <div
-            className="c14"
+            className="c15"
           >
             <div
-              className="c15"
+              className="c16"
               name="value"
               role="group"
               style={undefined}
             >
               <label
-                className="c16 c17"
+                className="c17 c18"
                 htmlFor="p"
               >
                 Metadata
                  value
               </label>
               <div
-                className="c18"
+                className="c19"
               >
                 <textarea
-                  className="c22 c23"
+                  className="c23 c24"
                   disabled={false}
                   id="p"
                   name="name"
@@ -3164,30 +3175,30 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
                 />
               </div>
               <div
-                className="c13"
+                className="c14"
               >
                 <div
-                  className="c20"
+                  className="c21"
                 />
               </div>
             </div>
             <div
-              className="c21 c13"
+              className="c22 c14"
               height="0.75rem"
             />
           </div>
         </div>
         <div
-          className="c24"
+          className="c25"
         >
           <div
-            className="c25"
+            className="c26"
           >
             <div
-              className="c14"
+              className="c15"
             >
               <button
-                className="c26 c27 c28 c29 c30"
+                className="c27 c28 c29 c30 c31"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -3199,7 +3210,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c31 c28 c29 c30"
+                className="c32 c29 c30 c31"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -3211,10 +3222,10 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c32"
+              className="c33"
             >
               <button
-                className="c33 c28 c29 c30"
+                className="c34 c29 c30 c31"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -3223,7 +3234,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c34"
+                  className="c35"
                 >
                   <svg
                     height="16"
@@ -3256,94 +3267,74 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 `;
 
 exports[`renders <KeyValue method="add" /> without throwing 1`] = `
-.c18 {
+.c19 {
   margin-top: 0.1875rem;
   margin-right: 1.125rem;
 }
 
-.c22 {
+.c23 {
   margin-top: 0.1875rem;
 }
 
-.c23 {
+.c24 {
   margin-top: 0.75rem;
 }
 
-.c34 {
+.c35 {
   margin-right: 0.75rem;
 }
 
-.c5 {
+.c6 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
 }
 
-.c12 {
+.c13 {
   padding-left: 1.125rem;
   padding-right: 1.125rem;
   padding-top: 1.125rem;
   padding-bottom: 1.125rem;
 }
 
-.c20 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
-.c24 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
 .c21 {
   box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
 }
 
 .c25 {
   box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
 }
 
-.c32 {
+.c22 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3353,7 +3344,27 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   display: block;
 }
 
-.c6 {
+.c26 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c33 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3381,7 +3392,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   align-items: center;
 }
 
-.c13 {
+.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3411,7 +3422,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c14 {
+.c15 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -3431,7 +3442,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c30 {
+.c31 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -3443,22 +3454,22 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   appearance: button;
 }
 
-.c30::-moz-focus-inner,
-.c30[type='button']::-moz-focus-inner,
-.c30[type='reset']::-moz-focus-inner,
-.c30[type='submit']::-moz-focus-inner {
+.c31::-moz-focus-inner,
+.c31[type='button']::-moz-focus-inner,
+.c31[type='reset']::-moz-focus-inner,
+.c31[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c30:-moz-focusring,
-.c30[type='button']:-moz-focusring,
-.c30[type='reset']:-moz-focusring,
-.c30[type='submit']:-moz-focusring {
+.c31:-moz-focusring,
+.c31[type='button']:-moz-focusring,
+.c31[type='reset']:-moz-focusring,
+.c31[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9 {
+.c10 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: 600;
@@ -3466,7 +3477,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c0 {
+.c1 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3489,7 +3500,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c3 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3516,7 +3527,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   flex: 0 0 2.875rem;
 }
 
-.c11 {
+.c12 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3538,7 +3549,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c10 {
+.c11 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -3554,7 +3565,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c2 {
+.c3 {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -3566,7 +3577,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   min-height: 2.9375rem;
   max-width: 100%;
@@ -3600,7 +3611,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   color: inherit;
 }
 
-.c15 {
+.c16 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -3613,7 +3624,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   width: 100%;
 }
 
-.c19 {
+.c20 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -3635,46 +3646,46 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c19:focus {
+.c20:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c19::-webkit-input-placeholder {
+.c20::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19::-moz-placeholder {
+.c20::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:-ms-input-placeholder {
+.c20:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:invalid {
+.c20:invalid {
   box-shadow: none;
 }
 
-.c19:disabled {
+.c20:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c19:disabled::-webkit-input-placeholder {
+.c20:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:disabled::-moz-placeholder {
+.c20:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:disabled:-ms-input-placeholder {
+.c20:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c17 {
+.c18 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -3684,21 +3695,21 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   text-align: left;
 }
 
-.c16 {
+.c17 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c29 {
+.c30 {
   min-width: 7.5rem;
 }
 
-.c28 {
+.c29 {
   display: inline-block;
 }
 
-.c27 {
+.c28 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3719,7 +3730,6 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3742,7 +3752,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c27:focus {
+.c28:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -3750,43 +3760,43 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c27:hover {
+.c28:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c28:active,
+.c28:active:hover,
+.c28:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c27[disabled] {
+.c28[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c27:focus {
+.c28:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c27:hover {
+.c28:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c28:active,
+.c28:active:hover,
+.c28:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c31 {
+.c32 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3807,7 +3817,6 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3831,7 +3840,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c31:focus {
+.c32:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -3839,43 +3848,43 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c31:hover {
+.c32:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c32:active,
+.c32:active:hover,
+.c32:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c31[disabled] {
+.c32[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c31:focus {
+.c32:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c31:hover {
+.c32:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c32:active,
+.c32:active:hover,
+.c32:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c33 {
+.c34 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3896,7 +3905,6 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -3932,7 +3940,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   float: right;
 }
 
-.c33:focus {
+.c34:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -3940,85 +3948,89 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c33:hover {
+.c34:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c33[disabled] {
+.c34[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c33:focus {
+.c34:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c33:hover {
+.c34:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c33:focus {
+.c34:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c33:hover {
+.c34:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c1 {
+.c0 {
+  margin-bottom: 0;
+}
+
+.c2 {
   border-top: 0;
   border-left: 0;
   border-right: 0;
 }
 
-.c26 {
+.c27 {
   margin-right: 0.375rem;
 }
 
-.c4 {
+.c5 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 
-.c7 {
+.c8 {
   height: 2.9375rem;
   max-width: 98%;
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -4027,7 +4039,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -4036,7 +4048,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c21 {
+  .c22 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -4045,7 +4057,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c26 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -4054,38 +4066,39 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c32 {
+  .c33 {
     display: none;
   }
 }
 
 <form
+  className="c0"
   onSubmit={undefined}
 >
   <div
-    className="c0"
+    className="c1"
     disabled={false}
     name="card"
   >
     <div
-      className="c1 c2 c3"
+      className="c2 c3 c4"
       disabled={false}
       name="card-header"
       onClick={false}
     >
       <div
-        className="c4 c5"
+        className="c5 c6"
       >
         <div
-          className="c6"
+          className="c7"
         >
           <div
-            className="c7 c8 c3"
+            className="c8 c9 c4"
             disabled={false}
             name="card-header-meta"
           >
             <h4
-              className="c9"
+              className="c10"
             >
               Add metadata
             </h4>
@@ -4094,28 +4107,28 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c10 c11"
+      className="c11 c12"
       disabled={false}
       name="card-outlet"
     >
       <div
-        className="c12"
+        className="c13"
       >
         <div
-          className="c13"
+          className="c14"
           wrap={true}
         >
           <div
-            className="c14"
+            className="c15"
           >
             <div
-              className="c15"
+              className="c16"
               name="name"
               role="group"
               style={undefined}
             >
               <label
-                className="c16 c17"
+                className="c17 c18"
                 htmlFor="s"
               >
                 Metadata
@@ -4123,54 +4136,54 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
                 key
               </label>
               <div
-                className="c18"
+                className="c19"
               >
                 <input
-                  className="c19"
+                  className="c20"
                   disabled={false}
                   id="s"
                   onBlur={null}
                 />
                 <div
-                  className="c20"
+                  className="c21"
                 >
                   <div
-                    className="c21"
+                    className="c22"
                   />
                 </div>
               </div>
             </div>
           </div>
           <div
-            className="c14"
+            className="c15"
           >
             <div
-              className="c15"
+              className="c16"
               name="value"
               role="group"
               style={undefined}
             >
               <label
-                className="c16 c17"
+                className="c17 c18"
                 htmlFor="t"
               >
                 Metadata
                  value
               </label>
               <div
-                className="c22"
+                className="c23"
               >
                 <input
-                  className="c19"
+                  className="c20"
                   disabled={false}
                   id="t"
                   onBlur={null}
                 />
                 <div
-                  className="c20"
+                  className="c21"
                 >
                   <div
-                    className="c21"
+                    className="c22"
                   />
                 </div>
               </div>
@@ -4178,16 +4191,16 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c23"
+          className="c24"
         >
           <div
-            className="c24"
+            className="c25"
           >
             <div
-              className="c25"
+              className="c26"
             >
               <button
-                className="c26 c27 c28 c29 c30"
+                className="c27 c28 c29 c30 c31"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -4199,7 +4212,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c31 c28 c29 c30"
+                className="c32 c29 c30 c31"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -4211,10 +4224,10 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c32"
+              className="c33"
             >
               <button
-                className="c33 c28 c29 c30"
+                className="c34 c29 c30 c31"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -4223,7 +4236,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c34"
+                  className="c35"
                 >
                   <svg
                     height="16"
@@ -4256,94 +4269,74 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
 `;
 
 exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
-.c18 {
+.c19 {
   margin-top: 0.1875rem;
   margin-right: 1.125rem;
 }
 
-.c22 {
+.c23 {
   margin-top: 0.1875rem;
 }
 
-.c23 {
+.c24 {
   margin-top: 0.75rem;
 }
 
-.c34 {
+.c35 {
   margin-right: 0.75rem;
 }
 
-.c5 {
+.c6 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
 }
 
-.c12 {
+.c13 {
   padding-left: 1.125rem;
   padding-right: 1.125rem;
   padding-top: 1.125rem;
   padding-bottom: 1.125rem;
 }
 
-.c20 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
-.c24 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
 .c21 {
   box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
 }
 
 .c25 {
   box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
 }
 
-.c32 {
+.c22 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4353,7 +4346,27 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   display: block;
 }
 
-.c6 {
+.c26 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c33 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4381,7 +4394,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   align-items: center;
 }
 
-.c13 {
+.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4411,7 +4424,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c14 {
+.c15 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -4431,7 +4444,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c30 {
+.c31 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -4443,22 +4456,22 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   appearance: button;
 }
 
-.c30::-moz-focus-inner,
-.c30[type='button']::-moz-focus-inner,
-.c30[type='reset']::-moz-focus-inner,
-.c30[type='submit']::-moz-focus-inner {
+.c31::-moz-focus-inner,
+.c31[type='button']::-moz-focus-inner,
+.c31[type='reset']::-moz-focus-inner,
+.c31[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c30:-moz-focusring,
-.c30[type='button']:-moz-focusring,
-.c30[type='reset']:-moz-focusring,
-.c30[type='submit']:-moz-focusring {
+.c31:-moz-focusring,
+.c31[type='button']:-moz-focusring,
+.c31[type='reset']:-moz-focusring,
+.c31[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c0 {
+.c1 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4481,7 +4494,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c3 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4508,7 +4521,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   flex: 0 0 2.875rem;
 }
 
-.c11 {
+.c12 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4530,7 +4543,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c10 {
+.c11 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -4546,7 +4559,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c2 {
+.c3 {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -4558,7 +4571,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   min-height: 2.9375rem;
   max-width: 100%;
@@ -4592,7 +4605,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   color: inherit;
 }
 
-.c15 {
+.c16 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -4605,7 +4618,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   width: 100%;
 }
 
-.c19 {
+.c20 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -4627,46 +4640,46 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c19:focus {
+.c20:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c19::-webkit-input-placeholder {
+.c20::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19::-moz-placeholder {
+.c20::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:-ms-input-placeholder {
+.c20:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:invalid {
+.c20:invalid {
   box-shadow: none;
 }
 
-.c19:disabled {
+.c20:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c19:disabled::-webkit-input-placeholder {
+.c20:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:disabled::-moz-placeholder {
+.c20:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:disabled:-ms-input-placeholder {
+.c20:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c17 {
+.c18 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -4676,21 +4689,21 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   text-align: left;
 }
 
-.c16 {
+.c17 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c29 {
+.c30 {
   min-width: 7.5rem;
 }
 
-.c28 {
+.c29 {
   display: inline-block;
 }
 
-.c27 {
+.c28 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4711,7 +4724,6 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -4734,7 +4746,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c27:focus {
+.c28:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -4742,43 +4754,43 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c27:hover {
+.c28:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c28:active,
+.c28:active:hover,
+.c28:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c27[disabled] {
+.c28[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c27:focus {
+.c28:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c27:hover {
+.c28:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c28:active,
+.c28:active:hover,
+.c28:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c31 {
+.c32 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4799,7 +4811,6 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -4823,7 +4834,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c31:focus {
+.c32:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -4831,43 +4842,43 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c31:hover {
+.c32:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c32:active,
+.c32:active:hover,
+.c32:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c31[disabled] {
+.c32[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c31:focus {
+.c32:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c31:hover {
+.c32:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c32:active,
+.c32:active:hover,
+.c32:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c33 {
+.c34 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4888,7 +4899,6 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -4924,7 +4934,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   float: right;
 }
 
-.c33:focus {
+.c34:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -4932,62 +4942,66 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c33:hover {
+.c34:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c33[disabled] {
+.c34[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c33:focus {
+.c34:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c33:hover {
+.c34:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c33:focus {
+.c34:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c33:hover {
+.c34:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c9 {
+.c0 {
+  margin-bottom: 0;
+}
+
+.c10 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -4996,30 +5010,30 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   display: block;
 }
 
-.c1 {
+.c2 {
   border-top: 0;
   border-left: 0;
   border-right: 0;
 }
 
-.c26 {
+.c27 {
   margin-right: 0.375rem;
 }
 
-.c4 {
+.c5 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 
-.c7 {
+.c8 {
   height: 2.9375rem;
   max-width: 98%;
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -5028,7 +5042,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -5037,7 +5051,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c21 {
+  .c22 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -5046,7 +5060,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c26 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -5055,7 +5069,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c32 {
+  .c33 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -5064,60 +5078,61 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 }
 
 <form
+  className="c0"
   onSubmit={undefined}
 >
   <div
-    className="c0"
+    className="c1"
     disabled={false}
     name="card"
   >
     <div
-      className="c1 c2 c3"
+      className="c2 c3 c4"
       disabled={false}
       name="card-header"
       onClick={undefined}
     >
       <div
-        className="c4 c5"
+        className="c5 c6"
       >
         <div
-          className="c6"
+          className="c7"
         >
           <div
-            className="c7 c8 c3"
+            className="c8 c9 c4"
             disabled={false}
             name="card-header-meta"
           >
             <div
-              className="c9"
+              className="c10"
             />
           </div>
         </div>
       </div>
     </div>
     <div
-      className="c10 c11"
+      className="c11 c12"
       disabled={false}
       name="card-outlet"
     >
       <div
-        className="c12"
+        className="c13"
       >
         <div
-          className="c13"
+          className="c14"
           wrap={true}
         >
           <div
-            className="c14"
+            className="c15"
           >
             <div
-              className="c15"
+              className="c16"
               name="name"
               role="group"
               style={undefined}
             >
               <label
-                className="c16 c17"
+                className="c17 c18"
                 htmlFor="u"
               >
                 Metadata
@@ -5125,54 +5140,54 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
                 key
               </label>
               <div
-                className="c18"
+                className="c19"
               >
                 <input
-                  className="c19"
+                  className="c20"
                   disabled={false}
                   id="u"
                   onBlur={null}
                 />
                 <div
-                  className="c20"
+                  className="c21"
                 >
                   <div
-                    className="c21"
+                    className="c22"
                   />
                 </div>
               </div>
             </div>
           </div>
           <div
-            className="c14"
+            className="c15"
           >
             <div
-              className="c15"
+              className="c16"
               name="value"
               role="group"
               style={undefined}
             >
               <label
-                className="c16 c17"
+                className="c17 c18"
                 htmlFor="v"
               >
                 Metadata
                  value
               </label>
               <div
-                className="c22"
+                className="c23"
               >
                 <input
-                  className="c19"
+                  className="c20"
                   disabled={false}
                   id="v"
                   onBlur={null}
                 />
                 <div
-                  className="c20"
+                  className="c21"
                 >
                   <div
-                    className="c21"
+                    className="c22"
                   />
                 </div>
               </div>
@@ -5180,16 +5195,16 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c23"
+          className="c24"
         >
           <div
-            className="c24"
+            className="c25"
           >
             <div
-              className="c25"
+              className="c26"
             >
               <button
-                className="c26 c27 c28 c29 c30"
+                className="c27 c28 c29 c30 c31"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -5201,7 +5216,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c31 c28 c29 c30"
+                className="c32 c29 c30 c31"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -5213,10 +5228,10 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c32"
+              className="c33"
             >
               <button
-                className="c33 c28 c29 c30"
+                className="c34 c29 c30 c31"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -5225,7 +5240,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c34"
+                  className="c35"
                 >
                   <svg
                     height="16"
@@ -5258,90 +5273,70 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 `;
 
 exports[`renders <KeyValue removing /> without throwing 1`] = `
-.c18 {
+.c19 {
   margin-top: 0.1875rem;
   margin-right: 1.125rem;
 }
 
-.c22 {
+.c23 {
   margin-top: 0.1875rem;
 }
 
-.c23 {
+.c24 {
   margin-top: 0.75rem;
 }
 
-.c5 {
+.c6 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
 }
 
-.c12 {
+.c13 {
   padding-left: 1.125rem;
   padding-right: 1.125rem;
   padding-top: 1.125rem;
   padding-bottom: 1.125rem;
 }
 
-.c20 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
-.c24 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
 .c21 {
   box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
 }
 
 .c25 {
   box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
 }
 
-.c32 {
+.c22 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -5351,7 +5346,27 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   display: block;
 }
 
-.c6 {
+.c26 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c33 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5379,7 +5394,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   align-items: center;
 }
 
-.c13 {
+.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5409,7 +5424,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c14 {
+.c15 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -5429,7 +5444,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c30 {
+.c31 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -5441,22 +5456,22 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   appearance: button;
 }
 
-.c30::-moz-focus-inner,
-.c30[type='button']::-moz-focus-inner,
-.c30[type='reset']::-moz-focus-inner,
-.c30[type='submit']::-moz-focus-inner {
+.c31::-moz-focus-inner,
+.c31[type='button']::-moz-focus-inner,
+.c31[type='reset']::-moz-focus-inner,
+.c31[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c30:-moz-focusring,
-.c30[type='button']:-moz-focusring,
-.c30[type='reset']:-moz-focusring,
-.c30[type='submit']:-moz-focusring {
+.c31:-moz-focusring,
+.c31[type='button']:-moz-focusring,
+.c31[type='reset']:-moz-focusring,
+.c31[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9 {
+.c10 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: 600;
@@ -5464,7 +5479,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c0 {
+.c1 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5487,7 +5502,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c3 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5514,7 +5529,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   flex: 0 0 2.875rem;
 }
 
-.c11 {
+.c12 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5536,7 +5551,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c10 {
+.c11 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -5552,7 +5567,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c2 {
+.c3 {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -5564,7 +5579,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   min-height: 2.9375rem;
   max-width: 100%;
@@ -5598,7 +5613,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   color: inherit;
 }
 
-.c15 {
+.c16 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -5611,7 +5626,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   width: 100%;
 }
 
-.c19 {
+.c20 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -5633,46 +5648,46 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c19:focus {
+.c20:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c19::-webkit-input-placeholder {
+.c20::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19::-moz-placeholder {
+.c20::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:-ms-input-placeholder {
+.c20:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:invalid {
+.c20:invalid {
   box-shadow: none;
 }
 
-.c19:disabled {
+.c20:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c19:disabled::-webkit-input-placeholder {
+.c20:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:disabled::-moz-placeholder {
+.c20:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:disabled:-ms-input-placeholder {
+.c20:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c17 {
+.c18 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -5682,30 +5697,30 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   text-align: left;
 }
 
-.c16 {
+.c17 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c35 {
+.c36 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
   animation: iCqDak 1.5s ease-out 0s infinite;
 }
 
-.c36 {
+.c37 {
   -webkit-animation-delay: 0.5s;
   animation-delay: 0.5s;
 }
 
-.c37 {
+.c38 {
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
 }
 
-.c34 {
+.c35 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5733,15 +5748,15 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   flex: 1 0 auto;
 }
 
-.c29 {
+.c30 {
   min-width: 7.5rem;
 }
 
-.c28 {
+.c29 {
   display: inline-block;
 }
 
-.c27 {
+.c28 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -5762,7 +5777,6 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -5785,7 +5799,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c27:focus {
+.c28:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -5793,43 +5807,43 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c27:hover {
+.c28:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c28:active,
+.c28:active:hover,
+.c28:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c27[disabled] {
+.c28[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c27:focus {
+.c28:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c27:hover {
+.c28:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c28:active,
+.c28:active:hover,
+.c28:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c31 {
+.c32 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -5850,7 +5864,6 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -5874,7 +5887,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c31:focus {
+.c32:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -5882,43 +5895,43 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c31:hover {
+.c32:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c32:active,
+.c32:active:hover,
+.c32:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c31[disabled] {
+.c32[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c31:focus {
+.c32:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c31:hover {
+.c32:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c32:active,
+.c32:active:hover,
+.c32:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c33 {
+.c34 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -5939,7 +5952,6 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -5980,7 +5992,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   float: right;
 }
 
-.c33:focus {
+.c34:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -5988,102 +6000,106 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c33:hover {
+.c34:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c33[disabled] {
+.c34[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c33:focus {
+.c34:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c33:hover {
+.c34:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c33:focus {
+.c34:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c33:hover {
+.c34:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c33:focus {
+.c34:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c33:hover {
+.c34:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c1 {
+.c0 {
+  margin-bottom: 0;
+}
+
+.c2 {
   border-top: 0;
   border-left: 0;
   border-right: 0;
 }
 
-.c26 {
+.c27 {
   margin-right: 0.375rem;
 }
 
-.c4 {
+.c5 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 
-.c7 {
+.c8 {
   height: 2.9375rem;
   max-width: 98%;
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -6092,7 +6108,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -6101,7 +6117,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c21 {
+  .c22 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -6110,7 +6126,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c26 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -6119,38 +6135,39 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c32 {
+  .c33 {
     display: none;
   }
 }
 
 <form
+  className="c0"
   onSubmit={undefined}
 >
   <div
-    className="c0"
+    className="c1"
     disabled={false}
     name="card"
   >
     <div
-      className="c1 c2 c3"
+      className="c2 c3 c4"
       disabled={false}
       name="card-header"
       onClick={false}
     >
       <div
-        className="c4 c5"
+        className="c5 c6"
       >
         <div
-          className="c6"
+          className="c7"
         >
           <div
-            className="c7 c8 c3"
+            className="c8 c9 c4"
             disabled={false}
             name="card-header-meta"
           >
             <h4
-              className="c9"
+              className="c10"
             >
               Add metadata
             </h4>
@@ -6159,28 +6176,28 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c10 c11"
+      className="c11 c12"
       disabled={false}
       name="card-outlet"
     >
       <div
-        className="c12"
+        className="c13"
       >
         <div
-          className="c13"
+          className="c14"
           wrap={true}
         >
           <div
-            className="c14"
+            className="c15"
           >
             <div
-              className="c15"
+              className="c16"
               name="name"
               role="group"
               style={undefined}
             >
               <label
-                className="c16 c17"
+                className="c17 c18"
                 htmlFor="w"
               >
                 Metadata
@@ -6188,54 +6205,54 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
                 key
               </label>
               <div
-                className="c18"
+                className="c19"
               >
                 <input
-                  className="c19"
+                  className="c20"
                   disabled={false}
                   id="w"
                   onBlur={null}
                 />
                 <div
-                  className="c20"
+                  className="c21"
                 >
                   <div
-                    className="c21"
+                    className="c22"
                   />
                 </div>
               </div>
             </div>
           </div>
           <div
-            className="c14"
+            className="c15"
           >
             <div
-              className="c15"
+              className="c16"
               name="value"
               role="group"
               style={undefined}
             >
               <label
-                className="c16 c17"
+                className="c17 c18"
                 htmlFor="x"
               >
                 Metadata
                  value
               </label>
               <div
-                className="c22"
+                className="c23"
               >
                 <input
-                  className="c19"
+                  className="c20"
                   disabled={false}
                   id="x"
                   onBlur={null}
                 />
                 <div
-                  className="c20"
+                  className="c21"
                 >
                   <div
-                    className="c21"
+                    className="c22"
                   />
                 </div>
               </div>
@@ -6243,16 +6260,16 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c23"
+          className="c24"
         >
           <div
-            className="c24"
+            className="c25"
           >
             <div
-              className="c25"
+              className="c26"
             >
               <button
-                className="c26 c27 c28 c29 c30"
+                className="c27 c28 c29 c30 c31"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -6264,7 +6281,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c31 c28 c29 c30"
+                className="c32 c29 c30 c31"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -6276,10 +6293,10 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c32"
+              className="c33"
             >
               <button
-                className="c33 c28 c29 c30"
+                className="c34 c29 c30 c31"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -6288,28 +6305,28 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c34"
+                  className="c35"
                 >
                   <svg
                     height="10"
                     width="28"
                   >
                     <rect
-                      className="c35"
+                      className="c36"
                       height="6"
                       width="6"
                       x="2"
                       y="2"
                     />
                     <rect
-                      className="c36 c35"
+                      className="c37 c36"
                       height="6"
                       width="6"
                       x="11"
                       y="2"
                     />
                     <rect
-                      className="c37 c35"
+                      className="c38 c36"
                       height="6"
                       width="6"
                       x="20"
@@ -6328,94 +6345,74 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
 `;
 
 exports[`renders <KeyValue submitting /> without throwing 1`] = `
-.c18 {
+.c19 {
   margin-top: 0.1875rem;
   margin-right: 1.125rem;
 }
 
-.c22 {
+.c23 {
   margin-top: 0.1875rem;
 }
 
-.c23 {
+.c24 {
   margin-top: 0.75rem;
 }
 
-.c38 {
+.c39 {
   margin-right: 0.75rem;
 }
 
-.c5 {
+.c6 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
 }
 
-.c12 {
+.c13 {
   padding-left: 1.125rem;
   padding-right: 1.125rem;
   padding-top: 1.125rem;
   padding-bottom: 1.125rem;
 }
 
-.c20 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
-.c24 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
 .c21 {
   box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
 }
 
 .c25 {
   box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
 }
 
-.c36 {
+.c22 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -6425,7 +6422,27 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   display: block;
 }
 
-.c6 {
+.c26 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c37 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6453,7 +6470,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   align-items: center;
 }
 
-.c13 {
+.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6483,7 +6500,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c14 {
+.c15 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -6503,7 +6520,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c30 {
+.c31 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -6515,22 +6532,22 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   appearance: button;
 }
 
-.c30::-moz-focus-inner,
-.c30[type='button']::-moz-focus-inner,
-.c30[type='reset']::-moz-focus-inner,
-.c30[type='submit']::-moz-focus-inner {
+.c31::-moz-focus-inner,
+.c31[type='button']::-moz-focus-inner,
+.c31[type='reset']::-moz-focus-inner,
+.c31[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c30:-moz-focusring,
-.c30[type='button']:-moz-focusring,
-.c30[type='reset']:-moz-focusring,
-.c30[type='submit']:-moz-focusring {
+.c31:-moz-focusring,
+.c31[type='button']:-moz-focusring,
+.c31[type='reset']:-moz-focusring,
+.c31[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9 {
+.c10 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: 600;
@@ -6538,7 +6555,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c0 {
+.c1 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6561,7 +6578,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c3 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6588,7 +6605,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   flex: 0 0 2.875rem;
 }
 
-.c11 {
+.c12 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6610,7 +6627,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c10 {
+.c11 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -6626,7 +6643,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c2 {
+.c3 {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -6638,7 +6655,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   min-height: 2.9375rem;
   max-width: 100%;
@@ -6672,7 +6689,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   color: inherit;
 }
 
-.c15 {
+.c16 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -6685,7 +6702,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   width: 100%;
 }
 
-.c19 {
+.c20 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -6710,58 +6727,58 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c19:focus {
+.c20:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c19::-webkit-input-placeholder {
+.c20::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19::-moz-placeholder {
+.c20::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:-ms-input-placeholder {
+.c20:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:invalid {
+.c20:invalid {
   box-shadow: none;
 }
 
-.c19::-webkit-input-placeholder {
+.c20::-webkit-input-placeholder {
   color: rgb(216,216,216);
 }
 
-.c19::-moz-placeholder {
+.c20::-moz-placeholder {
   color: rgb(216,216,216);
 }
 
-.c19:-ms-input-placeholder {
+.c20:-ms-input-placeholder {
   color: rgb(216,216,216);
 }
 
-.c19:disabled {
+.c20:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c19:disabled::-webkit-input-placeholder {
+.c20:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:disabled::-moz-placeholder {
+.c20:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:disabled:-ms-input-placeholder {
+.c20:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c17 {
+.c18 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -6771,30 +6788,30 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   text-align: left;
 }
 
-.c16 {
+.c17 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c33 {
+.c34 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
   animation: iCqDak 1.5s ease-out 0s infinite;
 }
 
-.c34 {
+.c35 {
   -webkit-animation-delay: 0.5s;
   animation-delay: 0.5s;
 }
 
-.c35 {
+.c36 {
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
 }
 
-.c32 {
+.c33 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6822,15 +6839,15 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   flex: 1 0 auto;
 }
 
-.c29 {
+.c30 {
   min-width: 7.5rem;
 }
 
-.c28 {
+.c29 {
   display: inline-block;
 }
 
-.c31 {
+.c32 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -6851,7 +6868,6 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -6875,7 +6891,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c31:focus {
+.c32:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -6883,43 +6899,43 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c31:hover {
+.c32:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c32:active,
+.c32:active:hover,
+.c32:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c31[disabled] {
+.c32[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c31:focus {
+.c32:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c31:hover {
+.c32:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c32:active,
+.c32:active:hover,
+.c32:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c37 {
+.c38 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -6940,7 +6956,6 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -6981,7 +6996,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   float: right;
 }
 
-.c37:focus {
+.c38:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -6989,79 +7004,79 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c37:hover {
+.c38:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c37:active,
-.c37:active:hover,
-.c37:active:focus {
+.c38:active,
+.c38:active:hover,
+.c38:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c37[disabled] {
+.c38[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c37:focus {
+.c38:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c37:hover {
+.c38:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c37:active,
-.c37:active:hover,
-.c37:active:focus {
+.c38:active,
+.c38:active:hover,
+.c38:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c37:focus {
+.c38:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c37:hover {
+.c38:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c37:active,
-.c37:active:hover,
-.c37:active:focus {
+.c38:active,
+.c38:active:hover,
+.c38:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c37:focus {
+.c38:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c37:hover {
+.c38:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c37:active,
-.c37:active:hover,
-.c37:active:focus {
+.c38:active,
+.c38:active:hover,
+.c38:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c27 {
+.c28 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -7082,7 +7097,6 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -7110,7 +7124,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c27:focus {
+.c28:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -7118,83 +7132,87 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c27:hover {
+.c28:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c28:active,
+.c28:active:hover,
+.c28:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c27[disabled] {
+.c28[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c27:focus {
+.c28:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c27:hover {
+.c28:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c28:active,
+.c28:active:hover,
+.c28:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c27:focus {
+.c28:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c27:hover {
+.c28:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c28:active,
+.c28:active:hover,
+.c28:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c1 {
+.c0 {
+  margin-bottom: 0;
+}
+
+.c2 {
   border-top: 0;
   border-left: 0;
   border-right: 0;
 }
 
-.c26 {
+.c27 {
   margin-right: 0.375rem;
 }
 
-.c4 {
+.c5 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 
-.c7 {
+.c8 {
   height: 2.9375rem;
   max-width: 98%;
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -7203,7 +7221,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -7212,7 +7230,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c21 {
+  .c22 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -7221,7 +7239,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c26 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -7230,38 +7248,39 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c36 {
+  .c37 {
     display: none;
   }
 }
 
 <form
+  className="c0"
   onSubmit={undefined}
 >
   <div
-    className="c0"
+    className="c1"
     disabled={false}
     name="card"
   >
     <div
-      className="c1 c2 c3"
+      className="c2 c3 c4"
       disabled={false}
       name="card-header"
       onClick={false}
     >
       <div
-        className="c4 c5"
+        className="c5 c6"
       >
         <div
-          className="c6"
+          className="c7"
         >
           <div
-            className="c7 c8 c3"
+            className="c8 c9 c4"
             disabled={false}
             name="card-header-meta"
           >
             <h4
-              className="c9"
+              className="c10"
             >
               Add metadata
             </h4>
@@ -7270,28 +7289,28 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c10 c11"
+      className="c11 c12"
       disabled={false}
       name="card-outlet"
     >
       <div
-        className="c12"
+        className="c13"
       >
         <div
-          className="c13"
+          className="c14"
           wrap={true}
         >
           <div
-            className="c14"
+            className="c15"
           >
             <div
-              className="c15"
+              className="c16"
               name="name"
               role="group"
               style={undefined}
             >
               <label
-                className="c16 c17"
+                className="c17 c18"
                 htmlFor="y"
               >
                 Metadata
@@ -7299,54 +7318,54 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
                 key
               </label>
               <div
-                className="c18"
+                className="c19"
               >
                 <input
-                  className="c19"
+                  className="c20"
                   disabled={true}
                   id="y"
                   onBlur={null}
                 />
                 <div
-                  className="c20"
+                  className="c21"
                 >
                   <div
-                    className="c21"
+                    className="c22"
                   />
                 </div>
               </div>
             </div>
           </div>
           <div
-            className="c14"
+            className="c15"
           >
             <div
-              className="c15"
+              className="c16"
               name="value"
               role="group"
               style={undefined}
             >
               <label
-                className="c16 c17"
+                className="c17 c18"
                 htmlFor="z"
               >
                 Metadata
                  value
               </label>
               <div
-                className="c22"
+                className="c23"
               >
                 <input
-                  className="c19"
+                  className="c20"
                   disabled={true}
                   id="z"
                   onBlur={null}
                 />
                 <div
-                  className="c20"
+                  className="c21"
                 >
                   <div
-                    className="c21"
+                    className="c22"
                   />
                 </div>
               </div>
@@ -7354,16 +7373,16 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c23"
+          className="c24"
         >
           <div
-            className="c24"
+            className="c25"
           >
             <div
-              className="c25"
+              className="c26"
             >
               <button
-                className="c26 c27 c28 c29 c30"
+                className="c27 c28 c29 c30 c31"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -7375,35 +7394,35 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c31 c28 c29 c30"
+                className="c32 c29 c30 c31"
                 data-ui-button="true"
                 disabled={true}
                 href=""
                 type="submit"
               >
                 <div
-                  className="c32"
+                  className="c33"
                 >
                   <svg
                     height="10"
                     width="28"
                   >
                     <rect
-                      className="c33"
+                      className="c34"
                       height="6"
                       width="6"
                       x="2"
                       y="2"
                     />
                     <rect
-                      className="c34 c33"
+                      className="c35 c34"
                       height="6"
                       width="6"
                       x="11"
                       y="2"
                     />
                     <rect
-                      className="c35 c33"
+                      className="c36 c34"
                       height="6"
                       width="6"
                       x="20"
@@ -7414,10 +7433,10 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c36"
+              className="c37"
             >
               <button
-                className="c37 c28 c29 c30"
+                className="c38 c29 c30 c31"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -7426,7 +7445,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c38"
+                  className="c39"
                 >
                   <svg
                     height="16"
@@ -7459,94 +7478,74 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 `;
 
 exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
-.c18 {
+.c19 {
   margin-top: 0.1875rem;
   margin-right: 1.125rem;
 }
 
-.c22 {
+.c23 {
   margin-top: 0.1875rem;
 }
 
-.c23 {
+.c24 {
   margin-top: 0.75rem;
 }
 
-.c34 {
+.c35 {
   margin-right: 0.75rem;
 }
 
-.c5 {
+.c6 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
 }
 
-.c12 {
+.c13 {
   padding-left: 1.125rem;
   padding-right: 1.125rem;
   padding-top: 1.125rem;
   padding-bottom: 1.125rem;
 }
 
-.c20 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
-.c24 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.625rem;
-  margin-left: -0.625rem;
-}
-
 .c21 {
   box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
 }
 
 .c25 {
   box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
 }
 
-.c32 {
+.c22 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -7556,7 +7555,27 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   display: block;
 }
 
-.c6 {
+.c26 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c33 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7584,7 +7603,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   align-items: center;
 }
 
-.c13 {
+.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7614,7 +7633,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c14 {
+.c15 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -7634,7 +7653,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c30 {
+.c31 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -7646,22 +7665,22 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   appearance: button;
 }
 
-.c30::-moz-focus-inner,
-.c30[type='button']::-moz-focus-inner,
-.c30[type='reset']::-moz-focus-inner,
-.c30[type='submit']::-moz-focus-inner {
+.c31::-moz-focus-inner,
+.c31[type='button']::-moz-focus-inner,
+.c31[type='reset']::-moz-focus-inner,
+.c31[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c30:-moz-focusring,
-.c30[type='button']:-moz-focusring,
-.c30[type='reset']:-moz-focusring,
-.c30[type='submit']:-moz-focusring {
+.c31:-moz-focusring,
+.c31[type='button']:-moz-focusring,
+.c31[type='reset']:-moz-focusring,
+.c31[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9 {
+.c10 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: 600;
@@ -7669,7 +7688,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
-.c0 {
+.c1 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -7692,7 +7711,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c3 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -7719,7 +7738,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   flex: 0 0 2.875rem;
 }
 
-.c11 {
+.c12 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -7741,7 +7760,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c10 {
+.c11 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -7757,7 +7776,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c2 {
+.c3 {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -7769,7 +7788,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   min-height: 2.9375rem;
   max-width: 100%;
@@ -7803,7 +7822,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   color: inherit;
 }
 
-.c15 {
+.c16 {
   display: inline-block;
   padding: 0;
   border: none;
@@ -7816,7 +7835,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   width: 100%;
 }
 
-.c19 {
+.c20 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -7838,46 +7857,46 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   text-overflow: ellipsis;
 }
 
-.c19:focus {
+.c20:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c19::-webkit-input-placeholder {
+.c20::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19::-moz-placeholder {
+.c20::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:-ms-input-placeholder {
+.c20:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:invalid {
+.c20:invalid {
   box-shadow: none;
 }
 
-.c19:disabled {
+.c20:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c19:disabled::-webkit-input-placeholder {
+.c20:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:disabled::-moz-placeholder {
+.c20:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c19:disabled:-ms-input-placeholder {
+.c20:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c17 {
+.c18 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -7887,21 +7906,21 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   text-align: left;
 }
 
-.c16 {
+.c17 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c29 {
+.c30 {
   min-width: 7.5rem;
 }
 
-.c28 {
+.c29 {
   display: inline-block;
 }
 
-.c27 {
+.c28 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -7922,7 +7941,6 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -7945,7 +7963,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c27:focus {
+.c28:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -7953,43 +7971,43 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c27:hover {
+.c28:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c28:active,
+.c28:active:hover,
+.c28:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c27[disabled] {
+.c28[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c27:focus {
+.c28:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c27:hover {
+.c28:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c28:active,
+.c28:active:hover,
+.c28:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c31 {
+.c32 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -8010,7 +8028,6 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -8034,7 +8051,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c31:focus {
+.c32:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -8042,43 +8059,43 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c31:hover {
+.c32:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c32:active,
+.c32:active:hover,
+.c32:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c31[disabled] {
+.c32[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c31:focus {
+.c32:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c31:hover {
+.c32:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c32:active,
+.c32:active:hover,
+.c32:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c33 {
+.c34 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -8099,7 +8116,6 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   text-align: center;
   font-style: normal;
   font-stretch: normal;
-  line-height: normal;
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
   -ms-letter-spacing: normal;
@@ -8135,7 +8151,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   float: right;
 }
 
-.c33:focus {
+.c34:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -8143,85 +8159,89 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c33:hover {
+.c34:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c33[disabled] {
+.c34[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c33:focus {
+.c34:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c33:hover {
+.c34:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c33:focus {
+.c34:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c33:hover {
+.c34:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c1 {
+.c0 {
+  margin-bottom: 0;
+}
+
+.c2 {
   border-top: 0;
   border-left: 0;
   border-right: 0;
 }
 
-.c26 {
+.c27 {
   margin-right: 0.375rem;
 }
 
-.c4 {
+.c5 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 
-.c7 {
+.c8 {
   height: 2.9375rem;
   max-width: 98%;
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -8230,7 +8250,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -8239,7 +8259,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c21 {
+  .c22 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -8248,7 +8268,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c26 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -8257,38 +8277,39 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c32 {
+  .c33 {
     display: none;
   }
 }
 
 <form
+  className="c0"
   onSubmit={undefined}
 >
   <div
-    className="c0"
+    className="c1"
     disabled={false}
     name="card"
   >
     <div
-      className="c1 c2 c3"
+      className="c2 c3 c4"
       disabled={false}
       name="card-header"
       onClick={false}
     >
       <div
-        className="c4 c5"
+        className="c5 c6"
       >
         <div
-          className="c6"
+          className="c7"
         >
           <div
-            className="c7 c8 c3"
+            className="c8 c9 c4"
             disabled={false}
             name="card-header-meta"
           >
             <h4
-              className="c9"
+              className="c10"
             >
               Add tag
             </h4>
@@ -8297,28 +8318,28 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c10 c11"
+      className="c11 c12"
       disabled={false}
       name="card-outlet"
     >
       <div
-        className="c12"
+        className="c13"
       >
         <div
-          className="c13"
+          className="c14"
           wrap={true}
         >
           <div
-            className="c14"
+            className="c15"
           >
             <div
-              className="c15"
+              className="c16"
               name="name"
               role="group"
               style={undefined}
             >
               <label
-                className="c16 c17"
+                className="c17 c18"
                 htmlFor="q"
               >
                 Tag
@@ -8326,54 +8347,54 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
                 key
               </label>
               <div
-                className="c18"
+                className="c19"
               >
                 <input
-                  className="c19"
+                  className="c20"
                   disabled={false}
                   id="q"
                   onBlur={null}
                 />
                 <div
-                  className="c20"
+                  className="c21"
                 >
                   <div
-                    className="c21"
+                    className="c22"
                   />
                 </div>
               </div>
             </div>
           </div>
           <div
-            className="c14"
+            className="c15"
           >
             <div
-              className="c15"
+              className="c16"
               name="value"
               role="group"
               style={undefined}
             >
               <label
-                className="c16 c17"
+                className="c17 c18"
                 htmlFor="r"
               >
                 Tag
                  value
               </label>
               <div
-                className="c22"
+                className="c23"
               >
                 <input
-                  className="c19"
+                  className="c20"
                   disabled={false}
                   id="r"
                   onBlur={null}
                 />
                 <div
-                  className="c20"
+                  className="c21"
                 >
                   <div
-                    className="c21"
+                    className="c22"
                   />
                 </div>
               </div>
@@ -8381,16 +8402,16 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c23"
+          className="c24"
         >
           <div
-            className="c24"
+            className="c25"
           >
             <div
-              className="c25"
+              className="c26"
             >
               <button
-                className="c26 c27 c28 c29 c30"
+                className="c27 c28 c29 c30 c31"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -8402,7 +8423,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c31 c28 c29 c30"
+                className="c32 c29 c30 c31"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -8414,10 +8435,10 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c32"
+              className="c33"
             >
               <button
-                className="c33 c28 c29 c30"
+                className="c34 c29 c30 c31"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -8426,7 +8447,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c34"
+                  className="c35"
                 >
                   <svg
                     height="16"
diff --git a/packages/ui-toolkit/src/key-value/index.js b/packages/ui-toolkit/src/key-value/index.js
index ccf2bd55..4b541bd6 100644
--- a/packages/ui-toolkit/src/key-value/index.js
+++ b/packages/ui-toolkit/src/key-value/index.js
@@ -27,6 +27,10 @@ import { H4 } from '../text/headings';
 import Button from '../button';
 import Divider from '../divider';
 
+const Form = styled.form`
+  margin-bottom: 0;
+`;
+
 const CollapsedKeyValue = styled.div`
   word-break: break-all;
   line-height: 1.5;
@@ -348,7 +352,7 @@ KeyValue.propTypes = {
 };
 
 export default withTheme(({ handleSubmit, ...rest }) => (
-  <form onSubmit={handleSubmit}>
+  <Form onSubmit={handleSubmit}>
     <KeyValue {...rest} />
-  </form>
+  </Form>
 ));
diff --git a/packages/ui-toolkit/src/tags/item.js b/packages/ui-toolkit/src/tags/item.js
index 93d20937..20468188 100644
--- a/packages/ui-toolkit/src/tags/item.js
+++ b/packages/ui-toolkit/src/tags/item.js
@@ -11,12 +11,6 @@ const CloseIcon = styled(Close)`
   `};
 `;
 
-const Container = styled.div`
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
-`;
-
 const Tag = styled.li`
   border: ${remcalc(1)} solid ${props => props.theme.grey};
   box-sizing: border-box;
@@ -59,19 +53,15 @@ export default withTheme(
     iconFill = null,
     ...rest
   }) => (
-    <Container>
-      <Tag fill={fill} active={active} {...rest}>
-        {children}
-        {onRemoveClick ? (
-          <CloseIcon
-            fill={
-              iconFill ? iconFill : active ? theme.primaryActive : theme.text
-            }
-            disabled
-            onClick={onRemoveClick}
-          />
-        ) : null}
-      </Tag>
-    </Container>
+    <Tag fill={fill} active={active} {...rest}>
+      {children}
+      {onRemoveClick ? (
+        <CloseIcon
+          fill={iconFill ? iconFill : active ? theme.primaryActive : theme.text}
+          disabled
+          onClick={onRemoveClick}
+        />
+      ) : null}
+    </Tag>
   )
 );
diff --git a/packages/ui-toolkit/src/tags/list.js b/packages/ui-toolkit/src/tags/list.js
index 7a0a4b1c..64129bf7 100644
--- a/packages/ui-toolkit/src/tags/list.js
+++ b/packages/ui-toolkit/src/tags/list.js
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import remcalc from 'remcalc';
 
 export default styled.ul`
   margin: 0;