@pareto-engineering/design-system 4.0.0-alpha.18 → 4.0.0-alpha.21

package/tests/__snapshots__/Storyshots.test.js.snap

@@ -598,11 +598,7 @@ exports[`Storyshots a/ContentTree Base 1`] = `
   </main>
   <div
     className="base content-tree v5 ml-v"
-  >
-    <ul
-      className="base tree"
-    />
-  </div>
+  />
 </div>
 `;
 
@@ -611,71 +607,86 @@ exports[`Storyshots a/Conversation Base 1`] = `
   className="base card base conversation y-background-near"
 >
   <div
-    className="base section base message x-main2"
+    className="base section"
   >
-    <p
-      className="sender"
-    >
-      Humbl
-      :
-    </p>
     <div
-      className="message-content"
+      className="base message x-main2 theirs"
     >
-      <p>
-        Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.
+      <p
+        className="sender"
+      >
+        Humbl
+        :
       </p>
+      <div
+        className="message-content"
+      >
+        <p>
+          Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.
+        </p>
+      </div>
     </div>
-  </div>
-  <div
-    className="base section base message x-main ours"
-  >
-    <p
-      className="sender"
-    >
-      Camille
-      :
-    </p>
     <div
-      className="message-content"
+      className="base message x-main ours"
     >
-      <p>
-        Hi Morgan! Here is the database we prepared for you.
+      <p
+        className="sender"
+      >
+        Camille
+        :
       </p>
+      <div
+        className="message-content"
+      >
+        <p>
+          Hi Morgan! Here is the database we prepared for you.
+        </p>
+      </div>
     </div>
-  </div>
-  <div
-    className="base section base message x-main2"
-  >
-    <p
-      className="sender"
-    >
-      Humbl
-      :
-    </p>
     <div
-      className="message-content"
+      className="base message x-main2 theirs"
     >
-      <p>
-        Hi Camille, please compile an assesment of top 6 firms/brand providers for the listed fields in the US.
+      <p
+        className="sender"
+      >
+        Humbl
+        :
       </p>
+      <div
+        className="message-content"
+      >
+        <p>
+          That looks amazing
+        </p>
+      </div>
     </div>
-  </div>
-  <div
-    className="base section base message x-main ours"
-  >
-    <p
-      className="sender"
+    <div
+      className="base message x-main2 theirs"
     >
-      Camille
-      :
-    </p>
+      <div
+        className="message-content"
+      >
+        <p>
+          Thank you for the great work, can we also get this information in a spreadsheet?
+        </p>
+      </div>
+    </div>
     <div
-      className="message-content"
+      className="base message x-main ours"
     >
-      <p>
-        Hi Morgan! Here is the spreadsheet we prepared for you.
+      <p
+        className="sender"
+      >
+        Camille
+        :
       </p>
+      <div
+        className="message-content"
+      >
+        <p>
+          Hi Morgan! Here is the spreadsheet we prepared for you.
+        </p>
+      </div>
     </div>
   </div>
 </div>
@@ -686,94 +697,98 @@ exports[`Storyshots a/Conversation With Attachment 1`] = `
   className="base card base conversation y-background-near"
 >
   <div
-    className="base section base message x-main2"
+    className="base section"
   >
-    <p
-      className="sender"
-    >
-      Humbl
-      :
-    </p>
     <div
-      className="message-content"
+      className="base message x-main2 theirs"
     >
-      <p>
-        Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.
+      <p
+        className="sender"
+      >
+        Humbl
+        :
       </p>
+      <div
+        className="message-content"
+      >
+        <p>
+          Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.
+        </p>
+      </div>
     </div>
-  </div>
-  <div
-    className="base section base message x-main ours"
-  >
-    <p
-      className="sender"
-    >
-      Camille
-      :
-    </p>
     <div
-      className="message-content"
+      className="base message x-main ours"
     >
-      <p>
-        Hi Morgan! Here is the database we prepared for you.
+      <p
+        className="sender"
+      >
+        Camille
+        :
       </p>
       <div
