@pareto-engineering/design-system 2.0.0-alpha.2 → 2.0.0-alpha.3

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots a/AnimatedCounter Base 1`] = `
+exports[`Storyshots a/AnimatedCounter After 1`] = `
 <div
   className="base animated-counter x-main1"
 >
@@ -12,23 +12,13 @@ exports[`Storyshots a/AnimatedCounter Base 1`] = `
       %
     </span>
   </div>
-  <p
-    className="info uc s-1 md-s0 v50 mt-v"
-  >
-    graduated from college
-  </p>
 </div>
 `;
 
-exports[`Storyshots a/AnimatedCounter Top Description 1`] = `
+exports[`Storyshots a/AnimatedCounter Base 1`] = `
 <div
   className="base animated-counter x-main1"
 >
-  <p
-    className="info top-description uc s-1 md-s0"
-  >
-    graduated from college
-  </p>
   <div
     className="count s3"
   >
@@ -40,7 +30,7 @@ exports[`Storyshots a/AnimatedCounter Top Description 1`] = `
 </div>
 `;
 
-exports[`Storyshots a/AnimatedCounter Unit Before 1`] = `
+exports[`Storyshots a/AnimatedCounter Before 1`] = `
 <div
   className="base animated-counter x-main1"
 >
@@ -52,11 +42,24 @@ exports[`Storyshots a/AnimatedCounter Unit Before 1`] = `
     </span>
     <span />
   </div>
-  <p
-    className="info uc s-1 md-s0 v50 mt-v"
+</div>
+`;
+
+exports[`Storyshots a/AnimatedCounter Before And After 1`] = `
+<div
+  className="base animated-counter x-main1"
+>
+  <div
+    className="count s3"
   >
-    graduated from college
-  </p>
+    <span>
+      %
+    </span>
+    <span />
+    <span>
+      +
+    </span>
+  </div>
 </div>
 `;
 
@@ -159,7 +162,7 @@ exports[`Storyshots a/ContentCard Layout Center 1`] = `
   }
 >
   <div
-    className="base content-card y-background u1"
+    className="base content-card y-background1 u1"
   >
     <div
       className="base section p-u layout-center"
@@ -403,7 +406,7 @@ exports[`Storyshots a/Conversation Base 1`] = `
         :
       </p>
       <p>
-        Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.
+        Hi Camille, please compile an assesment of top 6 firms/brand providers for the listed fields in the US.
       </p>
     </div>
   </div>
@@ -782,18 +785,19 @@ exports[`Storyshots a/LoadingCircle Base 1`] = `
 
 exports[`Storyshots a/People Base 1`] = `
 <div
-  className="x-background b-x v1 p-v"
+  className="x-background1 b-x v1 p-v"
 >
   <div
     className="base people u1"
     style={
       Object {
-        "--image-height-width": "3em",
+        "--column-width": "12em",
+        "--image-size": "3em",
       }
     }
   >
     <div
-      className="base person"
+      className="base person y-main1"
     >
       <img
         alt="Phoebe Yao, Pareto Founder"
@@ -816,7 +820,7 @@ exports[`Storyshots a/People Base 1`] = `
       </div>
     </div>
     <div
-      className="base person"
+      className="base person y-main3"
     >
       <img
         alt="Lanie Col-long, Pareto Partner"
@@ -839,7 +843,47 @@ exports[`Storyshots a/People Base 1`] = `
       </div>
     </div>
     <div
-      className="base person"
+      className="base person y-background4"
+    >
+      <img
+        alt="Camillie Arigo, Pareto Partner"
+        className="image v50 mr-v"
+        src="https://pareto-v1.s3.us-west-2.amazonaws.com/profile-pictures/Camille-Arigo.jpg"
+      />
+      <div
+        className="details"
+      >
+        <p
+          className="name s-1"
+        >
+          Camillie Arigo
+        </p>
+        <p
+          className="role s-2"
+        >
+          Pareto Partner
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/People One Person 1`] = `
+<div
+  className="x-background1 b-x v1 p-v"
+>
+  <div
+    className="base people u1"
+    style={
+      Object {
+        "--column-width": "12em",
+        "--image-size": "3em",
+      }
+    }
+  >
+    <div
+      className="base person y-background4"
     >
       <img
         alt="Camillie Arigo, Pareto Partner"
@@ -897,7 +941,7 @@ Array [
 
 exports[`Storyshots a/ProgressBar Color 1`] = `
 <div
