test: update snapshots

packages/icons/src/__tests__/__snapshots__/icons.spec.js.snap

@@ -7463,37 +7463,37 @@ exports[`renders <Start /> without throwing 1`] = `
     }
   }
   version="1.1"
-  viewBox="0 0 15 15"
   width="15"
-  xmlns="http://www.w3.org/2000/svg"
   xmlnsXlink="http://www.w3.org/1999/xlink"
 >
   <g
     transform="translate(18292 -19563)"
   >
-    <g>
+    <mask
-      <mask
+      id="L"
-        id="L"
+    >
-      >
+      <rect
-        <path
+        fill="#fff"
-          d="M-1-1h15v15H-1z"
+        height={15}
-          fill="#464646"
+        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
-          transform="rotate(90 -18921 643)"
+        width={15}
-        />
+        x={-1}
-        <use
+        y={-1}
-          transform="rotate(90 -18921 643)"
+      />
-          xlinkHref="#M"
+      <use
-        />
+        fill="#000"
-      </mask>
+        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
-      <g
+        xlinkHref="#M"
-        mask="url(#L)"
+      />
-      >
+    </mask>
-        <use
+    <g
-          fill="#464646"
+      mask="url(#L"
-          transform="rotate(90 -18921 643)"
+    >
-          xlinkHref="#N"
+      <use
-        />
+        fill="#464646"
-      </g>
+        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+        xlinkHref="#N"
+      />
     </g>
   </g>
   <defs>
@@ -7519,37 +7519,37 @@ exports[`renders <Start direction /> without throwing 1`] = `
       }
     }
     version="1.1"
-    viewBox="0 0 15 15"
     width="15"
-    xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
   >
     <g
       transform="translate(18292 -19563)"
     >
-      <g>
+      <mask
-        <mask
+        id="L"
-          id="L"
+      >
-        >
+        <rect
-          <path
+          fill="#fff"
-            d="M-1-1h15v15H-1z"
+          height={15}
-            fill="#464646"
+          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
-            transform="rotate(90 -18921 643)"
+          width={15}
-          />
+          x={-1}
-          <use
+          y={-1}
-            transform="rotate(90 -18921 643)"
+        />
-            xlinkHref="#M"
+        <use
-          />
+          fill="#000"
-        </mask>
+          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
-        <g
+          xlinkHref="#M"
-          mask="url(#L)"
+        />
-        >
+      </mask>
-          <use
+      <g
-            fill="#464646"
+        mask="url(#L"
-            transform="rotate(90 -18921 643)"
+      >
-            xlinkHref="#N"
+        <use
-          />
+          fill="#464646"
-        </g>
+          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+          xlinkHref="#N"
+        />
       </g>
     </g>
     <defs>
@@ -7571,37 +7571,37 @@ exports[`renders <Start direction /> without throwing 1`] = `
       }
     }
     version="1.1"
-    viewBox="0 0 15 15"
     width="15"
-    xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
   >
     <g
       transform="translate(18292 -19563)"
     >
-      <g>
+      <mask
-        <mask
+        id="L"
-          id="L"
+      >
-        >
+        <rect
-          <path
+          fill="#fff"
-            d="M-1-1h15v15H-1z"
+          height={15}
-            fill="#464646"
+          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
-            transform="rotate(90 -18921 643)"
+          width={15}
-          />
+          x={-1}
-          <use
+          y={-1}
-            transform="rotate(90 -18921 643)"
+        />
-            xlinkHref="#M"
+        <use
-          />
+          fill="#000"
-        </mask>
+          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
-        <g
+          xlinkHref="#M"
-          mask="url(#L)"
+        />
-        >
+      </mask>
-          <use
+      <g
-            fill="#464646"
+        mask="url(#L"
-            transform="rotate(90 -18921 643)"
+      >
-            xlinkHref="#N"
+        <use
-          />
+          fill="#464646"
-        </g>
+          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+          xlinkHref="#N"
+        />
       </g>
     </g>
     <defs>
@@ -7623,37 +7623,37 @@ exports[`renders <Start direction /> without throwing 1`] = `
       }
     }
     version="1.1"
-    viewBox="0 0 15 15"
     width="15"
-    xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
   >
     <g
       transform="translate(18292 -19563)"
     >