-        className="attachment y-main4"
+        className="message-content"
       >
-        <span
-          className="icon"
-        >
-          A
-        </span>
         <p>
-          spreadsheet.xlsx
+          Hi Morgan! Here is the database we prepared for you.
         </p>
+        <div
+          className="attachment y-main4"
+        >
+          <span
+            className="icon"
+          >
+            A
+          </span>
+          <p>
+            spreadsheet.xlsx
+          </p>
+        </div>
       </div>
     </div>
-  </div>
-  <div
-    className="base section base message x-main2"
-  >
-    <p
-      className="sender"
-    >
-      Humbl
-      :
-    </p>
     <div
-      className="message-content"
+      className="base message x-main2 theirs"
     >
-      <p>
-        Hi Camille, please compile an assesment of top 6 firms/brand providers for the listed fields in the US.
+      <p
+        className="sender"
+      >
+        Humbl
+        :
       </p>
+      <div
+        className="message-content"
+      >
+        <p>
+          Hi Camille, please compile an assesment of top 6 firms/brand providers for the listed fields in the US.
+        </p>
+      </div>
     </div>
-  </div>
-  <div
-    className="base section base message x-main ours"
-  >
-    <p
-      className="sender"
-    >
-      Camille
-      :
-    </p>
     <div
-      className="message-content"
+      className="base message x-main ours"
     >
-      <p>
-        Hi Morgan! Here is the spreadsheet we prepared for you.
+      <p
+        className="sender"
+      >
+        Camille
+        :
       </p>
       <div
-        className="attachment y-main4"
+        className="message-content"
       >
-        <span
-          className="icon"
-        >
-          A
-        </span>
         <p>
-          spreadsheet.xlsx
+          Hi Morgan! Here is the spreadsheet we prepared for you.
         </p>
+        <div
+          className="attachment y-main4"
+        >
+          <span
+            className="icon"
+          >
+            A
+          </span>
+          <p>
+            spreadsheet.xlsx
+          </p>
+        </div>
       </div>
     </div>
   </div>
@@ -3581,401 +3596,561 @@ exports[`Storyshots b/Button Arrow Left Simple 1`] = `
     className="base button x-main modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    main
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      main
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-main-80 modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    main-80
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      main-80
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-main-50 modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    main-50
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      main-50
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-main2 modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    main2
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      main2
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-interactive modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    interactive
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      interactive
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-interactive-icons modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    interactive-icons
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      interactive-icons
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-shadow modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    shadow
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      shadow
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-success modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    success
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      success
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-warning modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    warning
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      warning
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-error modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    error
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      error
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-blocked modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    blocked
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      blocked
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-backlog modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    backlog
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      backlog
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-in-progress modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    in-progress
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      in-progress
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-in-review modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    in-review
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      in-review
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-requested modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    requested
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      requested
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-completed modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    completed
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      completed
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-background-far modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    background-far
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      background-far
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-background-near modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    background-near
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      background-near
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-background-cards modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    background-cards
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      background-cards
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-background-cards-80 modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    background-cards-80
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      background-cards-80
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-background-cards-50 modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    background-cards-50
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      background-cards-50
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-background-inputs modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    background-inputs
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      background-inputs
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-background-mesh modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    background-mesh
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      background-mesh
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-heading modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    heading
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      heading
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-paragraph modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    paragraph
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      paragraph
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-subtitle modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    subtitle
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      subtitle
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-metadata modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    metadata
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      metadata
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-link modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    link
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      link
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-transparent modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    transparent
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      transparent
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-highlighted modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    highlighted
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      highlighted
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-disabled modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    disabled
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      disabled
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-twitter modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    twitter
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      twitter
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-facebook modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    facebook
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      facebook
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-instagram modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    instagram
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      instagram
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-google modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    google
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      google
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-black modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    black
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      black
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-anchor modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    anchor
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      anchor
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-grey modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    grey
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      grey
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-pearl modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    pearl
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      pearl
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-white modifierSimple arrow-left"
     type="button"
   >
-    This is a
-     
-    white
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      white
+       
+      button
+    </span>
   </button>,
 ]
 `;