-  className="base progress-bar x-secondary1"
+  className="base progress-bar x-main1"
   data-length="50%"
   style={
     Object {
@@ -923,7 +967,7 @@ exports[`Storyshots a/ProgressBar Height 1`] = `
 
 exports[`Storyshots a/Quote Base 1`] = `
 <div
-  className="y-background b-y u1 p-u"
+  className="y-background1 b-y u1 p-u"
 >
   <figure
     className="base quote x-main1"
@@ -1106,7 +1150,7 @@ exports[`Storyshots a/SiteContext Base 1`] = `"Sample SiteContext"`;
 
 exports[`Storyshots a/Spinner Base 1`] = `
 <div
-  className="y-background b-y"
+  className="y-background1 b-y"
 >
   <div
     className="base spinner x-main1"
@@ -1175,7 +1219,7 @@ exports[`Storyshots a/Timestamp Distance Format 1`] = `
   className="base timestamp"
   onClick={[Function]}
 >
-  in 12 months
+  in 10 months
 </p>
 `;
 
@@ -1236,22 +1280,22 @@ Array [
     button
   </button>,
   <button
-    className="base button x-secondary1"
+    className="base button x-main3"
     type="button"
   >
     This is a
      
-    secondary1
+    main3
      
     button
   </button>,
   <button
-    className="base button x-secondary2"
+    className="base button x-main4"
     type="button"
   >
     This is a
      
-    secondary2
+    main4
      
     button
   </button>,
@@ -1286,12 +1330,12 @@ Array [
     button
   </button>,
   <button
-    className="base button x-background"
+    className="base button x-background1"
     type="button"
   >
     This is a
      
-    background
+    background1
      
     button
   </button>,
@@ -1325,6 +1369,26 @@ Array [
      
     button
   </button>,
+  <button
+    className="base button x-background5"
+    type="button"
+  >
+    This is a
+     
+    background5
+     
+    button
+  </button>,
+  <button
+    className="base button x-background6"
+    type="button"
+  >
+    This is a
+     
+    background6
+     
+    button
+  </button>,
   <button
     className="base button x-heading"
     type="button"
@@ -1479,349 +1543,2277 @@ Array [
 `;
 
 exports[`Storyshots b/Button Compact 1`] = `
-<button
-  className="base button x-main1 modifierCompact"
-  type="button"
->
-  Sample Button
-</button>
-`;
-
-exports[`Storyshots b/Button Disabled 1`] = `
-<button
-  className="base button x-main1"
-  disabled={true}
-  type="button"
->
-  Sample Button
-</button>
-`;
-
-exports[`Storyshots b/Button Ghost 1`] = `
-<button
-  className="base button x-main1 modifierGhost"
-  type="button"
->
-  Sample Button
-</button>
-`;
-
-exports[`Storyshots b/Button Ghost Colors 1`] = `
 Array [
   <button
-    className="base button x-main1 modifierGhost"
+    className="base button x-main1 modifierCompact"
     type="button"
   >
     This is a
      
     main1
      
-    button
   </button>,
   <button
-    className="base button x-main2 modifierGhost"
+    className="base button x-main2 modifierCompact"
     type="button"
   >
     This is a
      
     main2
      
-    button
   </button>,
   <button
-    className="base button x-secondary1 modifierGhost"
+    className="base button x-main3 modifierCompact"
     type="button"
   >
     This is a
      
-    secondary1
+    main3
      
-    button
   </button>,
   <button
-    className="base button x-secondary2 modifierGhost"
+    className="base button x-main4 modifierCompact"
     type="button"
   >
     This is a
      
-    secondary2
+    main4
      
-    button
   </button>,
   <button
-    className="base button x-success modifierGhost"
+    className="base button x-success modifierCompact"
     type="button"
   >
     This is a
      
     success
      
-    button
   </button>,
   <button
-    className="base button x-warning modifierGhost"
+    className="base button x-warning modifierCompact"
     type="button"
   >
     This is a
      
     warning
      
-    button
   </button>,
   <button
-    className="base button x-error modifierGhost"
+    className="base button x-error modifierCompact"
     type="button"
   >
     This is a
      
     error
      
-    button
   </button>,
   <button
-    className="base button x-background modifierGhost"
+    className="base button x-background1 modifierCompact"
     type="button"
   >
     This is a
      
-    background
+    background1
      
-    button
   </button>,
   <button
-    className="base button x-background2 modifierGhost"
+    className="base button x-background2 modifierCompact"
     type="button"
   >
     This is a
      
     background2
      
-    button
   </button>,
   <button
-    className="base button x-background3 modifierGhost"
+    className="base button x-background3 modifierCompact"
     type="button"
   >
     This is a
      
     background3
      
-    button
   </button>,
   <button
-    className="base button x-background4 modifierGhost"
+    className="base button x-background4 modifierCompact"
     type="button"
   >
     This is a
      
     background4
      
-    button
   </button>,
   <button
-    className="base button x-heading modifierGhost"
+    className="base button x-background5 modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    background5
+     
+  </button>,
+  <button
+    className="base button x-background6 modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    background6
+     
+  </button>,
+  <button
+    className="base button x-heading modifierCompact"
     type="button"
   >
     This is a
      
     heading
      
-    button
   </button>,
   <button
-    className="base button x-paragraph modifierGhost"
+    className="base button x-paragraph modifierCompact"
     type="button"
   >
     This is a
      
     paragraph
      
-    button
   </button>,
   <button
-    className="base button x-subtitle modifierGhost"
+    className="base button x-subtitle modifierCompact"
     type="button"
   >
     This is a
      
     subtitle
      
-    button
   </button>,
   <button
-    className="base button x-metadata modifierGhost"
+    className="base button x-metadata modifierCompact"
     type="button"
   >
     This is a
      
     metadata
      
-    button
   </button>,
   <button
-    className="base button x-link modifierGhost"
+    className="base button x-link modifierCompact"
     type="button"
   >
     This is a
      
     link
      
-    button
   </button>,
   <button
-    className="base button x-navlink modifierGhost"
+    className="base button x-navlink modifierCompact"
     type="button"
   >
     This is a
      
     navlink
      
-    button
   </button>,
   <button
-    className="base button x-twitter modifierGhost"
+    className="base button x-twitter modifierCompact"
     type="button"
   >
     This is a
      
     twitter
      
-    button
   </button>,
   <button
-    className="base button x-facebook modifierGhost"
+    className="base button x-facebook modifierCompact"
     type="button"
   >
     This is a
      
     facebook
      
-    button
   </button>,
   <button
-    className="base button x-instagram modifierGhost"
+    className="base button x-instagram modifierCompact"
     type="button"
   >
     This is a
      
     instagram
      
-    button
   </button>,
   <button
-    className="base button x-google modifierGhost"
+    className="base button x-google modifierCompact"
     type="button"
   >
     This is a
      
     google
      
-    button
   </button>,
   <button
-    className="base button x-black modifierGhost"
+    className="base button x-black modifierCompact"
     type="button"
   >
     This is a
      
     black
      
-    button
   </button>,
   <button
-    className="base button x-anchor modifierGhost"
+    className="base button x-anchor modifierCompact"
     type="button"
   >
     This is a
      
     anchor
      
-    button
   </button>,
   <button
-    className="base button x-grey modifierGhost"
+    className="base button x-grey modifierCompact"
     type="button"
   >
     This is a
      
     grey
      
-    button
   </button>,
   <button
-    className="base button x-pearl modifierGhost"
+    className="base button x-pearl modifierCompact"
     type="button"
   >
     This is a
      
     pearl
      
-    button
   </button>,
   <button
-    className="base button x-white modifierGhost"
+    className="base button x-white modifierCompact"
     type="button"
   >
     This is a
      
     white
      
-    button
   </button>,
 ]
 `;
 
-exports[`Storyshots b/Button Loading 1`] = `
-<button
-  className="base button x-main1"
-  type="button"
->
-  <div
-    className="base loading-circle"
-    style={
-      Object {
-        "--height-width": "1.15em",
-        "--stroke-width": undefined,
-        "--x": "var(--on-x)",
-      }
-    }
+exports[`Storyshots b/Button Disabled 1`] = `
+Array [
+  <button
+    className="base button x-main1"
+    disabled={true}
+    type="button"
   >
-    <svg
-      className="svg-circle"
-      preserveAspectRatio="xMinYMin meet"
-      style={
-        Object {
-          "--animation-duration": "2s",
-        }
-      }
-      version="1.1"
-      viewBox="25 25 50 50"
-      x="0px"
-      xmlSpace="preserve"
-      xmlns="http://www.w3.org/2000/svg"
-      y="0px"
-    >
-      <circle
-        className="path"
-        cx="50"
-        cy="50"
-        fill="none"
-        r="20"
-        strokeLinecap="round"
-        strokeMiterlimit="10"
-      />
-    </svg>
-  </div>
-</button>
-`;
-
-exports[`Storyshots b/Button Simple 1`] = `
-<button
-  className="base button x-main1 modifierSimple"
-  type="button"
->
-  Sample Button
-</button>
+    This is a
+     
+    main1
+     
+  </button>,
+  <button
+    className="base button x-main2"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    main2
+     
+  </button>,
+  <button
+    className="base button x-main3"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    main3
+     
+  </button>,
+  <button
+    className="base button x-main4"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    main4
+     
+  </button>,
+  <button
+    className="base button x-success"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    success
+     
+  </button>,
+  <button
+    className="base button x-warning"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    warning
+     
+  </button>,
+  <button
+    className="base button x-error"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    error
+     
+  </button>,
+  <button
+    className="base button x-background1"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    background1
+     
+  </button>,
+  <button
+    className="base button x-background2"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    background2
+     
+  </button>,
+  <button
+    className="base button x-background3"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    background3
+     
+  </button>,
+  <button
+    className="base button x-background4"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    background4
+     
+  </button>,
+  <button
+    className="base button x-background5"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    background5
+     
+  </button>,
+  <button
+    className="base button x-background6"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    background6
+     
+  </button>,
+  <button
+    className="base button x-heading"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    heading
+     
+  </button>,
+  <button
+    className="base button x-paragraph"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    paragraph
+     
+  </button>,
+  <button
+    className="base button x-subtitle"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    subtitle
+     
+  </button>,
+  <button
+    className="base button x-metadata"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    metadata
+     
+  </button>,
+  <button
+    className="base button x-link"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    link
+     
+  </button>,
+  <button
+    className="base button x-navlink"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    navlink
+     
+  </button>,
+  <button
+    className="base button x-twitter"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    twitter
+     
+  </button>,
+  <button
+    className="base button x-facebook"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    facebook
+     
+  </button>,
+  <button
+    className="base button x-instagram"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    instagram
+     
+  </button>,
+  <button
+    className="base button x-google"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    google
+     
+  </button>,
+  <button
+    className="base button x-black"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    black
+     
+  </button>,
+  <button
+    className="base button x-anchor"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    anchor
+     
+  </button>,
+  <button
+    className="base button x-grey"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    grey
+     
+  </button>,
+  <button
+    className="base button x-pearl"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    pearl
+     
+  </button>,
+  <button
+    className="base button x-white"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    white
+     
+  </button>,
+]
+`;
+
+exports[`Storyshots b/Button Ghost 1`] = `
+<button
+  className="base button x-main1 modifierGhost"
+  type="button"
+>
+  Sample Button
+</button>
+`;
+
+exports[`Storyshots b/Button Ghost Colors 1`] = `
+Array [
+  <button
+    className="base button x-main1 modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    main1
+     
+    button
+  </button>,
+  <button
+    className="base button x-main2 modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    main2
+     
+    button
+  </button>,
+  <button
+    className="base button x-main3 modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    main3
+     
+    button
+  </button>,
+  <button
+    className="base button x-main4 modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    main4
+     
+    button
+  </button>,
+  <button
+    className="base button x-success modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    success
+     
+    button
+  </button>,
+  <button
+    className="base button x-warning modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    warning
+     
+    button
+  </button>,
+  <button
+    className="base button x-error modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    error
+     
+    button
+  </button>,
+  <button
+    className="base button x-background1 modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    background1
+     
+    button
+  </button>,
+  <button
+    className="base button x-background2 modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    background2
+     
+    button
+  </button>,
+  <button
+    className="base button x-background3 modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    background3
+     
+    button
+  </button>,
+  <button
+    className="base button x-background4 modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    background4
+     
+    button
+  </button>,
+  <button
+    className="base button x-background5 modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    background5
+     
+    button
+  </button>,
+  <button
+    className="base button x-background6 modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    background6
+     
+    button
+  </button>,
+  <button
+    className="base button x-heading modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    heading
+     
+    button
+  </button>,
+  <button
+    className="base button x-paragraph modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    paragraph
+     
+    button
+  </button>,
+  <button
+    className="base button x-subtitle modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    subtitle
+     
+    button
+  </button>,
+  <button
+    className="base button x-metadata modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    metadata
+     
+    button
+  </button>,
+  <button
+    className="base button x-link modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    link
+     
+    button
+  </button>,
+  <button
+    className="base button x-navlink modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    navlink
+     
+    button
+  </button>,
+  <button
+    className="base button x-twitter modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    twitter
+     
+    button
+  </button>,
+  <button
+    className="base button x-facebook modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    facebook
+     
+    button
+  </button>,
+  <button
+    className="base button x-instagram modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    instagram
+     
+    button
+  </button>,
+  <button
+    className="base button x-google modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    google
+     
+    button
+  </button>,
+  <button
+    className="base button x-black modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    black
+     
+    button
+  </button>,
+  <button
+    className="base button x-anchor modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    anchor
+     
+    button
+  </button>,
+  <button
+    className="base button x-grey modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    grey
+     
+    button
+  </button>,
+  <button
+    className="base button x-pearl modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    pearl
+     
+    button
+  </button>,
+  <button
+    className="base button x-white modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    white
+     
+    button
+  </button>,
+]
+`;
+
+exports[`Storyshots b/Button Loading 1`] = `
+Array [
+  <button
+    className="base button x-main1"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-main2"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-main3"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-main4"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-success"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-warning"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-error"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-background1"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-background2"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-background3"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-background4"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-background5"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-background6"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-heading"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-paragraph"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-subtitle"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-metadata"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-link"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-navlink"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-twitter"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-facebook"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-instagram"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-google"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-black"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-anchor"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-grey"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-pearl"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-white"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+]
+`;
+
+exports[`Storyshots b/Button Simple 1`] = `
+Array [
+  <button
+    className="base button x-main1 modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    main1
+     
+    button
+  </button>,
+  <button
+    className="base button x-main2 modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    main2
+     
+    button
+  </button>,
+  <button
+    className="base button x-main3 modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    main3
+     
+    button
+  </button>,
+  <button
+    className="base button x-main4 modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    main4
+     
+    button
+  </button>,
+  <button
+    className="base button x-success modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    success
+     
+    button
+  </button>,
+  <button
+    className="base button x-warning modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    warning
+     
+    button
+  </button>,
+  <button
+    className="base button x-error modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    error
+     
+    button
+  </button>,
+  <button
+    className="base button x-background1 modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    background1
+     
+    button
+  </button>,
+  <button
+    className="base button x-background2 modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    background2
+     
+    button
+  </button>,
+  <button
+    className="base button x-background3 modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    background3
+     
+    button
+  </button>,
+  <button
+    className="base button x-background4 modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    background4
+     
+    button
+  </button>,
+  <button
+    className="base button x-background5 modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    background5
+     
+    button
+  </button>,
+  <button
+    className="base button x-background6 modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    background6
+     
+    button
+  </button>,
+  <button
+    className="base button x-heading modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    heading
+     
+    button
+  </button>,
+  <button
+    className="base button x-paragraph modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    paragraph
+     
+    button
+  </button>,
+  <button
+    className="base button x-subtitle modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    subtitle
+     
+    button
+  </button>,
+  <button
+    className="base button x-metadata modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    metadata
+     
+    button
+  </button>,
+  <button
+    className="base button x-link modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    link
+     
+    button
+  </button>,
+  <button
+    className="base button x-navlink modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    navlink
+     
+    button
+  </button>,
+  <button
+    className="base button x-twitter modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    twitter
+     
+    button
+  </button>,
+  <button
+    className="base button x-facebook modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    facebook
+     
+    button
+  </button>,
+  <button
+    className="base button x-instagram modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    instagram
+     
+    button
+  </button>,
+  <button
+    className="base button x-google modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    google
+     
+    button
+  </button>,
+  <button
+    className="base button x-black modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    black
+     
+    button
+  </button>,
+  <button
+    className="base button x-anchor modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    anchor
+     
+    button
+  </button>,
+  <button
+    className="base button x-grey modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    grey
+     
+    button
+  </button>,
+  <button
+    className="base button x-pearl modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    pearl
+     
+    button
+  </button>,
+  <button
+    className="base button x-white modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    white
+     
+    button
+  </button>,
+]
 `;
 
 exports[`Storyshots b/Card Base 1`] = `
@@ -2093,7 +4085,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-secondary1"
+    className="base svg base logo x-main3"
     height="4em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -2132,7 +4124,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-secondary2"
+    className="base svg base logo x-main4"
     height="4em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -2288,7 +4280,7 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-background"
+    className="base svg base logo x-background1"
     height="4em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -2443,6 +4435,84 @@ Array [
       }
     />
   </svg>,
+  <svg
+    className="base svg base logo x-background5"
+    height="4em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 688 250"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_parts.svg#logo__p"
+      id="logo__p"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo_parts.svg#logo__areto"
+      id="logo__areto"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo_parts.svg#logo__t"
+      id="logo__t"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-background6"
+    height="4em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 688 250"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_parts.svg#logo__p"
+      id="logo__p"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo_parts.svg#logo__areto"
+      id="logo__areto"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo_parts.svg#logo__t"
+      id="logo__t"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
   <svg
     className="base svg base logo x-heading"
     height="4em"
@@ -3073,6 +5143,136 @@ exports[`Storyshots b/Logo Loop 1`] = `
 </svg>
 `;
 
+exports[`Storyshots b/Metrics Base 1`] = `
+<div
+  className="base metrics"
+>
+  <div
+    className="metric"
+  >
+    <div
+      className="circle y-success"
+    >
+      <div
+        className="base animated-counter x-black"
+      >
+        <div
+          className="count s3"
+        >
+          <span>
+            +
+          </span>
+          <span />
+          <span>
+            %
+          </span>
+        </div>
+      </div>
+      <p
+        className="description-md sm-h xs-h md-s1"
+      >
+        Merchandise sell-though rate during tour
+      </p>
+    </div>
+    <p
+      className="description-sm md-h lg-h sm-s-2"
+    >
+      Merchandise sell-though rate during tour
+    </p>
+  </div>
+  <div
+    className="metric"
+  >
+    <div
+      className="circle y-warning"
+    >
+      <div
+        className="base animated-counter x-black"
+      >
+        <div
+          className="count s3"
+        >
+          <span />
+          <span>
+            K
+          </span>
+        </div>
+      </div>
+      <p
+        className="description-md sm-h xs-h md-s1"
+      >
+        Stat or metric growth
+      </p>
+    </div>
+    <p
+      className="description-sm md-h lg-h sm-s-2"
+    >
+      Stat or metric growth
+    </p>
+  </div>
+  <div
+    className="metric"
+  >
+    <div
+      className="circle y-navlink"
+    >
+      <div
+        className="base animated-counter x-black"
+      >
+        <div
+          className="count s3"
+        >
+          <span>
+            +
+          </span>
+          <span />
+        </div>
+      </div>
+      <p
+        className="description-md sm-h xs-h md-s1"
+      >
+        Stat or metric growth
+      </p>
+    </div>
+    <p
+      className="description-sm md-h lg-h sm-s-2"
+    >
+      Stat or metric growth
+    </p>
+  </div>
+  <div
+    className="metric"
+  >
+    <div
+      className="circle y-error"
+    >
+      <div
+        className="base animated-counter x-black"
+      >
+        <div
+          className="count s3"
+        >
+          <span>
+            $
+          </span>
+          <span />
+        </div>
+      </div>
+      <p
+        className="description-md sm-h xs-h md-s1"
+      >
+        Merchandise sell-though rate during tour
+      </p>
+    </div>
+    <p
+      className="description-sm md-h lg-h sm-s-2"
+    >
+      Merchandise sell-though rate during tour
+    </p>
+  </div>
+</div>
+`;
+
 exports[`Storyshots b/Page Base 1`] = `
 <main
   className="base page"
@@ -3391,7 +5591,7 @@ Array [
 
 exports[`Storyshots b/ThemeSelector Base 1`] = `
 <div
-  className="ui-undefined y-background b-y"
+  className="ui-undefined y-background1 b-y"
 >
   <p>
     Theme :
@@ -3427,7 +5627,7 @@ Array [
     className="u2 pv-u"
   >
     <div
-      className="y-background b-dark-y"
+      className="y-background2 b-dark-y"
     >
       <div
         className="base title"
@@ -3449,7 +5649,7 @@ Array [
     className="u2 pv-u"
   >
     <div
-      className="y-background b-dark-y"
+      className="y-background2 b-dark-y"
     >
       <div
         className="base title"
@@ -3471,7 +5671,7 @@ Array [
     className="u2 pv-u"
   >
     <div
-      className="y-background b-dark-y"
+      className="y-background2 b-dark-y"
     >
       <div
         className="base title"
@@ -3493,7 +5693,7 @@ Array [
     className="u2 pv-u"
   >
     <div
-      className="y-background b-dark-y"
+      className="y-background2 b-dark-y"
     >
       <div
         className="base title"
@@ -3515,7 +5715,7 @@ Array [
     className="u2 pv-u"
   >
     <div
-      className="y-background b-dark-y"
+      className="y-background2 b-dark-y"
     >
       <div
         className="base title"
@@ -3563,7 +5763,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
   }
 >
   <div
-    className="base content-slides y-background u1 md-u2"
+    className="base content-slides y-background1 u1 md-u2"
   >
     <nav
       className="sidebar"
@@ -3688,7 +5888,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
       className="horizontal-menu"
     >
       <div
-        className="base progress-bar modifierAttached x-main2 y-background b-dark-y"
+        className="base progress-bar modifierAttached x-main2 y-background1 b-dark-y"
         data-length="50%"
         style={
           Object {
@@ -3935,13 +6135,13 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
 
 exports[`Storyshots c/ContentSlides Simple 1`] = `
 <div
-  className="base content-slides y-background simple u1 md-u2"
+  className="base content-slides y-background1 simple u1 md-u2"
 >
   <div
     className="horizontal-menu"
   >
     <div
-      className="base progress-bar modifierAttached x-main2 y-background b-dark-y"
+      className="base progress-bar modifierAttached x-main2 y-background1 b-dark-y"
       data-length="50%"
       style={
         Object {
@@ -4316,7 +6516,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     />
   </div>
   <div
-    className="base text-area-input form-input x-background y-main1"
+    className="base text-area-input form-input x-background1 y-main1"
   >
     <label
       className="base label c-y v50 mb-v x-main1"
@@ -4335,7 +6535,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
      
   </div>
   <div
-    className="base choices-input form-input x-background y-main1"
+    className="base choices-input form-input x-background2 y-main1"
     style={
       Object {
         "--grid-columns-desktop": 3,
@@ -4501,7 +6701,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     />
   </div>
   <div
-    className="base text-area-input form-input x-background y-main1"
+    className="base text-area-input form-input x-background1 y-main1"
   >
     <label
       className="base label c-y v50 mb-v x-main1"
@@ -4520,7 +6720,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
      
   </div>
   <div
-    className="base choices-input form-input x-background y-main1"
+    className="base choices-input form-input x-background2 y-main1"
     style={
       Object {
         "--grid-columns-desktop": 3,
@@ -4702,7 +6902,7 @@ exports[`Storyshots f/fields/CheckboxInput Base 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="y-background b-y"
+    className="y-background1 b-y"
   >
     <div
       className="base checkbox-input"
@@ -4826,7 +7026,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input x-background y-main1"
+    className="base choices-input x-background2 y-main1"
     id="colors"
     style={
       Object {
@@ -4915,7 +7115,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input x-background y-main1"
+    className="base choices-input x-background2 y-main1"
     id="shapes"
     style={
       Object {
@@ -5009,7 +7209,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input x-background y-main1"
+    className="base choices-input x-background2 y-main1"
     id="shapes"
     style={
       Object {
@@ -5103,7 +7303,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input multiple x-background y-main1"
+    className="base choices-input multiple x-background2 y-main1"
     id="colors"
     style={
       Object {
@@ -5192,7 +7392,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input multiple x-background y-main1"
+    className="base choices-input multiple x-background2 y-main1"
     id="colors"
     style={
       Object {
@@ -5502,7 +7702,7 @@ exports[`Storyshots f/fields/RatingsInput Base 1`] = `
     className="base ratings-input"
   >
     <div
-      className="base rating x-secondary2 y-background"
+      className="base rating x-main1 y-background2"
     >
       <label
         htmlFor="ratings-1"
@@ -5525,7 +7725,7 @@ exports[`Storyshots f/fields/RatingsInput Base 1`] = `
       />
     </div>
     <div
-      className="base rating x-secondary2 y-background"
+      className="base rating x-main1 y-background2"
     >
       <label
         htmlFor="ratings-2"
@@ -5548,7 +7748,7 @@ exports[`Storyshots f/fields/RatingsInput Base 1`] = `
       />
     </div>
     <div
-      className="base rating x-secondary2 y-background"
+      className="base rating x-main1 y-background2"
     >
       <label
         htmlFor="ratings-3"
@@ -5571,7 +7771,7 @@ exports[`Storyshots f/fields/RatingsInput Base 1`] = `
       />
     </div>
     <div
-      className="base rating x-secondary2 y-background"
+      className="base rating x-main1 y-background2"
     >
       <label
         htmlFor="ratings-4"
@@ -5594,7 +7794,7 @@ exports[`Storyshots f/fields/RatingsInput Base 1`] = `
       />
     </div>
     <div
-      className="base rating x-secondary2 y-background"
+      className="base rating x-main1 y-background2"
     >
       <label
         htmlFor="ratings-5"
@@ -5646,7 +7846,7 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
       not satisfied.
     </p>
     <div
-      className="base rating x-secondary2 y-background"
+      className="base rating x-main1 y-background2"
     >
       <label
         htmlFor="ratings-1"
@@ -5674,7 +7874,7 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
       />
     </div>
     <div
-      className="base rating x-secondary2 y-background"
+      className="base rating x-main1 y-background2"
     >
       <label
         htmlFor="ratings-2"
@@ -5702,7 +7902,7 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
       />
     </div>
     <div
-      className="base rating x-secondary2 y-background"
+      className="base rating x-main1 y-background2"
     >
       <label
         htmlFor="ratings-3"
@@ -5730,7 +7930,7 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
       />
     </div>
     <div
-      className="base rating x-secondary2 y-background"
+      className="base rating x-main1 y-background2"
     >
       <label
         htmlFor="ratings-4"
@@ -5758,7 +7958,7 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
       />
     </div>
     <div
-      className="base rating x-secondary2 y-background"
+      className="base rating x-main1 y-background2"
     >
       <label
         htmlFor="ratings-5"
@@ -5786,7 +7986,7 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
       />
     </div>
     <div
-      className="base rating x-secondary2 y-background"
+      className="base rating x-main1 y-background2"
     >
       <label
         htmlFor="ratings-6"
@@ -5814,7 +8014,7 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
       />
     </div>
     <div
-      className="base rating x-secondary2 y-background"
+      className="base rating x-main1 y-background2"
     >
       <label
         htmlFor="ratings-7"
@@ -5842,7 +8042,7 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
       />
     </div>
     <div
-      className="base rating x-secondary2 y-background"
+      className="base rating x-main1 y-background2"
     >
       <label
         htmlFor="ratings-8"
@@ -5870,7 +8070,7 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
       />
     </div>
     <div
-      className="base rating x-secondary2 y-background"
+      className="base rating x-main1 y-background2"
     >
       <label
         htmlFor="ratings-9"
@@ -5898,7 +8098,7 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
       />
     </div>
     <div
-      className="base rating x-secondary2 y-background"
+      className="base rating x-main1 y-background2"
     >
       <label
         htmlFor="ratings-10"
@@ -5955,7 +8155,7 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
     className="base ratings-input"
   >
     <div
-      className="base rating x-secondary2 y-background"
+      className="base rating x-main1 y-background2"
     >
       <label
         htmlFor="ratings-1"
@@ -5983,7 +8183,7 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
       />
     </div>
     <div
-      className="base rating x-secondary2 y-background"
+      className="base rating x-main1 y-background2"
     >
       <label
         htmlFor="ratings-2"
@@ -6011,7 +8211,7 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
       />
     </div>
     <div
-      className="base rating x-secondary2 y-background"
+      className="base rating x-main1 y-background2"
     >
       <label
         htmlFor="ratings-3"
@@ -6039,7 +8239,7 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
       />
     </div>
     <div
-      className="base rating x-secondary2 y-background"
+      className="base rating x-main1 y-background2"
     >
       <label
         htmlFor="ratings-4"
@@ -6067,7 +8267,7 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
       />
     </div>
     <div
-      className="base rating x-secondary2 y-background"
+      className="base rating x-main1 y-background2"
     >
       <label
         htmlFor="ratings-5"
@@ -6095,7 +8295,7 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
       />
     </div>
     <div
-      className="base rating x-secondary2 y-background"
+      className="base rating x-main1 y-background2"
     >
       <label
         htmlFor="ratings-6"
@@ -6123,7 +8323,7 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
       />
     </div>
     <div
-      className="base rating x-secondary2 y-background"
+      className="base rating x-main1 y-background2"
     >
       <label
         htmlFor="ratings-7"
@@ -6151,7 +8351,7 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
       />
     </div>
     <div
-      className="base rating x-secondary2 y-background"
+      className="base rating x-main1 y-background2"
     >
       <label
         htmlFor="ratings-8"
@@ -6179,7 +8379,7 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
       />
     </div>
     <div
-      className="base rating x-secondary2 y-background"
+      className="base rating x-main1 y-background2"
     >
       <label
         htmlFor="ratings-9"
@@ -6207,7 +8407,7 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
       />
     </div>
     <div
-      className="base rating x-secondary2 y-background"
+      className="base rating x-main1 y-background2"
     >
       <label
         htmlFor="ratings-10"
@@ -6491,7 +8691,7 @@ exports[`Storyshots f/fields/TaskRecommendationInput Base 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="y-background b-y v2 p-v"
+    className="y-background1 b-y v2 p-v"
     style={
       Object {
         "height": "100%",
@@ -6499,7 +8699,7 @@ exports[`Storyshots f/fields/TaskRecommendationInput Base 1`] = `
     }
   >
     <div
-      className="base task-recommendation-input x-main2"
+      className="base task-recommendation-input x-main1"
     >
       <div
         className="task-content b-on-x"
@@ -6508,7 +8708,7 @@ exports[`Storyshots f/fields/TaskRecommendationInput Base 1`] = `
           className="v1 p-v task"
         >
           <label
-            className="base label uc mb-v c-x x-main1"
+            className="base label uc mb-v  x-main1"
             htmlFor="taskRecommendations"
           >
             Find potential business customers
@@ -6546,35 +8746,39 @@ exports[`Storyshots f/fields/TextInput Base 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base text-input"
+    className="y-background1 b-dark-y u2 pb-u"
   >
-    <label
-      className="base label input-label v50 mb-v x-main1"
-      htmlFor="firstName"
+    <div
+      className="base text-input"
     >
-      What's your first name ?
-    </label>
-    <input
-      className="input input-border"
-      disabled={false}
-      id="firstName"
-      name="firstName"
-      onBlur={[Function]}
-      onChange={[Function]}
-      type="text"
-      value=""
-    />
-  </div>
-  <div
-    className="debugger"
-  >
-    <button
-      className="base button x-main1"
-      onClick={[Function]}
-      type="button"
+      <label
+        className="base label input-label v50 mb-v x-main1"
+        htmlFor="firstName"
+      >
+        What's your first name ?
+      </label>
+      <input
+        className="input input-border"
+        disabled={false}
+        id="firstName"
+        name="firstName"
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="text"
+        value=""
+      />
+    </div>
+    <div
+      className="debugger"
     >
-      Open FormDebugger
-    </button>
+      <button
+        className="base button x-main1"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
   </div>
 </form>
 `;
@@ -6586,7 +8790,7 @@ exports[`Storyshots f/fields/TextInput Date Time 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="y-background b-y"
+    className="y-background1 b-dark-y"
   >
     <div
       className="base text-input"
@@ -6650,7 +8854,7 @@ exports[`Storyshots f/fields/TextInput Disabled Text Input 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="y-background b-y u2 pb-u"
+    className="y-background1 b-dark-y u2 pb-u"
   >
     <div
       className="base text-input"
@@ -6683,10 +8887,10 @@ exports[`Storyshots f/fields/TextareaInput Base 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="y-background b-y"
+    className="y-background1 b-dark-y"
   >
     <div
-      className="base text-area-input x-background y-main1"
+      className="base text-area-input x-background1 y-main1"
     >
       <label
         className="base label c-y v50 mb-v x-main1"
@@ -6727,10 +8931,10 @@ exports[`Storyshots f/fields/TextareaInput Disabled Textarea Input 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="y-background b-y"
+    className="y-background1 b-dark-y"
   >
     <div
-      className="base text-area-input x-background y-main1"
+      className="base text-area-input x-background1 y-main1"
     >
       <label
         className="base label c-y v50 mb-v x-main1"