-      <g>
+      <mask
-        <mask
+        id="L"
-          id="L"
+      >
-        >
+        <rect
-          <path
+          fill="#fff"
-            d="M-1-1h15v15H-1z"
+          height={15}
-            fill="#464646"
+          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
-            transform="rotate(90 -18921 643)"
+          width={15}
-          />
+          x={-1}
-          <use
+          y={-1}
-            transform="rotate(90 -18921 643)"
+        />
-            xlinkHref="#M"
+        <use
-          />
+          fill="#000"
-        </mask>
+          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
-        <g
+          xlinkHref="#M"
-          mask="url(#L)"
+        />
-        >
+      </mask>
-          <use
+      <g
-            fill="#464646"
+        mask="url(#L"
-            transform="rotate(90 -18921 643)"
+      >
-            xlinkHref="#N"
+        <use
-          />
+          fill="#464646"
-        </g>
+          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+          xlinkHref="#N"
+        />
       </g>
     </g>
     <defs>
@@ -7675,37 +7675,37 @@ exports[`renders <Start direction /> without throwing 1`] = `
       }
     }
     version="1.1"
-    viewBox="0 0 15 15"
     width="15"
-    xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
   >
     <g
       transform="translate(18292 -19563)"
     >
-      <g>
+      <mask
-        <mask
+        id="L"
-          id="L"
+      >
-        >
+        <rect
-          <path
+          fill="#fff"
-            d="M-1-1h15v15H-1z"
+          height={15}
-            fill="#464646"
+          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
-            transform="rotate(90 -18921 643)"
+          width={15}
-          />
+          x={-1}
-          <use
+          y={-1}
-            transform="rotate(90 -18921 643)"
+        />
-            xlinkHref="#M"
+        <use
-          />
+          fill="#000"
-        </mask>
+          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
-        <g
+          xlinkHref="#M"
-          mask="url(#L)"
+        />
-        >
+      </mask>
-          <use
+      <g
-            fill="#464646"
+        mask="url(#L"
-            transform="rotate(90 -18921 643)"
+      >
-            xlinkHref="#N"
+        <use
-          />
+          fill="#464646"
-        </g>
+          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+          xlinkHref="#N"
+        />
       </g>
     </g>
     <defs>
@@ -7731,37 +7731,37 @@ exports[`renders <Start disabled /> without throwing 1`] = `
     }
   }
   version="1.1"
-  viewBox="0 0 15 15"
   width="15"
-  xmlns="http://www.w3.org/2000/svg"
   xmlnsXlink="http://www.w3.org/1999/xlink"
 >
   <g
     transform="translate(18292 -19563)"
   >
-    <g>
+    <mask
-      <mask
+      id="L"
-        id="L"
+    >
-      >
+      <rect
-        <path
+        fill="#fff"
-          d="M-1-1h15v15H-1z"
+        height={15}
-          fill={true}
+        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
-          transform="rotate(90 -18921 643)"
+        width={15}
-        />
+        x={-1}
-        <use
+        y={-1}
-          transform="rotate(90 -18921 643)"
+      />
-          xlinkHref="#M"
+      <use
-        />
+        fill="#000"
-      </mask>
+        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
-      <g
+        xlinkHref="#M"
-        mask="url(#L)"
+      />
-      >
+    </mask>
-        <use
+    <g
-          fill={true}
+      mask="url(#L"
-          transform="rotate(90 -18921 643)"
+    >
-          xlinkHref="#N"
+      <use
-        />
+        fill={true}
-      </g>
+        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+        xlinkHref="#N"
+      />
     </g>
   </g>
   <defs>
