@pareto-engineering/design-system 4.0.0-alpha.17 → 4.0.0-alpha.20

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

@@ -611,71 +611,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 +701,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 +3600,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
-  </button>,
-  <button
-    className="base button x-completed modifierSimple arrow-left"
+    <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 +4570,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>,
+    <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 +10198,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
+  <button
+    className="base button x-main2 modifierSimple"
+    type="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
+    <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 +10764,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>,
 ]
 `;
@@ -13336,8 +13995,9 @@ exports[`Storyshots b/Page With Sections 1`] = `
     Section 1
   </section>
   <section
-    className="base section x-main b-x modifierSpaced padded grid"
+    className="base section x-main b-x padded grid"
     id="with-sections_s2"
+    spaced={true}
   >
     Section 2. This section is spaced
   </section>
@@ -13457,16 +14117,11 @@ exports[`Storyshots b/ThemeSelector Base 1`] = `
   <p>
     Theme :
   </p>
-  <button
+  <a
     className="base theme-selector"
     onClick={[Function]}
-    type="button"
-  >
-    <span
-      className="v0 m-v icon"
-    />
-    <span />
-  </button>
+    onKeyDown={[Function]}
+  />
 </div>
 `;
 
@@ -14236,7 +14891,11 @@ exports[`Storyshots c/Shortener Base 1`] = `
     onClick={[Function]}
     type="button"
   >
-    Show
+    <span
+      className="modifierUnderlined"
+    >
+      Show
+    </span>
   </button>
 </span>
 `;
@@ -14287,7 +14946,8 @@ exports[`Storyshots f/FormInput Base 1`] = `
       What's your first name ?
     </label>
     <div
-      className="input-wrapper with-faded-border"
+      className="input-wrapper with-faded-border "
+      style={{}}
     >
       <input
         className="input"
@@ -14311,7 +14971,8 @@ exports[`Storyshots f/FormInput Base 1`] = `
       What's your last name ?
     </label>
     <div
-      className="input-wrapper with-faded-border"
+      className="input-wrapper with-faded-border "
+      style={{}}
     >
       <input
         className="input"
@@ -14518,7 +15179,8 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
       What's your first name ?
     </label>
     <div
-      className="input-wrapper with-faded-border"
+      className="input-wrapper with-faded-border "
+      style={{}}
     >
       <input
         className="input"
@@ -14542,7 +15204,8 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
       What's your last name ?
     </label>
     <div
-      className="input-wrapper with-faded-border"
+      className="input-wrapper with-faded-border "
+      style={{}}
     >
       <input
         className="input"
@@ -14729,7 +15392,8 @@ exports[`Storyshots f/FormInput Extensible Form Input 1`] = `
       Extended type input
     </label>
     <div
-      className="input-wrapper with-faded-border"
+      className="input-wrapper with-faded-border "
+      style={{}}
     >
       <input
         className="input"
@@ -14772,7 +15436,8 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
       What's your first name ?
     </label>
     <div
-      className="input-wrapper with-faded-border"
+      className="input-wrapper with-faded-border "
+      style={{}}
     >
       <input
         className="input"
@@ -14918,7 +15583,8 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
       What's your first name ?
     </label>
     <div
-      className="input-wrapper with-faded-border"
+      className="input-wrapper with-faded-border "
+      style={{}}
     >
       <input
         className="input"
@@ -15128,7 +15794,8 @@ exports[`Storyshots f/FormInput With Ratings Input 1`] = `
       What's your first name ?
     </label>
     <div
-      className="input-wrapper with-faded-border"
+      className="input-wrapper with-faded-border "
+      style={{}}
     >
       <input
         className="input"
@@ -17345,14 +18012,18 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik S
           type="button"
         >
           <span
-            className="v25 mr-v"
-          >
-            Apple
-          </span>
-          <span
-            className="f-icons close"
+            className="modifierUnderlined"
           >