@@ -4391,401 +4566,561 @@ exports[`Storyshots b/Button Arrow Right Simple 1`] = `
     className="base button x-main modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    main
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      main
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-main-80 modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    main-80
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      main-80
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-main-50 modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    main-50
-     
-    button
-  </button>,
-  <button
-    className="base button x-main2 modifierSimple arrow-right"
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      main-50
+       
+      button
+    </span>
+  </button>,
+  <button
+    className="base button x-main2 modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    main2
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      main2
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-interactive modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    interactive
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      interactive
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-interactive-icons modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    interactive-icons
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      interactive-icons
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-shadow modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    shadow
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      shadow
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-success modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    success
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      success
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-warning modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    warning
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      warning
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-error modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    error
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      error
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-blocked modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    blocked
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      blocked
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-backlog modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    backlog
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      backlog
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-in-progress modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    in-progress
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      in-progress
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-in-review modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    in-review
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      in-review
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-requested modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    requested
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      requested
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-completed modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    completed
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      completed
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-background-far modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    background-far
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      background-far
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-background-near modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    background-near
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      background-near
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-background-cards modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    background-cards
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      background-cards
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-background-cards-80 modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    background-cards-80
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      background-cards-80
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-background-cards-50 modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    background-cards-50
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      background-cards-50
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-background-inputs modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    background-inputs
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      background-inputs
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-background-mesh modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    background-mesh
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      background-mesh
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-heading modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    heading
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      heading
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-paragraph modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    paragraph
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      paragraph
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-subtitle modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    subtitle
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      subtitle
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-metadata modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    metadata
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      metadata
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-link modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    link
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      link
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-transparent modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    transparent
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      transparent
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-highlighted modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    highlighted
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      highlighted
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-disabled modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    disabled
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      disabled
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-twitter modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    twitter
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      twitter
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-facebook modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    facebook
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      facebook
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-instagram modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    instagram
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      instagram
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-google modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    google
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      google
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-black modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    black
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      black
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-anchor modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    anchor
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      anchor
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-grey modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    grey
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      grey
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-pearl modifierSimple arrow-right"
     type="button"
-  >
-    This is a
-     
-    pearl
-     
-    button
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      pearl
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-white modifierSimple arrow-right"
     type="button"
   >
-    This is a
-     
-    white
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      white
+       
+      button
+    </span>
   </button>,
 ]
 `;
