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

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"
@@ -1102,131 +1146,3147 @@ exports[`Storyshots a/SVG Stroke 1`] = `
 </svg>
 `;
 
-exports[`Storyshots a/SiteContext Base 1`] = `"Sample SiteContext"`;
-
-exports[`Storyshots a/Spinner Base 1`] = `
+exports[`Storyshots a/Shapes Circle 1`] = `
 <div
-  className="y-background b-y"
+  className="y-background5 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
 >
   <div
-    className="base spinner x-main1"
+    className="base shapes"
+    style={
+      Object {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "30em",
+        "--vertical-align": "flex-end",
+      }
+    }
   >
     <div
-      className="loader"
+      className="circle"
     />
   </div>
 </div>
 `;
 
-exports[`Storyshots a/TeamInfo Base 1`] = `
+exports[`Storyshots a/Shapes Diamonds 1`] = `
 <div
-  className="base team-info u1"
+  className="y-background4 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
 >
-  <p
-    className="description s-1 md-s0"
-  >
-    Working at Pareto constantly allows me to learn something new. The team gives everyone a strong support system and never leaves anyone behind, especially when tasks get difficult.
-  </p>
   <div
-    className="content"
+    className="base shapes"
+    style={
+      Object {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "30em",
+        "--vertical-align": "flex-end",
+      }
+    }
   >
-    <img
-      alt="Lanie Col-long, Partner at Pareto"
-      className="img mr-u"
-      src="https://pareto-v1.s3.us-west-2.amazonaws.com/profile-pictures/Lanie-Col-long.png"
-    />
     <div
-      className="team-member"
+      className="diamonds"
     >
-      <span
-        className="name s-1"
-      >
-        Lanie Col-long
-      </span>
-      <span
-        className="role s-2"
-      >
-        Partner
-      </span>
+      <div
+        className="top-right"
+      />
+      <div
+        className="bottom-left"
+      />
+      <div
+        className="bottom-right"
+      />
     </div>
   </div>
 </div>
 `;
 
-exports[`Storyshots a/Timestamp Base 1`] = `
-<p
-  className="base timestamp"
-  onClick={[Function]}
+exports[`Storyshots a/Shapes Ellipse 1`] = `
+<div
+  className="y-main3 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
 >
-  1665792000000
-</p>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "30em",
+        "--vertical-align": "flex-end",
+      }
+    }
+  >
+    <div
+      className="ellipse"
+    />
+  </div>
+</div>
 `;
 
-exports[`Storyshots a/Timestamp Date Format 1`] = `
-<p
-  className="base timestamp"
+exports[`Storyshots a/Shapes Ellipses 1`] = `
+<div
+  className="y-background4 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
 >
-  2022-10-15 at 00:00
-</p>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "30em",
+        "--vertical-align": "flex-end",
+      }
+    }
+  >
+    <div
+      className="ellipses"
+    >
+      <div
+        className="first"
+      />
+      <div
+        className="second"
+      />
+    </div>
+  </div>
+</div>
 `;
 
-exports[`Storyshots a/Timestamp Distance Format 1`] = `
-<p
-  className="base timestamp"
-  onClick={[Function]}
+exports[`Storyshots a/Shapes Half Circle 1`] = `
+<div
+  className="y-background4 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
 >
-  in 12 months
-</p>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "30em",
+        "--vertical-align": "flex-end",
+      }
+    }
+  >
+    <div
+      className="half-circle"
+    />
+  </div>
+</div>
 `;
 
-exports[`Storyshots a/Timestamp Prefix 1`] = `
-<p
-  className="base timestamp"
-  onClick={[Function]}
+exports[`Storyshots a/Shapes Half Ellipse 1`] = `
+<div
+  className="y-background3 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
 >
-  <strong>
-    Updated :
-  </strong>
-   
-  1665792000000
-</p>
-`;
-
-exports[`Storyshots a/Timestamp Relative Format 1`] = `
-Array [
-  "Click to see relative format. Relative format has not been enabled by default because of chromatic snapshots.",
-  <p
-    className="base timestamp"
-    onClick={[Function]}
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "25em",
+        "--vertical-align": "flex-end",
+      }
+    }
   >
-    2022-10-10T00:00:00.000+00:00
-  </p>,
-]
+    <div
+      className="half-ellipse"
+    />
+  </div>
+</div>
 `;
 
