fix(my-joy-beta): fix tests

bundle/index.js

@@ -1,4 +1,4 @@
-'use strict';
+
 
 const Brule = require('brule');
 const Hapi = require('hapi');

packages/my-joy-beta/src/components/__tests__/__snapshots__/network.spec.js.snap

@@ -4554,7 +4554,11 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   margin-top: 1.125rem;
 }
 
-.c29 {
+.c28 {
+  margin-bottom: 0.75rem;
+}
+
+.c30 {
   margin-top: 0.1875rem;
 }
 
@@ -4743,7 +4747,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   padding-bottom: 2.25rem;
 }
 
-.c28 {
+.c29 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -5093,7 +5097,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c30 {
+.c31 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -5116,57 +5120,57 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   outline: 0;
 }
 
-.c30::-webkit-input-placeholder {
+.c31::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c30::-moz-placeholder {
+.c31::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c30:-ms-input-placeholder {
+.c31:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c30:invalid {
+.c31:invalid {
   box-shadow: none;
 }
 
-.c30:disabled {
+.c31:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c30:disabled::-webkit-input-placeholder {
+.c31:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c30:disabled::-moz-placeholder {
+.c31:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c30:disabled:-ms-input-placeholder {
+.c31:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c30:disabled {
+.c31:disabled {
   color: rgba(73,73,73,1);
 }
 
-.c30:disabled::-webkit-input-placeholder {
+.c31:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,1);
 }
 
-.c30:disabled::-moz-placeholder {
+.c31:disabled::-moz-placeholder {
   color: rgba(73,73,73,1);
 }
 
-.c30:disabled:-ms-input-placeholder {
+.c31:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,1);
 }
 
-.c30:focus {
+.c31:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
@@ -5571,27 +5575,31 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
                         className="c20"
                       >
                         <div
-                          className="baseline-jVaZNU kXgQxt c6"
-                          name="id"
-                          role="group"
-                          style={undefined}
+                          className="c28"
                         >
-                          <label
-                            className="c28"
-                            htmlFor="x"
-                          >
-                            ID
-                          </label>
                           <div
-                            className="c29"
+                            className="baseline-jVaZNU kXgQxt c6"
+                            name="id"
+                            role="group"
+                            style={undefined}
                           >
-                            <input
+                            <label
+                              className="c29"
+                              htmlFor="x"
+                            >
+                              ID
+                            </label>
+                            <div
                               className="c30"
-                              disabled={false}
-                              id="x"
-                              onBlur={null}
-                              value="1"
-                            />
+                            >
+                              <input
+                                className="c31"
+                                disabled={false}
+                                id="x"
+                                onBlur={null}
+                                value="1"
+                              />
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -5605,16 +5613,16 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
                           style={undefined}
                         >
                           <label
-                            className="c28"
+                            className="c29"
                             htmlFor="y"
                           >
                             Subnet
                           </label>
                           <div
-                            className="c29"
+                            className="c30"
                           >
                             <input
-                              className="c30"
+                              className="c31"
                               disabled={false}
                               id="y"
                               onBlur={null}
@@ -5633,16 +5641,16 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
                           style={undefined}
                         >
                           <label
-                            className="c28"
+                            className="c29"
                             htmlFor="z"
                           >
                             IP range
                           </label>
                           <div
-                            className="c29"
+                            className="c30"
                           >
                             <input
-                              className="c30"
+                              className="c31"
                               disabled={false}
                               id="z"
                               onBlur={null}

packages/my-joy-beta/src/components/__tests__/__snapshots__/tags.spec.js.snap

@@ -5,6 +5,10 @@ exports[`renders <AddForm /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
+.c18 {
+  margin-top: 0.75rem;
+}
+
 .c3 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
@@ -14,7 +18,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   padding: 1.125rem;
 }
 
-.c22 {
+.c23 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -27,30 +31,30 @@ exports[`renders <AddForm /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c22::-moz-focus-inner,
-.c22[type='button']::-moz-focus-inner,
-.c22[type='reset']::-moz-focus-inner,
-.c22[type='submit']::-moz-focus-inner {
+.c23::-moz-focus-inner,
+.c23[type='button']::-moz-focus-inner,
+.c23[type='reset']::-moz-focus-inner,
+.c23[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c22:-moz-focusring,
-.c22[type='button']:-moz-focusring,
-.c22[type='reset']:-moz-focusring,
-.c22[type='submit']:-moz-focusring {
+.c23:-moz-focusring,
+.c23[type='button']:-moz-focusring,
+.c23[type='reset']:-moz-focusring,
+.c23[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c22 + button {
+.c23 + button {
   margin-left: 0.375rem;
 }
 
-.c21 {
+.c22 {
   display: inline-block;
 }
 
-.c20 {
+.c21 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -94,50 +98,50 @@ exports[`renders <AddForm /> without throwing 1`] = `
   margin: 0;
 }
 
-.c20:focus {
+.c21:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c20:hover {
+.c21:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c20:active,
-.c20:active:hover,
-.c20:active:focus {
+.c21:active,
+.c21:active:hover,
+.c21:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c20[disabled] {
+.c21[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c20:focus {
+.c21:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c20:hover {
+.c21:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c20:active,
-.c20:active:hover,
-.c20:active:focus {
+.c21:active,
+.c21:active:hover,
+.c21:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c23 {
+.c24 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -182,50 +186,50 @@ exports[`renders <AddForm /> without throwing 1`] = `
   margin: 0;
 }
 
-.c23:focus {
+.c24:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c23:hover {
+.c24:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c23:active,
-.c23:active:hover,
-.c23:active:focus {
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c23[disabled] {
+.c24[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c23:focus {
+.c24:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c23:hover {
+.c24:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c23:active,
-.c23:active:hover,
-.c23:active:focus {
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c25 {
+.c26 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -282,73 +286,73 @@ exports[`renders <AddForm /> without throwing 1`] = `
   float: right;
 }
 
-.c25:focus {
+.c26:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c25:hover {
+.c26:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c25:active,
-.c25:active:hover,
-.c25:active:focus {
+.c26:active,
+.c26:active:hover,
+.c26:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c25[disabled] {
+.c26[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c25:focus {
+.c26:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c25:hover {
+.c26:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c25:active,
-.c25:active:hover,
-.c25:active:focus {
+.c26:active,
+.c26:active:hover,
+.c26:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c25:focus {
+.c26:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c25:hover {
+.c26:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c25:active,
-.c25:active:hover,
-.c25:active:focus {
+.c26:active,
+.c26:active:hover,
+.c26:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c25 svg + span {
+.c26 svg + span {
   margin-left: 0.75rem;
 }
 
-.c25 svg {
+.c26 svg {
   max-height: 1.125rem;
 }
 
@@ -379,7 +383,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   float: none;
 }
 
-.c18 {
+.c19 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -398,7 +402,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c19 {
+.c20 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -408,7 +412,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   display: block;
 }
 
-.c24 {
+.c25 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -793,7 +797,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c18 {
+  .c19 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -802,7 +806,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c18 {
+  .c19 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -811,7 +815,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c19 {
+  .c20 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -820,7 +824,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     display: none;
   }
 }
@@ -941,61 +945,65 @@ exports[`renders <AddForm /> without throwing 1`] = `
           <div
             className="c19"
           >
-            <button
-              className="c20 c21 c22"
-              disabled={false}
-              href=""
-              onClick={[Function]}
-              type="button"
+            <div
+              className="c20"
             >
-              <span>
-                Cancel
-              </span>
-            </button>
-            <button
-              className="c23 c21 c22"
-              disabled={true}
-              href=""
-              type="submit"
-            >
-              <span>
-                Create
-              </span>
-            </button>
-          </div>
-          <div
-            className="c24"
-          >
-            <button
-              className="c25 c21 c22"
-              disabled={false}
-              href=""
-              icon={true}
-              onClick={[Function]}
-              type="button"
-            >
-              <svg
-                className=""
-                height="16"
-                innerRef={undefined}
-                style={
-                  Object {
-                    "transform": "rotate(0deg)",
-                  }
-                }
-                viewBox="0 0 12 16"
-                width="12"
-                xmlns="http://www.w3.org/2000/svg"
+              <button
+                className="c21 c22 c23"
+                disabled={false}
+                href=""
+                onClick={[Function]}
+                type="button"
               >
-                <path
-                  d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
-                  fill="rgb(210, 67, 58)"
-                />
-              </svg>
-              <span>
-                Remove
-              </span>
-            </button>
+                <span>
+                  Cancel
+                </span>
+              </button>
+              <button
+                className="c24 c22 c23"
+                disabled={true}
+                href=""
+                type="submit"
+              >
+                <span>
+                  Create
+                </span>
+              </button>
+            </div>
+            <div
+              className="c25"
+            >
+              <button
+                className="c26 c22 c23"
+                disabled={false}
+                href=""
+                icon={true}
+                onClick={[Function]}
+                type="button"
+              >
+                <svg
+                  className=""
+                  height="16"
+                  innerRef={undefined}
+                  style={
+                    Object {
+                      "transform": "rotate(0deg)",
+                    }
+                  }
+                  viewBox="0 0 12 16"
+                  width="12"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
+                    fill="rgb(210, 67, 58)"
+                  />
+                </svg>
+                <span>
+                  Remove
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -1009,6 +1017,10 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
+.c18 {
+  margin-top: 0.75rem;
+}
+
 .c3 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
@@ -1018,7 +1030,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   padding: 1.125rem;
 }
 
-.c22 {
+.c23 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1031,30 +1043,30 @@ exports[`renders <EditForm /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c22::-moz-focus-inner,
-.c22[type='button']::-moz-focus-inner,
-.c22[type='reset']::-moz-focus-inner,
-.c22[type='submit']::-moz-focus-inner {
+.c23::-moz-focus-inner,
+.c23[type='button']::-moz-focus-inner,
+.c23[type='reset']::-moz-focus-inner,
+.c23[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c22:-moz-focusring,
-.c22[type='button']:-moz-focusring,
-.c22[type='reset']:-moz-focusring,
-.c22[type='submit']:-moz-focusring {
+.c23:-moz-focusring,
+.c23[type='button']:-moz-focusring,
+.c23[type='reset']:-moz-focusring,
+.c23[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c22 + button {
+.c23 + button {
   margin-left: 0.375rem;
 }
 
-.c21 {
+.c22 {
   display: inline-block;
 }
 
-.c20 {
+.c21 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1098,50 +1110,50 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin: 0;
 }
 
-.c20:focus {
+.c21:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c20:hover {
+.c21:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c20:active,
-.c20:active:hover,
-.c20:active:focus {
+.c21:active,
+.c21:active:hover,
+.c21:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c20[disabled] {
+.c21[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c20:focus {
+.c21:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c20:hover {
+.c21:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c20:active,
-.c20:active:hover,
-.c20:active:focus {
+.c21:active,
+.c21:active:hover,
+.c21:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c23 {
+.c24 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1186,50 +1198,50 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin: 0;
 }
 
-.c23:focus {
+.c24:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c23:hover {
+.c24:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c23:active,
-.c23:active:hover,
-.c23:active:focus {
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c23[disabled] {
+.c24[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c23:focus {
+.c24:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c23:hover {
+.c24:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c23:active,
-.c23:active:hover,
-.c23:active:focus {
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c25 {
+.c26 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1286,73 +1298,73 @@ exports[`renders <EditForm /> without throwing 1`] = `
   float: right;
 }
 
-.c25:focus {
+.c26:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c25:hover {
+.c26:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c25:active,
-.c25:active:hover,
-.c25:active:focus {
+.c26:active,
+.c26:active:hover,
+.c26:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c25[disabled] {
+.c26[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c25:focus {
+.c26:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c25:hover {
+.c26:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c25:active,
-.c25:active:hover,
-.c25:active:focus {
+.c26:active,
+.c26:active:hover,
+.c26:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c25:focus {
+.c26:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c25:hover {
+.c26:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c25:active,
-.c25:active:hover,
-.c25:active:focus {
+.c26:active,
+.c26:active:hover,
+.c26:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c25 svg + span {
+.c26 svg + span {
   margin-left: 0.75rem;
 }
 
-.c25 svg {
+.c26 svg {
   max-height: 1.125rem;
 }
 
@@ -1383,7 +1395,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   float: none;
 }
 
-.c18 {
+.c19 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1402,7 +1414,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c19 {
+.c20 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1412,7 +1424,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   display: block;
 }
 
-.c24 {
+.c25 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1787,7 +1799,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c18 {
+  .c19 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1796,7 +1808,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c18 {
+  .c19 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1805,7 +1817,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c19 {
+  .c20 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -1814,7 +1826,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -1955,61 +1967,65 @@ exports[`renders <EditForm /> without throwing 1`] = `
           <div
             className="c19"
           >
-            <button
-              className="c20 c21 c22"
-              disabled={false}
-              href=""
-              onClick={[Function]}
-              type="button"
+            <div
+              className="c20"
             >
-              <span>
-                Cancel
-              </span>
-            </button>
-            <button
-              className="c23 c21 c22"
-              disabled={true}
-              href=""
-              type="submit"
-            >
-              <span>
-                Save
-              </span>
-            </button>
-          </div>
-          <div
-            className="c24"
-          >
-            <button
-              className="c25 c21 c22"
-              disabled={false}
-              href=""
-              icon={true}
-              onClick={[Function]}
-              type="button"
-            >
-              <svg
-                className=""
-                height="16"
-                innerRef={undefined}
-                style={
-                  Object {
-                    "transform": "rotate(0deg)",
-                  }
-                }
-                viewBox="0 0 12 16"
-                width="12"
-                xmlns="http://www.w3.org/2000/svg"
+              <button
+                className="c21 c22 c23"
+                disabled={false}
+                href=""
+                onClick={[Function]}
+                type="button"
               >
-                <path
-                  d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
-                  fill="rgb(210, 67, 58)"
-                />
-              </svg>
-              <span>
-                Remove
-              </span>
-            </button>
+                <span>
+                  Cancel
+                </span>
+              </button>
+              <button
+                className="c24 c22 c23"
+                disabled={true}
+                href=""
+                type="submit"
+              >
+                <span>
+                  Save
+                </span>
+              </button>
+            </div>
+            <div
+              className="c25"
+            >
+              <button
+                className="c26 c22 c23"
+                disabled={false}
+                href=""
+                icon={true}
+                onClick={[Function]}
+                type="button"
+              >
+                <svg
+                  className=""
+                  height="16"
+                  innerRef={undefined}
+                  style={
+                    Object {
+                      "transform": "rotate(0deg)",
+                    }
+                  }
+                  viewBox="0 0 12 16"
+                  width="12"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
+                    fill="rgb(210, 67, 58)"
+                  />
+                </svg>
+                <span>
+                  Remove
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/affinity.spec.js.snap

@@ -86,7 +86,7 @@ exports[`renders <Rule/> without throwing 1`] = `
   border-radius: 0;
   background: transparent;
   padding: 0;
-  padding-right: 0.75rem;
+  padding-right: 1rem;
   display: inline;
   height: 1.5rem;
   -webkit-appearance: none;
@@ -112,7 +112,7 @@ exports[`renders <Rule/> without throwing 1`] = `
   border-radius: 0;
   background: transparent;
   padding: 0;
-  padding-right: 0.75rem;
+  padding-right: 1rem;
   display: inline;
   height: 1.5rem;
   -webkit-appearance: none;
@@ -138,7 +138,7 @@ exports[`renders <Rule/> without throwing 1`] = `
   border-radius: 0;
   background: transparent;
   padding: 0;
-  padding-right: 0.75rem;
+  padding-right: 1rem;
   display: inline;
   height: 1.5rem;
   -webkit-appearance: none;
@@ -772,7 +772,7 @@ exports[`renders <Rule/> without throwing 2`] = `
   border-radius: 0;
   background: transparent;
   padding: 0;
-  padding-right: 0.75rem;
+  padding-right: 1rem;
   display: inline;
   height: 1.5rem;
   -webkit-appearance: none;
@@ -798,7 +798,7 @@ exports[`renders <Rule/> without throwing 2`] = `
   border-radius: 0;
   background: transparent;
   padding: 0;
-  padding-right: 0.75rem;
+  padding-right: 1rem;
   display: inline;
   height: 1.5rem;
   -webkit-appearance: none;
@@ -824,7 +824,7 @@ exports[`renders <Rule/> without throwing 2`] = `
   border-radius: 0;
   background: transparent;
   padding: 0;
-  padding-right: 0.75rem;
+  padding-right: 1rem;
   display: inline;
   height: 1.5rem;
   -webkit-appearance: none;

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/package.spec.js.snap

@@ -1238,15 +1238,15 @@ exports[`renders <Package /> without throwing 1`] = `
 `;
 
 exports[`renders <Packages expanded /> without throwing 1`] = `
-.c10 {
+.c11 {
   margin-bottom: 0.75rem;
 }
 
-.c8 {
+.c9 {
   padding: 2.25rem;
 }
 
-.c9 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1282,7 +1282,7 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
   margin-left: 0.5625rem;
 }
 
-.c12 {
+.c13 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -1290,20 +1290,20 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
   margin: 0;
 }
 
-.c12 + p,
-.c12 + small,
-.c12 + h1,
-.c12 + h2,
-.c12 + label,
-.c12 + h3,
-.c12 + h4,
-.c12 + h5,
-.c12 + div,
-.c12 + span {
+.c13 + p,
+.c13 + small,
+.c13 + h1,
+.c13 + h2,
+.c13 + label,
+.c13 + h3,
+.c13 + h4,
+.c13 + h5,
+.c13 + div,
+.c13 + span {
   margin-top: 1.5rem;
 }
 
-.c7 {
+.c8 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1439,10 +1439,14 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-.c11 {
+.c12 {
   color: rgb(151,151,151);
 }
 
+.c7 {
+  width: 100%;
+}
+
 <form>
   <table
     className="c0"
@@ -1533,25 +1537,25 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
     />
   </table>
   <div
-    className="c7"
+    className="c7 c8"
     disabled={false}
     name="card"
   >
     <div
-      className="c8"
+      className="c9"
     >
       <div
-        className="c9"
+        className="c10"
       >
         <div
-          className="c10"
+          className="c11"
         >
           <img
             src="no-packages.svg"
           />
         </div>
         <h3
-          className="c11 c12"
+          className="c12 c13"
         >
           Sorry, but we weren’t able to find any packages with that filter
         </h3>
@@ -1562,15 +1566,15 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
 `;
 
 exports[`renders <Packages isVmSelected /> without throwing 1`] = `
-.c10 {
+.c11 {
   margin-bottom: 0.75rem;
 }
 
-.c8 {
+.c9 {
   padding: 2.25rem;
 }
 
-.c9 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1606,7 +1610,7 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
   margin-left: 0.5625rem;
 }
 
-.c12 {
+.c13 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -1614,20 +1618,20 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
   margin: 0;
 }
 
-.c12 + p,
-.c12 + small,
-.c12 + h1,
-.c12 + h2,
-.c12 + label,
-.c12 + h3,
-.c12 + h4,
-.c12 + h5,
-.c12 + div,
-.c12 + span {
+.c13 + p,
+.c13 + small,
+.c13 + h1,
+.c13 + h2,
+.c13 + label,
+.c13 + h3,
+.c13 + h4,
+.c13 + h5,
+.c13 + div,
+.c13 + span {
   margin-top: 1.5rem;
 }
 
-.c7 {
+.c8 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1763,10 +1767,14 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-.c11 {
+.c12 {
   color: rgb(151,151,151);
 }
 
+.c7 {
+  width: 100%;
+}
+
 <form>
   <table
     className="c0"
@@ -1857,25 +1865,25 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
     />
   </table>
   <div
-    className="c7"
+    className="c7 c8"
     disabled={false}
     name="card"
   >
     <div
-      className="c8"
+      className="c9"
     >
       <div
-        className="c9"
+        className="c10"
       >
         <div
-          className="c10"
+          className="c11"
         >
           <img
             src="no-packages.svg"
           />
         </div>
         <h3
-          className="c11 c12"
+          className="c12 c13"
         >
           Sorry, but we weren’t able to find any packages with that filter
         </h3>
@@ -1886,15 +1894,15 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
 `;
 
 exports[`renders <Packages loading /> without throwing 1`] = `
-.c10 {
+.c11 {
   margin-bottom: 0.75rem;
 }
 
-.c8 {
+.c9 {
   padding: 2.25rem;
 }
 
-.c9 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1930,7 +1938,7 @@ exports[`renders <Packages loading /> without throwing 1`] = `
   margin-left: 0.5625rem;
 }
 
-.c12 {
+.c13 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -1938,20 +1946,20 @@ exports[`renders <Packages loading /> without throwing 1`] = `
   margin: 0;
 }
 
-.c12 + p,
-.c12 + small,
-.c12 + h1,
-.c12 + h2,
-.c12 + label,
-.c12 + h3,
-.c12 + h4,
-.c12 + h5,
-.c12 + div,
-.c12 + span {
+.c13 + p,
+.c13 + small,
+.c13 + h1,
+.c13 + h2,
+.c13 + label,
+.c13 + h3,
+.c13 + h4,
+.c13 + h5,
+.c13 + div,
+.c13 + span {
   margin-top: 1.5rem;
 }
 
-.c7 {
+.c8 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2087,10 +2095,14 @@ exports[`renders <Packages loading /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-.c11 {
+.c12 {
   color: rgb(151,151,151);
 }
 
+.c7 {
+  width: 100%;
+}
+
 <form>
   <table
     className="c0"
@@ -2181,25 +2193,25 @@ exports[`renders <Packages loading /> without throwing 1`] = `
     />
   </table>
   <div
-    className="c7"
+    className="c7 c8"
     disabled={false}
     name="card"
   >
     <div
-      className="c8"
+      className="c9"
     >
       <div
-        className="c9"
+        className="c10"
       >
         <div
-          className="c10"
+          className="c11"
         >
           <img
             src="no-packages.svg"
           />
         </div>
         <h3
-          className="c11 c12"
+          className="c12 c13"
         >
           Sorry, but we weren’t able to find any packages with that filter
         </h3>
@@ -2422,15 +2434,15 @@ exports[`renders <Packages packages=[{name: stuff, imageName: stuff}] /> without
 `;
 
 exports[`renders <Packages pristine={false} /> without throwing 1`] = `
-.c10 {
+.c11 {
   margin-bottom: 0.75rem;
 }
 
-.c8 {
+.c9 {
   padding: 2.25rem;
 }
 
-.c9 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2466,7 +2478,7 @@ exports[`renders <Packages pristine={false} /> without throwing 1`] = `
   margin-left: 0.5625rem;
 }
 
-.c12 {
+.c13 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -2474,20 +2486,20 @@ exports[`renders <Packages pristine={false} /> without throwing 1`] = `
   margin: 0;
 }
 
-.c12 + p,
-.c12 + small,
-.c12 + h1,
-.c12 + h2,
-.c12 + label,
-.c12 + h3,
-.c12 + h4,
-.c12 + h5,
-.c12 + div,
-.c12 + span {
+.c13 + p,
+.c13 + small,
+.c13 + h1,
+.c13 + h2,
+.c13 + label,
+.c13 + h3,
+.c13 + h4,
+.c13 + h5,
+.c13 + div,
+.c13 + span {
   margin-top: 1.5rem;
 }
 
-.c7 {
+.c8 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2623,10 +2635,14 @@ exports[`renders <Packages pristine={false} /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
-.c11 {
+.c12 {
   color: rgb(151,151,151);
 }
 
+.c7 {
+  width: 100%;
+}
+
 <form>
   <table
     className="c0"
@@ -2717,25 +2733,25 @@ exports[`renders <Packages pristine={false} /> without throwing 1`] = `
     />
   </table>
   <div
-    className="c7"
+    className="c7 c8"
     disabled={false}
     name="card"
   >
     <div
-      className="c8"
+      className="c9"
     >
       <div
-        className="c9"
+        className="c10"
       >
         <div
-          className="c10"
+          className="c11"
         >
           <img
             src="no-packages.svg"
           />
         </div>
         <h3
-          className="c11 c12"
+          className="c12 c13"
         >
           Sorry, but we weren’t able to find any packages with that filter
         </h3>

packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/list.spec.js.snap

@@ -3203,7 +3203,7 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
 `;
 
 exports[`renders <Item /> without throwing 1`] = `
-.c12 {
+.c14 {
   background-color: transparent;
   text-decoration-skip: objects;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
@@ -3272,12 +3272,12 @@ exports[`renders <Item /> without throwing 1`] = `
   cursor: not-allowed;
 }
 
-.c11 {
+.c13 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c11:hover {
+.c13:hover {
   text-decoration: none;
 }
 
@@ -3290,19 +3290,34 @@ exports[`renders <Item /> without throwing 1`] = `
   padding-top: 0.25rem;
 }
 
-.c13 {
-  height: 0.6875rem;
-  width: 0.6875rem;
-  border-radius: 0.6875rem;
-}
-
-.c17 {
+.c18 {
   padding: 0rem;
 }
 
-.c14 {
-  width: 0.375rem;
-  height: 0.375rem;
+.c11 {
+  color: rgba(73,73,73,1);
+  font-weight: 700;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c11 + p,
+.c11 + small,
+.c11 + h1,
+.c11 + h2,
+.c11 + label,
+.c11 + h3,
+.c11 + h4,
+.c11 + h5,
+.c11 + div,
+.c11 + span {
+  padding-bottom: 2.25rem;
+}
+
+.c15 {
+  width: 0.75rem;
+  height: 0.75rem;
   border-radius: 50%;
   background-color: rgb(0,152,88);
   display: inline-block;
@@ -3383,7 +3398,7 @@ exports[`renders <Item /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c19 {
+.c20 {
   cursor: pointer;
   height: 100%;
   width: 100%;
@@ -3440,30 +3455,6 @@ exports[`renders <Item /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c15 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  vertical-align: middle;
-  text-align: left;
-  border-bottom-width: 0;
-}
-
-.c15:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c15:not(:last-child) {
-  border-right-width: 0;
-}
-
 .c16 {
   border-width: 0.0625rem;
   border-style: solid;
@@ -3488,7 +3479,31 @@ exports[`renders <Item /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c18 {
+.c17 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  width: 0rem;
+  display: none;
+  vertical-align: middle;
+  text-align: left;
+  border-bottom-width: 0;
+}
+
+.c17:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c17:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c19 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -3501,11 +3516,11 @@ exports[`renders <Item /> without throwing 1`] = `
   border-left-width: 0.0625rem !important;
 }
 
-.c18:not(:first-child) {
+.c19:not(:first-child) {
   border-left-width: 0;
 }
 
-.c18:not(:last-child) {
+.c19:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -3525,15 +3540,20 @@ exports[`renders <Item /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
+.c12 {
+  color: rgba(73,73,73,1);
+  text-decoration: none;
+}
+
 @media only screen and (min-width:47.9375rem) {
-  .c15 {
+  .c16 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
-  .c16 {
+  .c17 {
     width: 8.125rem;
     display: table-cell;
   }
@@ -3599,10 +3619,14 @@ exports[`renders <Item /> without throwing 1`] = `
         name="td"
         selected={undefined}
       >
-        <a
-          className="c11 c12"
-          to="/instances/undefined"
-        />
+        <strong
+          className="c11"
+        >
+          <a
+            className="c12 c13 c14"
+            to="/instances/undefined"
+          />
+        </strong>
       </td>
       <td
         className="c4"
@@ -3612,17 +3636,16 @@ exports[`renders <Item /> without throwing 1`] = `
       >
         <span>
           <span
-            className="c13 c14"
+            className="c15"
             color="green"
-            height="0.6875rem"
-            width="0.6875rem"
+            size="0.75rem"
           />
            
           Running
         </span>
       </td>
       <td
-        className="c15"
+        className="c16"
         disabled={undefined}
         name="td"
         selected={undefined}
@@ -3630,7 +3653,7 @@ exports[`renders <Item /> without throwing 1`] = `
         almost NaN years
       </td>
       <td
-        className="c16"
+        className="c17"
         disabled={undefined}
         name="td"
         selected={undefined}
@@ -3640,14 +3663,14 @@ exports[`renders <Item /> without throwing 1`] = `
         </code>
       </td>
       <td
-        className="c17 c18"
+        className="c18 c19"
         disabled={undefined}
         name="td"
         selected={undefined}
       >
         <div
           box={true}
-          className="c19"
+          className="c20"
           onClick={[Function]}
           onMouseEnter={undefined}
           onMouseLeave={undefined}
@@ -3679,7 +3702,7 @@ exports[`renders <Item /> without throwing 1`] = `
 `;
 
 exports[`renders <Item {...item} /> without throwing 1`] = `
-.c12 {
+.c14 {
   background-color: transparent;
   text-decoration-skip: objects;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
@@ -3748,12 +3771,12 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   cursor: not-allowed;
 }
 
-.c11 {
+.c13 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c11:hover {
+.c13:hover {
   text-decoration: none;
 }
 
@@ -3766,19 +3789,34 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   padding-top: 0.25rem;
 }
 
-.c13 {
-  height: 0.6875rem;
-  width: 0.6875rem;
-  border-radius: 0.6875rem;
-}
-
-.c17 {
+.c18 {
   padding: 0rem;
 }
 
-.c14 {
-  width: 0.375rem;
-  height: 0.375rem;
+.c11 {
+  color: rgba(73,73,73,1);
+  font-weight: 700;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c11 + p,
+.c11 + small,
+.c11 + h1,
+.c11 + h2,
+.c11 + label,
+.c11 + h3,
+.c11 + h4,
+.c11 + h5,
+.c11 + div,
+.c11 + span {
+  padding-bottom: 2.25rem;
+}
+
+.c15 {
+  width: 0.75rem;
+  height: 0.75rem;
   border-radius: 50%;
   background-color: rgb(59,70,204);
   display: inline-block;
@@ -3859,7 +3897,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c19 {
+.c20 {
   cursor: pointer;
   height: 100%;
   width: 100%;
@@ -3916,30 +3954,6 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c15 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  vertical-align: middle;
-  text-align: left;
-  border-bottom-width: 0;
-}
-
-.c15:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c15:not(:last-child) {
-  border-right-width: 0;
-}
-
 .c16 {
   border-width: 0.0625rem;
   border-style: solid;
@@ -3964,7 +3978,31 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c18 {
+.c17 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  width: 0rem;
+  display: none;
+  vertical-align: middle;
+  text-align: left;
+  border-bottom-width: 0;
+}
+
+.c17:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c17:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c19 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -3977,11 +4015,11 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   border-left-width: 0.0625rem !important;
 }
 
-.c18:not(:first-child) {
+.c19:not(:first-child) {
   border-left-width: 0;
 }
 
-.c18:not(:last-child) {
+.c19:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -4001,15 +4039,20 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
+.c12 {
+  color: rgba(73,73,73,1);
+  text-decoration: none;
+}
+
 @media only screen and (min-width:47.9375rem) {
-  .c15 {
+  .c16 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
-  .c16 {
+  .c17 {
     width: 8.125rem;
     display: table-cell;
   }
@@ -4075,12 +4118,16 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
         name="td"
         selected={undefined}
       >
-        <a
-          className="c11 c12"
-          to="/instances/name"
+        <strong
+          className="c11"
         >
-          name
-        </a>
+          <a
+            className="c12 c13 c14"
+            to="/instances/name"
+          >
+            name
+          </a>
+        </strong>
       </td>
       <td
         className="c4"
@@ -4090,17 +4137,16 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
       >
         <span>
           <span
-            className="c13 c14"
+            className="c15"
             color="primary"
-            height="0.6875rem"
-            width="0.6875rem"
+            size="0.75rem"
           />
            
           Provisioning
         </span>
       </td>
       <td
-        className="c15"
+        className="c16"
         disabled={undefined}
         name="td"
         selected={undefined}
@@ -4108,7 +4154,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
         almost NaN years
       </td>
       <td
-        className="c16"
+        className="c17"
         disabled={undefined}
         name="td"
         selected={undefined}
@@ -4118,14 +4164,14 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
         </code>
       </td>
       <td
-        className="c17 c18"
+        className="c18 c19"
         disabled={undefined}
         name="td"
         selected={undefined}
       >
         <div
           box={true}
-          className="c19"
+          className="c20"
           onClick={[Function]}
           onMouseEnter={undefined}
           onMouseLeave={undefined}
@@ -4157,7 +4203,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
 `;
 
 exports[`renders <Item allowedActions /> without throwing 1`] = `
-.c12 {
+.c14 {
   background-color: transparent;
   text-decoration-skip: objects;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
@@ -4226,12 +4272,12 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
   cursor: not-allowed;
 }
 
-.c11 {
+.c13 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c11:hover {
+.c13:hover {
   text-decoration: none;
 }
 
@@ -4244,19 +4290,34 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
   padding-top: 0.25rem;
 }
 
-.c13 {
-  height: 0.6875rem;
-  width: 0.6875rem;
-  border-radius: 0.6875rem;
-}
-
-.c17 {
+.c18 {
   padding: 0rem;
 }
 
-.c14 {
-  width: 0.375rem;
-  height: 0.375rem;
+.c11 {
+  color: rgba(73,73,73,1);
+  font-weight: 700;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c11 + p,
+.c11 + small,
+.c11 + h1,
+.c11 + h2,
+.c11 + label,
+.c11 + h3,
+.c11 + h4,
+.c11 + h5,
+.c11 + div,
+.c11 + span {
+  padding-bottom: 2.25rem;
+}
+
+.c15 {
+  width: 0.75rem;
+  height: 0.75rem;
   border-radius: 50%;
   background-color: rgb(0,152,88);
   display: inline-block;
@@ -4337,7 +4398,7 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
   -webkit-padding-after: 0;
 }
 
-.c19 {
+.c20 {
   cursor: pointer;
   height: 100%;
   width: 100%;
@@ -4394,30 +4455,6 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c15 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  vertical-align: middle;
-  text-align: left;
-  border-bottom-width: 0;
-}
-
-.c15:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c15:not(:last-child) {
-  border-right-width: 0;
-}
-
 .c16 {
   border-width: 0.0625rem;
   border-style: solid;
@@ -4442,7 +4479,31 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c18 {
+.c17 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  width: 0rem;
+  display: none;
+  vertical-align: middle;
+  text-align: left;
+  border-bottom-width: 0;
+}
+
+.c17:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c17:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c19 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -4455,11 +4516,11 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
   border-left-width: 0.0625rem !important;
 }
 
-.c18:not(:first-child) {
+.c19:not(:first-child) {
   border-left-width: 0;
 }
 
-.c18:not(:last-child) {
+.c19:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -4479,15 +4540,20 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
+.c12 {
+  color: rgba(73,73,73,1);
+  text-decoration: none;
+}
+
 @media only screen and (min-width:47.9375rem) {
-  .c15 {
+  .c16 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
-  .c16 {
+  .c17 {
     width: 8.125rem;
     display: table-cell;
   }
@@ -4553,10 +4619,14 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
         name="td"
         selected={undefined}
       >
-        <a
-          className="c11 c12"
-          to="/instances/undefined"
-        />
+        <strong
+          className="c11"
+        >
+          <a
+            className="c12 c13 c14"
+            to="/instances/undefined"
+          />
+        </strong>
       </td>
       <td
         className="c4"
@@ -4566,17 +4636,16 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
       >
         <span>
           <span
-            className="c13 c14"
+            className="c15"
             color="green"
-            height="0.6875rem"
-            width="0.6875rem"
+            size="0.75rem"
           />
            
           Running
         </span>
       </td>
       <td
-        className="c15"
+        className="c16"
         disabled={undefined}
         name="td"
         selected={undefined}
@@ -4584,7 +4653,7 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
         almost NaN years
       </td>
       <td
-        className="c16"
+        className="c17"
         disabled={undefined}
         name="td"
         selected={undefined}
@@ -4594,14 +4663,14 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
         </code>
       </td>
       <td
-        className="c17 c18"
+        className="c18 c19"
         disabled={undefined}
         name="td"
         selected={undefined}
       >
         <div
           box={true}
-          className="c19"
+          className="c20"
           onClick={[Function]}
           onMouseEnter={undefined}
           onMouseLeave={undefined}
@@ -4633,7 +4702,7 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
 `;
 
 exports[`renders <Item mutating /> without throwing 1`] = `
-.c12 {
+.c14 {
   background-color: transparent;
   text-decoration-skip: objects;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
@@ -4702,12 +4771,12 @@ exports[`renders <Item mutating /> without throwing 1`] = `
   cursor: not-allowed;
 }
 
-.c11 {
+.c13 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c11:hover {
+.c13:hover {
   text-decoration: none;
 }
 
@@ -4720,18 +4789,18 @@ exports[`renders <Item mutating /> without throwing 1`] = `
   padding-top: 0.25rem;
 }
 
-.c19 {
+.c21 {
   padding: 0rem;
 }
 
-.c14 {
+.c16 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
   animation: iCqDak 1.5s ease-out 0s infinite;
 }
 
-.c15 {
+.c17 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -4740,7 +4809,7 @@ exports[`renders <Item mutating /> without throwing 1`] = `
   animation-delay: 0.5s;
 }
 
-.c16 {
+.c18 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -4749,7 +4818,7 @@ exports[`renders <Item mutating /> without throwing 1`] = `
   animation-delay: 1s;
 }
 
-.c13 {
+.c15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4777,6 +4846,27 @@ exports[`renders <Item mutating /> without throwing 1`] = `
   flex: 1 0 auto;
 }
 
+.c11 {
+  color: rgba(73,73,73,1);
+  font-weight: 700;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c11 + p,
+.c11 + small,
+.c11 + h1,
+.c11 + h2,
+.c11 + label,
+.c11 + h3,
+.c11 + h4,
+.c11 + h5,
+.c11 + div,
+.c11 + span {
+  padding-bottom: 2.25rem;
+}
+
 .c10 {
   color: rgb(100,100,100);
   position: absolute;
@@ -4891,7 +4981,7 @@ exports[`renders <Item mutating /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c17 {
+.c19 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -4907,39 +4997,39 @@ exports[`renders <Item mutating /> without throwing 1`] = `
   border-bottom-width: 0;
 }
 
-.c17:not(:first-child) {
+.c19:not(:first-child) {
   border-left-width: 0;
 }
 
-.c17:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c18 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  vertical-align: middle;
-  text-align: left;
-  border-bottom-width: 0;
-}
-
-.c18:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c18:not(:last-child) {
+.c19:not(:last-child) {
   border-right-width: 0;
 }
 
 .c20 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  width: 0rem;
+  display: none;
+  vertical-align: middle;
+  text-align: left;
+  border-bottom-width: 0;
+}
+
+.c20:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c20:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c22 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -4954,11 +5044,11 @@ exports[`renders <Item mutating /> without throwing 1`] = `
   border-left-width: 0.0625rem !important;
 }
 
-.c20:not(:first-child) {
+.c22:not(:first-child) {
   border-left-width: 0;
 }
 
-.c20:not(:last-child) {
+.c22:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -4978,15 +5068,20 @@ exports[`renders <Item mutating /> without throwing 1`] = `
   border-bottom-width: 0.0625rem;
 }
 
+.c12 {
+  color: rgba(73,73,73,1);
+  text-decoration: none;
+}
+
 @media only screen and (min-width:47.9375rem) {
-  .c17 {
+  .c19 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
-  .c18 {
+  .c20 {
     width: 8.125rem;
     display: table-cell;
   }
@@ -5052,10 +5147,14 @@ exports[`renders <Item mutating /> without throwing 1`] = `
         name="td"
         selected={undefined}
       >
-        <a
-          className="c11 c12"
-          to="/instances/undefined"
-        />
+        <strong
+          className="c11"
+        >
+          <a
+            className="c12 c13 c14"
+            to="/instances/undefined"
+          />
+        </strong>
       </td>
       <td
         className="c4"
@@ -5064,28 +5163,28 @@ exports[`renders <Item mutating /> without throwing 1`] = `
         selected={undefined}
       >
         <div
-          className="c13"
+          className="c15"
         >
           <svg
             height="10"
             width="28"
           >
             <rect
-              className="c14"
+              className="c16"
               height="6"
               width="6"
               x="2"
               y="2"
             />
             <rect
-              className="c15"
+              className="c17"
               height="6"
               width="6"
               x="11"
               y="2"
             />
             <rect
-              className="c16"
+              className="c18"
               height="6"
               width="6"
               x="20"
@@ -5095,7 +5194,7 @@ exports[`renders <Item mutating /> without throwing 1`] = `
         </div>
       </td>
       <td
-        className="c17"
+        className="c19"
         disabled={undefined}
         name="td"
         selected={undefined}
@@ -5103,7 +5202,7 @@ exports[`renders <Item mutating /> without throwing 1`] = `
         almost NaN years
       </td>
       <td
-        className="c18"
+        className="c20"
         disabled={undefined}
         name="td"
         selected={undefined}
@@ -5113,7 +5212,7 @@ exports[`renders <Item mutating /> without throwing 1`] = `
         </code>
       </td>
       <td
-        className="c19 c20"
+        className="c21 c22"
         disabled={undefined}
         name="td"
         selected={undefined}