@@ -9859,401 +10194,561 @@ exports[`Storyshots b/Button Simple 1`] = `
     className="base button x-main modifierSimple"
     type="button"
   >
-    This is a
-     
-    main
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      main
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-main-80 modifierSimple"
     type="button"
   >
-    This is a
-     
-    main-80
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      main-80
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-main-50 modifierSimple"
     type="button"
   >
-    This is a
-     
-    main-50
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      main-50
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-main2 modifierSimple"
     type="button"
   >
-    This is a
-     
-    main2
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      main2
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-interactive modifierSimple"
     type="button"
   >
-    This is a
-     
-    interactive
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      interactive
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-interactive-icons modifierSimple"
     type="button"
   >
-    This is a
-     
-    interactive-icons
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      interactive-icons
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-shadow modifierSimple"
     type="button"
   >
-    This is a
-     
-    shadow
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      shadow
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-success modifierSimple"
     type="button"
   >
-    This is a
-     
-    success
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      success
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-warning modifierSimple"
     type="button"
   >
-    This is a
-     
-    warning
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      warning
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-error modifierSimple"
     type="button"
   >
-    This is a
-     
-    error
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      error
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-blocked modifierSimple"
     type="button"
   >
-    This is a
-     
-    blocked
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      blocked
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-backlog modifierSimple"
     type="button"
   >
-    This is a
-     
-    backlog
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      backlog
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-in-progress modifierSimple"
     type="button"
   >
-    This is a
-     
-    in-progress
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      in-progress
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-in-review modifierSimple"
     type="button"
   >
-    This is a
-     
-    in-review
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      in-review
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-requested modifierSimple"
     type="button"
   >
-    This is a
-     
-    requested
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      requested
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-completed modifierSimple"
     type="button"
   >
-    This is a
-     
-    completed
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      completed
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-background-far modifierSimple"
     type="button"
   >
-    This is a
-     
-    background-far
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      background-far
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-background-near modifierSimple"
     type="button"
   >
-    This is a
-     
-    background-near
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      background-near
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-background-cards modifierSimple"
     type="button"
   >
-    This is a
-     
-    background-cards
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      background-cards
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-background-cards-80 modifierSimple"
     type="button"
   >
-    This is a
-     
-    background-cards-80
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      background-cards-80
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-background-cards-50 modifierSimple"
     type="button"
   >
-    This is a
-     
-    background-cards-50
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      background-cards-50
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-background-inputs modifierSimple"
     type="button"
   >
-    This is a
-     
-    background-inputs
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      background-inputs
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-background-mesh modifierSimple"
     type="button"
   >
-    This is a
-     
-    background-mesh
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      background-mesh
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-heading modifierSimple"
     type="button"
   >
-    This is a
-     
-    heading
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      heading
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-paragraph modifierSimple"
     type="button"
   >
-    This is a
-     
-    paragraph
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      paragraph
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-subtitle modifierSimple"
     type="button"
   >
-    This is a
-     
-    subtitle
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      subtitle
+       
+      button
+    </span>
   </button>,
   <button
-    className="base button x-metadata modifierSimple"
-    type="button"
-  >
-    This is a
-     
-    metadata
-     
-    button
+    className="base button x-metadata modifierSimple"
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      metadata
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-link modifierSimple"
     type="button"
   >
-    This is a
-     
-    link
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      link
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-transparent modifierSimple"
     type="button"
   >
-    This is a
-     
-    transparent
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      transparent
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-highlighted modifierSimple"
     type="button"
   >
-    This is a
-     
-    highlighted
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      highlighted
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-disabled modifierSimple"
     type="button"
   >
-    This is a
-     
-    disabled
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      disabled
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-twitter modifierSimple"
     type="button"
   >
-    This is a
-     
-    twitter
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      twitter
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-facebook modifierSimple"
     type="button"
   >
-    This is a
-     
-    facebook
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      facebook
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-instagram modifierSimple"
     type="button"
   >
-    This is a
-     
-    instagram
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      instagram
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-google modifierSimple"
     type="button"
   >
-    This is a
-     
-    google
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      google
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-black modifierSimple"
     type="button"
   >
-    This is a
-     
-    black
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      black
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-anchor modifierSimple"
     type="button"
   >
-    This is a
-     
-    anchor
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      anchor
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-grey modifierSimple"
     type="button"
   >
-    This is a
-     
-    grey
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      grey
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-pearl modifierSimple"
     type="button"
   >
-    This is a
-     
-    pearl
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      pearl
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-white modifierSimple"
     type="button"
   >
-    This is a
-     
-    white
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      white
+       
+      button
+    </span>
   </button>,
 ]
 `;
