fix(my-joy-beta): create instance package table alignments

fixes #1271

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

@@ -5,7 +5,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c7 {
+.c6 {
   margin-top: 1.3125rem;
   margin-left: 0.75rem;
 }
@@ -50,7 +50,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   display: block;
 }
 
-.c10 {
+.c9 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -63,36 +63,36 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c10::-moz-focus-inner,
+.c9::-moz-focus-inner,
-.c10[type='button']::-moz-focus-inner,
+.c9[type='button']::-moz-focus-inner,
-.c10[type='reset']::-moz-focus-inner,
+.c9[type='reset']::-moz-focus-inner,
-.c10[type='submit']::-moz-focus-inner {
+.c9[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c10:-moz-focusring,
+.c9:-moz-focusring,
-.c10[type='button']:-moz-focusring,
+.c9[type='button']:-moz-focusring,
-.c10[type='reset']:-moz-focusring,
+.c9[type='reset']:-moz-focusring,
-.c10[type='submit']:-moz-focusring {
+.c9[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c10 + button,
-.c10 + a {
-  margin-left: 0.375rem;
-}
-
-.c9 {
-  display: inline-block;
-}
-
 .c9 + button,
 .c9 + a {
   margin-left: 0.375rem;
 }
 
 .c8 {
+  display: inline-block;
+}
+
+.c8 + button,
+.c8 + a {
+  margin-left: 0.375rem;
+}
+
+.c7 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -132,7 +132,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c8:focus {
+.c7:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -140,21 +140,21 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c8:hover {
+.c7:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c8:active,
+.c7:active,
-.c8:active:hover,
+.c7:active:hover,
-.c8:active:focus {
+.c7:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c8[disabled] {
+.c7[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
@@ -174,23 +174,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c6 {
+.c11 {
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-  margin-bottom: 0.1875rem;
-  float: right;
-  font-size: 0.8125rem;
-  margin-top: 0.375rem;
-  float: none;
-  width: 18.75rem;
-}
-
-.c12 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -209,7 +193,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c11 {
+.c10 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -325,9 +309,6 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
             placeholder="Example: mySQLdb"
             required={true}
           />
-          <label
-            className="c6"
-          />
         </div>
       </div>
     </div>
@@ -335,10 +316,10 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
       className="c1"
     >
       <div
-        className="c7"
+        className="c6"
       >
         <button
-          className="c8 c9 c10"
+          className="c7 c8 c9"
           disabled={undefined}
           href=""
           type="submit"
@@ -346,7 +327,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
           Add
         </button>
         <div
-          className="c11 c12"
+          className="c10 c11"
           height="0.25rem"
         />
       </div>
@@ -360,7 +341,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c7 {
+.c6 {
   margin-top: 1.3125rem;
   margin-left: 0.75rem;
 }
@@ -405,7 +386,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   display: block;
 }
 
-.c10 {
+.c9 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -418,36 +399,36 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c10::-moz-focus-inner,
+.c9::-moz-focus-inner,
-.c10[type='button']::-moz-focus-inner,
+.c9[type='button']::-moz-focus-inner,
-.c10[type='reset']::-moz-focus-inner,
+.c9[type='reset']::-moz-focus-inner,
-.c10[type='submit']::-moz-focus-inner {
+.c9[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c10:-moz-focusring,
+.c9:-moz-focusring,
-.c10[type='button']:-moz-focusring,
+.c9[type='button']:-moz-focusring,
-.c10[type='reset']:-moz-focusring,
+.c9[type='reset']:-moz-focusring,
-.c10[type='submit']:-moz-focusring {
+.c9[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c10 + button,
-.c10 + a {
-  margin-left: 0.375rem;
-}
-
-.c9 {
-  display: inline-block;
-}
-
 .c9 + button,
 .c9 + a {
   margin-left: 0.375rem;
 }
 
 .c8 {
+  display: inline-block;
+}
+
+.c8 + button,
+.c8 + a {
+  margin-left: 0.375rem;
+}
+
+.c7 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -492,7 +473,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c8:focus {
+.c7:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -500,38 +481,38 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c8:hover {
+.c7:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c8:active,
+.c7:active,
-.c8:active:hover,
+.c7:active:hover,
-.c8:active:focus {
+.c7:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c8[disabled] {
+.c7[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c8:focus {
+.c7:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c8:hover {
+.c7:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c8:active,
+.c7:active,
-.c8:active:hover,
+.c7:active:hover,
-.c8:active:focus {
+.c7:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
@@ -551,23 +532,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c6 {
+.c11 {
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-  margin-bottom: 0.1875rem;
-  float: right;
-  font-size: 0.8125rem;
-  margin-top: 0.375rem;
-  float: none;
-  width: 18.75rem;
-}
-
-.c12 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -586,7 +551,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c11 {
+.c10 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -702,9 +667,6 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
             placeholder="Example: mySQLdb"
             required={true}
           />
-          <label
-            className="c6"
-          />
         </div>
       </div>
     </div>
@@ -712,10 +674,10 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
       className="c1"
     >
       <div
-        className="c7"
+        className="c6"
       >
         <button
-          className="c8 c9 c10"
+          className="c7 c8 c9"
           disabled={true}
           href=""
           type="submit"
@@ -723,7 +685,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
           Add
         </button>
         <div
-          className="c11 c12"
+          className="c10 c11"
           height="0.25rem"
         />
       </div>

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

@@ -5,7 +5,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c20 {
+.c19 {
   margin-top: 0.375rem;
 }
 
@@ -18,7 +18,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   padding: 1.125rem;
 }
 
-.c25 {
+.c24 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -31,36 +31,36 @@ exports[`renders <AddForm /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c25::-moz-focus-inner,
+.c24::-moz-focus-inner,
-.c25[type='button']::-moz-focus-inner,
+.c24[type='button']::-moz-focus-inner,
-.c25[type='reset']::-moz-focus-inner,
+.c24[type='reset']::-moz-focus-inner,
-.c25[type='submit']::-moz-focus-inner {
+.c24[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c25:-moz-focusring,
+.c24:-moz-focusring,
-.c25[type='button']:-moz-focusring,
+.c24[type='button']:-moz-focusring,
-.c25[type='reset']:-moz-focusring,
+.c24[type='reset']:-moz-focusring,
-.c25[type='submit']:-moz-focusring {
+.c24[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c25 + button,
-.c25 + a {
-  margin-left: 0.375rem;
-}
-
-.c24 {
-  display: inline-block;
-}
-
 .c24 + button,
 .c24 + a {
   margin-left: 0.375rem;
 }
 
 .c23 {
+  display: inline-block;
+}
+
+.c23 + button,
+.c23 + a {
+  margin-left: 0.375rem;
+}
+
+.c22 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -105,7 +105,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   margin: 0;
 }
 
-.c23:focus {
+.c22:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -113,43 +113,43 @@ exports[`renders <AddForm /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c23:hover {
+.c22:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c23:active,
+.c22:active,
-.c23:active:hover,
+.c22:active:hover,
-.c23:active:focus {
+.c22:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c23[disabled] {
+.c22[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c23:focus {
+.c22:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c23:hover {
+.c22:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c23:active,
+.c22:active,
-.c23:active:hover,
+.c22:active:hover,
-.c23:active:focus {
+.c22:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c26 {
+.c25 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -195,7 +195,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   margin: 0;
 }
 
-.c26:focus {
+.c25:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -203,43 +203,43 @@ exports[`renders <AddForm /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c26:hover {
+.c25:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c26:active,
+.c25:active,
-.c26:active:hover,
+.c25:active:hover,
-.c26:active:focus {
+.c25:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c26[disabled] {
+.c25[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c26:focus {
+.c25:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c26:hover {
+.c25:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c26:active,
+.c25:active,
-.c26:active:hover,
+.c25:active:hover,
-.c26:active:focus {
+.c25:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c28 {
+.c27 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -297,7 +297,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   float: right;
 }
 
-.c28:focus {
+.c27:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -305,66 +305,66 @@ exports[`renders <AddForm /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c28:hover {
+.c27:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c28:active,
+.c27:active,
-.c28:active:hover,
+.c27:active:hover,
-.c28:active:focus {
+.c27:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c28[disabled] {
+.c27[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c28:focus {
+.c27:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c28:hover {
+.c27:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c28:active,
+.c27:active,
-.c28:active:hover,
+.c27:active:hover,
-.c28:active:focus {
+.c27:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c28:focus {
+.c27:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c28:hover {
+.c27:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c28:active,
+.c27:active,
-.c28:active:hover,
+.c27:active:hover,
-.c28:active:focus {
+.c27:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c28 svg + span {
+.c27 svg + span {
   margin-left: 0.75rem;
 }
 
-.c28 svg {
+.c27 svg {
   max-height: 1.125rem;
 }
 
@@ -383,22 +383,6 @@ exports[`renders <AddForm /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c18 {
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-  margin-bottom: 0.1875rem;
-  float: right;
-  font-size: 0.8125rem;
-  margin-top: 0.375rem;
-  float: none;
-  width: 18.75rem;
-}
-
 .c16 {
   box-sizing: border-box;
   display: -webkit-box;
@@ -418,7 +402,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c21 {
+.c20 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -447,7 +431,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   display: block;
 }
 
-.c22 {
+.c21 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -457,7 +441,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   display: block;
 }
 
-.c27 {
+.c26 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -571,7 +555,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c19 {
+.c18 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -846,7 +830,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c21 {
+  .c20 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -855,7 +839,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c21 {
+  .c20 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -873,7 +857,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c22 {
+  .c21 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -882,7 +866,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c27 {
+  .c26 {
     display: none;
   }
 }
@@ -963,17 +947,13 @@ exports[`renders <AddForm /> without throwing 1`] = `
                 >
                   <div
                     className="c17"
-                  >
-                    <label
-                      className="c18"
                   />
                 </div>
               </div>
             </div>
           </div>
-          </div>
           <div
-            className="c19"
+            className="c18"
           />
           <div
             className="c11"
@@ -1005,27 +985,23 @@ exports[`renders <AddForm /> without throwing 1`] = `
                 >
                   <div
                     className="c17"
-                  >
-                    <label
-                      className="c18"
                   />
                 </div>
               </div>
             </div>
           </div>
         </div>
-        </div>
+        <div
+          className="c19"
+        >
           <div
             className="c20"
           >
             <div
               className="c21"
-          >
-            <div
-              className="c22"
             >
               <button
-                className="c23 c24 c25"
+                className="c22 c23 c24"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -1036,7 +1012,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c26 c24 c25"
+                className="c25 c23 c24"
                 disabled={true}
                 href=""
                 type="submit"
@@ -1047,10 +1023,10 @@ exports[`renders <AddForm /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c27"
+              className="c26"
             >
               <button
-                className="c28 c24 c25"
+                className="c27 c23 c24"
                 disabled={false}
                 href=""
                 icon={true}
@@ -1093,7 +1069,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c20 {
+.c19 {
   margin-top: 0.375rem;
 }
 
@@ -1106,7 +1082,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   padding: 1.125rem;
 }
 
-.c25 {
+.c24 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1119,36 +1095,36 @@ exports[`renders <EditForm /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c25::-moz-focus-inner,
+.c24::-moz-focus-inner,
-.c25[type='button']::-moz-focus-inner,
+.c24[type='button']::-moz-focus-inner,
-.c25[type='reset']::-moz-focus-inner,
+.c24[type='reset']::-moz-focus-inner,
-.c25[type='submit']::-moz-focus-inner {
+.c24[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c25:-moz-focusring,
+.c24:-moz-focusring,
-.c25[type='button']:-moz-focusring,
+.c24[type='button']:-moz-focusring,
-.c25[type='reset']:-moz-focusring,
+.c24[type='reset']:-moz-focusring,
-.c25[type='submit']:-moz-focusring {
+.c24[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c25 + button,
-.c25 + a {
-  margin-left: 0.375rem;
-}
-
-.c24 {
-  display: inline-block;
-}
-
 .c24 + button,
 .c24 + a {
   margin-left: 0.375rem;
 }
 
 .c23 {
+  display: inline-block;
+}
+
+.c23 + button,
+.c23 + a {
+  margin-left: 0.375rem;
+}
+
+.c22 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1193,7 +1169,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin: 0;
 }
 
-.c23:focus {
+.c22:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1201,43 +1177,43 @@ exports[`renders <EditForm /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c23:hover {
+.c22:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c23:active,
+.c22:active,
-.c23:active:hover,
+.c22:active:hover,
-.c23:active:focus {
+.c22:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c23[disabled] {
+.c22[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c23:focus {
+.c22:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c23:hover {
+.c22:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c23:active,
+.c22:active,
-.c23:active:hover,
+.c22:active:hover,
-.c23:active:focus {
+.c22:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c26 {
+.c25 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1283,7 +1259,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin: 0;
 }
 
-.c26:focus {
+.c25:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1291,43 +1267,43 @@ exports[`renders <EditForm /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c26:hover {
+.c25:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c26:active,
+.c25:active,
-.c26:active:hover,
+.c25:active:hover,
-.c26:active:focus {
+.c25:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c26[disabled] {
+.c25[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c26:focus {
+.c25:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c26:hover {
+.c25:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c26:active,
+.c25:active,
-.c26:active:hover,
+.c25:active:hover,
-.c26:active:focus {
+.c25:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c28 {
+.c27 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1385,7 +1361,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   float: right;
 }
 
-.c28:focus {
+.c27:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1393,66 +1369,66 @@ exports[`renders <EditForm /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c28:hover {
+.c27:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c28:active,
+.c27:active,
-.c28:active:hover,
+.c27:active:hover,
-.c28:active:focus {
+.c27:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c28[disabled] {
+.c27[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c28:focus {
+.c27:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c28:hover {
+.c27:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c28:active,
+.c27:active,
-.c28:active:hover,
+.c27:active:hover,
-.c28:active:focus {
+.c27:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c28:focus {
+.c27:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c28:hover {
+.c27:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c28:active,
+.c27:active,
-.c28:active:hover,
+.c27:active:hover,
-.c28:active:focus {
+.c27:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c28 svg + span {
+.c27 svg + span {
   margin-left: 0.75rem;
 }
 
-.c28 svg {
+.c27 svg {
   max-height: 1.125rem;
 }
 
@@ -1471,22 +1447,6 @@ exports[`renders <EditForm /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c18 {
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-  margin-bottom: 0.1875rem;
-  float: right;
-  font-size: 0.8125rem;
-  margin-top: 0.375rem;
-  float: none;
-  width: 18.75rem;
-}
-
 .c16 {
   box-sizing: border-box;
   display: -webkit-box;
@@ -1506,7 +1466,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c21 {
+.c20 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1535,7 +1495,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   display: block;
 }
 
-.c22 {
+.c21 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1545,7 +1505,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   display: block;
 }
 
-.c27 {
+.c26 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1638,7 +1598,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c19 {
+.c18 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1924,7 +1884,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c21 {
+  .c20 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1933,7 +1893,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c21 {
+  .c20 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1951,7 +1911,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c22 {
+  .c21 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -1960,7 +1920,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c27 {
+  .c26 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -2061,17 +2021,13 @@ exports[`renders <EditForm /> without throwing 1`] = `
                 >
                   <div
                     className="c17"
-                  >
-                    <label
-                      className="c18"
                   />
                 </div>
               </div>
             </div>
           </div>
-          </div>
           <div
-            className="c19"
+            className="c18"
           />
           <div
             className="c11"
@@ -2103,27 +2059,23 @@ exports[`renders <EditForm /> without throwing 1`] = `
                 >
                   <div
                     className="c17"
-                  >
-                    <label
-                      className="c18"
                   />
                 </div>
               </div>
             </div>
           </div>
         </div>
-        </div>
+        <div
+          className="c19"
+        >
           <div
             className="c20"
           >
             <div
               className="c21"
-          >
-            <div
-              className="c22"
             >
               <button
-                className="c23 c24 c25"
+                className="c22 c23 c24"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -2134,7 +2086,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c26 c24 c25"
+                className="c25 c23 c24"
                 disabled={true}
                 href=""
                 type="submit"
@@ -2145,10 +2097,10 @@ exports[`renders <EditForm /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c27"
+              className="c26"
             >
               <button
-                className="c28 c24 c25"
+                className="c27 c23 c24"
                 disabled={false}
                 href=""
                 icon={true}

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

@@ -190,22 +190,6 @@ exports[`renders <Rule/> without throwing 1`] = `
   display: none;
 }
 
-.c16 {
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-  margin-bottom: 0.1875rem;
-  float: right;
-  font-size: 0.8125rem;
-  margin-top: 0.375rem;
-  float: none;
-  width: 18.75rem;
-}
-
 .c2 {
   color: rgba(73,73,73,1);
   font-weight: normal;
@@ -923,9 +907,6 @@ exports[`renders <Rule/> without throwing 1`] = `
           }
         }
       />
-      <label
-        className="c16"
-      />
     </div>
   </div>
 </div>
@@ -1071,22 +1052,6 @@ exports[`renders <Rule/> without throwing 2`] = `
   display: none;
 }
 
-.c16 {
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-  margin-bottom: 0.1875rem;
-  float: right;
-  font-size: 0.8125rem;
-  margin-top: 0.375rem;
-  float: none;
-  width: 18.75rem;
-}
-
 .c2 {
   color: rgba(73,73,73,1);
   font-weight: normal;
@@ -1804,9 +1769,6 @@ exports[`renders <Rule/> without throwing 2`] = `
           }
         }
       />
-      <label
-        className="c16"
-      />
     </div>
   </div>
 </div>

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

@@ -5,7 +5,7 @@ exports[`renders <Name /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c10 {
+.c9 {
   margin-left: 0.375rem;
 }
 
@@ -53,7 +53,7 @@ exports[`renders <Name /> without throwing 1`] = `
   display: flex;
 }
 
-.c7 {
+.c6 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -70,7 +70,7 @@ exports[`renders <Name /> without throwing 1`] = `
   display: block;
 }
 
-.c13 {
+.c12 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -83,36 +83,36 @@ exports[`renders <Name /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c13::-moz-focus-inner,
+.c12::-moz-focus-inner,
-.c13[type='button']::-moz-focus-inner,
+.c12[type='button']::-moz-focus-inner,
-.c13[type='reset']::-moz-focus-inner,
+.c12[type='reset']::-moz-focus-inner,
-.c13[type='submit']::-moz-focus-inner {
+.c12[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c13:-moz-focusring,
+.c12:-moz-focusring,
-.c13[type='button']:-moz-focusring,
+.c12[type='button']:-moz-focusring,
-.c13[type='reset']:-moz-focusring,
+.c12[type='reset']:-moz-focusring,
-.c13[type='submit']:-moz-focusring {
+.c12[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c13 + button,
-.c13 + a {
-  margin-left: 0.375rem;
-}
-
-.c12 {
-  display: inline-block;
-}
-
 .c12 + button,
 .c12 + a {
   margin-left: 0.375rem;
 }
 
 .c11 {
+  display: inline-block;
+}
+
+.c11 + button,
+.c11 + a {
+  margin-left: 0.375rem;
+}
+
+.c10 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -166,7 +166,7 @@ exports[`renders <Name /> without throwing 1`] = `
   margin-top: 0.5rem;
 }
 
-.c11:focus {
+.c10:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -174,47 +174,47 @@ exports[`renders <Name /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c11:hover {
+.c10:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c11:active,
+.c10:active,
-.c11:active:hover,
+.c10:active:hover,
-.c11:active:focus {
+.c10:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c11[disabled] {
+.c10[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c11:focus {
+.c10:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c11:hover {
+.c10:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c11:active,
+.c10:active,
-.c11:active:hover,
+.c10:active:hover,
-.c11:active:focus {
+.c10:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c11 svg + span {
+.c10 svg + span {
   margin-left: 0.75rem;
 }
 
-.c11 svg {
+.c10 svg {
   max-height: 1.125rem;
 }
 
@@ -233,23 +233,7 @@ exports[`renders <Name /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c6 {
+.c8 {
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-  margin-bottom: 0.1875rem;
-  float: right;
-  font-size: 0.8125rem;
-  margin-top: 0.375rem;
-  float: none;
-  width: 18.75rem;
-}
-
-.c9 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -268,7 +252,7 @@ exports[`renders <Name /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c8 {
+.c7 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -383,23 +367,20 @@ exports[`renders <Name /> without throwing 1`] = `
             placeholder={undefined}
           />
         </div>
-        <label
-          className="c6"
-        />
       </div>
     </div>
     <div
-      className="c7"
+      className="c6"
     >
       <div
-        className="c8 c9"
+        className="c7 c8"
         height="0.8125rem"
       />
       <div
-        className="c10"
+        className="c9"
       >
         <button
-          className="c11 c12 c13"
+          className="c10 c11 c12"
           href=""
           icon={true}
           onClick={undefined}
@@ -440,7 +421,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c10 {
+.c9 {
   margin-left: 0.375rem;
 }
 
@@ -488,7 +469,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   display: flex;
 }
 
-.c7 {
+.c6 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -505,7 +486,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   display: block;
 }
 
-.c13 {
+.c12 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -518,36 +499,36 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c13::-moz-focus-inner,
+.c12::-moz-focus-inner,
-.c13[type='button']::-moz-focus-inner,
+.c12[type='button']::-moz-focus-inner,
-.c13[type='reset']::-moz-focus-inner,
+.c12[type='reset']::-moz-focus-inner,
-.c13[type='submit']::-moz-focus-inner {
+.c12[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c13:-moz-focusring,
+.c12:-moz-focusring,
-.c13[type='button']:-moz-focusring,
+.c12[type='button']:-moz-focusring,
-.c13[type='reset']:-moz-focusring,
+.c12[type='reset']:-moz-focusring,
-.c13[type='submit']:-moz-focusring {
+.c12[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c13 + button,
-.c13 + a {
-  margin-left: 0.375rem;
-}
-
-.c12 {
-  display: inline-block;
-}
-
 .c12 + button,
 .c12 + a {
   margin-left: 0.375rem;
 }
 
 .c11 {
+  display: inline-block;
+}
+
+.c11 + button,
+.c11 + a {
+  margin-left: 0.375rem;
+}
+
+.c10 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -601,7 +582,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   margin-top: 0.5rem;
 }
 
-.c11:focus {
+.c10:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -609,47 +590,47 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c11:hover {
+.c10:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c11:active,
+.c10:active,
-.c11:active:hover,
+.c10:active:hover,
-.c11:active:focus {
+.c10:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c11[disabled] {
+.c10[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c11:focus {
+.c10:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c11:hover {
+.c10:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c11:active,
+.c10:active,
-.c11:active:hover,
+.c10:active:hover,
-.c11:active:focus {
+.c10:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c11 svg + span {
+.c10 svg + span {
   margin-left: 0.75rem;
 }
 
-.c11 svg {
+.c10 svg {
   max-height: 1.125rem;
 }
 
@@ -668,23 +649,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c6 {
+.c8 {
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-  margin-bottom: 0.1875rem;
-  float: right;
-  font-size: 0.8125rem;
-  margin-top: 0.375rem;
-  float: none;
-  width: 18.75rem;
-}
-
-.c9 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -703,7 +668,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c8 {
+.c7 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -818,23 +783,20 @@ exports[`renders <Name expanded /> without throwing 1`] = `
             placeholder={undefined}
           />
         </div>
-        <label
-          className="c6"
-        />
       </div>
     </div>
     <div
-      className="c7"
+      className="c6"
     >
       <div
-        className="c8 c9"
+        className="c7 c8"
         height="0.8125rem"
       />
       <div
-        className="c10"
+        className="c9"
       >
         <button
-          className="c11 c12 c13"
+          className="c10 c11 c12"
           href=""
           icon={true}
           onClick={undefined}
@@ -875,7 +837,7 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c10 {
+.c9 {
   margin-left: 0.375rem;
 }
 
@@ -923,7 +885,7 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
   display: flex;
 }
 
-.c7 {
+.c6 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -940,7 +902,7 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
   display: block;
 }
 
-.c13 {
+.c12 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -953,36 +915,36 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c13::-moz-focus-inner,
+.c12::-moz-focus-inner,
-.c13[type='button']::-moz-focus-inner,
+.c12[type='button']::-moz-focus-inner,
-.c13[type='reset']::-moz-focus-inner,
+.c12[type='reset']::-moz-focus-inner,
-.c13[type='submit']::-moz-focus-inner {
+.c12[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c13:-moz-focusring,
+.c12:-moz-focusring,
-.c13[type='button']:-moz-focusring,
+.c12[type='button']:-moz-focusring,
-.c13[type='reset']:-moz-focusring,
+.c12[type='reset']:-moz-focusring,
-.c13[type='submit']:-moz-focusring {
+.c12[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c13 + button,
-.c13 + a {
-  margin-left: 0.375rem;
-}
-
-.c12 {
-  display: inline-block;
-}
-
 .c12 + button,
 .c12 + a {
   margin-left: 0.375rem;
 }
 
 .c11 {
+  display: inline-block;
+}
+
+.c11 + button,
+.c11 + a {
+  margin-left: 0.375rem;
+}
+
+.c10 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1036,7 +998,7 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
   margin-top: 0.5rem;
 }
 
-.c11:focus {
+.c10:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1044,47 +1006,47 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c11:hover {
+.c10:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c11:active,
+.c10:active,
-.c11:active:hover,
+.c10:active:hover,
-.c11:active:focus {
+.c10:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c11[disabled] {
+.c10[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c11:focus {
+.c10:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c11:hover {
+.c10:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c11:active,
+.c10:active,
-.c11:active:hover,
+.c10:active:hover,
-.c11:active:focus {
+.c10:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c11 svg + span {
+.c10 svg + span {
   margin-left: 0.75rem;
 }
 
-.c11 svg {
+.c10 svg {
   max-height: 1.125rem;
 }
 
@@ -1103,23 +1065,7 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c6 {
+.c8 {
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-  margin-bottom: 0.1875rem;
-  float: right;
-  font-size: 0.8125rem;
-  margin-top: 0.375rem;
-  float: none;
-  width: 18.75rem;
-}
-
-.c9 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1138,7 +1084,7 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c8 {
+.c7 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -1253,23 +1199,20 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
             placeholder={undefined}
           />
         </div>
-        <label
-          className="c6"
-        />
       </div>
     </div>
     <div
-      className="c7"
+      className="c6"
     >
       <div
-        className="c8 c9"
+        className="c7 c8"
         height="0.8125rem"
       />
       <div
-        className="c10"
+        className="c9"
       >
         <button
-          className="c11 c12 c13"
+          className="c10 c11 c12"
           href=""
           icon={true}
           onClick={undefined}
@@ -1310,7 +1253,7 @@ exports[`renders <Name pristine={false} /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c10 {
+.c9 {
   margin-left: 0.375rem;
 }
 
@@ -1358,7 +1301,7 @@ exports[`renders <Name pristine={false} /> without throwing 1`] = `
   display: flex;
 }
 
-.c7 {
+.c6 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1375,7 +1318,7 @@ exports[`renders <Name pristine={false} /> without throwing 1`] = `
   display: block;
 }
 
-.c13 {
+.c12 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1388,36 +1331,36 @@ exports[`renders <Name pristine={false} /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c13::-moz-focus-inner,
+.c12::-moz-focus-inner,
-.c13[type='button']::-moz-focus-inner,
+.c12[type='button']::-moz-focus-inner,
-.c13[type='reset']::-moz-focus-inner,
+.c12[type='reset']::-moz-focus-inner,
-.c13[type='submit']::-moz-focus-inner {
+.c12[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c13:-moz-focusring,
+.c12:-moz-focusring,
-.c13[type='button']:-moz-focusring,
+.c12[type='button']:-moz-focusring,
-.c13[type='reset']:-moz-focusring,
+.c12[type='reset']:-moz-focusring,
-.c13[type='submit']:-moz-focusring {
+.c12[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c13 + button,
-.c13 + a {
-  margin-left: 0.375rem;
-}
-
-.c12 {
-  display: inline-block;
-}
-
 .c12 + button,
 .c12 + a {
   margin-left: 0.375rem;
 }
 
 .c11 {
+  display: inline-block;
+}
+
+.c11 + button,
+.c11 + a {
+  margin-left: 0.375rem;
+}
+
+.c10 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1471,7 +1414,7 @@ exports[`renders <Name pristine={false} /> without throwing 1`] = `
   margin-top: 0.5rem;
 }
 
-.c11:focus {
+.c10:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1479,47 +1422,47 @@ exports[`renders <Name pristine={false} /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c11:hover {
+.c10:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c11:active,
+.c10:active,
-.c11:active:hover,
+.c10:active:hover,
-.c11:active:focus {
+.c10:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c11[disabled] {
+.c10[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c11:focus {
+.c10:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c11:hover {
+.c10:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c11:active,
+.c10:active,
-.c11:active:hover,
+.c10:active:hover,
-.c11:active:focus {
+.c10:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c11 svg + span {
+.c10 svg + span {
   margin-left: 0.75rem;
 }
 
-.c11 svg {
+.c10 svg {
   max-height: 1.125rem;
 }
 
@@ -1538,23 +1481,7 @@ exports[`renders <Name pristine={false} /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c6 {
+.c8 {
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-  margin-bottom: 0.1875rem;
-  float: right;
-  font-size: 0.8125rem;
-  margin-top: 0.375rem;
-  float: none;
-  width: 18.75rem;
-}
-
-.c9 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1573,7 +1500,7 @@ exports[`renders <Name pristine={false} /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c8 {
+.c7 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -1688,23 +1615,20 @@ exports[`renders <Name pristine={false} /> without throwing 1`] = `
             placeholder={undefined}
           />
         </div>
-        <label
-          className="c6"
-        />
       </div>
     </div>
     <div
-      className="c7"
+      className="c6"
     >
       <div
-        className="c8 c9"
+        className="c7 c8"
         height="0.8125rem"
       />
       <div
-        className="c10"
+        className="c9"
       >
         <button
-          className="c11 c12 c13"
+          className="c10 c11 c12"
           href=""
           icon={true}
           onClick={undefined}

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

@@ -283,6 +283,7 @@ exports[`renders <Filters /> without throwing 1`] = `
   white-space: pre;
   font-size: 0.8125rem;
   cursor: pointer;
+  margin: 0;
 }
 
 .c1 {
@@ -1037,6 +1038,7 @@ exports[`renders <Package /> without throwing 1`] = `
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
+  margin: 0;
 }
 
 .c7 {

packages/my-joy-beta/src/components/create-instance/package.js

@@ -56,7 +56,7 @@ export const Filters = ({ onResetFilters }) => (
     <Flex wrap alignCenter justifyBetween>
       <FormGroup type="checkbox" name="compute-optimized" field={Field}>
         <Checkbox>
-          <FormLabel actionable>
+          <FormLabel noMargin actionable>
             <Flex alignCenter>
               {GroupIcons.COMPUTE}
               <Margin right={1} left={1}>
@@ -68,7 +68,7 @@ export const Filters = ({ onResetFilters }) => (
       </FormGroup>
       <FormGroup type="checkbox" name="memory-optimized" field={Field}>
         <Checkbox>
-          <FormLabel actionable>
+          <FormLabel noMargin actionable>
             <Flex alignCenter>
               {GroupIcons.MEMORY}
               <Margin left={1} right={2}>
@@ -80,7 +80,7 @@ export const Filters = ({ onResetFilters }) => (
       </FormGroup>
       <FormGroup type="checkbox" name="general-purpose" field={Field}>
         <Checkbox>
-          <FormLabel actionable>
+          <FormLabel noMargin actionable>
             <Flex alignCenter>
               {GroupIcons.GENERAL}
               <Margin left={1} right={2}>
@@ -92,7 +92,7 @@ export const Filters = ({ onResetFilters }) => (
       </FormGroup>
       <FormGroup type="checkbox" name="storage-optimized" field={Field}>
         <Checkbox>
-          <FormLabel actionable>
+          <FormLabel noMargin actionable>
             <Flex alignCenter>
               {GroupIcons.STORAGE}
               <Margin left={1} right={2}>
@@ -104,7 +104,7 @@ export const Filters = ({ onResetFilters }) => (
       </FormGroup>
       <FormGroup type="checkbox" name="ssd" field={Field}>
         <Checkbox>
-          <FormLabel actionable>SSD</FormLabel>
+          <FormLabel noMargin actionable>SSD</FormLabel>
         </Checkbox>
       </FormGroup>
     </Flex>
@@ -138,6 +138,7 @@ export const Package = ({
             {GroupIcons[group]}
             <Margin left={1} right={2}>
               <FormLabel
+                noMargin
                 style={{ fontWeight: sortBy === 'name' ? 'bold' : 'normal' }}
               >
                 {name}

packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap

@@ -420,7 +420,7 @@ Array [
 <ul
     className="c0"
 />,
-  .c25 {
+  .c24 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -433,36 +433,36 @@ Array [
   min-width: 7.5rem;
 }
 
-.c25::-moz-focus-inner,
+.c24::-moz-focus-inner,
-.c25[type='button']::-moz-focus-inner,
+.c24[type='button']::-moz-focus-inner,
-.c25[type='reset']::-moz-focus-inner,
+.c24[type='reset']::-moz-focus-inner,
-.c25[type='submit']::-moz-focus-inner {
+.c24[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c25:-moz-focusring,
+.c24:-moz-focusring,
-.c25[type='button']:-moz-focusring,
+.c24[type='button']:-moz-focusring,
-.c25[type='reset']:-moz-focusring,
+.c24[type='reset']:-moz-focusring,
-.c25[type='submit']:-moz-focusring {
+.c24[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c25 + button,
-.c25 + a {
-  margin-left: 0.375rem;
-}
-
-.c24 {
-  display: inline-block;
-}
-
 .c24 + button,
 .c24 + a {
   margin-left: 0.375rem;
 }
 
 .c23 {
+  display: inline-block;
+}
+
+.c23 + button,
+.c23 + a {
+  margin-left: 0.375rem;
+}
+
+.c22 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -507,7 +507,7 @@ Array [
   margin: 0;
 }
 
-.c23:focus {
+.c22:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -515,43 +515,43 @@ Array [
   border-color: rgb(45,56,132);
 }
 
-.c23:hover {
+.c22:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c23:active,
+.c22:active,
-.c23:active:hover,
+.c22:active:hover,
-.c23:active:focus {
+.c22:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c23[disabled] {
+.c22[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c23:focus {
+.c22:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c23:hover {
+.c22:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c23:active,
+.c22:active,
-.c23:active:hover,
+.c22:active:hover,
-.c23:active:focus {
+.c22:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c26 {
+.c25 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -597,7 +597,7 @@ Array [
   margin: 0;
 }
 
-.c26:focus {
+.c25:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -605,43 +605,43 @@ Array [
   border-color: rgb(45,56,132);
 }
 
-.c26:hover {
+.c25:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c26:active,
+.c25:active,
-.c26:active:hover,
+.c25:active:hover,
-.c26:active:focus {
+.c25:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c26[disabled] {
+.c25[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c26:focus {
+.c25:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c26:hover {
+.c25:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c26:active,
+.c25:active,
-.c26:active:hover,
+.c25:active:hover,
-.c26:active:focus {
+.c25:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c28 {
+.c27 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -699,7 +699,7 @@ Array [
   float: right;
 }
 
-.c28:focus {
+.c27:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -707,66 +707,66 @@ Array [
   border-color: rgb(45,56,132);
 }
 
-.c28:hover {
+.c27:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c28:active,
+.c27:active,
-.c28:active:hover,
+.c27:active:hover,
-.c28:active:focus {
+.c27:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c28[disabled] {
+.c27[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c28:focus {
+.c27:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c28:hover {
+.c27:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c28:active,
+.c27:active,
-.c28:active:hover,
+.c27:active:hover,
-.c28:active:focus {
+.c27:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c28:focus {
+.c27:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c28:hover {
+.c27:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c28:active,
+.c27:active,
-.c28:active:hover,
+.c27:active:hover,
-.c28:active:focus {
+.c27:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c28 svg + span {
+.c27 svg + span {
   margin-left: 0.75rem;
 }
 
-.c28 svg {
+.c27 svg {
   max-height: 1.125rem;
 }
 
@@ -785,22 +785,6 @@ Array [
   font-size: 0.8125rem;
 }
 
-.c18 {
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-  margin-bottom: 0.1875rem;
-  float: right;
-  font-size: 0.8125rem;
-  margin-top: 0.375rem;
-  float: none;
-  width: 18.75rem;
-}
-
 .c16 {
   box-sizing: border-box;
   display: -webkit-box;
@@ -820,7 +804,7 @@ Array [
   margin-left: -0.625rem;
 }
 
-.c21 {
+.c20 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -849,7 +833,7 @@ Array [
   display: block;
 }
 
-.c22 {
+.c21 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -859,7 +843,7 @@ Array [
   display: block;
 }
 
-.c27 {
+.c26 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -894,7 +878,7 @@ Array [
   margin-top: 0.1875rem;
 }
 
-.c20 {
+.c19 {
   margin-top: 0.375rem;
 }
 
@@ -990,7 +974,7 @@ Array [
   flex-basis: auto;
 }
 
-.c19 {
+.c18 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1265,7 +1249,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c21 {
+  .c20 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1274,7 +1258,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c21 {
+  .c20 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1292,7 +1276,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c22 {
+  .c21 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -1301,7 +1285,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c27 {
+  .c26 {
     display: none;
   }
 }
@@ -1382,17 +1366,13 @@ Array [
                                 >
                                     <div
                                         className="c17"
-                                    >
-                                        <label
-                                            className="c18"
                                     />
                                 </div>
                             </div>
                         </div>
                     </div>
-                    </div>
                     <div
-                        className="c19"
+                        className="c18"
                     />
                     <div
                         className="c11"
@@ -1424,27 +1404,23 @@ Array [
                                 >
                                     <div
                                         className="c17"
-                                    >
-                                        <label
-                                            className="c18"
                                     />
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-                </div>
+                <div
+                    className="c19"
+                >
                     <div
                         className="c20"
                     >
                         <div
                             className="c21"
-                    >
-                        <div
-                            className="c22"
                         >
                             <button
-                                className="c23 c24 c25"
+                                className="c22 c23 c24"
                                 disabled={false}
                                 href=""
                                 onClick={[Function]}
@@ -1455,7 +1431,7 @@ Array [
                                 </span>
                             </button>
                             <button
-                                className="c26 c24 c25"
+                                className="c25 c23 c24"
                                 disabled={true}
                                 href=""
                                 type="submit"
@@ -1466,10 +1442,10 @@ Array [
                             </button>
                         </div>
                         <div
-                            className="c27"
+                            className="c26"
                         >
                             <button
-                                className="c28 c24 c25"
+                                className="c27 c23 c24"
                                 disabled={false}
                                 href=""
                                 icon={true}

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

@@ -26,6 +26,10 @@ const StyledLabel = Label.extend`
   ${is('normal')`
       font-weight: ${props => props.theme.font.weight.normal};
   `};
+
+    ${is('noMargin')`
+      margin: 0;
+  `};
 `;
 
 export default props => {