-            Y
+            <span
+              className="v25 mr-v"
+            >
+              Apple
+            </span>
+            <span
+              className="f-icons close"
+            >
+              Y
+            </span>
           </span>
         </button>
       </div>
@@ -17368,14 +18039,18 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik S
           type="button"
         >
           <span
-            className="v25 mr-v"
+            className="modifierUnderlined"
           >
-            Pear
-          </span>
-          <span
-            className="f-icons close"
-          >
-            Y
+            <span
+              className="v25 mr-v"
+            >
+              Pear
+            </span>
+            <span
+              className="f-icons close"
+            >
+              Y
+            </span>
           </span>
         </button>
       </div>
@@ -17648,9 +18323,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>
@@ -18978,7 +19657,8 @@ exports[`Storyshots f/fields/TextInput Base 1`] = `
         How can we reach you ?
       </label>
       <div
-        className="input-wrapper with-faded-border"
+        className="input-wrapper with-faded-border "
+        style={{}}
       >
         <input
           className="input"
@@ -19026,7 +19706,8 @@ exports[`Storyshots f/fields/TextInput Date 1`] = `
         Select date
       </label>
       <div
-        className="input-wrapper with-faded-border"
+        className="input-wrapper with-faded-border "
+        style={{}}
       >
         <input
           className="input"
@@ -19054,6 +19735,59 @@ exports[`Storyshots f/fields/TextInput Date 1`] = `
 </form>
 `;
 
+exports[`Storyshots f/fields/TextInput Has Symbol 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className=" u2 pb-u"
+  >
+    <div
+      className="base text-input y-background2"
+    >
+      <label
+        className="base form-label v50 mb-v x-main2"
+        htmlFor="email"
+      >
+        How can we reach you ?
+      </label>
+      <div
+        className="input-wrapper with-faded-border has-symbol"
+        style={
+          {
+            "--symbol": "'$'",
+          }
+        }
+      >
+        <input
+          className="input"
+          disabled={false}
+          id="email"
+          name="email"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/fields/TextInput Optional 1`] = `
 <form
   action="#"
@@ -19074,7 +19808,8 @@ exports[`Storyshots f/fields/TextInput Optional 1`] = `
          (Optional)
       </label>
       <div
-        className="input-wrapper with-faded-border"
+        className="input-wrapper with-faded-border "
+        style={{}}
       >
         <input
           className="input"
@@ -19122,7 +19857,8 @@ exports[`Storyshots f/fields/TextInput Time 1`] = `
         Select time
       </label>
       <div
-        className="input-wrapper with-faded-border"
+        className="input-wrapper with-faded-border "
+        style={{}}
       >
         <input
           className="input"
@@ -19169,7 +19905,8 @@ exports[`Storyshots f/fields/TextInput With Auto Complete Off 1`] = `
         How can we reach you ?
       </label>
       <div
-        className="input-wrapper with-faded-border"
+        className="input-wrapper with-faded-border "
+        style={{}}
       >
         <input
           autoComplete="off"
@@ -19218,7 +19955,8 @@ exports[`Storyshots f/fields/TextInput With Disabled 1`] = `
         How can we reach you ?
       </label>
       <div
-        className="input-wrapper with-faded-border"
+        className="input-wrapper with-faded-border "
+        style={{}}
       >
         <input
           className="input"
@@ -19266,7 +20004,8 @@ exports[`Storyshots f/fields/TextInput With Placeholder 1`] = `
         How can we reach you ?
       </label>
       <div
-        className="input-wrapper with-faded-border"
+        className="input-wrapper with-faded-border "
+        style={{}}
       >
         <input
           className="input"
@@ -19315,7 +20054,8 @@ exports[`Storyshots f/fields/TextInput With Validation 1`] = `
         How can we reach you ?
       </label>
       <div
-        className="input-wrapper with-faded-border"
+        className="input-wrapper with-faded-border "
+        style={{}}
       >
         <input
           className="input"