@@ -10265,440 +10760,600 @@ exports[`Storyshots b/Button Simple Disabled 1`] = `
     disabled={true}
     type="button"
   >
-    This is a
-     
-    main
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      main
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-main-80 modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    main-80
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      main-80
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-main-50 modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    main-50
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      main-50
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-main2 modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    main2
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      main2
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-interactive modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    interactive
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      interactive
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-interactive-icons modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    interactive-icons
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      interactive-icons
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-shadow modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    shadow
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      shadow
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-success modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    success
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      success
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-warning modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    warning
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      warning
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-error modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    error
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      error
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-blocked modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    blocked
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      blocked
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-backlog modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    backlog
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      backlog
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-in-progress modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    in-progress
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      in-progress
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-in-review modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    in-review
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      in-review
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-requested modifierSimple"
     disabled={true}
     type="button"
-  >
-    This is a
-     
-    requested
-     
-    button
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      requested
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-completed modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    completed
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      completed
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-background-far modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    background-far
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      background-far
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-background-near modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    background-near
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      background-near
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-background-cards modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    background-cards
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      background-cards
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-background-cards-80 modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    background-cards-80
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      background-cards-80
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-background-cards-50 modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    background-cards-50
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      background-cards-50
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-background-inputs modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    background-inputs
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      background-inputs
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-background-mesh modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    background-mesh
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      background-mesh
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-heading modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    heading
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      heading
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-paragraph modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    paragraph
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      paragraph
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-subtitle modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    subtitle
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      subtitle
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-metadata modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    metadata
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      metadata
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-link modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    link
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      link
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-transparent modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    transparent
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      transparent
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-highlighted modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    highlighted
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      highlighted
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-disabled modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    disabled
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      disabled
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-twitter modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    twitter
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      twitter
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-facebook modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    facebook
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      facebook
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-instagram modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    instagram
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      instagram
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-google modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    google
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      google
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-black modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    black
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      black
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-anchor modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    anchor
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      anchor
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-grey modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    grey
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      grey
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-pearl modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    pearl
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      pearl
+       
+      button
+    </span>
   </button>,
   <button
     className="base button x-white modifierSimple"
     disabled={true}
     type="button"
   >
-    This is a
-     
-    white
-     
-    button
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      white
+       
+      button
+    </span>
   </button>,
 ]
 `;
@@ -13458,16 +14113,11 @@ exports[`Storyshots b/ThemeSelector Base 1`] = `
   <p>
     Theme :
   </p>
-  <button
+  <a
     className="base theme-selector"
     onClick={[Function]}
-    type="button"
-  >
-    <span
-      className="icon"
-    />
-    <span />
-  </button>
+    onKeyDown={[Function]}
+  />
 </div>
 `;
 
@@ -14237,7 +14887,11 @@ exports[`Storyshots c/Shortener Base 1`] = `
     onClick={[Function]}
     type="button"
   >
-    Show
+    <span
+      className="modifierUnderlined"
+    >
+      Show
+    </span>
   </button>
 </span>
 `;
@@ -17354,14 +18008,18 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik S
           type="button"
         >
           <span
-            className="v25 mr-v"
+            className="modifierUnderlined"
           >
-            Apple
-          </span>
-          <span
-            className="f-icons close"
-          >
-            Y
+            <span
+              className="v25 mr-v"
+            >
+              Apple
+            </span>
+            <span
+              className="f-icons close"
+            >
+              Y
+            </span>
           </span>
         </button>
       </div>
@@ -17377,14 +18035,18 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik S
           type="button"
         >
           <span
-            className="v25 mr-v"
-          >
-            Pear
-          </span>
-          <span
-            className="f-icons close"
+            className="modifierUnderlined"
           >
-            Y
+            <span
+              className="v25 mr-v"
+            >
+              Pear
+            </span>
+            <span
+              className="f-icons close"
+            >
+              Y
+            </span>
           </span>
         </button>
       </div>
@@ -17657,9 +18319,13 @@ exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik Sta
         type="button"
       >
         <span
-          className="f-icons"
+          className="modifierUnderlined"
         >
-          Y
+          <span
+            className="f-icons"
+          >
+            Y
+          </span>
         </span>
       </button>
     </div>