fix(my-joy-beta): fis badge position

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;
 }
 
-.c6 {
+.c7 {
   margin-top: 1.3125rem;
   margin-left: 0.75rem;
 }
@@ -50,7 +50,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   display: block;
 }
 
-.c9 {
+.c10 {
   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;
 }
 
-.c9::-moz-focus-inner,
-.c9[type='button']::-moz-focus-inner,
-.c9[type='reset']::-moz-focus-inner,
-.c9[type='submit']::-moz-focus-inner {
+.c10::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
+.c10[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c9:-moz-focusring,
-.c9[type='button']:-moz-focusring,
-.c9[type='reset']:-moz-focusring,
-.c9[type='submit']:-moz-focusring {
+.c10:-moz-focusring,
+.c10[type='button']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
+.c10[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
+.c10 + button,
+.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);
 }
 
-.c7:focus {
+.c8: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);
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:active,
-.c7:active:hover,
-.c7:active:focus {
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c7[disabled] {
+.c8[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
@@ -174,7 +174,23 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c11 {
+.c6 {
+  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;
@@ -193,7 +209,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c10 {
+.c11 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -309,6 +325,9 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
             placeholder="Example: mySQLdb"
             required={true}
           />
+          <label
+            className="c6"
+          />
         </div>
       </div>
     </div>
@@ -316,10 +335,10 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
       className="c1"
     >
       <div
-        className="c6"
+        className="c7"
       >
         <button
-          className="c7 c8 c9"
+          className="c8 c9 c10"
           disabled={undefined}
           href=""
           type="submit"
@@ -327,7 +346,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
           Add
         </button>
         <div
-          className="c10 c11"
+          className="c11 c12"
           height="0.25rem"
         />
       </div>
@@ -341,7 +360,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c6 {
+.c7 {
   margin-top: 1.3125rem;
   margin-left: 0.75rem;
 }
@@ -386,7 +405,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   display: block;
 }
 
-.c9 {
+.c10 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -399,36 +418,36 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c9::-moz-focus-inner,
-.c9[type='button']::-moz-focus-inner,
-.c9[type='reset']::-moz-focus-inner,
-.c9[type='submit']::-moz-focus-inner {
+.c10::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
+.c10[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c9:-moz-focusring,
-.c9[type='button']:-moz-focusring,
-.c9[type='reset']:-moz-focusring,
-.c9[type='submit']:-moz-focusring {
+.c10:-moz-focusring,
+.c10[type='button']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
+.c10[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
+.c10 + button,
+.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;
@@ -473,7 +492,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c7:focus {
+.c8:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -481,38 +500,38 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:active,
-.c7:active:hover,
-.c7:active:focus {
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c7[disabled] {
+.c8[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c7:focus {
+.c8:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c7:active,
-.c7:active:hover,
-.c7:active:focus {
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
@@ -532,7 +551,23 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c11 {
+.c6 {
+  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;
@@ -551,7 +586,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c10 {
+.c11 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -667,6 +702,9 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
             placeholder="Example: mySQLdb"
             required={true}
           />
+          <label
+            className="c6"
+          />
         </div>
       </div>
     </div>
@@ -674,10 +712,10 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
       className="c1"
     >
       <div
-        className="c6"
+        className="c7"
       >
         <button
-          className="c7 c8 c9"
+          className="c8 c9 c10"
           disabled={true}
           href=""
           type="submit"
@@ -685,7 +723,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
           Add
         </button>
         <div
-          className="c10 c11"
+          className="c11 c12"
           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;
 }
 
-.c19 {
+.c20 {
   margin-top: 0.375rem;
 }
 
@@ -18,7 +18,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   padding: 1.125rem;
 }
 
-.c24 {
+.c25 {
   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;
 }
 
-.c24::-moz-focus-inner,
-.c24[type='button']::-moz-focus-inner,
-.c24[type='reset']::-moz-focus-inner,
-.c24[type='submit']::-moz-focus-inner {
+.c25::-moz-focus-inner,
+.c25[type='button']::-moz-focus-inner,
+.c25[type='reset']::-moz-focus-inner,
+.c25[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c24:-moz-focusring,
-.c24[type='button']:-moz-focusring,
-.c24[type='reset']:-moz-focusring,
-.c24[type='submit']:-moz-focusring {
+.c25:-moz-focusring,
+.c25[type='button']:-moz-focusring,
+.c25[type='reset']:-moz-focusring,
+.c25[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;
 }
 
-.c22:focus {
+.c23: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);
 }
 
-.c22:hover {
+.c23:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c22:active,
-.c22:active:hover,
-.c22:active:focus {
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c22[disabled] {
+.c23[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c22:focus {
+.c23:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c22:hover {
+.c23:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c22:active,
-.c22:active:hover,
-.c22:active:focus {
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c25 {
+.c26 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -195,7 +195,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   margin: 0;
 }
 
-.c25:focus {
+.c26: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);
 }
 
-.c25:hover {
+.c26:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c25:active,
-.c25:active:hover,
-.c25:active:focus {
+.c26:active,
+.c26:active:hover,
+.c26:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c25[disabled] {
+.c26[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c25:focus {
+.c26:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c25:hover {
+.c26:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c25:active,
-.c25:active:hover,
-.c25:active:focus {
+.c26:active,
+.c26:active:hover,
+.c26:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c27 {
+.c28 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -297,7 +297,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   float: right;
 }
 
-.c27:focus {
+.c28: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);
 }
 
-.c27:hover {
+.c28:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c28:active,
+.c28:active:hover,
+.c28:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c27[disabled] {
+.c28[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c27:focus {
+.c28:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c27:hover {
+.c28:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c28:active,
+.c28:active:hover,
+.c28:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c27:focus {
+.c28:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c27:hover {
+.c28:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c28:active,
+.c28:active:hover,
+.c28:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c27 svg + span {
+.c28 svg + span {
   margin-left: 0.75rem;
 }
 
-.c27 svg {
+.c28 svg {
   max-height: 1.125rem;
 }
 
@@ -383,6 +383,22 @@ 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;
@@ -402,7 +418,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c20 {
+.c21 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -431,7 +447,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   display: block;
 }
 
-.c21 {
+.c22 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -441,7 +457,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   display: block;
 }
 
-.c26 {
+.c27 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -555,7 +571,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c18 {
+.c19 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -830,7 +846,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c20 {
+  .c21 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -839,7 +855,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c20 {
+  .c21 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -857,7 +873,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c21 {
+  .c22 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -866,7 +882,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c26 {
+  .c27 {
     display: none;
   }
 }
@@ -947,13 +963,17 @@ exports[`renders <AddForm /> without throwing 1`] = `
                 >
                   <div
                     className="c17"
-                  />
+                  >
+                    <label
+                      className="c18"
+                    />
+                  </div>
                 </div>
               </div>
             </div>
           </div>
           <div
-            className="c18"
+            className="c19"
           />
           <div
             className="c11"
@@ -985,23 +1005,27 @@ exports[`renders <AddForm /> without throwing 1`] = `
                 >
                   <div
                     className="c17"
-                  />
+                  >
+                    <label
+                      className="c18"
+                    />
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
         <div
-          className="c19"
+          className="c20"
         >
           <div
-            className="c20"
+            className="c21"
           >
             <div
-              className="c21"
+              className="c22"
             >
               <button
-                className="c22 c23 c24"
+                className="c23 c24 c25"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -1012,7 +1036,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c25 c23 c24"
+                className="c26 c24 c25"
                 disabled={true}
                 href=""
                 type="submit"
@@ -1023,10 +1047,10 @@ exports[`renders <AddForm /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c26"
+              className="c27"
             >
               <button
-                className="c27 c23 c24"
+                className="c28 c24 c25"
                 disabled={false}
                 href=""
                 icon={true}
@@ -1069,7 +1093,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c19 {
+.c20 {
   margin-top: 0.375rem;
 }
 
@@ -1082,7 +1106,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   padding: 1.125rem;
 }
 
-.c24 {
+.c25 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1095,36 +1119,36 @@ exports[`renders <EditForm /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c24::-moz-focus-inner,
-.c24[type='button']::-moz-focus-inner,
-.c24[type='reset']::-moz-focus-inner,
-.c24[type='submit']::-moz-focus-inner {
+.c25::-moz-focus-inner,
+.c25[type='button']::-moz-focus-inner,
+.c25[type='reset']::-moz-focus-inner,
+.c25[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c24:-moz-focusring,
-.c24[type='button']:-moz-focusring,
-.c24[type='reset']:-moz-focusring,
-.c24[type='submit']:-moz-focusring {
+.c25:-moz-focusring,
+.c25[type='button']:-moz-focusring,
+.c25[type='reset']:-moz-focusring,
+.c25[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;
@@ -1169,7 +1193,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin: 0;
 }
 
-.c22:focus {
+.c23:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1177,43 +1201,43 @@ exports[`renders <EditForm /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c22:hover {
+.c23:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c22:active,
-.c22:active:hover,
-.c22:active:focus {
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c22[disabled] {
+.c23[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c22:focus {
+.c23:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c22:hover {
+.c23:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c22:active,
-.c22:active:hover,
-.c22:active:focus {
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c25 {
+.c26 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1259,7 +1283,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin: 0;
 }
 
-.c25:focus {
+.c26:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1267,43 +1291,43 @@ exports[`renders <EditForm /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c25:hover {
+.c26:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c25:active,
-.c25:active:hover,
-.c25:active:focus {
+.c26:active,
+.c26:active:hover,
+.c26:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c25[disabled] {
+.c26[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c25:focus {
+.c26:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c25:hover {
+.c26:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c25:active,
-.c25:active:hover,
-.c25:active:focus {
+.c26:active,
+.c26:active:hover,
+.c26:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c27 {
+.c28 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1361,7 +1385,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   float: right;
 }
 
-.c27:focus {
+.c28:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1369,66 +1393,66 @@ exports[`renders <EditForm /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c27:hover {
+.c28:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c28:active,
+.c28:active:hover,
+.c28:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c27[disabled] {
+.c28[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c27:focus {
+.c28:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c27:hover {
+.c28:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c28:active,
+.c28:active:hover,
+.c28:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c27:focus {
+.c28:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c27:hover {
+.c28:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c28:active,
+.c28:active:hover,
+.c28:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c27 svg + span {
+.c28 svg + span {
   margin-left: 0.75rem;
 }
 
-.c27 svg {
+.c28 svg {
   max-height: 1.125rem;
 }
 
@@ -1447,6 +1471,22 @@ 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;
@@ -1466,7 +1506,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c20 {
+.c21 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1495,7 +1535,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   display: block;
 }
 
-.c21 {
+.c22 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1505,7 +1545,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   display: block;
 }
 
-.c26 {
+.c27 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1598,7 +1638,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c18 {
+.c19 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1884,7 +1924,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c20 {
+  .c21 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1893,7 +1933,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c20 {
+  .c21 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1911,7 +1951,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c21 {
+  .c22 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -1920,7 +1960,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c26 {
+  .c27 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -2021,13 +2061,17 @@ exports[`renders <EditForm /> without throwing 1`] = `
                 >
                   <div
                     className="c17"
-                  />
+                  >
+                    <label
+                      className="c18"
+                    />
+                  </div>
                 </div>
               </div>
             </div>
           </div>
           <div
-            className="c18"
+            className="c19"
           />
           <div
             className="c11"
@@ -2059,23 +2103,27 @@ exports[`renders <EditForm /> without throwing 1`] = `
                 >
                   <div
                     className="c17"
-                  />
+                  >
+                    <label
+                      className="c18"
+                    />
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
         <div
-          className="c19"
+          className="c20"
         >
           <div
-            className="c20"
+            className="c21"
           >
             <div
-              className="c21"
+              className="c22"
             >
               <button
-                className="c22 c23 c24"
+                className="c23 c24 c25"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -2086,7 +2134,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c25 c23 c24"
+                className="c26 c24 c25"
                 disabled={true}
                 href=""
                 type="submit"
@@ -2097,10 +2145,10 @@ exports[`renders <EditForm /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c26"
+              className="c27"
             >
               <button
-                className="c27 c23 c24"
+                className="c28 c24 c25"
                 disabled={false}
                 href=""
                 icon={true}

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

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

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

@@ -932,6 +932,11 @@ exports[`renders <Package /> without throwing 1`] = `
   margin-left: 0.375rem;
 }
 
+.c12 {
+  display: inline-block;
+  margin-right: 0.375rem;
+}
+
 .c9 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1243,7 +1248,11 @@ exports[`renders <Package /> without throwing 1`] = `
     name="td"
     selected={false}
   >
-    1
+    <div
+      className="c12"
+    >
+      1
+    </div>
   </td>
   <td
     className="c2"

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

@@ -151,11 +151,9 @@ export const Package = ({
       {bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}
     </TableTd>
     <TableTd right selected={selected} bold={sortBy === 'disk'}>
-      {bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })}
+      <Margin inline right={1}>{bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })}</Margin>
       {ssd && (
-        <Margin inline left={1}>
           <Sup badge>SSD</Sup>
-        </Margin>
       )}
     </TableTd>
     {hasVms && (

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

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

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

@@ -210,3 +210,66 @@ exports[`Button Small 1`] = `
   Inspire the lazy
 </small>
 `;
+
+exports[`Button Sup 1`] = `
+.c0 {
+  position: absolute;
+  margin-top: -0.375rem;
+  border-radius: 0.1875rem;
+  font-weight: 600;
+  line-height: normal;
+  font-size: 0.5rem;
+  color: rgb(59,70,204);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+<sup
+  className="c0"
+>
+  Inspire the lazy
+</sup>
+`;
+
+exports[`Button Sup badge 1`] = `
+.c0 {
+  position: absolute;
+  margin-top: -0.375rem;
+  border-radius: 0.1875rem;
+  font-weight: 600;
+  line-height: normal;
+  font-size: 0.5rem;
+  color: rgb(59,70,204);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0.125rem 0.1875rem;
+  background: rgb(59,70,204);
+  color: rgb(255,255,255);
+}
+
+<sup
+  className="c0"
+>
+  Inspire the lazy
+</sup>
+`;

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

@@ -3,7 +3,7 @@ import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 import remcalc from 'remcalc';
 
-import { P, H1, H2, H3, H4, H5, H6, Small } from '../';
+import { P, H1, H2, H3, H4, H5, H6, Small, Sup } from '../';
 import { Theme } from '../../mocks';
 import theme from '../../theme';
 
@@ -123,4 +123,32 @@ describe('Button', () => {
     expect(tree).toHaveStyleRule('color', theme.text.replace(/ /g, ''));
     expect(tree).toHaveStyleRule('font-size', remcalc(13));
   });
+
+  test('Sup', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Sup>Inspire the lazy</Sup>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('color', theme.primary.replace(/ /g, ''));
+    expect(tree).toHaveStyleRule('font-size', remcalc(8));
+  });
+
+  test('Sup badge', () => {
+    const tree = renderer
+      .create(
+        <Theme>
+          <Sup badge>Inspire the lazy</Sup>
+        </Theme>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('color', theme.white.replace(/ /g, ''));
+    expect(tree).toHaveStyleRule('font-size', remcalc(8));
+  });
 });

packages/ui-toolkit/src/text/sup.js

@@ -4,7 +4,7 @@ import is from 'styled-is';
 
 export default styled.sup`
   position: absolute;
-  margin-top: ${remcalc(-20)};
+  margin-top: ${remcalc(-6)};
   border-radius: ${remcalc(3)};
   font-weight: ${props => props.theme.font.weight.semibold};
   line-height: normal;