test: update snapshots

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

@@ -141,12 +141,38 @@ exports[`renders <InstanceList /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -539,8 +565,6 @@ exports[`renders <InstanceList /> without throwing 1`] = `
           </span>
           <svg
             height="6"
-            marginBottom="0.125rem"
-            marginLeft="0.5625rem"
             style={
               Object {
                 "transform": "rotate(180deg)",
@@ -835,12 +859,38 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -1233,8 +1283,6 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
           </span>
           <svg
             height="6"
-            marginBottom="0.125rem"
-            marginLeft="0.5625rem"
             style={
               Object {
                 "transform": "rotate(180deg)",
@@ -1529,12 +1577,38 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -1938,8 +2012,6 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
           </span>
           <svg
             height="6"
-            marginBottom="0.125rem"
-            marginLeft="0.5625rem"
             style={
               Object {
                 "transform": "rotate(180deg)",
@@ -2223,12 +2295,38 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -2632,8 +2730,6 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
           </span>
           <svg
             height="6"
-            marginBottom="0.125rem"
-            marginLeft="0.5625rem"
             style={
               Object {
                 "transform": "rotate(0deg)",
@@ -2917,12 +3013,38 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -3315,8 +3437,6 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
           </span>
           <svg
             height="6"
-            marginBottom="0.125rem"
-            marginLeft="0.5625rem"
             style={
               Object {
                 "transform": "rotate(180deg)",
@@ -3611,12 +3731,38 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -4009,8 +4155,6 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
           </span>
           <svg
             height="6"
-            marginBottom="0.125rem"
-            marginLeft="0.5625rem"
             style={
               Object {
                 "transform": "rotate(180deg)",
@@ -4355,12 +4499,38 @@ exports[`renders <Item /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -4857,12 +5027,38 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -5361,12 +5557,38 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -5852,12 +6074,38 @@ exports[`renders <Item mutating /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;

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

@@ -572,9 +572,9 @@ exports[`renders <AddForm /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
+  border-top: 0;
-  border-left: 0px;
+  border-left: 0;
-  border-right: 0px;
+  border-right: 0;
 }
 
 .c8 {
@@ -1629,9 +1629,9 @@ exports[`renders <EditForm /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
+  border-top: 0;
-  border-left: 0px;
+  border-left: 0;
-  border-right: 0px;
+  border-right: 0;
 }
 
 .c8 {

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

@@ -122,12 +122,38 @@ Array [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -408,8 +434,6 @@ Array [
                 </span>
                 <svg
                     height="6"
-                    marginBottom="0.125rem"
-                    marginLeft="0.5625rem"
                     style={
                         Object {
                             "transform": "rotate(180deg)",
@@ -937,12 +961,38 @@ exports[`renders <Item /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c3 label {
   font-weight: 400;
 }
 
+.c3 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c3 div[type='checkbox'],
+.c3 div[type='checkbox'] input,
+.c3 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c2 {
   display: inline-block;
   padding: 0;
@@ -1306,12 +1356,38 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c3 label {
   font-weight: 400;
 }
 
+.c3 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c3 div[type='checkbox'],
+.c3 div[type='checkbox'] input,
+.c3 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c2 {
   display: inline-block;
   padding: 0;
@@ -1876,12 +1952,38 @@ Array [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -2162,8 +2264,6 @@ Array [
                 </span>
                 <svg
                     height="6"
-                    marginBottom="0.125rem"
-                    marginLeft="0.5625rem"
                     style={
                         Object {
                             "transform": "rotate(180deg)",
@@ -2665,12 +2765,38 @@ Array [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -2951,8 +3077,6 @@ Array [
                 </span>
                 <svg
                     height="6"
-                    marginBottom="0.125rem"
-                    marginLeft="0.5625rem"
                     style={
                         Object {
                             "transform": "rotate(180deg)",
@@ -3454,12 +3578,38 @@ Array [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -3751,8 +3901,6 @@ Array [
                 </span>
                 <svg
                     height="6"
-                    marginBottom="0.125rem"
-                    marginLeft="0.5625rem"
                     style={
                         Object {
                             "transform": "rotate(180deg)",
@@ -4243,12 +4391,38 @@ Array [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -4540,8 +4714,6 @@ Array [
                 </span>
                 <svg
                     height="6"
-                    marginBottom="0.125rem"
-                    marginLeft="0.5625rem"
                     style={
                         Object {
                             "transform": "rotate(0deg)",
@@ -5032,12 +5204,38 @@ Array [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c5 label {
   font-weight: 400;
 }
 
+.c5 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c5 div[type='checkbox'],
+.c5 div[type='checkbox'] input,
+.c5 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c4 {
   display: inline-block;
   padding: 0;
@@ -5318,8 +5516,6 @@ Array [
                 </span>
                 <svg
                     height="6"
-                    marginBottom="0.125rem"
-                    marginLeft="0.5625rem"
                     style={
                         Object {
                             "transform": "rotate(180deg)",

consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap

@@ -315,12 +315,38 @@ exports[`renders <List /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c18 label {
   font-weight: 400;
 }
 
+.c18 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c18 div[type='checkbox'],
+.c18 div[type='checkbox'] input,
+.c18 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c6 {
   display: inline-block;
   padding: 0;
@@ -817,8 +843,6 @@ exports[`renders <List /> without throwing 1`] = `
             </span>
             <svg
               height="6"
-              marginBottom="0.125rem"
-              marginLeft="0.5625rem"
               style={
                 Object {
                   "transform": "rotate(180deg)",
@@ -1267,12 +1291,38 @@ exports[`renders <List error /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c25 label {
   font-weight: 400;
 }
 
+.c25 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c25 div[type='checkbox'],
+.c25 div[type='checkbox'] input,
+.c25 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c6 {
   display: inline-block;
   padding: 0;
@@ -1794,8 +1844,6 @@ exports[`renders <List error /> without throwing 1`] = `
             </span>
             <svg
               height="6"
-              marginBottom="0.125rem"
-              marginLeft="0.5625rem"
               style={
                 Object {
                   "transform": "rotate(180deg)",
@@ -2230,12 +2278,38 @@ exports[`renders <List instances /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c18 label {
   font-weight: 400;
 }
 
+.c18 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c18 div[type='checkbox'],
+.c18 div[type='checkbox'] input,
+.c18 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c6 {
   display: inline-block;
   padding: 0;
@@ -2941,8 +3015,6 @@ exports[`renders <List instances /> without throwing 1`] = `
             </span>
             <svg
               height="6"
-              marginBottom="0.125rem"
-              marginLeft="0.5625rem"
               style={
                 Object {
                   "transform": "rotate(180deg)",
@@ -4371,12 +4443,38 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c18 label {
   font-weight: 400;
 }
 
+.c18 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c18 div[type='checkbox'],
+.c18 div[type='checkbox'] input,
+.c18 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c6 {
   display: inline-block;
   padding: 0;
@@ -5125,8 +5223,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             </span>
             <svg
               height="6"
-              marginBottom="0.125rem"
-              marginLeft="0.5625rem"
               style={
                 Object {
                   "transform": "rotate(180deg)",
@@ -6871,12 +6967,38 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c18 label {
   font-weight: 400;
 }
 
+.c18 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c18 div[type='checkbox'],
+.c18 div[type='checkbox'] input,
+.c18 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c6 {
   display: inline-block;
   padding: 0;
@@ -7625,8 +7747,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             </span>
             <svg
               height="6"
-              marginBottom="0.125rem"
-              marginLeft="0.5625rem"
               style={
                 Object {
                   "transform": "rotate(180deg)",
@@ -9568,12 +9688,38 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c18 label {
   font-weight: 400;
 }
 
+.c18 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c18 div[type='checkbox'],
+.c18 div[type='checkbox'] input,
+.c18 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c6 {
   display: inline-block;
   padding: 0;
@@ -10322,8 +10468,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             </span>
             <svg
               height="6"
-              marginBottom="0.125rem"
-              marginLeft="0.5625rem"
               style={
                 Object {
                   "transform": "rotate(180deg)",

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

@@ -1129,9 +1129,9 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
+  border-top: 0;
-  border-left: 0px;
+  border-left: 0;
-  border-right: 0px;
+  border-right: 0;
 }
 
 .c28 {
@@ -3647,9 +3647,9 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
+  border-top: 0;
-  border-left: 0px;
+  border-left: 0;
-  border-right: 0px;
+  border-right: 0;
 }
 
 .c28 {

consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap

@@ -1202,9 +1202,9 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
+  border-top: 0;
-  border-left: 0px;
+  border-left: 0;
-  border-right: 0px;
+  border-right: 0;
 }
 
 .c25 {
@@ -1214,9 +1214,9 @@ exports[`renders <Networks networks /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
+  border-top: 0;
-  border-left: 0px;
+  border-left: 0;
-  border-right: 0px;
+  border-right: 0;
   box-shadow: none;
 }
 

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

@@ -1191,9 +1191,9 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
+  border-top: 0;
-  border-left: 0px;
+  border-left: 0;
-  border-right: 0px;
+  border-right: 0;
 }
 
 .c24 {
@@ -2921,9 +2921,9 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
+  border-top: 0;
-  border-left: 0px;
+  border-left: 0;
-  border-right: 0px;
+  border-right: 0;
 }
 
 .c25 {
@@ -4326,9 +4326,9 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
+  border-top: 0;
-  border-left: 0px;
+  border-left: 0;
-  border-right: 0px;
+  border-right: 0;
 }
 
 .c25 {

packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap

@@ -239,9 +239,9 @@ exports[`renders <Network /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
+  border-top: 0;
-  border-left: 0px;
+  border-left: 0;
-  border-right: 0px;
+  border-right: 0;
 }
 
 .c7 {
@@ -387,12 +387,38 @@ exports[`renders <Network /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c9 label {
   font-weight: 400;
 }
 
+.c9 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c9 div[type='checkbox'],
+.c9 div[type='checkbox'] input,
+.c9 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c8 {
   display: inline-block;
   padding: 0;
@@ -1123,9 +1149,9 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
+  border-top: 0;
-  border-left: 0px;
+  border-left: 0;
-  border-right: 0px;
+  border-right: 0;
 }
 
 .c7 {
@@ -1271,12 +1297,38 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c9 label {
   font-weight: 400;
 }
 
+.c9 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c9 div[type='checkbox'],
+.c9 div[type='checkbox'] input,
+.c9 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c8 {
   display: inline-block;
   padding: 0;
@@ -2020,9 +2072,9 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
+  border-top: 0;
-  border-left: 0px;
+  border-left: 0;
-  border-right: 0px;
+  border-right: 0;
 }
 
 .c7 {
@@ -2168,12 +2220,38 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c9 label {
   font-weight: 400;
 }
 
+.c9 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c9 div[type='checkbox'],
+.c9 div[type='checkbox'] input,
+.c9 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c8 {
   display: inline-block;
   padding: 0;
@@ -2954,9 +3032,9 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
+  border-top: 0;
-  border-left: 0px;
+  border-left: 0;
-  border-right: 0px;
+  border-right: 0;
 }
 
 .c28 {
@@ -2966,9 +3044,9 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
+  border-top: 0;
-  border-left: 0px;
+  border-left: 0;
-  border-right: 0px;
+  border-right: 0;
   box-shadow: none;
 }
 
@@ -3115,12 +3193,38 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c9 label {
   font-weight: 400;
 }
 
+.c9 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c9 div[type='checkbox'],
+.c9 div[type='checkbox'] input,
+.c9 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c8 {
   display: inline-block;
   padding: 0;
@@ -4104,9 +4208,9 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
+  border-top: 0;
-  border-left: 0px;
+  border-left: 0;
-  border-right: 0px;
+  border-right: 0;
 }
 
 .c7 {
@@ -4252,12 +4356,38 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c9 label {
   font-weight: 400;
 }
 
+.c9 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c9 div[type='checkbox'],
+.c9 div[type='checkbox'] input,
+.c9 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c8 {
   display: inline-block;
   padding: 0;
@@ -5374,9 +5504,9 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
+  border-top: 0;
-  border-left: 0px;
+  border-left: 0;
-  border-right: 0px;
+  border-right: 0;
 }
 
 .c7 {
@@ -5522,12 +5652,38 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c9 label {
   font-weight: 400;
 }
 
+.c9 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c9 div[type='checkbox'],
+.c9 div[type='checkbox'] input,
+.c9 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c8 {
   display: inline-block;
   padding: 0;

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

@@ -60,9 +60,9 @@ exports[`Card Card With Header 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
+  border-top: 0;
-  border-left: 0px;
+  border-left: 0;
-  border-right: 0px;
+  border-right: 0;
 }
 
 <div

packages/ui-toolkit/src/card/header.js

@@ -13,9 +13,9 @@ const BaseHeader = styled(BaseCard)`
   z-index: 1;
   line-height: ${remcalc(24)};
   max-width: 100%;
-  border-top: 0px;
+  border-top: 0;
-  border-left: 0px;
+  border-left: 0;
-  border-right: 0px;
+  border-right: 0;
 
   ${is('radius')`
     border-radius: ${remcalc(4)};

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

@@ -126,12 +126,38 @@ exports[`Form Checkbox 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  height: 1.5rem;
 }
 
 .c0 label {
   font-weight: 400;
 }
 
+.c0 label::after {
+  width: 0.475rem;
+  height: 0.205rem;
+  top: 0.4125rem;
+  left: 0.35rem;
+}
+
+.c0 div[type='checkbox'],
+.c0 div[type='checkbox'] input,
+.c0 div[type='checkbox'] label {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .c7 {
   font-size: 0.9375rem;
   line-height: 1.125rem;

packages/ui-toolkit/src/form/checkbox.js

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import React from 'react';
 import PropTypes from 'prop-types';
+import remcalc from 'remcalc';
 
 import BaseInput from './base/input';
 import BaseToggle from './base/toggle';
@@ -12,7 +13,7 @@ const Li = styled.li`
   display: flex;
   align-items: center;
   align-content: center;
-  height: 24px;
+  height: ${remcalc(24)};
 
   label {
     font-weight: 400;
@@ -28,8 +29,8 @@ const Li = styled.li`
   div[type='checkbox'],
   div[type='checkbox'] input,
   div[type='checkbox'] label {
-    height: 24px;
+    height: ${remcalc(24)};
-    width: 24px;
+    width: ${remcalc(24)};
   }
 `;
 

packages/ui-toolkit/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap

@@ -306,9 +306,9 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
+  border-top: 0;
-  border-left: 0px;
+  border-left: 0;
-  border-right: 0px;
+  border-right: 0;
 }
 
 .c8 {
@@ -1104,9 +1104,9 @@ exports[`renders <KeyValue expanded={false} /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
+  border-top: 0;
-  border-left: 0px;
+  border-left: 0;
-  border-right: 0px;
+  border-right: 0;
   box-shadow: none;
 }
 
@@ -1506,9 +1506,9 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
+  border-top: 0;
-  border-left: 0px;
+  border-left: 0;
-  border-right: 0px;
+  border-right: 0;
 }
 
 .c8 {
@@ -2451,9 +2451,9 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
+  border-top: 0;
-  border-left: 0px;
+  border-left: 0;
-  border-right: 0px;
+  border-right: 0;
 }
 
 .c8 {
@@ -3561,9 +3561,9 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
+  border-top: 0;
-  border-left: 0px;
+  border-left: 0;
-  border-right: 0px;
+  border-right: 0;
 }
 
 .c8 {
@@ -4553,9 +4553,9 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
+  border-top: 0;
-  border-left: 0px;
+  border-left: 0;
-  border-right: 0px;
+  border-right: 0;
 }
 
 .c8 {
@@ -5559,9 +5559,9 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
+  border-top: 0;
-  border-left: 0px;
+  border-left: 0;
-  border-right: 0px;
+  border-right: 0;
 }
 
 .c8 {
@@ -6633,9 +6633,9 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
+  border-top: 0;
-  border-left: 0px;
+  border-left: 0;
-  border-right: 0px;
+  border-right: 0;
 }
 
 .c8 {
@@ -7764,9 +7764,9 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   max-width: 100%;
-  border-top: 0px;
+  border-top: 0;
-  border-left: 0px;
+  border-left: 0;
-  border-right: 0px;
+  border-right: 0;
 }
 
 .c8 {