-exports[`Storyshots b/Button Base 1`] = `
-<button
-  className="base button x-main1"
-  type="button"
+exports[`Storyshots a/Shapes Half Ellipses 1`] = `
+<div
+  className="y-background3 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
 >
-  Sample Button
-</button>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "25em",
+        "--vertical-align": "flex-end",
+      }
+    }
+  >
+    <div
+      className="half-ellipses"
+    >
+      <div
+        className="up"
+      />
+      <div
+        className="down"
+      />
+    </div>
+  </div>
+</div>
 `;
 
-exports[`Storyshots b/Button Colors 1`] = `
-Array [
-  <button
-    className="base button x-main1"
-    type="button"
+exports[`Storyshots a/Shapes Rectangles 1`] = `
+<div
+  className="y-background5 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
+>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "30em",
+        "--vertical-align": "flex-end",
+      }
+    }
   >
-    This is a
-     
+    <div
+      className="rectangles"
+    >
+      <div
+        className="top"
+      />
+      <div
+        className="center"
+      />
+      <div
+        className="bottom"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Shapes Rotated Ellipses 1`] = `
+<div
+  className="y-background5 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
+>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "60em",
+        "--vertical-align": "center",
+      }
+    }
+  >
+    <div
+      className="rotated-ellipses"
+    >
+      <div
+        className="ellipse-one"
+      />
+      <div
+        className="ellipse-two"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Shapes Spiral 1`] = `
+<div
+  className="y-background6 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
+>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "100em",
+        "--vertical-align": "center",
+      }
+    }
+  >
+    <div
+      className="spiral"
+    >
+      <div
+        className="circle-one"
+      />
+      <div
+        className="circle-two"
+      />
+      <div
+        className="circle-three"
+      />
+      <div
+        className="circle-four"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Shapes Triangle 1`] = `
+<div
+  className="y-background6 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
+>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "30em",
+        "--vertical-align": "flex-end",
+      }
+    }
+  >
+    <div
+      className="triangle"
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/SiteContext Base 1`] = `"Sample SiteContext"`;
+
+exports[`Storyshots a/Spinner Base 1`] = `
+<div
+  className="y-background1 b-y"
+>
+  <div
+    className="base spinner x-main1"
+  >
+    <div
+      className="loader"
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/TeamInfo Base 1`] = `
+<div
+  className="base team-info u1"
+>
+  <p
+    className="description s-1 md-s0"
+  >
+    Working at Pareto constantly allows me to learn something new. The team gives everyone a strong support system and never leaves anyone behind, especially when tasks get difficult.
+  </p>
+  <div
+    className="content"
+  >
+    <img
+      alt="Lanie Col-long, Partner at Pareto"
+      className="img mr-u"
+      src="https://pareto-v1.s3.us-west-2.amazonaws.com/profile-pictures/Lanie-Col-long.png"
+    />
+    <div
+      className="team-member"
+    >
+      <span
+        className="name s-1"
+      >
+        Lanie Col-long
+      </span>
+      <span
+        className="role s-2"
+      >
+        Partner
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Timestamp Base 1`] = `
+<p
+  className="base timestamp"
+  onClick={[Function]}
+>
+  1665792000000
+</p>
+`;
+
+exports[`Storyshots a/Timestamp Date Format 1`] = `
+<p
+  className="base timestamp"
+>
+  2022-10-15 at 00:00
+</p>
+`;
+
+exports[`Storyshots a/Timestamp Distance Format 1`] = `
+<p
+  className="base timestamp"
+  onClick={[Function]}
+>
+  in 10 months
+</p>
+`;
+
+exports[`Storyshots a/Timestamp Prefix 1`] = `
+<p
+  className="base timestamp"
+  onClick={[Function]}
+>
+  <strong>
+    Updated :
+  </strong>
+   
+  1665792000000
+</p>
+`;
+
+exports[`Storyshots a/Timestamp Relative Format 1`] = `
+Array [
+  "Click to see relative format. Relative format has not been enabled by default because of chromatic snapshots.",
+  <p
+    className="base timestamp"
+    onClick={[Function]}
+  >
+    2022-10-10T00:00:00.000+00:00
+  </p>,
+]
+`;
+
+exports[`Storyshots b/Button Base 1`] = `
+<button
+  className="base button x-main1"
+  type="button"
+>
+  Sample Button
+</button>
+`;
+
+exports[`Storyshots b/Button Compact 1`] = `
+Array [
+  <button
+    className="base button x-main1 modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    main1
+     
+    button
+  </button>,
+  <button
+    className="base button x-main2 modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    main2
+     
+    button
+  </button>,
+  <button
+    className="base button x-main3 modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    main3
+     
+    button
+  </button>,
+  <button
+    className="base button x-main4 modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    main4
+     
+    button
+  </button>,
+  <button
+    className="base button x-success modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    success
+     
+    button
+  </button>,
+  <button
+    className="base button x-warning modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    warning
+     
+    button
+  </button>,
+  <button
+    className="base button x-error modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    error
+     
+    button
+  </button>,
+  <button
+    className="base button x-background1 modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    background1
+     
+    button
+  </button>,
+  <button
+    className="base button x-background2 modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    background2
+     
+    button
+  </button>,
+  <button
+    className="base button x-background3 modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    background3
+     
+    button
+  </button>,
+  <button
+    className="base button x-background4 modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    background4
+     
+    button
+  </button>,
+  <button
+    className="base button x-background5 modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    background5
+     
+    button
+  </button>,
+  <button
+    className="base button x-background6 modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    background6
+     
+    button
+  </button>,
+  <button
+    className="base button x-heading modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    heading
+     
+    button
+  </button>,
+  <button
+    className="base button x-paragraph modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    paragraph
+     
+    button
+  </button>,
+  <button
+    className="base button x-subtitle modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    subtitle
+     
+    button
+  </button>,
+  <button
+    className="base button x-metadata modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    metadata
+     
+    button
+  </button>,
+  <button
+    className="base button x-link modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    link
+     
+    button
+  </button>,
+  <button
+    className="base button x-navlink modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    navlink
+     
+    button
+  </button>,
+  <button
+    className="base button x-twitter modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    twitter
+     
+    button
+  </button>,
+  <button
+    className="base button x-facebook modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    facebook
+     
+    button
+  </button>,
+  <button
+    className="base button x-instagram modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    instagram
+     
+    button
+  </button>,
+  <button
+    className="base button x-google modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    google
+     
+    button
+  </button>,
+  <button
+    className="base button x-black modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    black
+     
+    button
+  </button>,
+  <button
+    className="base button x-anchor modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    anchor
+     
+    button
+  </button>,
+  <button
+    className="base button x-grey modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    grey
+     
+    button
+  </button>,
+  <button
+    className="base button x-pearl modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    pearl
+     
+    button
+  </button>,
+  <button
+    className="base button x-white modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    white
+     
+    button
+  </button>,
+]
+`;
+
+exports[`Storyshots b/Button Disabled 1`] = `
+Array [
+  <button
+    className="base button x-main1"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    main1
+     
+    button
+  </button>,
+  <button
+    className="base button x-main2"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    main2
+     
+    button
+  </button>,
+  <button
+    className="base button x-main3"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    main3
+     
+    button
+  </button>,
+  <button
+    className="base button x-main4"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    main4
+     
+    button
+  </button>,
+  <button
+    className="base button x-success"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    success
+     
+    button
+  </button>,
+  <button
+    className="base button x-warning"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    warning
+     
+    button
+  </button>,
+  <button
+    className="base button x-error"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    error
+     
+    button
+  </button>,
+  <button
+    className="base button x-background1"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    background1
+     
+    button
+  </button>,
+  <button
+    className="base button x-background2"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    background2
+     
+    button
+  </button>,
+  <button
+    className="base button x-background3"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    background3
+     
+    button
+  </button>,
+  <button
+    className="base button x-background4"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    background4
+     
+    button
+  </button>,
+  <button
+    className="base button x-background5"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    background5
+     
+    button
+  </button>,
+  <button
+    className="base button x-background6"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    background6
+     
+    button
+  </button>,
+  <button
+    className="base button x-heading"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    heading
+     
+    button
+  </button>,
+  <button
+    className="base button x-paragraph"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    paragraph
+     
+    button
+  </button>,
+  <button
+    className="base button x-subtitle"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    subtitle
+     
+    button
+  </button>,
+  <button
+    className="base button x-metadata"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    metadata
+     
+    button
+  </button>,
+  <button
+    className="base button x-link"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    link
+     
+    button
+  </button>,
+  <button
+    className="base button x-navlink"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    navlink
+     
+    button
+  </button>,
+  <button
+    className="base button x-twitter"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    twitter
+     
+    button
+  </button>,
+  <button
+    className="base button x-facebook"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    facebook
+     
+    button
+  </button>,
+  <button
+    className="base button x-instagram"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    instagram
+     
+    button
+  </button>,
+  <button
+    className="base button x-google"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    google
+     
+    button
+  </button>,
+  <button
+    className="base button x-black"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    black
+     
+    button
+  </button>,
+  <button
+    className="base button x-anchor"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    anchor
+     
+    button
+  </button>,
+  <button
+    className="base button x-grey"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    grey
+     
+    button
+  </button>,
+  <button
+    className="base button x-pearl"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    pearl
+     
+    button
+  </button>,
+  <button
+    className="base button x-white"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    white
+     
+    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 Disabled 1`] = `
+Array [
+  <button
+    className="base button x-main1 modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    main1
+     
+    button
+  </button>,
+  <button
+    className="base button x-main2 modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    main2
+     
+    button
+  </button>,
+  <button
+    className="base button x-main3 modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    main3
+     
+    button
+  </button>,
+  <button
+    className="base button x-main4 modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    main4
+     
+    button
+  </button>,
+  <button
+    className="base button x-success modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    success
+     
+    button
+  </button>,
+  <button
+    className="base button x-warning modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    warning
+     
+    button
+  </button>,
+  <button
+    className="base button x-error modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    error
+     
+    button
+  </button>,
+  <button
+    className="base button x-background1 modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    background1
+     
+    button
+  </button>,
+  <button
+    className="base button x-background2 modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    background2
+     
+    button
+  </button>,
+  <button
+    className="base button x-background3 modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    background3
+     
+    button
+  </button>,
+  <button
+    className="base button x-background4 modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    background4
+     
+    button
+  </button>,
+  <button
+    className="base button x-background5 modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    background5
+     
+    button
+  </button>,
+  <button
+    className="base button x-background6 modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    background6
+     
+    button
+  </button>,
+  <button
+    className="base button x-heading modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    heading
+     
+    button
+  </button>,
+  <button
+    className="base button x-paragraph modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    paragraph
+     
+    button
+  </button>,
+  <button
+    className="base button x-subtitle modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    subtitle
+     
+    button
+  </button>,
+  <button
+    className="base button x-metadata modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    metadata
+     
+    button
+  </button>,
+  <button
+    className="base button x-link modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    link
+     
+    button
+  </button>,
+  <button
+    className="base button x-navlink modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    navlink
+     
+    button
+  </button>,
+  <button
+    className="base button x-twitter modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    twitter
+     
+    button
+  </button>,
+  <button
+    className="base button x-facebook modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    facebook
+     
+    button
+  </button>,
+  <button
+    className="base button x-instagram modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    instagram
+     
+    button
+  </button>,
+  <button
+    className="base button x-google modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    google
+     
+    button
+  </button>,
+  <button
+    className="base button x-black modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    black
+     
+    button
+  </button>,
+  <button
+    className="base button x-anchor modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    anchor
+     
+    button
+  </button>,
+  <button
+    className="base button x-grey modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    grey
+     
+    button
+  </button>,
+  <button
+    className="base button x-pearl modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    pearl
+     
+    button
+  </button>,
+  <button
+    className="base button x-white modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    white
+     
+    button
+  </button>,
+]
+`;
+
+exports[`Storyshots b/Button Ghosts 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 Normal 1`] = `
+Array [
+  <button
+    className="base button x-main1"
+    type="button"
+  >
+    This is a
+     
+    main1
+     
+    button
+  </button>,
+  <button
+    className="base button x-main2"
+    type="button"
+  >
+    This is a
+     
+    main2
+     
+    button
+  </button>,
+  <button
+    className="base button x-main3"
+    type="button"
+  >
+    This is a
+     
+    main3
+     
+    button
+  </button>,
+  <button
+    className="base button x-main4"
+    type="button"
+  >
+    This is a
+     
+    main4
+     
+    button
+  </button>,
+  <button
+    className="base button x-success"
+    type="button"
+  >
+    This is a
+     
+    success
+     
+    button
+  </button>,
+  <button
+    className="base button x-warning"
+    type="button"
+  >
+    This is a
+     
+    warning
+     
+    button
+  </button>,
+  <button
+    className="base button x-error"
+    type="button"
+  >
+    This is a
+     
+    error
+     
+    button
+  </button>,
+  <button
+    className="base button x-background1"
+    type="button"
+  >
+    This is a
+     
+    background1
+     
+    button
+  </button>,
+  <button
+    className="base button x-background2"
+    type="button"
+  >
+    This is a
+     
+    background2
+     
+    button
+  </button>,
+  <button
+    className="base button x-background3"
+    type="button"
+  >
+    This is a
+     
+    background3
+     
+    button
+  </button>,
+  <button
+    className="base button x-background4"
+    type="button"
+  >
+    This is a
+     
+    background4
+     
+    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"
+  >
+    This is a
+     
+    heading
+     
+    button
+  </button>,
+  <button
+    className="base button x-paragraph"
+    type="button"
+  >
+    This is a
+     
+    paragraph
+     
+    button
+  </button>,
+  <button
+    className="base button x-subtitle"
+    type="button"
+  >
+    This is a
+     
+    subtitle
+     
+    button
+  </button>,
+  <button
+    className="base button x-metadata"
+    type="button"
+  >
+    This is a
+     
+    metadata
+     
+    button
+  </button>,
+  <button
+    className="base button x-link"
+    type="button"
+  >
+    This is a
+     
+    link
+     
+    button
+  </button>,
+  <button
+    className="base button x-navlink"
+    type="button"
+  >
+    This is a
+     
+    navlink
+     
+    button
+  </button>,
+  <button
+    className="base button x-twitter"
+    type="button"
+  >
+    This is a
+     
+    twitter
+     
+    button
+  </button>,
+  <button
+    className="base button x-facebook"
+    type="button"
+  >
+    This is a
+     
+    facebook
+     
+    button
+  </button>,
+  <button
+    className="base button x-instagram"
+    type="button"
+  >
+    This is a
+     
+    instagram
+     
+    button
+  </button>,
+  <button
+    className="base button x-google"
+    type="button"
+  >
+    This is a
+     
+    google
+     
+    button
+  </button>,
+  <button
+    className="base button x-black"
+    type="button"
+  >
+    This is a
+     
+    black
+     
+    button
+  </button>,
+  <button
+    className="base button x-anchor"
+    type="button"
+  >
+    This is a
+     
+    anchor
+     
+    button
+  </button>,
+  <button
+    className="base button x-grey"
+    type="button"
+  >
+    This is a
+     
+    grey
+     
+    button
+  </button>,
+  <button
+    className="base button x-pearl"
+    type="button"
+  >
+    This is a
+     
+    pearl
+     
+    button
+  </button>,
+  <button
+    className="base button x-white"
+    type="button"
+  >
+    This is a
+     
+    white
+     
+    button
+  </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"
+    className="base button x-main2 modifierSimple"
     type="button"
   >
     This is a
@@ -1236,27 +4296,27 @@ Array [
     button
   </button>,
   <button
-    className="base button x-secondary1"
+    className="base button x-main3 modifierSimple"
     type="button"
   >
     This is a
      
-    secondary1
+    main3
      
     button
   </button>,
   <button
-    className="base button x-secondary2"
+    className="base button x-main4 modifierSimple"
     type="button"
   >
     This is a
      
-    secondary2
+    main4
      
     button
   </button>,
   <button
-    className="base button x-success"
+    className="base button x-success modifierSimple"
     type="button"
   >
     This is a
@@ -1266,7 +4326,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-warning"
+    className="base button x-warning modifierSimple"
     type="button"
   >
     This is a
@@ -1276,7 +4336,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-error"
+    className="base button x-error modifierSimple"
     type="button"
   >
     This is a
@@ -1286,17 +4346,17 @@ Array [
     button
   </button>,
   <button
-    className="base button x-background"
+    className="base button x-background1 modifierSimple"
     type="button"
   >
     This is a
      
-    background
+    background1
      
     button
   </button>,
   <button
-    className="base button x-background2"
+    className="base button x-background2 modifierSimple"
     type="button"
   >
     This is a
@@ -1306,7 +4366,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-background3"
+    className="base button x-background3 modifierSimple"
     type="button"
   >
     This is a
@@ -1316,7 +4376,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-background4"
+    className="base button x-background4 modifierSimple"
     type="button"
   >
     This is a
@@ -1326,7 +4386,27 @@ Array [
     button
   </button>,
   <button
-    className="base button x-heading"
+    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
@@ -1336,7 +4416,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-paragraph"
+    className="base button x-paragraph modifierSimple"
     type="button"
   >
     This is a
@@ -1346,7 +4426,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-subtitle"
+    className="base button x-subtitle modifierSimple"
     type="button"
   >
     This is a
@@ -1356,7 +4436,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-metadata"
+    className="base button x-metadata modifierSimple"
     type="button"
   >
     This is a
@@ -1366,7 +4446,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-link"
+    className="base button x-link modifierSimple"
     type="button"
   >
     This is a
@@ -1376,7 +4456,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-navlink"
+    className="base button x-navlink modifierSimple"
     type="button"
   >
     This is a
@@ -1386,7 +4466,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-twitter"
+    className="base button x-twitter modifierSimple"
     type="button"
   >
     This is a
@@ -1396,7 +4476,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-facebook"
+    className="base button x-facebook modifierSimple"
     type="button"
   >
     This is a
@@ -1406,7 +4486,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-instagram"
+    className="base button x-instagram modifierSimple"
     type="button"
   >
     This is a
@@ -1416,7 +4496,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-google"
+    className="base button x-google modifierSimple"
     type="button"
   >
     This is a
@@ -1426,7 +4506,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-black"
+    className="base button x-black modifierSimple"
     type="button"
   >
     This is a
@@ -1436,7 +4516,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-anchor"
+    className="base button x-anchor modifierSimple"
     type="button"
   >
     This is a
@@ -1446,7 +4526,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-grey"
+    className="base button x-grey modifierSimple"
     type="button"
   >
     This is a
@@ -1456,7 +4536,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-pearl"
+    className="base button x-pearl modifierSimple"
     type="button"
   >
     This is a
@@ -1466,7 +4546,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-white"
+    className="base button x-white modifierSimple"
     type="button"
   >
     This is a
@@ -1478,38 +4558,11 @@ 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`] = `
+exports[`Storyshots b/Button Simple Disabled 1`] = `
 Array [
   <button
-    className="base button x-main1 modifierGhost"
+    className="base button x-main1 modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -1519,7 +4572,8 @@ Array [
     button
   </button>,
   <button
-    className="base button x-main2 modifierGhost"
+    className="base button x-main2 modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -1529,27 +4583,30 @@ Array [
     button
   </button>,
   <button
-    className="base button x-secondary1 modifierGhost"
+    className="base button x-main3 modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
      
-    secondary1
+    main3
      
     button
   </button>,
   <button
-    className="base button x-secondary2 modifierGhost"
+    className="base button x-main4 modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
      
-    secondary2
+    main4
      
     button
   </button>,
   <button
-    className="base button x-success modifierGhost"
+    className="base button x-success modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -1559,7 +4616,8 @@ Array [
     button
   </button>,
   <button
-    className="base button x-warning modifierGhost"
+    className="base button x-warning modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -1569,7 +4627,8 @@ Array [
     button
   </button>,
   <button
-    className="base button x-error modifierGhost"
+    className="base button x-error modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -1579,17 +4638,19 @@ Array [
     button
   </button>,
   <button
-    className="base button x-background modifierGhost"
+    className="base button x-background1 modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
      
-    background
+    background1
      
     button
   </button>,
   <button
-    className="base button x-background2 modifierGhost"
+    className="base button x-background2 modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -1599,7 +4660,8 @@ Array [
     button
   </button>,
   <button
-    className="base button x-background3 modifierGhost"
+    className="base button x-background3 modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -1609,7 +4671,8 @@ Array [
     button
   </button>,
   <button
-    className="base button x-background4 modifierGhost"
+    className="base button x-background4 modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -1619,7 +4682,30 @@ Array [
     button
   </button>,
   <button
-    className="base button x-heading modifierGhost"
+    className="base button x-background5 modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    background5
+     
+    button
+  </button>,
+  <button
+    className="base button x-background6 modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    background6
+     
+    button
+  </button>,
+  <button
+    className="base button x-heading modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -1629,7 +4715,8 @@ Array [
     button
   </button>,
   <button
-    className="base button x-paragraph modifierGhost"
+    className="base button x-paragraph modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -1639,7 +4726,8 @@ Array [
     button
   </button>,
   <button
-    className="base button x-subtitle modifierGhost"
+    className="base button x-subtitle modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -1649,7 +4737,8 @@ Array [
     button
   </button>,
   <button
-    className="base button x-metadata modifierGhost"
+    className="base button x-metadata modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -1659,7 +4748,8 @@ Array [
     button
   </button>,
   <button
-    className="base button x-link modifierGhost"
+    className="base button x-link modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -1669,7 +4759,8 @@ Array [
     button
   </button>,
   <button
-    className="base button x-navlink modifierGhost"
+    className="base button x-navlink modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -1679,7 +4770,8 @@ Array [
     button
   </button>,
   <button
-    className="base button x-twitter modifierGhost"
+    className="base button x-twitter modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -1689,7 +4781,8 @@ Array [
     button
   </button>,
   <button
-    className="base button x-facebook modifierGhost"
+    className="base button x-facebook modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -1699,7 +4792,8 @@ Array [
     button
   </button>,
   <button
-    className="base button x-instagram modifierGhost"
+    className="base button x-instagram modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -1709,7 +4803,8 @@ Array [
     button
   </button>,
   <button
-    className="base button x-google modifierGhost"
+    className="base button x-google modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -1719,7 +4814,8 @@ Array [
     button
   </button>,
   <button
-    className="base button x-black modifierGhost"
+    className="base button x-black modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -1729,7 +4825,8 @@ Array [
     button
   </button>,
   <button
-    className="base button x-anchor modifierGhost"
+    className="base button x-anchor modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -1739,7 +4836,8 @@ Array [
     button
   </button>,
   <button
-    className="base button x-grey modifierGhost"
+    className="base button x-grey modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -1749,7 +4847,8 @@ Array [
     button
   </button>,
   <button
-    className="base button x-pearl modifierGhost"
+    className="base button x-pearl modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -1758,70 +4857,18 @@ Array [
      
     button
   </button>,
-  <button
-    className="base button x-white modifierGhost"
-    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)",
-      }
-    }
-  >
-    <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>
+  <button
+    className="base button x-white modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    white
+     
+    button
+  </button>,
+]
 `;
 
 exports[`Storyshots b/Card Base 1`] = `
