Update storyshots

addons/knobs/src/components/__tests__/__snapshots__/Panel.js.snap

@@ -40,8 +40,8 @@ Array [
 
 .emotion-0 {
   min-width: 100px;
-  min-height: 32px;
+  font-weight: 700;
-  margin-right: 16px;
+  margin-right: 15px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -135,8 +135,8 @@ Array [
 
 .emotion-0 {
   min-width: 100px;
-  min-height: 32px;
+  font-weight: 700;
-  margin-right: 16px;
+  margin-right: 15px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;

examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot

@@ -207,32 +207,24 @@ exports[`Storyshots Button with new info 1`] = `
             >
               "Container" Component
             </h3>
-            <table>
+            <table
+              class="info-table"
+            >
               <thead>
                 <tr>
-                  <th
+                  <th>
-                    style="text-align:left;vertical-align:top"
-                  >
                     property
                   </th>
-                  <th
+                  <th>
-                    style="text-align:left;vertical-align:top"
-                  >
                     propType
                   </th>
-                  <th
+                  <th>
-                    style="text-align:left;vertical-align:top"
-                  >
                     required
                   </th>
-                  <th
+                  <th>
-                    style="text-align:left;vertical-align:top"
-                  >
                     default
                   </th>
-                  <th
+                  <th>
-                    style="text-align:left;vertical-align:top"
-                  >
                     description
                   </th>
                 </tr>
@@ -240,81 +232,65 @@ exports[`Storyshots Button with new info 1`] = `
               <tbody>
                 <tr>
                   <td
-                    style="padding-right:10px;vertical-align:top"
+                    class="info-table-monospace"
                   >
                     children
                   </td>
                   <td
-                    style="padding-right:10px;vertical-align:top"
+                    class="info-table-monospace"
                   >
                     <span>
                       node
                     </span>
                   </td>
-                  <td
+                  <td>
-                    style="padding-right:10px;vertical-align:top"
-                  >
                     yes
                   </td>
-                  <td
+                  <td>
-                    style="padding-right:10px;vertical-align:top"
-                  >
                     -
                   </td>
-                  <td
+                  <td />
-                    style="padding-right:10px;vertical-align:top"
-                  />
                 </tr>
                 <tr>
                   <td
-                    style="padding-right:10px;vertical-align:top"
+                    class="info-table-monospace"
                   >
                     isAmazing
                   </td>
                   <td
-                    style="padding-right:10px;vertical-align:top"
+                    class="info-table-monospace"
                   >
                     <span>
                       bool
                     </span>
                   </td>
-                  <td
+                  <td>
-                    style="padding-right:10px;vertical-align:top"
-                  >
                     -
                   </td>
-                  <td
+                  <td>
-                    style="padding-right:10px;vertical-align:top"
-                  >
                     <span>
                       false
                     </span>
                   </td>
-                  <td
+                  <td />
-                    style="padding-right:10px;vertical-align:top"
-                  />
                 </tr>
                 <tr>
                   <td
-                    style="padding-right:10px;vertical-align:top"
+                    class="info-table-monospace"
                   >
                     age
                   </td>
                   <td
-                    style="padding-right:10px;vertical-align:top"
+                    class="info-table-monospace"
                   >
                     <span>
                       other
                     </span>
                   </td>
-                  <td
+                  <td>
-                    style="padding-right:10px;vertical-align:top"
-                  >
                     -
                   </td>
-                  <td
+                  <td>
-                    style="padding-right:10px;vertical-align:top"
-                  >
                     <span>
                       {
                       <span>
@@ -339,38 +315,30 @@ exports[`Storyshots Button with new info 1`] = `
                       }
                     </span>
                   </td>
-                  <td
+                  <td />
-                    style="padding-right:10px;vertical-align:top"
-                  />
                 </tr>
                 <tr>
                   <td
-                    style="padding-right:10px;vertical-align:top"
+                    class="info-table-monospace"
                   >
                     title
                   </td>
                   <td
-                    style="padding-right:10px;vertical-align:top"
+                    class="info-table-monospace"
                   >
                     <span>
                       string
                     </span>
                   </td>
-                  <td
+                  <td>
-                    style="padding-right:10px;vertical-align:top"
-                  >
                     -
                   </td>
-                  <td
+                  <td>
-                    style="padding-right:10px;vertical-align:top"
-                  >
                     <span>
                       the best container ever
                     </span>
                   </td>
-                  <td
+                  <td />
-                    style="padding-right:10px;vertical-align:top"
-                  />
                 </tr>
               </tbody>
             </table>

examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot

@@ -95,6 +95,25 @@ exports[`Storyshots Addons|A11y/Form With label 1`] = `
   margin-bottom: 3rem;
 }
 
+.emotion-0 {
+  min-width: 100px;
+  font-weight: 700;
+  margin-right: 15px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  line-height: 16px;
+}
+
 .emotion-1 {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -147,25 +166,6 @@ exports[`Storyshots Addons|A11y/Form With label 1`] = `
   color: #999999;
 }
 
-.emotion-0 {
-  min-width: 100px;
-  min-height: 32px;
-  margin-right: 16px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  line-height: 16px;
-}
-
 <label
   class="emotion-2"
 >

lib/components/src/Button/__snapshots__/Button.stories.storyshot

@@ -13,6 +13,80 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
   fill: currentColor;
 }
 
+.emotion-3 {
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  overflow: hidden;
+  padding: 10px 16px;
+  position: relative;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  -webkit-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+  vertical-align: top;
+  white-space: nowrap;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  opacity: 1;
+  margin: 0;
+  background: transparent;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+  background: #fafafa;
+  color: #333333;
+  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
+  border-radius: 4px;
+  display: inline;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  overflow: visible;
+  z-index: 2;
+}
+
+.emotion-3 svg {
+  display: inline-block;
+  height: 14px;
+  width: 14px;
+  vertical-align: top;
+  margin-right: 4px;
+  margin-top: -1px;
+  margin-bottom: -1px;
+  pointer-events: none;
+}
+
+.emotion-3 svg path {
+  fill: currentColor;
+}
+
+.emotion-3:hover {
+  background: #f2f2f2;
+}
+
+.emotion-3:active {
+  background: #FFFFFF;
+}
+
+.emotion-3:focus {
+  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
+}
+
+.emotion-3:hover {
+  -webkit-transform: none;
+  -ms-transform: none;
+  transform: none;
+}
+
 .emotion-0 {
   border: 0;
   border-radius: 3em;
@@ -201,80 +275,6 @@ exports[`Storyshots Basics|Button all buttons 1`] = `
   box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
 }
 
-.emotion-3 {
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  overflow: hidden;
-  padding: 10px 16px;
-  position: relative;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  vertical-align: top;
-  white-space: nowrap;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  opacity: 1;
-  margin: 0;
-  background: transparent;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1;
-  background: #fafafa;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  display: inline;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  overflow: visible;
-  z-index: 2;
-}
-
-.emotion-3 svg {
-  display: inline-block;
-  height: 14px;
-  width: 14px;
-  vertical-align: top;
-  margin-right: 4px;
-  margin-top: -1px;
-  margin-bottom: -1px;
-  pointer-events: none;
-}
-
-.emotion-3 svg path {
-  fill: currentColor;
-}
-
-.emotion-3:hover {
-  background: #f2f2f2;
-}
-
-.emotion-3:active {
-  background: #FFFFFF;
-}
-
-.emotion-3:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-3:hover {
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
 .emotion-4 {
   border: 0;
   border-radius: 3em;

lib/components/src/tabs/__snapshots__/tabs.stories.storyshot

@@ -1,6 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = `
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  background: #FFFFFF;
+  color: #999999;
+  height: 40px;
+  position: relative;
+  overflow: visible;
+  overflow-x: visible;
+  overflow-y: visible;
+  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
+}
+
 .emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -27,6 +46,51 @@ exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = `
   margin-left: 0;
 }
 
+.emotion-0 {
+  white-space: normal;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding: 0 15px;
+  text-transform: capitalize;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  height: 40px;
+  line-height: 12px;
+  cursor: pointer;
+  background: transparent;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  font-weight: bold;
+  font-size: 13px;
+  color: inherit;
+  border-bottom-color: transparent;
+}
+
+.emotion-0:empty {
+  display: none;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #1EA7FD;
+}
+
 .emotion-2 {
   white-space: normal;
   display: -webkit-inline-box;
@@ -76,70 +140,6 @@ exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = `
   display: block;
 }
 
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  background: #FFFFFF;
-  color: #999999;
-  height: 40px;
-  position: relative;
-  overflow: visible;
-  overflow-x: visible;
-  overflow-y: visible;
-  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
-}
-
-.emotion-0 {
-  white-space: normal;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  overflow: hidden;
-  vertical-align: top;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  height: 40px;
-  line-height: 12px;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: inherit;
-  border-bottom-color: transparent;
-}
-
-.emotion-0:empty {
-  display: none;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
 .emotion-10 {
   display: block;
   position: relative;
@@ -282,6 +282,25 @@ exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = `
 `;
 
 exports[`Storyshots Basics|Tabs stateful - no initial 1`] = `
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  background: #FFFFFF;
+  color: #999999;
+  height: 40px;
+  position: relative;
+  overflow: visible;
+  overflow-x: visible;
+  overflow-y: visible;
+  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
+}
+
 .emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -308,6 +327,51 @@ exports[`Storyshots Basics|Tabs stateful - no initial 1`] = `
   margin-left: 0;
 }
 
+.emotion-1 {
+  white-space: normal;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding: 0 15px;
+  text-transform: capitalize;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  height: 40px;
+  line-height: 12px;
+  cursor: pointer;
+  background: transparent;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  font-weight: bold;
+  font-size: 13px;
+  color: inherit;
+  border-bottom-color: transparent;
+}
+
+.emotion-1:empty {
+  display: none;
+}
+
+.emotion-1:focus {
+  outline: 0 none;
+  border-bottom-color: #1EA7FD;
+}
+
 .emotion-0 {
   white-space: normal;
   display: -webkit-inline-box;
@@ -357,70 +421,6 @@ exports[`Storyshots Basics|Tabs stateful - no initial 1`] = `
   display: block;
 }
 
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  background: #FFFFFF;
-  color: #999999;
-  height: 40px;
-  position: relative;
-  overflow: visible;
-  overflow-x: visible;
-  overflow-y: visible;
-  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
-}
-
-.emotion-1 {
-  white-space: normal;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  overflow: hidden;
-  vertical-align: top;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  height: 40px;
-  line-height: 12px;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: inherit;
-  border-bottom-color: transparent;
-}
-
-.emotion-1:empty {
-  display: none;
-}
-
-.emotion-1:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
 .emotion-10 {
   display: block;
   position: relative;
@@ -519,6 +519,25 @@ exports[`Storyshots Basics|Tabs stateful - no initial 1`] = `
 `;
 
 exports[`Storyshots Basics|Tabs stateful - static 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  background: #FFFFFF;
+  color: #999999;
+  height: 40px;
+  position: relative;
+  overflow: visible;
+  overflow-x: visible;
+  overflow-y: visible;
+  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
+}
+
 .emotion-3 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -545,6 +564,51 @@ exports[`Storyshots Basics|Tabs stateful - static 1`] = `
   margin-left: 0;
 }
 
+.emotion-0 {
+  white-space: normal;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding: 0 15px;
+  text-transform: capitalize;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  height: 40px;
+  line-height: 12px;
+  cursor: pointer;
+  background: transparent;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  font-weight: bold;
+  font-size: 13px;
+  color: inherit;
+  border-bottom-color: transparent;
+}
+
+.emotion-0:empty {
+  display: none;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #1EA7FD;
+}
+
 .emotion-1 {
   white-space: normal;
   display: -webkit-inline-box;
@@ -594,70 +658,6 @@ exports[`Storyshots Basics|Tabs stateful - static 1`] = `
   display: block;
 }
 
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  background: #FFFFFF;
-  color: #999999;
-  height: 40px;
-  position: relative;
-  overflow: visible;
-  overflow-x: visible;
-  overflow-y: visible;
-  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
-}
-
-.emotion-0 {
-  white-space: normal;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  overflow: hidden;
-  vertical-align: top;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  height: 40px;
-  line-height: 12px;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: inherit;
-  border-bottom-color: transparent;
-}
-
-.emotion-0:empty {
-  display: none;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
 .emotion-6 {
   display: block;
   position: relative;
@@ -714,6 +714,25 @@ exports[`Storyshots Basics|Tabs stateful - static 1`] = `
 `;
 
 exports[`Storyshots Basics|Tabs stateless - absolute 1`] = `
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  background: #FFFFFF;
+  color: #999999;
+  height: 40px;
+  position: relative;
+  overflow: visible;
+  overflow-x: visible;
+  overflow-y: visible;
+  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
+}
+
 .emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -740,6 +759,51 @@ exports[`Storyshots Basics|Tabs stateless - absolute 1`] = `
   margin-left: 0;
 }
 
+.emotion-0 {
+  white-space: normal;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding: 0 15px;
+  text-transform: capitalize;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  height: 40px;
+  line-height: 12px;
+  cursor: pointer;
+  background: transparent;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  font-weight: bold;
+  font-size: 13px;
+  color: inherit;
+  border-bottom-color: transparent;
+}
+
+.emotion-0:empty {
+  display: none;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #1EA7FD;
+}
+
 .emotion-2 {
   white-space: normal;
   display: -webkit-inline-box;
@@ -797,70 +861,6 @@ exports[`Storyshots Basics|Tabs stateless - absolute 1`] = `
   width: 100%;
 }
 
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  background: #FFFFFF;
-  color: #999999;
-  height: 40px;
-  position: relative;
-  overflow: visible;
-  overflow-x: visible;
-  overflow-y: visible;
-  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
-}
-
-.emotion-0 {
-  white-space: normal;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  overflow: hidden;
-  vertical-align: top;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  height: 40px;
-  line-height: 12px;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: inherit;
-  border-bottom-color: transparent;
-}
-
-.emotion-0:empty {
-  display: none;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
 .emotion-9 {
   display: none;
 }
@@ -1012,6 +1012,25 @@ exports[`Storyshots Basics|Tabs stateless - absolute 1`] = `
 `;
 
 exports[`Storyshots Basics|Tabs stateless - bordered 1`] = `
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  background: #FFFFFF;
+  color: #999999;
+  height: 40px;
+  position: relative;
+  overflow: visible;
+  overflow-x: visible;
+  overflow-y: visible;
+  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
+}
+
 .emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1038,70 +1057,6 @@ exports[`Storyshots Basics|Tabs stateless - bordered 1`] = `
   margin-left: 0;
 }
 
-.emotion-2 {
-  white-space: normal;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  overflow: hidden;
-  vertical-align: top;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  height: 40px;
-  line-height: 12px;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: #1EA7FD;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-2:empty {
-  display: none;
-}
-
-.emotion-2:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  background: #FFFFFF;
-  color: #999999;
-  height: 40px;
-  position: relative;
-  overflow: visible;
-  overflow-x: visible;
-  overflow-y: visible;
-  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
-}
-
 .emotion-0 {
   white-space: normal;
   display: -webkit-inline-box;
@@ -1147,6 +1102,51 @@ exports[`Storyshots Basics|Tabs stateless - bordered 1`] = `
   border-bottom-color: #1EA7FD;
 }
 
+.emotion-2 {
+  white-space: normal;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding: 0 15px;
+  text-transform: capitalize;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  height: 40px;
+  line-height: 12px;
+  cursor: pointer;
+  background: transparent;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  font-weight: bold;
+  font-size: 13px;
+  color: #1EA7FD;
+  border-bottom-color: #1EA7FD;
+}
+
+.emotion-2:empty {
+  display: none;
+}
+
+.emotion-2:focus {
+  outline: 0 none;
+  border-bottom-color: #1EA7FD;
+}
+
 .emotion-10 {
   display: block;
   position: relative;
@@ -1295,10 +1295,6 @@ exports[`Storyshots Basics|Tabs stateless - bordered 1`] = `
 `;
 
 exports[`Storyshots Basics|Tabs stateless - empty 1`] = `
-.emotion-0 {
-  font-weight: 700;
-}
-
 .emotion-1 {
   padding: 30px;
   text-align: center;
@@ -1306,6 +1302,10 @@ exports[`Storyshots Basics|Tabs stateless - empty 1`] = `
   font-size: 13px;
 }
 
+.emotion-0 {
+  font-weight: 700;
+}
+
 <div
   style="height:calc(100vh - 20px)"
 >
@@ -1348,51 +1348,6 @@ exports[`Storyshots Basics|Tabs stateless - no scrolling 1`] = `
   margin-left: 0;
 }
 
-.emotion-2 {
-  white-space: normal;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  overflow: hidden;
-  vertical-align: top;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  height: 40px;
-  line-height: 12px;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: #1EA7FD;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-2:empty {
-  display: none;
-}
-
-.emotion-2:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
 .emotion-0 {
   white-space: normal;
   display: -webkit-inline-box;
@@ -1438,6 +1393,51 @@ exports[`Storyshots Basics|Tabs stateless - no scrolling 1`] = `
   border-bottom-color: #1EA7FD;
 }
 
+.emotion-2 {
+  white-space: normal;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding: 0 15px;
+  text-transform: capitalize;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  height: 40px;
+  line-height: 12px;
+  cursor: pointer;
+  background: transparent;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  font-weight: bold;
+  font-size: 13px;
+  color: #1EA7FD;
+  border-bottom-color: #1EA7FD;
+}
+
+.emotion-2:empty {
+  display: none;
+}
+
+.emotion-2:focus {
+  outline: 0 none;
+  border-bottom-color: #1EA7FD;
+}
+
 .emotion-10 {
   display: block;
   position: relative;
@@ -1605,6 +1605,25 @@ exports[`Storyshots Basics|Tabs stateless - no scrolling 1`] = `
 `;
 
 exports[`Storyshots Basics|Tabs stateless - with tools 1`] = `
+.emotion-9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  background: #FFFFFF;
+  color: #999999;
+  height: 40px;
+  position: relative;
+  overflow: visible;
+  overflow-x: visible;
+  overflow-y: visible;
+  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
+}
+
 .emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1631,6 +1650,51 @@ exports[`Storyshots Basics|Tabs stateless - with tools 1`] = `
   margin-left: 0;
 }
 
+.emotion-0 {
+  white-space: normal;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding: 0 15px;
+  text-transform: capitalize;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  height: 40px;
+  line-height: 12px;
+  cursor: pointer;
+  background: transparent;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  font-weight: bold;
+  font-size: 13px;
+  color: inherit;
+  border-bottom-color: transparent;
+}
+
+.emotion-0:empty {
+  display: none;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #1EA7FD;
+}
+
 .emotion-2 {
   white-space: normal;
   display: -webkit-inline-box;
@@ -1691,70 +1755,6 @@ exports[`Storyshots Basics|Tabs stateless - with tools 1`] = `
   display: block;
 }
 
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  background: #FFFFFF;
-  color: #999999;
-  height: 40px;
-  position: relative;
-  overflow: visible;
-  overflow-x: visible;
-  overflow-y: visible;
-  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
-}
-
-.emotion-0 {
-  white-space: normal;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  overflow: hidden;
-  vertical-align: top;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  height: 40px;
-  line-height: 12px;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: inherit;
-  border-bottom-color: transparent;
-}
-
-.emotion-0:empty {
-  display: none;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
 .emotion-11 {
   display: block;
   position: relative;

lib/components/src/tooltip/__snapshots__/ListItem.stories.storyshot

@@ -13,21 +13,6 @@ exports[`Storyshots basics|Tooltip/ListItem active icon 1`] = `
   fill: currentColor;
 }
 
-.emotion-1 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-1 > * + * {
-  padding-left: 10px;
-}
-
 .emotion-5 {
   font-size: 12px;
   -webkit-transition: all 150ms ease-out;
@@ -64,6 +49,21 @@ exports[`Storyshots basics|Tooltip/ListItem active icon 1`] = `
   opacity: 1;
 }
 
+.emotion-1 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  text-align: left;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-1 > * + * {
+  padding-left: 10px;
+}
+
 .emotion-0 {
   color: #333333;
   color: #FF4785;
@@ -183,21 +183,6 @@ exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
   fill: currentColor;
 }
 
-.emotion-1 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-1 > * + * {
-  padding-left: 10px;
-}
-
 .emotion-2 {
   font-size: 12px;
   -webkit-transition: all 150ms ease-out;
@@ -234,6 +219,25 @@ exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
   opacity: 1;
 }
 
+.emotion-1 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  text-align: left;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-1 > * + * {
+  padding-left: 10px;
+}
+
+.emotion-3 {
+  color: #333333;
+}
+
 .emotion-0 {
   color: #333333;
   -webkit-animation: animation-0 1.5s ease-in-out infinite;
@@ -243,10 +247,6 @@ exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
   cursor: progress;
 }
 
-.emotion-3 {
-  color: #333333;
-}
-
 .emotion-10 svg {
   -webkit-transition: all 200ms ease-out;
   transition: all 200ms ease-out;
@@ -546,21 +546,6 @@ exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
 `;
 
 exports[`Storyshots basics|Tooltip/ListItem default 1`] = `
-.emotion-1 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-1 > * + * {
-  padding-left: 10px;
-}
-
 .emotion-2 {
   font-size: 12px;
   -webkit-transition: all 150ms ease-out;
@@ -597,6 +582,21 @@ exports[`Storyshots basics|Tooltip/ListItem default 1`] = `
   opacity: 1;
 }
 
+.emotion-1 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  text-align: left;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-1 > * + * {
+  padding-left: 10px;
+}
+
 .emotion-0 {
   color: #333333;
 }
@@ -629,21 +629,6 @@ exports[`Storyshots basics|Tooltip/ListItem default icon 1`] = `
   fill: currentColor;
 }
 
-.emotion-1 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-1 > * + * {
-  padding-left: 10px;
-}
-
 .emotion-5 {
   font-size: 12px;
   -webkit-transition: all 150ms ease-out;
@@ -680,6 +665,21 @@ exports[`Storyshots basics|Tooltip/ListItem default icon 1`] = `
   opacity: 1;
 }
 
+.emotion-1 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  text-align: left;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-1 > * + * {
+  padding-left: 10px;
+}
+
 .emotion-0 {
   color: #333333;
 }
@@ -892,21 +892,6 @@ exports[`Storyshots basics|Tooltip/ListItem loading 1`] = `
   }
 }
 
-.emotion-1 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-1 > * + * {
-  padding-left: 10px;
-}
-
 .emotion-2 {
   font-size: 12px;
   -webkit-transition: all 150ms ease-out;
@@ -943,6 +928,21 @@ exports[`Storyshots basics|Tooltip/ListItem loading 1`] = `
   opacity: 1;
 }
 
+.emotion-1 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  text-align: left;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-1 > * + * {
+  padding-left: 10px;
+}
+
 .emotion-0 {
   color: #333333;
   -webkit-animation: animation-0 1.5s ease-in-out infinite;
@@ -970,21 +970,6 @@ exports[`Storyshots basics|Tooltip/ListItem loading 1`] = `
 `;
 
 exports[`Storyshots basics|Tooltip/ListItem w/positions 1`] = `
-.emotion-3 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-3 > * + * {
-  padding-left: 10px;
-}
-
 .emotion-5 {
   font-size: 12px;
   -webkit-transition: all 150ms ease-out;
@@ -1021,6 +1006,21 @@ exports[`Storyshots basics|Tooltip/ListItem w/positions 1`] = `
   opacity: 1;
 }
 
+.emotion-3 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  text-align: left;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-3 > * + * {
+  padding-left: 10px;
+}
+
 .emotion-1 {
   color: #333333;
 }
@@ -1077,21 +1077,6 @@ exports[`Storyshots basics|Tooltip/ListItem w/positions 1`] = `
 `;
 
 exports[`Storyshots basics|Tooltip/ListItem w/positions active 1`] = `
-.emotion-3 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-3 > * + * {
-  padding-left: 10px;
-}
-
 .emotion-5 {
   font-size: 12px;
   -webkit-transition: all 150ms ease-out;
@@ -1128,6 +1113,21 @@ exports[`Storyshots basics|Tooltip/ListItem w/positions active 1`] = `
   opacity: 1;
 }
 
+.emotion-3 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  text-align: left;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-3 > * + * {
+  padding-left: 10px;
+}
+
 .emotion-0 svg {
   opacity: 1;
 }

lib/components/src/tooltip/__snapshots__/TooltipLinkList.stories.storyshot

@@ -1,24 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots basics/Tooltip/TooltipLinkList links 1`] = `
-.emotion-3 {
+.emotion-8 {
-  -webkit-flex: 1;
+  min-width: 180px;
-  -ms-flex: 1;
+  overflow: hidden;
-  flex: 1;
+  border-radius: 8px;
-  text-align: left;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-3 > * + * {
-  padding-left: 10px;
-}
-
-.emotion-0 {
-  display: inline-block;
-  cursor: pointer;
 }
 
 .emotion-4 {
@@ -57,10 +43,30 @@ exports[`Storyshots basics/Tooltip/TooltipLinkList links 1`] = `
   opacity: 1;
 }
 
+.emotion-3 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  text-align: left;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-3 > * + * {
+  padding-left: 10px;
+}
+
 .emotion-2 {
   color: #333333;
 }
 
+.emotion-0 {
+  display: inline-block;
+  cursor: pointer;
+}
+
 .emotion-9 {
   display: inline-block;
   z-index: 2147483647;
@@ -96,12 +102,6 @@ exports[`Storyshots basics/Tooltip/TooltipLinkList links 1`] = `
   border-right-color: transparent;
 }
 
-.emotion-8 {
-  min-width: 180px;
-  overflow: hidden;
-  border-radius: 8px;
-}
-
 <div
   style="height:300px"
 >
@@ -156,24 +156,10 @@ exports[`Storyshots basics/Tooltip/TooltipLinkList links 1`] = `
 `;
 
 exports[`Storyshots basics/Tooltip/TooltipLinkList links and callback 1`] = `
-.emotion-3 {
+.emotion-11 {
-  -webkit-flex: 1;
+  min-width: 180px;
-  -ms-flex: 1;
+  overflow: hidden;
-  flex: 1;
+  border-radius: 8px;
-  text-align: left;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-3 > * + * {
-  padding-left: 10px;
-}
-
-.emotion-0 {
-  display: inline-block;
-  cursor: pointer;
 }
 
 .emotion-4 {
@@ -212,10 +198,30 @@ exports[`Storyshots basics/Tooltip/TooltipLinkList links and callback 1`] = `
   opacity: 1;
 }
 
+.emotion-3 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  text-align: left;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-3 > * + * {
+  padding-left: 10px;
+}
+
 .emotion-2 {
   color: #333333;
 }
 
+.emotion-0 {
+  display: inline-block;
+  cursor: pointer;
+}
+
 .emotion-12 {
   display: inline-block;
   z-index: 2147483647;
@@ -251,12 +257,6 @@ exports[`Storyshots basics/Tooltip/TooltipLinkList links and callback 1`] = `
   border-right-color: transparent;
 }
 
-.emotion-11 {
-  min-width: 180px;
-  overflow: hidden;
-  border-radius: 8px;
-}
-
 <div
   style="height:300px"
 >

lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot

@@ -313,7 +313,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 0 1`] = `
   border-bottom: 3px solid transparent;
   font-weight: bold;
   font-size: 13px;
-  opacity: 0.4;
+  color: inherit;
   border-bottom-color: transparent;
 }
 
@@ -602,7 +602,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 1 1`] = `
   border-bottom: 3px solid transparent;
   font-weight: bold;
   font-size: 13px;
-  opacity: 0.4;
+  color: inherit;
   border-bottom-color: transparent;
 }
 
@@ -891,7 +891,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 2 1`] = `
   border-bottom: 3px solid transparent;
   font-weight: bold;
   font-size: 13px;
-  opacity: 0.4;
+  color: inherit;
   border-bottom-color: transparent;
 }
 
@@ -1180,7 +1180,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) page 1`] = `
   border-bottom: 3px solid transparent;
   font-weight: bold;
   font-size: 13px;
-  opacity: 0.4;
+  color: inherit;
   border-bottom-color: transparent;
 }
 

lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot

@@ -23,13 +23,14 @@ exports[`Storyshots UI|Panel default 1`] = `
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
+  background: #FFFFFF;
   color: #999999;
   height: 40px;
   position: relative;
   overflow: visible;
   overflow-x: visible;
   overflow-y: visible;
-  background: undefined linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
+  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
 }
 
 .emotion-3 {
@@ -90,7 +91,7 @@ exports[`Storyshots UI|Panel default 1`] = `
   border-bottom: 3px solid transparent;
   font-weight: bold;
   font-size: 13px;
-  opacity: 0.4;
+  color: inherit;
   border-bottom-color: transparent;
 }
 
@@ -285,7 +286,7 @@ exports[`Storyshots UI|Panel no panels 1`] = `
 .emotion-1 {
   padding: 30px;
   text-align: center;
-  color: #666666;
+  color: #333333;
   font-size: 13px;
 }
 

lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot

@@ -71,13 +71,14 @@ Array [
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
+  background: #FFFFFF;
   color: #999999;
   height: 40px;
   position: relative;
   overflow: auto;
   overflow-x: auto;
   overflow-y: hidden;
-  background: undefined linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
+  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
   position: absolute;
   left: 0;
   right: 0;
@@ -342,7 +343,7 @@ Array [
   border-bottom: 3px solid transparent;
   font-weight: bold;
   font-size: 13px;
-  opacity: 0.4;
+  color: inherit;
   border-bottom-color: transparent;
 }
 
@@ -455,13 +456,14 @@ Array [
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
+  background: #FFFFFF;
   color: #999999;
   height: 40px;
   position: relative;
   overflow: auto;
   overflow-x: auto;
   overflow-y: hidden;
-  background: undefined linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
+  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
   position: absolute;
   left: 0;
   right: 0;

lib/ui/src/settings/__snapshots__/about.stories.storyshot

@@ -23,13 +23,14 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
+  background: #FFFFFF;
   color: #999999;
   height: 40px;
   position: relative;
   overflow: visible;
   overflow-x: visible;
   overflow-y: visible;
-  background: undefined linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
+  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
 }
 
 .emotion-2 {
@@ -525,13 +526,14 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
+  background: #FFFFFF;
   color: #999999;
   height: 40px;
   position: relative;
   overflow: visible;
   overflow-x: visible;
   overflow-y: visible;
-  background: undefined linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
+  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
 }
 
 .emotion-2 {
@@ -1523,6 +1525,7 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  background: #FFFFFF;
 }
 
 .emotion-20 {
@@ -1537,7 +1540,8 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #666666;
+  color: #333333;
+  background: #FFFFFF;
   font-size: 12px;
   line-height: 16px;
   font-weight: 700;
@@ -1844,13 +1848,14 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
+  background: #FFFFFF;
   color: #999999;
   height: 40px;
   position: relative;
   overflow: visible;
   overflow-x: visible;
   overflow-y: visible;
-  background: undefined linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
+  background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
 }
 
 .emotion-2 {