@@ -7786,37 +7786,37 @@ exports[`renders <Start light /> without throwing 1`] = `
     }
   }
   version="1.1"
-  viewBox="0 0 15 15"
   width="15"
-  xmlns="http://www.w3.org/2000/svg"
   xmlnsXlink="http://www.w3.org/1999/xlink"
 >
   <g
     transform="translate(18292 -19563)"
   >
-    <g>
+    <mask
-      <mask
+      id="L"
-        id="L"
+    >
-      >
+      <rect
-        <path
+        fill="#fff"
-          d="M-1-1h15v15H-1z"
+        height={15}
-          fill="#FFF"
+        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
-          transform="rotate(90 -18921 643)"
+        width={15}
-        />
+        x={-1}
-        <use
+        y={-1}
-          transform="rotate(90 -18921 643)"
+      />
-          xlinkHref="#M"
+      <use
-        />
+        fill="#000"
-      </mask>
+        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
-      <g
+        xlinkHref="#M"
-        mask="url(#L)"
+      />
-      >
+    </mask>
-        <use
+    <g
-          fill="#FFF"
+      mask="url(#L"
-          transform="rotate(90 -18921 643)"
+    >
-          xlinkHref="#N"
+      <use
-        />
+        fill="#FFF"
-      </g>
+        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+        xlinkHref="#N"
+      />
     </g>
   </g>
   <defs>

packages/icons/src/fabric.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import rndId from 'rnd-id';
 
 import Colors from './colors';
 import Rotate from './rotate';

packages/icons/src/name.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import rndId from 'rnd-id';
 
 import Colors from './colors';
 import Rotate from './rotate';

packages/icons/src/randomize.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import rndId from 'rnd-id';
 
 import Colors from './colors';
 import Rotate from './rotate';

packages/icons/src/start.js

@@ -67,6 +67,3 @@ export default ({
     )}
   </Colors>
 );
-
-
-;

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

@@ -366,7 +366,6 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1499,7 +1498,6 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2404,7 +2402,6 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3446,7 +3443,6 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4397,7 +4393,6 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4820,15 +4815,14 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
       disabled={false}
       name="card-header-meta"
     >
-      <span
+      <div
         className="c3"
       >
-        <b>
+        <span>
           undefined: 
-        </b>
+        </span>
-        ,
         <span />
-      </span>
+      </div>
     </div>
   </div>
   <div
@@ -5399,7 +5393,6 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   cursor: not-allowed;
   pointer-events: none;
   color: rgb(216,216,216);
@@ -6331,7 +6324,6 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   cursor: not-allowed;
   pointer-events: none;
   color: rgb(216,216,216);
@@ -7455,7 +7447,6 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;

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

@@ -320,7 +320,6 @@ exports[`renders <AddForm /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1340,7 +1339,6 @@ exports[`renders <EditForm /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1865,15 +1863,14 @@ exports[`renders <EditForm /> without throwing 1`] = `
         disabled={false}
         name="card-header-meta"
       >
-        <span
+        <div
           className="c3"
         >
-          <b>
+          <span>
             undefined: 
-          </b>
+          </span>
-          ,
           <span />
-        </span>
+        </div>
       </div>
     </div>
     <div

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

@@ -849,7 +849,7 @@ exports[`renders <Item /> without throwing 1`] = `
     name="td"
     selected={undefined}
   >
-    Invalid date
+    almost NaN years
   </td>
   <td
     className="c12"
@@ -857,7 +857,7 @@ exports[`renders <Item /> without throwing 1`] = `
     name="td"
     selected={undefined}
   >
-    Invalid date
+    almost NaN years
   </td>
   <td
     className="c13 c14"
@@ -1268,7 +1268,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
     name="td"
     selected={undefined}
   >
-    Invalid date
+    28 days
   </td>
   <td
     className="c12"
@@ -1276,7 +1276,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
     name="td"
     selected={undefined}
   >
-    Invalid date
+    28 days
   </td>
   <td
     className="c13 c14"

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

@@ -264,7 +264,6 @@ exports[`renders <AddForm /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1249,7 +1248,6 @@ exports[`renders <EditForm /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1803,15 +1801,14 @@ exports[`renders <EditForm /> without throwing 1`] = `
         disabled={false}
         name="card-header-meta"
       >
-        <span
+        <div
           className="c3"
         >
-          <b>
+          <span>
             undefined: 
-          </b>
+          </span>
-          ,
           <span />
-        </span>
+        </div>
       </div>
     </div>
     <div
@@ -1977,7 +1974,7 @@ exports[`renders <Tag /> without throwing 1`] = `
 .c1 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
-  border-radius: 0.125rem;
+  border-radius: 0.1875rem;
   font-size: 0.8125rem;
   padding: 0.375rem 0.75rem;
   display: -webkit-box;
@@ -2034,7 +2031,7 @@ exports[`renders <Tag name value/> without throwing 1`] = `
 .c1 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
-  border-radius: 0.125rem;
+  border-radius: 0.1875rem;
   font-size: 0.8125rem;
   padding: 0.375rem 0.75rem;
   display: -webkit-box;

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

@@ -75,9 +75,6 @@ exports[`renders <Toolbar /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -441,9 +438,6 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -812,9 +806,6 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
   color: rgb(216,216,216);
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1195,9 +1186,6 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1561,9 +1549,6 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1927,9 +1912,6 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2298,9 +2280,6 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
   color: rgb(216,216,216);
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;

packages/my-joy-beta/src/components/instances/__tests__/snapshots.spec.js

@@ -34,7 +34,6 @@ it('renders <Item mutating /> without throwing', () => {
   ).toMatchSnapshot();
 });
 
-
 it('renders <Item {...item} /> without throwing', () => {
   const item = {
     updated: '12/09/2017',

packages/my-joy-beta/src/components/instances/list.js

@@ -2,7 +2,6 @@ import React from 'react';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import remcalc from 'remcalc';
 import titleCase from 'title-case';
-import { withTheme } from 'styled-components';
 import { Link } from 'react-router-dom';
 import { Field } from 'redux-form';
 

packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap

@@ -79,9 +79,6 @@ exports[`renders <Metadata /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -488,6 +485,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
     >
       0
        key:value pair
+      s
     </h3>
   </div>
 </div>
@@ -577,9 +575,6 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -849,7 +844,6 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1906,6 +1900,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
     >
       0
        key:value pair
+      s
     </h3>
   </div>
 </div>
@@ -2010,9 +2005,6 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2511,6 +2503,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
     >
       0
        key:value pair
+      s
     </h3>
   </div>
 </div>
@@ -2678,9 +2671,6 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
   color: rgb(216,216,216);
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3243,9 +3233,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3515,7 +3502,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3642,7 +3628,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   cursor: not-allowed;
   pointer-events: none;
   color: rgb(216,216,216);
@@ -4547,6 +4532,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
     >
       3
        key:value pair
+      s
     </h3>
   </div>
   <form
@@ -4568,15 +4554,14 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
           disabled={false}
           name="card-header-meta"
         >
-          <span
+          <div
             className="c20"
           >
-            <b>
+            <span>
               undefined: 
-            </b>
+            </span>
-            ,
             <span />
-          </span>
+          </div>
         </div>
       </div>
       <div
@@ -4759,15 +4744,14 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
           disabled={false}
           name="card-header-meta"
         >
-          <span
+          <div
             className="c20"
           >
-            <b>
+            <span>
               undefined: 
-            </b>
+            </span>
-            ,
             <span />
-          </span>
+          </div>
         </div>
       </div>
       <div
@@ -4950,15 +4934,14 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
           disabled={false}
           name="card-header-meta"
         >
-          <span
+          <div
             className="c20"
           >
-            <b>
+            <span>
               undefined: 
-            </b>
+            </span>
-            ,
             <span />
-          </span>
+          </div>
         </div>
       </div>
       <div

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

@@ -79,9 +79,6 @@ exports[`renders <Tags /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -500,7 +497,8 @@ exports[`renders <Tags /> without throwing 1`] = `
       className="c16"
     >
       0
-       tags
+       tag
+      s
     </h3>
   </div>
   <ul
@@ -593,9 +591,6 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -865,7 +860,6 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1908,7 +1902,8 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
       className="c34"
     >
       0
-       tags
+       tag
+      s
     </h3>
   </div>
   <ul
@@ -1917,6 +1912,513 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 </div>
 `;
 
+exports[`renders <Tags editable /> without throwing 1`] = `
+.c15 {
+  margin-bottom: 2rem;
+}
+
+.c10 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+}
+
+.c10::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
+.c10[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c10:-moz-focusring,
+.c10[type='button']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
+.c10[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c10 + button {
+  margin-left: 0.375rem;
+}
+
+.c9 {
+  display: inline-block;
+}
+
+.c8 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  max-width: 100%;
+}
+
+.c8:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c8:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c8[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c8 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c8 svg {
+  max-height: 1.125rem;
+}
+
+.c12 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c2 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c6 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c0 {
+  margin-right: auto;
+  margin-left: auto;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 62.5rem;
+  padding-bottom: 1.125rem;
+}
+
+.c16 {
+  color: rgba(73,73,73,1);
+  line-height: 1.625rem;
+  font-size: 1.3125rem;
+  margin: 0;
+}
+
+.c16 + p,
+.c16 + small,
+.c16 + h1,
+.c16 + h2,
+.c16 + label,
+.c16 + h3,
+.c16 + h4,
+.c16 + h5,
+.c16 + div,
+.c16 + span {
+  margin-top: 1.5rem;
+}
+
+.c11 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  background-color: transparent;
+  height: 0.6875rem;
+}
+
+.c13 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
+.c14 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  background-color: transparent;
+  height: 1.5rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+}
+
+.c3 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+  width: 100%;
+}
+
+.c7 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+  float: right;
+}
+
+.c5 {
+  box-sizing: border-box;
+  width: 100%;
+  height: 3rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  max-width: 100%;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c5::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c5::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c5:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c5:invalid {
+  box-shadow: none;
+}
+
+.c5:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c5:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c5:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c5:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c5:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c4 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c17 {
+  margin: 0;
+  padding: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  list-style: none;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+@media only screen and (min-width:0em) {
+  .c2 {
+    -webkit-flex-basis: 58.333333333333336%;
+    -ms-flex-preferred-size: 58.333333333333336%;
+    flex-basis: 58.333333333333336%;
+    max-width: 58.333333333333336%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c2 {
+    -webkit-flex-basis: 41.66666666666667%;
+    -ms-flex-preferred-size: 41.66666666666667%;
+    flex-basis: 41.66666666666667%;
+    max-width: 41.66666666666667%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c6 {
+    -webkit-flex-basis: 41.66666666666667%;
+    -ms-flex-preferred-size: 41.66666666666667%;
+    flex-basis: 41.66666666666667%;
+    max-width: 41.66666666666667%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c6 {
+    -webkit-flex-basis: 58.333333333333336%;
+    -ms-flex-preferred-size: 58.333333333333336%;
+    flex-basis: 58.333333333333336%;
+    max-width: 58.333333333333336%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c0 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c0 {
+    width: 61rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c0 {
+    width: 76rem;
+  }
+}
+
+@media only screen and (max-width:47.9375rem) {
+  .c0 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+}
+
+<div
+  className="c0"
+>
+  <form
+    onSubmit={undefined}
+  >
+    <div
+      className="c1"
+    >
+      <div
+        className="c2"
+      >
+        <div
+          className="c3"
+          name="filter"
+          role="group"
+          style={undefined}
+        >
+          <label
+            className="c4"
+            htmlFor="br"
+          >
+            Filter
+          </label>
+          <input
+            className="c5"
+            disabled={false}
+            id="br"
+            placeholder=""
+          />
+        </div>
+      </div>
+      <div
+        className="c6"
+      >
+        <div
+          className="c7"
+          role="group"
+          style={undefined}
+        >
+          <label
+            className="c4"
+            htmlFor="bt"
+          >
+            ⁣
+          </label>
+          <button
+            className="c8 c9 c10"
+            disabled={false}
+            href=""
+            icon={true}
+            onClick={[Function]}
+            type="button"
+          >
+            Add tag
+          </button>
+        </div>
+      </div>
+    </div>
+  </form>
+  <div
+    className="c11 c12"
+    height="0.6875rem"
+  />
+  <div
+    className="c13 c12"
+    height="0.0625rem"
+  />
+  <div
+    className="c14 c12"
+    height="1.5rem"
+  />
+  <div
+    className="c15"
+  >
+    <h3
+      className="c16"
+    >
+      0
+       tag
+      s
+    </h3>
+  </div>
+  <ul
+    className="c17"
+  />
+</div>
+`;
+
 exports[`renders <Tags editing /> without throwing 1`] = `
 .c33 {
   margin-bottom: 2rem;
@@ -2005,9 +2507,6 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   color: rgb(216,216,216);
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2294,7 +2793,6 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3165,15 +3663,16 @@ exports[`renders <Tags editing /> without throwing 1`] = `
           disabled={false}
           name="card-header-meta"
         >
-          <span
+          <div
             className="c18"
           >
-            <b>
+            <span>
-              undefined: 
+              name1: 
-            </b>
+            </span>
-            ,
+            <span>
-            <span />
+              value1
-          </span>
+            </span>
+          </div>
         </div>
       </div>
       <div
@@ -3335,7 +3834,8 @@ exports[`renders <Tags editing /> without throwing 1`] = `
       className="c34"
     >
       0
-       tags
+       tag
+      s
     </h3>
   </div>
   <ul
@@ -3485,9 +3985,6 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   color: rgb(216,216,216);
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3774,7 +4271,6 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   cursor: not-allowed;
   pointer-events: none;
   color: rgb(216,216,216);
@@ -4596,14 +5092,14 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
         >
           <label
             className="c4"
-            htmlFor="br"
+            htmlFor="bu"
           >
             Filter
           </label>
           <input
             className="c5"
             disabled={false}
-            id="br"
+            id="bu"
             placeholder=""
           />
         </div>
@@ -4618,7 +5114,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
         >
           <label
             className="c4"
-            htmlFor="bt"
+            htmlFor="bw"
           >
             ⁣
           </label>
@@ -4667,15 +5163,16 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
           disabled={false}
           name="card-header-meta"
         >
-          <span
+          <div
             className="c18"
           >
-            <b>
+            <span>
-              undefined: 
+              name1: 
-            </b>
+            </span>
-            ,
+            <span>
-            <span />
+              value1
-          </span>
+            </span>
+          </div>
         </div>
       </div>
       <div
@@ -4699,7 +5196,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
               >
                 <label
                   className="c4"
-                  htmlFor="bu"
+                  htmlFor="bx"
                 >
                   Tag
                    key
@@ -4707,7 +5204,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                 <input
                   className="c23"
                   disabled={false}
-                  id="bu"
+                  id="bx"
                 />
                 <label
                   className="c24"
@@ -4728,7 +5225,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
               >
                 <label
                   className="c4"
-                  htmlFor="bv"
+                  htmlFor="by"
                 >
                   Tag
                    value
@@ -4736,7 +5233,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                 <input
                   className="c23"
                   disabled={false}
-                  id="bv"
+                  id="by"
                 />
                 <label
                   className="c24"
@@ -4831,7 +5328,8 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
       className="c38"
     >
       0
-       tags
+       tag
+      s
     </h3>
   </div>
   <ul
@@ -4919,9 +5417,6 @@ exports[`renders <Tags error /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -5340,7 +5835,8 @@ exports[`renders <Tags error /> without throwing 1`] = `
       className="c16"
     >
       0
-       tags
+       tag
+      s
     </h3>
   </div>
   <ul
@@ -5511,9 +6007,6 @@ exports[`renders <Tags loading /> without throwing 1`] = `
   color: rgb(216,216,216);
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -6024,9 +6517,6 @@ exports[`renders <Tags tags /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -6291,7 +6781,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
 .c19 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
-  border-radius: 0.125rem;
+  border-radius: 0.1875rem;
   font-size: 0.8125rem;
   padding: 0.375rem 0.75rem;
   display: -webkit-box;
@@ -6306,7 +6796,6 @@ exports[`renders <Tags tags /> without throwing 1`] = `
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
-  cursor: pointer;
 }
 
 .c17 {
@@ -6422,14 +6911,14 @@ exports[`renders <Tags tags /> without throwing 1`] = `
         >
           <label
             className="c4"
-            htmlFor="bw"
+            htmlFor="bz"
           >
             Filter
           </label>
           <input
             className="c5"
             disabled={false}
-            id="bw"
+            id="bz"
             placeholder=""
           />
         </div>
@@ -6444,7 +6933,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
         >
           <label
             className="c4"
-            htmlFor="by"
+            htmlFor="bB"
           >
             ⁣
           </label>
@@ -6481,7 +6970,8 @@ exports[`renders <Tags tags /> without throwing 1`] = `
       className="c16"
     >
       3
-       tags
+       tag
+      s
     </h3>
   </div>
   <ul
@@ -6492,7 +6982,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
     >
       <li
         className="c19"
-        onClick={[Function]}
+        onClick={undefined}
       >
         <div
           className="c20"
@@ -6508,7 +6998,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
     >
       <li
         className="c19"
-        onClick={[Function]}
+        onClick={undefined}
       >
         <div
           className="c20"
@@ -6524,7 +7014,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
     >
       <li
         className="c19"
-        onClick={[Function]}
+        onClick={undefined}
       >
         <div
           className="c20"

packages/my-joy-beta/src/containers/instances/__tests__/tags.spec.js

@@ -72,6 +72,18 @@ it('renders <Tags editing /> without throwing', () => {
   ).toMatchSnapshot();
 });
 
+it('renders <Tags editable /> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Tags editable />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
 it('renders <Tags editing.removing /> without throwing', () => {
   const editing = {
     name: 'name1',

packages/my-joy-beta/src/containers/instances/metadata.js

@@ -70,7 +70,9 @@ export const Metadata = ({
 
   const _count = !_loading ? (
     <Margin bottom={4} top={addOpen && 4}>
-      <H3>{metadata.length} key:value pair{metadata.length === 1 ? '' : 's'}</H3>
+      <H3>
+        {metadata.length} key:value pair{metadata.length === 1 ? '' : 's'}
+      </H3>
     </Margin>
   ) : null;
 
@@ -87,6 +89,8 @@ export const Metadata = ({
         {props => (
           <MetadataEditForm
             {...props}
+            /* yeah, we need this here too */
+            initialValues={initialValues}
             onToggleExpanded={() => handleUpdateExpanded(form, !expanded)}
             onCancel={() => handleCancel(form)}
             onRemove={() => handleRemove(form)}

packages/my-joy-beta/src/containers/instances/snapshots.js

@@ -297,8 +297,8 @@ export default compose(
 
           if (err) {
             return dispatch(
-              stopSubmit(form, {
+              stopSubmit(TABLE_FORM_NAME, {
-                _error: parseError(error)
+                _error: parseError(err)
               })
             );
           }

packages/my-joy-beta/src/containers/instances/tags.js

@@ -70,7 +70,9 @@ export const Tags = ({
 
   const _count = !_loading ? (
     <Margin bottom={4} top={addOpen && 4}>
-      <H3>{tags.length} tag{tags.length === 1 ? '' : 's'}</H3>
+      <H3>
+        {tags.length} tag{tags.length === 1 ? '' : 's'}
+      </H3>
     </Margin>
   ) : null;
 

packages/ui-toolkit/src/anchor/__tests___/anchor.spec.js

@@ -3,8 +3,8 @@ import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
 import Anchor from '../';
-import { Theme } from '../../mocks'
+import { Theme } from '../../mocks';
-import theme from '../../theme'
+import theme from '../../theme';
 
 describe('Anchor', () => {
   test('Default Anchor', () => {

packages/ui-toolkit/src/base/global.js

@@ -10,7 +10,9 @@ export default ({ theme }) => css`
 
   html, body {
     font-display: optional;
-    font-family: ${theme.font.family}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
+    font-family: ${
+      theme.font.family
+    }, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
     font-weight: ${theme.font.weight.normal};
   }
 

packages/ui-toolkit/src/breadcrumb/__tests__/index.spec.js

@@ -2,9 +2,8 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
-import Anchor from '../';
 import Breadcrumb, { Item } from '../';
-import { Theme } from '../../mocks'
+import { Theme } from '../../mocks';
 
 describe('Breadcrumb', () => {
   test('Default Breadcrumb', () => {

packages/ui-toolkit/src/button/__tests___/__snapshots__/button.spec.js.snap

@@ -277,7 +277,6 @@ exports[`Button Error Button 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
 }
 
 .c0:focus {

packages/ui-toolkit/src/button/__tests___/button.spec.js

@@ -3,8 +3,8 @@ import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
 import Button from '../';
-import { Theme } from '../../mocks'
+import { Theme } from '../../mocks';
-import theme from '../../theme'
+import theme from '../../theme';
 
 describe('Button', () => {
   test('Default Button', () => {

packages/ui-toolkit/src/card/__tests___/card.spec.js

@@ -3,8 +3,8 @@ import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
 import Card, { Header } from '../';
-import { Theme } from '../../mocks'
+import { Theme } from '../../mocks';
-import theme from '../../theme'
+import theme from '../../theme';
 
 describe('Card', () => {
   test('Default Card', () => {

packages/ui-toolkit/src/divider/__tests___/divider.spec.js

@@ -3,8 +3,8 @@ import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
 import Divider from '../';
-import { Theme } from '../../mocks'
+import { Theme } from '../../mocks';
-import theme from '../../theme'
+import theme from '../../theme';
 
 describe('Divider', () => {
   test('Default Divider', () => {

packages/ui-toolkit/src/footer/__tests__/footer.spec.js

@@ -4,8 +4,8 @@ import 'jest-styled-components';
 import remcalc from 'remcalc';
 
 import Footer from '../';
-import { Theme } from '../../mocks'
+import { Theme } from '../../mocks';
-import theme from '../../theme'
+import theme from '../../theme';
 
 describe('Footer', () => {
   test('Footer', () => {

packages/ui-toolkit/src/form/__tests__/form.spec.js

@@ -2,8 +2,8 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
-import { Theme } from '../../mocks'
+import { Theme } from '../../mocks';
-import theme from '../../theme'
+import theme from '../../theme';
 
 import {
   Checkbox,

packages/ui-toolkit/src/icons/functional.md

@@ -277,4 +277,3 @@ const {
   </ListItem>
 </List>;
 ```
-

packages/ui-toolkit/src/label/__test__/label.spec.js

@@ -4,8 +4,8 @@ import 'jest-styled-components';
 import remcalc from 'remcalc';
 
 import Label from '../';
-import { Theme } from '../../mocks'
+import { Theme } from '../../mocks';
-import theme from '../../theme'
+import theme from '../../theme';
 
 describe('label', () => {
   test('label', () => {

packages/ui-toolkit/src/layout/__tests__/layout.spec.js

@@ -4,8 +4,7 @@ import 'jest-styled-components';
 import remcalc from 'remcalc';
 
 import { PageContainer, ViewContainer } from '../';
-import { Theme } from '../../mocks'
+import { Theme } from '../../mocks';
-import theme from '../../theme'
 
 describe('Layout', () => {
   test('PageContainer', () => {
@@ -31,7 +30,7 @@ describe('Layout', () => {
         </Theme>
       )
       .toJSON();
-      
+
     expect(tree).toMatchSnapshot();
     expect(tree).toHaveStyleRule('max-width', remcalc(1000));
   });

packages/ui-toolkit/src/message/Readme.md

@@ -11,7 +11,7 @@ const { Message, Title, Description } = require('.');
     sure that you choose the data center that suits your requirements. Learn
     more
   </Description>
-</Message>
+</Message>;
 ```
 
 #### Error

packages/ui-toolkit/src/message/__tests__/message.spec.js

@@ -3,8 +3,7 @@ import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
 import { Message, Title, Description } from '../';
-import { Theme } from '../../mocks'
+import { Theme } from '../../mocks';
-import theme from '../../theme'
 
 describe('Message', () => {
   test('Message', () => {

packages/ui-toolkit/src/mocks/index.js

@@ -1 +1 @@
-export { default as Theme } from './theme';
+export { default as Theme } from './theme';

packages/ui-toolkit/src/popover/Readme.md

@@ -3,7 +3,7 @@ const React = require('react');
 const { default: Popover, Container, Target, Item, Divider } = require('./');
 const { Row, Col } = require('react-styled-flexboxgrid');
 
-<Row center="xs" between="xs" style={{marginTop: 80}}>
+<Row center="xs" between="xs" style={{ marginTop: 80 }}>
   <Col xs={2}>
     <Container>
       <Target>Hello</Target>

packages/ui-toolkit/src/popover/__tests__/popover.spec.js

@@ -4,8 +4,8 @@ import 'jest-styled-components';
 import remcalc from 'remcalc';
 
 import Popover, { Container, Target, Item, Divider } from '../';
-import { Theme } from '../../mocks'
+import { Theme } from '../../mocks';
-import theme from '../../theme'
+import theme from '../../theme';
 
 describe('Popover', () => {
   test('Popover', () => {

packages/ui-toolkit/src/section-list/__tests__/section.spec.js

@@ -4,8 +4,8 @@ import 'jest-styled-components';
 import remcalc from 'remcalc';
 
 import SectionList, { Item, Anchor } from '../';
-import { Theme } from '../../mocks'
+import { Theme } from '../../mocks';
-import theme from '../../theme'
+import theme from '../../theme';
 
 describe('SectionList', () => {
   test('SectionList', () => {

packages/ui-toolkit/src/status-loader/__tests__/loading.spec.js

@@ -3,7 +3,7 @@ import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
 import StatusLoader from '../';
-import { Theme } from '../../mocks'
+import { Theme } from '../../mocks';
 
 describe('StatusLoader', () => {
   test('StatusLoader', () => {

packages/ui-toolkit/src/table/__tests__/table.spec.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import 'jest-styled-components';
-import remcalc from 'remcalc';
 
 import Table, { Thead, Tfoot, Tr, Th, Tbody, Td } from '../';
-import { Theme } from '../../mocks'
+import { Theme } from '../../mocks';
-import theme from '../../theme'
+import theme from '../../theme';
 
 describe('Table', () => {
   test('Table', () => {

packages/ui-toolkit/src/text/__tests__/text.spec.js

@@ -4,8 +4,8 @@ import 'jest-styled-components';
 import remcalc from 'remcalc';
 
 import { P, H1, H2, H3, H4, H5, H6, Small } from '../';
-import { Theme } from '../../mocks'
+import { Theme } from '../../mocks';
-import theme from '../../theme'
+import theme from '../../theme';
 
 describe('Button', () => {
   test('Paragraph', () => {

packages/ui-toolkit/src/theme/colors.js

@@ -129,10 +129,9 @@ export default () => [
   </Margin>,
   <H3>Greys</H3>,
   <P>
-    Greys give Triton a sense of depth and offer
+    Greys give Triton a sense of depth and offer contrast between potentially
-    contrast between potentially similar components. They allow us to make
+    similar components. They allow us to make certain components look clickable,
-    certain components look clickable, whilst making others appear disabled or
+    whilst making others appear disabled or static.
-    static.
   </P>,
   <Margin top={4}>
     <Color

packages/ui-toolkit/src/theme/index.js

@@ -87,8 +87,9 @@ export const font = {
   textMuted: base.secondary,
   family: '"Libre Franklin"',
   href: () =>
-    `${document.location.protocol}//${document.location
+    `${document.location.protocol}//${
-      .host}/fonts/css?family=Libre+Franklin:400,500,600`,
+      document.location.host
+    }/fonts/css?family=Libre+Franklin:400,500,600`,
   weight: {
     semibold: 600,
     medium: 500,

packages/ui-toolkit/src/tooltip/Readme.md

@@ -3,7 +3,7 @@ const React = require('react');
 const { default: Tooltip, Container, Target } = require('./');
 const { Row, Col } = require('react-styled-flexboxgrid');
 
-<Row center="xs" between="xs" style={{marginTop: 60}}>
+<Row center="xs" between="xs" style={{ marginTop: 60 }}>
   <Col xs={2}>
     <Container>
       <Target>Hello</Target>

packages/ui-toolkit/src/tooltip/__tests__/tooltip.spec.js

@@ -3,7 +3,7 @@ import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
 import Tooltip, { Container, Target } from '../';
-import { Theme } from '../../mocks'
+import { Theme } from '../../mocks';
 
 describe('Tooltip', () => {
   test('Tooltip', () => {