@@ -2093,7 +5140,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 +5179,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 +5335,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 +5490,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 +6198,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"
@@ -3103,6 +6358,62 @@ exports[`Storyshots b/Page Item Type 1`] = `
 </main>
 `;
 
+exports[`Storyshots b/Page Sections With Background 1`] = `
+<main
+  className="base page"
+  id="with-sections"
+>
+  <section
+    className="base section y-success b-light-y"
+    id="with-sections_s1"
+    style={
+      Object {
+        "alignItems": "center",
+        "display": "flex",
+        "height": "30em",
+        "justifyContent": "center",
+      }
+    }
+  >
+    <figure
+      className="base quote x-paragraph"
+    >
+      <blockquote
+        className="blockquote uc"
+      >
+        <p
+          className="quotation c-x md-s0 s-1"
+        >
+          Pareto was like having a full-time employee without having to hire somebody. That’s how I would explain it. An on-call, on-demand full-time employee.
+        </p>
+      </blockquote>
+      <figcaption
+        className="figcaption"
+      >
+        <cite>
+          Austen Spoonts
+        </cite>
+      </figcaption>
+    </figure>
+    <div
+      className="base shapes"
+      style={
+        Object {
+          "--horizontal-align": "center",
+          "--overflow": "hidden",
+          "--shape-height": "30em",
+          "--vertical-align": "flex-end",
+        }
+      }
+    >
+      <div
+        className="triangle"
+      />
+    </div>
+  </section>
+</main>
+`;
+
 exports[`Storyshots b/Page With Sections 1`] = `
 <main
   className="base page"
@@ -3391,7 +6702,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 +6738,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 +6760,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 +6782,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 +6804,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 +6826,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 +6874,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 +6999,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 +7246,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 +7627,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 +7646,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 +7812,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 +7831,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 +8013,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 +8137,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 +8226,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 +8320,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 +8414,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 +8503,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 +8813,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 +8836,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 +8859,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 +8882,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 +8905,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 +8957,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 +8985,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 +9013,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 +9041,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 +9069,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 +9097,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 +9125,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 +9153,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 +9181,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 +9209,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 +9266,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 +9294,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 +9322,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 +9350,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 +9378,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 +9406,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 +9434,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 +9462,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 +9490,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 +9518,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 +9802,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 +9810,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 +9819,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 +9857,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 +9901,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 +9965,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 +9998,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 +10042,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"