@pareto-engineering/design-system 4.0.0-alpha.4 → 4.0.0-alpha.9

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

@@ -984,16 +984,16 @@ exports[`Storyshots a/IconList Base 1`] = `
 `;
 
 exports[`Storyshots a/Label Base 1`] = `
-<div
+<span
   className="base label x-main1"
 >
   Label Value
-</div>
+</span>
 `;
 
 exports[`Storyshots a/Label Compact 1`] = `
 [
-  <div
+  <span
     className="base label x-main1 modifierCompact"
   >
     This is a
@@ -1001,8 +1001,8 @@ exports[`Storyshots a/Label Compact 1`] = `
     main1
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-main2 modifierCompact"
   >
     This is a
@@ -1010,8 +1010,8 @@ exports[`Storyshots a/Label Compact 1`] = `
     main2
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-main3 modifierCompact"
   >
     This is a
@@ -1019,8 +1019,8 @@ exports[`Storyshots a/Label Compact 1`] = `
     main3
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-main4 modifierCompact"
   >
     This is a
@@ -1028,8 +1028,8 @@ exports[`Storyshots a/Label Compact 1`] = `
     main4
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-success modifierCompact"
   >
     This is a
@@ -1037,8 +1037,8 @@ exports[`Storyshots a/Label Compact 1`] = `
     success
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-warning modifierCompact"
   >
     This is a
@@ -1046,8 +1046,8 @@ exports[`Storyshots a/Label Compact 1`] = `
     warning
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-error modifierCompact"
   >
     This is a
@@ -1055,8 +1055,8 @@ exports[`Storyshots a/Label Compact 1`] = `
     error
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-background1 modifierCompact"
   >
     This is a
@@ -1064,8 +1064,8 @@ exports[`Storyshots a/Label Compact 1`] = `
     background1
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-background2 modifierCompact"
   >
     This is a
@@ -1073,8 +1073,8 @@ exports[`Storyshots a/Label Compact 1`] = `
     background2
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-background3 modifierCompact"
   >
     This is a
@@ -1082,8 +1082,8 @@ exports[`Storyshots a/Label Compact 1`] = `
     background3
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-background4 modifierCompact"
   >
     This is a
@@ -1091,8 +1091,8 @@ exports[`Storyshots a/Label Compact 1`] = `
     background4
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-background5 modifierCompact"
   >
     This is a
@@ -1100,8 +1100,8 @@ exports[`Storyshots a/Label Compact 1`] = `
     background5
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-background6 modifierCompact"
   >
     This is a
@@ -1109,8 +1109,8 @@ exports[`Storyshots a/Label Compact 1`] = `
     background6
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-heading modifierCompact"
   >
     This is a
@@ -1118,8 +1118,8 @@ exports[`Storyshots a/Label Compact 1`] = `
     heading
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-paragraph modifierCompact"
   >
     This is a
@@ -1127,8 +1127,8 @@ exports[`Storyshots a/Label Compact 1`] = `
     paragraph
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-subtitle modifierCompact"
   >
     This is a
@@ -1136,8 +1136,8 @@ exports[`Storyshots a/Label Compact 1`] = `
     subtitle
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-metadata modifierCompact"
   >
     This is a
@@ -1145,8 +1145,8 @@ exports[`Storyshots a/Label Compact 1`] = `
     metadata
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-link modifierCompact"
   >
     This is a
@@ -1154,8 +1154,8 @@ exports[`Storyshots a/Label Compact 1`] = `
     link
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-navlink modifierCompact"
   >
     This is a
@@ -1163,8 +1163,8 @@ exports[`Storyshots a/Label Compact 1`] = `
     navlink
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-twitter modifierCompact"
   >
     This is a
@@ -1172,8 +1172,8 @@ exports[`Storyshots a/Label Compact 1`] = `
     twitter
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-facebook modifierCompact"
   >
     This is a
@@ -1181,8 +1181,8 @@ exports[`Storyshots a/Label Compact 1`] = `
     facebook
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-instagram modifierCompact"
   >
     This is a
@@ -1190,8 +1190,8 @@ exports[`Storyshots a/Label Compact 1`] = `
     instagram
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-google modifierCompact"
   >
     This is a
@@ -1199,8 +1199,8 @@ exports[`Storyshots a/Label Compact 1`] = `
     google
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-black modifierCompact"
   >
     This is a
@@ -1208,8 +1208,8 @@ exports[`Storyshots a/Label Compact 1`] = `
     black
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-anchor modifierCompact"
   >
     This is a
@@ -1217,8 +1217,8 @@ exports[`Storyshots a/Label Compact 1`] = `
     anchor
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-grey modifierCompact"
   >
     This is a
@@ -1226,8 +1226,8 @@ exports[`Storyshots a/Label Compact 1`] = `
     grey
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-pearl modifierCompact"
   >
     This is a
@@ -1235,8 +1235,8 @@ exports[`Storyshots a/Label Compact 1`] = `
     pearl
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-white modifierCompact"
   >
     This is a
@@ -1244,13 +1244,13 @@ exports[`Storyshots a/Label Compact 1`] = `
     white
      
     label
-  </div>,
+  </span>,
 ]
 `;
 
 exports[`Storyshots a/Label Ghost 1`] = `
 [
-  <div
+  <span
     className="base label x-main1 modifierGhost"
   >
     This is a
@@ -1258,8 +1258,8 @@ exports[`Storyshots a/Label Ghost 1`] = `
     main1
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-main2 modifierGhost"
   >
     This is a
@@ -1267,8 +1267,8 @@ exports[`Storyshots a/Label Ghost 1`] = `
     main2
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-main3 modifierGhost"
   >
     This is a
@@ -1276,8 +1276,8 @@ exports[`Storyshots a/Label Ghost 1`] = `
     main3
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-main4 modifierGhost"
   >
     This is a
@@ -1285,8 +1285,8 @@ exports[`Storyshots a/Label Ghost 1`] = `
     main4
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-success modifierGhost"
   >
     This is a
@@ -1294,8 +1294,8 @@ exports[`Storyshots a/Label Ghost 1`] = `
     success
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-warning modifierGhost"
   >
     This is a
@@ -1303,8 +1303,8 @@ exports[`Storyshots a/Label Ghost 1`] = `
     warning
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-error modifierGhost"
   >
     This is a
@@ -1312,8 +1312,8 @@ exports[`Storyshots a/Label Ghost 1`] = `
     error
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-background1 modifierGhost"
   >
     This is a
@@ -1321,8 +1321,8 @@ exports[`Storyshots a/Label Ghost 1`] = `
     background1
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-background2 modifierGhost"
   >
     This is a
@@ -1330,8 +1330,8 @@ exports[`Storyshots a/Label Ghost 1`] = `
     background2
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-background3 modifierGhost"
   >
     This is a
@@ -1339,8 +1339,8 @@ exports[`Storyshots a/Label Ghost 1`] = `
     background3
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-background4 modifierGhost"
   >
     This is a
@@ -1348,8 +1348,8 @@ exports[`Storyshots a/Label Ghost 1`] = `
     background4
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-background5 modifierGhost"
   >
     This is a
@@ -1357,8 +1357,8 @@ exports[`Storyshots a/Label Ghost 1`] = `
     background5
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-background6 modifierGhost"
   >
     This is a
@@ -1366,8 +1366,8 @@ exports[`Storyshots a/Label Ghost 1`] = `
     background6
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-heading modifierGhost"
   >
     This is a
@@ -1375,8 +1375,8 @@ exports[`Storyshots a/Label Ghost 1`] = `
     heading
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-paragraph modifierGhost"
   >
     This is a
@@ -1384,8 +1384,8 @@ exports[`Storyshots a/Label Ghost 1`] = `
     paragraph
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-subtitle modifierGhost"
   >
     This is a
@@ -1393,8 +1393,8 @@ exports[`Storyshots a/Label Ghost 1`] = `
     subtitle
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-metadata modifierGhost"
   >
     This is a
@@ -1402,8 +1402,8 @@ exports[`Storyshots a/Label Ghost 1`] = `
     metadata
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-link modifierGhost"
   >
     This is a
@@ -1411,8 +1411,8 @@ exports[`Storyshots a/Label Ghost 1`] = `
     link
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-navlink modifierGhost"
   >
     This is a
@@ -1420,8 +1420,8 @@ exports[`Storyshots a/Label Ghost 1`] = `
     navlink
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-twitter modifierGhost"
   >
     This is a
@@ -1429,8 +1429,8 @@ exports[`Storyshots a/Label Ghost 1`] = `
     twitter
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-facebook modifierGhost"
   >
     This is a
@@ -1438,8 +1438,8 @@ exports[`Storyshots a/Label Ghost 1`] = `
     facebook
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-instagram modifierGhost"
   >
     This is a
@@ -1447,8 +1447,8 @@ exports[`Storyshots a/Label Ghost 1`] = `
     instagram
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-google modifierGhost"
   >
     This is a
@@ -1456,8 +1456,8 @@ exports[`Storyshots a/Label Ghost 1`] = `
     google
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-black modifierGhost"
   >
     This is a
@@ -1465,8 +1465,8 @@ exports[`Storyshots a/Label Ghost 1`] = `
     black
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-anchor modifierGhost"
   >
     This is a
@@ -1474,8 +1474,8 @@ exports[`Storyshots a/Label Ghost 1`] = `
     anchor
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-grey modifierGhost"
   >
     This is a
@@ -1483,8 +1483,8 @@ exports[`Storyshots a/Label Ghost 1`] = `
     grey
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-pearl modifierGhost"
   >
     This is a
@@ -1492,8 +1492,8 @@ exports[`Storyshots a/Label Ghost 1`] = `
     pearl
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-white modifierGhost"
   >
     This is a
@@ -1501,13 +1501,13 @@ exports[`Storyshots a/Label Ghost 1`] = `
     white
      
     label
-  </div>,
+  </span>,
 ]
 `;
 
 exports[`Storyshots a/Label Normal 1`] = `
 [
-  <div
+  <span
     className="base label x-main1"
   >
     This is a
@@ -1515,8 +1515,8 @@ exports[`Storyshots a/Label Normal 1`] = `
     main1
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-main2"
   >
     This is a
@@ -1524,8 +1524,8 @@ exports[`Storyshots a/Label Normal 1`] = `
     main2
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-main3"
   >
     This is a
@@ -1533,8 +1533,8 @@ exports[`Storyshots a/Label Normal 1`] = `
     main3
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-main4"
   >
     This is a
@@ -1542,8 +1542,8 @@ exports[`Storyshots a/Label Normal 1`] = `
     main4
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-success"
   >
     This is a
@@ -1551,8 +1551,8 @@ exports[`Storyshots a/Label Normal 1`] = `
     success
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-warning"
   >
     This is a
@@ -1560,8 +1560,8 @@ exports[`Storyshots a/Label Normal 1`] = `
     warning
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-error"
   >
     This is a
@@ -1569,8 +1569,8 @@ exports[`Storyshots a/Label Normal 1`] = `
     error
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-background1"
   >
     This is a
@@ -1578,8 +1578,8 @@ exports[`Storyshots a/Label Normal 1`] = `
     background1
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-background2"
   >
     This is a
@@ -1587,8 +1587,8 @@ exports[`Storyshots a/Label Normal 1`] = `
     background2
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-background3"
   >
     This is a
@@ -1596,8 +1596,8 @@ exports[`Storyshots a/Label Normal 1`] = `
     background3
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-background4"
   >
     This is a
@@ -1605,8 +1605,8 @@ exports[`Storyshots a/Label Normal 1`] = `
     background4
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-background5"
   >
     This is a
@@ -1614,8 +1614,8 @@ exports[`Storyshots a/Label Normal 1`] = `
     background5
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-background6"
   >
     This is a
@@ -1623,8 +1623,8 @@ exports[`Storyshots a/Label Normal 1`] = `
     background6
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-heading"
   >
     This is a
@@ -1632,8 +1632,8 @@ exports[`Storyshots a/Label Normal 1`] = `
     heading
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-paragraph"
   >
     This is a
@@ -1641,8 +1641,8 @@ exports[`Storyshots a/Label Normal 1`] = `
     paragraph
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-subtitle"
   >
     This is a
@@ -1650,8 +1650,8 @@ exports[`Storyshots a/Label Normal 1`] = `
     subtitle
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-metadata"
   >
     This is a
@@ -1659,8 +1659,8 @@ exports[`Storyshots a/Label Normal 1`] = `
     metadata
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-link"
   >
     This is a
@@ -1668,8 +1668,8 @@ exports[`Storyshots a/Label Normal 1`] = `
     link
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-navlink"
   >
     This is a
@@ -1677,8 +1677,8 @@ exports[`Storyshots a/Label Normal 1`] = `
     navlink
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-twitter"
   >
     This is a
@@ -1686,8 +1686,8 @@ exports[`Storyshots a/Label Normal 1`] = `
     twitter
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-facebook"
   >
     This is a
@@ -1695,8 +1695,8 @@ exports[`Storyshots a/Label Normal 1`] = `
     facebook
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-instagram"
   >
     This is a
@@ -1704,8 +1704,8 @@ exports[`Storyshots a/Label Normal 1`] = `
     instagram
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-google"
   >
     This is a
@@ -1713,8 +1713,8 @@ exports[`Storyshots a/Label Normal 1`] = `
     google
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-black"
   >
     This is a
@@ -1722,8 +1722,8 @@ exports[`Storyshots a/Label Normal 1`] = `
     black
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-anchor"
   >
     This is a
@@ -1731,8 +1731,8 @@ exports[`Storyshots a/Label Normal 1`] = `
     anchor
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-grey"
   >
     This is a
@@ -1740,8 +1740,8 @@ exports[`Storyshots a/Label Normal 1`] = `
     grey
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-pearl"
   >
     This is a
@@ -1749,8 +1749,8 @@ exports[`Storyshots a/Label Normal 1`] = `
     pearl
      
     label
-  </div>,
-  <div
+  </span>,
+  <span
     className="base label x-white"
   >
     This is a
@@ -1758,49 +1758,117 @@ exports[`Storyshots a/Label Normal 1`] = `
     white
      
     label
-  </div>,
+  </span>,
 ]
 `;
 
-exports[`Storyshots a/LoadingCircle Base 1`] = `
+exports[`Storyshots a/LoadingCircle Base 1`] = `
+<div
+  className="x-main1 b-x"
+>
+  <div
+    className="base loading-circle"
+    style={
+      {
+        "--height-width": "3em",
+        "--stroke-width": undefined,
+        "--x": "var(--on-x)",
+      }
+    }
+  >
+    <svg
+      className="svg-circle"
+      preserveAspectRatio="xMinYMin meet"
+      style={
+        {
+          "--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="square"
+        strokeMiterlimit="10"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/MetaCard Base 1`] = `
+<div
+  style={
+    {
+      "backgroundImage": "linear-gradient(purple, white)",
+      "padding": "1em",
+    }
+  }
+>
+  <div
+    className="base meta-card"
+  >
+    <h3
+      style={
+        {
+          "gridColumn": "2/-1",
+        }
+      }
+    >
+      Column 2
+    </h3>
+    <p
+      style={
+        {
+          "gridColumn": "3/-1",
+        }
+      }
+    >
+      Column 3
+    </p>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/MetaCard With Blur 1`] = `
 <div
-  className="x-main1 b-x"
+  style={
+    {
+      "backgroundImage": "linear-gradient(purple, white)",
+      "padding": "1em",
+    }
+  }
 >
   <div
-    className="base loading-circle"
-    style={
-      {
-        "--height-width": "3em",
-        "--stroke-width": undefined,
-        "--x": "var(--on-x)",
-      }
-    }
+    className="base meta-card modifierBlur"
   >
-    <svg
-      className="svg-circle"
-      preserveAspectRatio="xMinYMin meet"
+    <h3
       style={
         {
-          "--animation-duration": "2s",
+          "gridColumn": "2/-1",
         }
       }
-      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="square"
-        strokeMiterlimit="10"
-      />
-    </svg>
+      Column 2
+    </h3>
+    <p
+      style={
+        {
+          "gridColumn": "3/-1",
+        }
+      }
+    >
+      Column 3
+    </p>
   </div>
 </div>
 `;
@@ -2748,6 +2816,59 @@ exports[`Storyshots a/Spinner Base 1`] = `
 </div>
 `;
 
+exports[`Storyshots a/TextSteps Base 1`] = `
+<div
+  className="grid span-8 md-span-14"
+>
+  <div
+    className="base steps grid"
+  >
+    <div
+      className=" number h3 start-1 span-2 md-start-1 md-span-2"
+    >
+      <p>
+        1
+      </p>
+    </div>
+    <div
+      className=" description"
+    >
+      <p>
+        Join Pareto in minutes. Share your business goals to match with a Project Partner.
+      </p>
+    </div>
+    <div
+      className=" number h3 start-1 span-2 md-start-1 md-span-2"
+    >
+      <p>
+        2
+      </p>
+    </div>
+    <div
+      className=" description"
+    >
+      <p>
+        Receive initial output in 24 hours. Give feedback to fine-tune results and level up your Pareto team.
+      </p>
+    </div>
+    <div
+      className=" number h3 start-1 span-2 md-start-1 md-span-2"
+    >
+      <p>
+        3
+      </p>
+    </div>
+    <div
+      className=" description"
+    >
+      <p>
+        Tap into economies of scale with tried and true playbooks: Benefit from strategic project recommendations. Enjoy continuous workflow improvement and documented learnings.
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots a/Timestamp Base 1`] = `
 <p
   className="base timestamp"
@@ -2770,7 +2891,7 @@ exports[`Storyshots a/Timestamp Distance Format 1`] = `
   className="base timestamp"
   onClick={[Function]}
 >
-  5 months ago
+  7 months ago
 </p>
 `;
 
@@ -2796,6 +2917,14 @@ exports[`Storyshots a/Timestamp Relative Format 1`] = `
 </p>
 `;
 
+exports[`Storyshots a/Tip Base 1`] = `
+<p
+  className="base tip x-main"
+>
+  Remember to wash your vegetables before eating them.
+</p>
+`;
+
 exports[`Storyshots b/Button Arrow Left 1`] = `
 [
   <button
@@ -7100,90 +7229,312 @@ exports[`Storyshots b/Button Simple Disabled 1`] = `
     disabled={true}
     type="button"
   >
-    This is a
-     
-    facebook
-     
-    button
-  </button>,
-  <button
-    className="base button x-instagram modifierSimple"
-    disabled={true}
-    type="button"
+    This is a
+     
+    facebook
+     
+    button
+  </button>,
+  <button
+    className="base button x-instagram modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    instagram
+     
+    button
+  </button>,
+  <button
+    className="base button x-google modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    google
+     
+    button
+  </button>,
+  <button
+    className="base button x-black modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    black
+     
+    button
+  </button>,
+  <button
+    className="base button x-anchor modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    anchor
+     
+    button
+  </button>,
+  <button
+    className="base button x-grey modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    grey
+     
+    button
+  </button>,
+  <button
+    className="base button x-pearl modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    pearl
+     
+    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`] = `
+<div
+  className="base card"
+>
+  <div
+    className="base section"
+  >
+    <h1>
+      Section One
+    </h1>
+  </div>
+  <div
+    className="base section"
+  >
+    <h2>
+      Section Two
+    </h2>
+  </div>
+  <div
+    className="base section"
+  >
+    <h3>
+      Section Three
+    </h3>
+  </div>
+</div>
+`;
+
+exports[`Storyshots b/Card Card With Image Section 1`] = `
+<div
+  className="base card"
+>
+  <div
+    className="base section modifierImage"
+  >
+    <img
+      alt="test"
+      src="https://miro.medium.com/max/1124/1*v9We8Bevk2FFA5YadZNwcQ.jpeg"
+    />
+  </div>
+  <div
+    className="base section"
+  >
+    <h1>
+      Section One
+    </h1>
+  </div>
+  <div
+    className="base section"
+  >
+    <h2>
+      Section Two
+    </h2>
+  </div>
+  <div
+    className="base section"
+  >
+    <h3>
+      Section Three
+    </h3>
+  </div>
+</div>
+`;
+
+exports[`Storyshots b/Card Card With Progress 1`] = `
+<div
+  className="base card"
+>
+  <div
+    className="base progress-bar modifierAttached x-main"
+    data-length="50%"
+    style={
+      {
+        "--height": ".5em",
+        "--progress": 50,
+      }
+    }
+  />
+  <div
+    className="base section"
+  >
+    <h1>
+      Section One
+    </h1>
+  </div>
+  <div
+    className="base section"
+  >
+    <h2>
+      Section Two
+    </h2>
+  </div>
+  <div
+    className="base section"
+  >
+    <h3>
+      Section Three
+    </h3>
+  </div>
+</div>
+`;
+
+exports[`Storyshots b/Card/Group Base 1`] = `
+<div
+  className="base snap-scroller base group span-8 snap-scroller desktop-vertical-flexbox desktop-no-scroll"
+>
+  <div
+    className="base card span-2"
+  >
+    <div
+      className="base section"
+    >
+      <h1>
+        Span Two on Grid
+      </h1>
+    </div>
+  </div>
+  <div
+    className="base card"
   >
-    This is a
-     
-    instagram
-     
-    button
-  </button>,
-  <button
-    className="base button x-google modifierSimple"
-    disabled={true}
-    type="button"
+    <div
+      className="base section"
+    >
+      <h1>
+        Card Two
+      </h1>
+    </div>
+  </div>
+  <div
+    className="base card"
   >
-    This is a
-     
-    google
-     
-    button
-  </button>,
-  <button
-    className="base button x-black modifierSimple"
-    disabled={true}
-    type="button"
+    <div
+      className="base section"
+    >
+      <h1>
+        Card Three
+      </h1>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots b/Card/Group Card Group Grid On Desktop 1`] = `
+<div
+  className="base snap-scroller base group span-8 snap-scroller desktop-grid desktop-no-scroll"
+>
+  <div
+    className="base card span-2"
   >
-    This is a
-     
-    black
-     
-    button
-  </button>,
-  <button
-    className="base button x-anchor modifierSimple"
-    disabled={true}
-    type="button"
+    <div
+      className="base section"
+    >
+      <h1>
+        Span Two on Grid
+      </h1>
+    </div>
+  </div>
+  <div
+    className="base card"
   >
-    This is a
-     
-    anchor
-     
-    button
-  </button>,
-  <button
-    className="base button x-grey modifierSimple"
-    disabled={true}
-    type="button"
+    <div
+      className="base section"
+    >
+      <h1>
+        Card Two
+      </h1>
+    </div>
+  </div>
+  <div
+    className="base card"
   >
-    This is a
-     
-    grey
-     
-    button
-  </button>,
-  <button
-    className="base button x-pearl modifierSimple"
-    disabled={true}
-    type="button"
+    <div
+      className="base section"
+    >
+      <h1>
+        Card Three
+      </h1>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots b/Card/Group Card Group Not Snap Scroller 1`] = `
+<div
+  className="base group span-8 vertical-flexbox desktop-vertical-flexbox"
+>
+  <div
+    className="base card span-2"
   >
-    This is a
-     
-    pearl
-     
-    button
-  </button>,
-  <button
-    className="base button x-white modifierSimple"
-    disabled={true}
-    type="button"
+    <div
+      className="base section"
+    >
+      <h1>
+        Span Two on Grid
+      </h1>
+    </div>
+  </div>
+  <div
+    className="base card"
   >
-    This is a
-     
-    white
-     
-    button
-  </button>,
-]
+    <div
+      className="base section"
+    >
+      <h1>
+        Card Two
+      </h1>
+    </div>
+  </div>
+  <div
+    className="base card"
+  >
+    <div
+      className="base section"
+    >
+      <h1>
+        Card Three
+      </h1>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`Storyshots b/Logo Base 1`] = `
@@ -8608,16 +8959,16 @@ exports[`Storyshots b/Page With Sections 1`] = `
   id="with-sections"
 >
   <section
-    className="base section"
+    className="base section grid"
     id="with-sections_s1"
   >
     Section 1
   </section>
   <section
-    className="base section"
+    className="base section x-main b-x modifierSpaced grid"
     id="with-sections_s2"
   >
-    Section 2. Inspect source for details.
+    Section 2. This section is spaced
   </section>
 </main>
 `;
@@ -9564,16 +9915,20 @@ exports[`Storyshots f/FormInput Base 1`] = `
     >
       What's your first name ?
     </label>
-    <input
-      className="input"
-      disabled={false}
-      id="firstName"
-      name="firstName"
-      onBlur={[Function]}
-      onChange={[Function]}
-      type="text"
-      value="Test"
-    />
+    <div
+      className="input-wrapper with-faded-border"
+    >
+      <input
+        className="input"
+        disabled={false}
+        id="firstName"
+        name="firstName"
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="text"
+        value="Test"
+      />
+    </div>
   </div>
   <div
     className="base text-input form-input y-background2"
@@ -9584,15 +9939,19 @@ exports[`Storyshots f/FormInput Base 1`] = `
     >
       What's your last name ?
     </label>
-    <input
-      className="input"
-      disabled={false}
-      id="lastName"
-      name="lastName"
-      onBlur={[Function]}
-      onChange={[Function]}
-      type="text"
-    />
+    <div
+      className="input-wrapper with-faded-border"
+    >
+      <input
+        className="input"
+        disabled={false}
+        id="lastName"
+        name="lastName"
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="text"
+      />
+    </div>
   </div>
   <div
     className="base text-area-input form-input y-background2"
@@ -9638,7 +9997,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     />
   </div>
   <div
-    className="base choices-input form-input x-background2 y-main2"
+    className="base choices-input form-input x-main"
     style={
       {
         "--grid-columns-desktop": 3,
@@ -9668,6 +10027,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
           value="red"
         />
         <label
+          className="with-faded-border"
           htmlFor="colors-red"
         >
           Color Red
@@ -9687,6 +10047,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
           value="blue"
         />
         <label
+          className="with-faded-border"
           htmlFor="colors-blue"
         >
           Color Blue
@@ -9706,6 +10067,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
           value="green"
         />
         <label
+          className="with-faded-border"
           htmlFor="colors-green"
         >
           Color Green
@@ -9714,7 +10076,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     </div>
   </div>
   <div
-    className="base select-input form-input y-background2"
+    className="base select-input form-input y-interactive"
   >
     <label
       className="base form-label x-main2"
@@ -9723,7 +10085,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
       What do you want for dinner ?
     </label>
     <div
-      className="select-wrapper"
+      className="select-wrapper with-faded-border"
     >
       <select
         className="input"
@@ -9784,16 +10146,20 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     >
       What's your first name ?
     </label>
-    <input
-      className="input"
-      disabled={true}
-      id="firstName"
-      name="firstName"
-      onBlur={[Function]}
-      onChange={[Function]}
-      type="text"
-      value="Test"
-    />
+    <div
+      className="input-wrapper with-faded-border"
+    >
+      <input
+        className="input"
+        disabled={true}
+        id="firstName"
+        name="firstName"
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="text"
+        value="Test"
+      />
+    </div>
   </div>
   <div
     className="base text-input form-input y-background2"
@@ -9804,15 +10170,19 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     >
       What's your last name ?
     </label>
-    <input
-      className="input"
-      disabled={true}
-      id="lastName"
-      name="lastName"
-      onBlur={[Function]}
-      onChange={[Function]}
-      type="text"
-    />
+    <div
+      className="input-wrapper with-faded-border"
+    >
+      <input
+        className="input"
+        disabled={true}
+        id="lastName"
+        name="lastName"
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="text"
+      />
+    </div>
   </div>
   <div
     className="base text-area-input form-input y-background2"
@@ -9838,7 +10208,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     />
   </div>
   <div
-    className="base choices-input form-input x-background2 y-main2"
+    className="base choices-input form-input x-main"
     style={
       {
         "--grid-columns-desktop": 3,
@@ -9868,6 +10238,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
           value="red"
         />
         <label
+          className="with-faded-border"
           htmlFor="colors-red"
         >
           Color Red
@@ -9887,6 +10258,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
           value="blue"
         />
         <label
+          className="with-faded-border"
           htmlFor="colors-blue"
         >
           Color Blue
@@ -9906,6 +10278,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
           value="green"
         />
         <label
+          className="with-faded-border"
           htmlFor="colors-green"
         >
           Color Green
@@ -9914,7 +10287,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     </div>
   </div>
   <div
-    className="base select-input form-input y-background2"
+    className="base select-input form-input y-interactive"
   >
     <label
       className="base form-label x-main2"
@@ -9923,7 +10296,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
       What do you want for dinner ?
     </label>
     <div
-      className="select-wrapper"
+      className="select-wrapper with-faded-border"
     >
       <select
         className="input"
@@ -9984,15 +10357,19 @@ exports[`Storyshots f/FormInput Extensible Form Input 1`] = `
     >
       Extended type input
     </label>
-    <input
-      className="input"
-      disabled={false}
-      id="extended"
-      name="extended"
-      onBlur={[Function]}
-      onChange={[Function]}
-      type="text"
-    />
+    <div
+      className="input-wrapper with-faded-border"
+    >
+      <input
+        className="input"
+        disabled={false}
+        id="extended"
+        name="extended"
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="text"
+      />
+    </div>
   </div>
   <div
     className="debugger"
@@ -10023,19 +10400,23 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
     >
       What's your first name ?
     </label>
-    <input
-      className="input"
-      disabled={false}
-      id="firstName"
-      name="firstName"
-      onBlur={[Function]}
-      onChange={[Function]}
-      type="text"
-      value="Test"
-    />
+    <div
+      className="input-wrapper with-faded-border"
+    >
+      <input
+        className="input"
+        disabled={false}
+        id="firstName"
+        name="firstName"
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="text"
+        value="Test"
+      />
+    </div>
   </div>
   <div
-    className="base choices-input form-input x-background2 y-main2"
+    className="base choices-input form-input x-main"
     style={
       {
         "--grid-columns-desktop": 3,
@@ -10065,6 +10446,7 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
           value="red"
         />
         <label
+          className="with-faded-border"
           htmlFor="colors-red"
         >
           Color Red
@@ -10084,6 +10466,7 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
           value="blue"
         />
         <label
+          className="with-faded-border"
           htmlFor="colors-blue"
         >
           Color Blue
@@ -10103,6 +10486,7 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
           value="green"
         />
         <label
+          className="with-faded-border"
           htmlFor="colors-green"
         >
           Color Green
@@ -10120,7 +10504,7 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
       Select Task Status
     </label>
     <div
-      className="select-wrapper"
+      className="select-wrapper with-faded-border"
     >
       <select
         className="input"
@@ -10162,19 +10546,23 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
     >
       What's your first name ?
     </label>
-    <input
-      className="input"
-      disabled={false}
-      id="firstName"
-      name="firstName"
-      onBlur={[Function]}
-      onChange={[Function]}
-      type="text"
-      value="Test"
-    />
+    <div
+      className="input-wrapper with-faded-border"
+    >
+      <input
+        className="input"
+        disabled={false}
+        id="firstName"
+        name="firstName"
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="text"
+        value="Test"
+      />
+    </div>
   </div>
   <div
-    className="base choices-input form-input x-background2 y-main2"
+    className="base choices-input form-input x-main"
     style={
       {
         "--grid-columns-desktop": 3,
@@ -10204,6 +10592,7 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
           value="red"
         />
         <label
+          className="with-faded-border"
           htmlFor="colors-red"
         >
           Color Red
@@ -10223,6 +10612,7 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
           value="blue"
         />
         <label
+          className="with-faded-border"
           htmlFor="colors-blue"
         >
           Color Blue
@@ -10242,6 +10632,7 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
           value="green"
         />
         <label
+          className="with-faded-border"
           htmlFor="colors-green"
         >
           Color Green
@@ -10365,16 +10756,20 @@ exports[`Storyshots f/FormInput With Ratings Input 1`] = `
     >
       What's your first name ?
     </label>
-    <input
-      className="input"
-      disabled={false}
-      id="firstName"
-      name="firstName"
-      onBlur={[Function]}
-      onChange={[Function]}
-      type="text"
-      value="Test"
-    />
+    <div
+      className="input-wrapper with-faded-border"
+    >
+      <input
+        className="input"
+        disabled={false}
+        id="firstName"
+        name="firstName"
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="text"
+        value="Test"
+      />
+    </div>
   </div>
   <div
     className="base ratings-input form-input"
@@ -10779,7 +11174,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input x-background2 y-main2"
+    className="base choices-input x-main"
     id="colors"
     style={
       {
@@ -10805,6 +11200,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
           value="red"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-red"
         >
           Color Red
@@ -10824,6 +11220,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
           value="blue"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-blue"
         >
           Color Blue
@@ -10843,6 +11240,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
           value="green"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-green"
         >
           Color Green
@@ -10862,6 +11260,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
           value="yellow"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-yellow"
         >
           Color Yellow
@@ -10881,6 +11280,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
           value="oarnge"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-oarnge"
         >
           Color Orange
@@ -10900,6 +11300,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
           value="violet"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-violet"
         >
           Color Violet
@@ -10919,6 +11320,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
           value="brown"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-brown"
         >
           Color Brown
@@ -10938,6 +11340,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
           value="black"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-black"
         >
           Color Black
@@ -10966,7 +11369,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input x-background2 y-main2"
+    className="base choices-input x-main"
     id="colors"
     style={
       {
@@ -10997,6 +11400,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
           value="red"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-red"
         >
           Color Red
@@ -11016,6 +11420,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
           value="blue"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-blue"
         >
           Color Blue
@@ -11035,6 +11440,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
           value="green"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-green"
         >
           Color Green
@@ -11054,6 +11460,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
           value="yellow"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-yellow"
         >
           Color Yellow
@@ -11073,6 +11480,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
           value="oarnge"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-oarnge"
         >
           Color Orange
@@ -11092,6 +11500,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
           value="violet"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-violet"
         >
           Color Violet
@@ -11111,6 +11520,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
           value="brown"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-brown"
         >
           Color Brown
@@ -11130,6 +11540,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
           value="black"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-black"
         >
           Color Black
@@ -11158,7 +11569,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input x-background2 y-main2"
+    className="base choices-input x-main"
     id="colors"
     style={
       {
@@ -11189,6 +11600,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="red"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-red"
         >
           Color Red
@@ -11208,6 +11620,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="blue"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-blue"
         >
           Color Blue
@@ -11227,6 +11640,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="green"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-green"
         >
           Color Green
@@ -11246,6 +11660,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="yellow"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-yellow"
         >
           Color Yellow
@@ -11265,6 +11680,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="oarnge"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-oarnge"
         >
           Color Orange
@@ -11284,6 +11700,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="violet"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-violet"
         >
           Color Violet
@@ -11303,6 +11720,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="brown"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-brown"
         >
           Color Brown
@@ -11322,6 +11740,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="black"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-black"
         >
           Color Black
@@ -11350,7 +11769,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input multiple x-background2 y-main2"
+    className="base choices-input multiple x-main"
     id="colors"
     style={
       {
@@ -11376,6 +11795,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
           value="red"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-red"
         >
           Color Red
@@ -11395,6 +11815,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
           value="blue"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-blue"
         >
           Color Blue
@@ -11414,6 +11835,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
           value="green"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-green"
         >
           Color Green
@@ -11433,6 +11855,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
           value="yellow"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-yellow"
         >
           Color Yellow
@@ -11452,6 +11875,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
           value="oarnge"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-oarnge"
         >
           Color Orange
@@ -11471,6 +11895,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
           value="violet"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-violet"
         >
           Color Violet
@@ -11490,6 +11915,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
           value="brown"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-brown"
         >
           Color Brown
@@ -11509,6 +11935,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
           value="black"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-black"
         >
           Color Black
@@ -11537,7 +11964,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Default Formik Value 1`]
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input multiple x-background2 y-main2"
+    className="base choices-input multiple x-main"
     id="colors"
     style={
       {
@@ -11563,6 +11990,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Default Formik Value 1`]
           value="red"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-red"
         >
           Color Red
@@ -11582,6 +12010,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Default Formik Value 1`]
           value="blue"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-blue"
         >
           Color Blue
@@ -11601,6 +12030,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Default Formik Value 1`]
           value="green"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-green"
         >
           Color Green
@@ -11620,6 +12050,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Default Formik Value 1`]
           value="yellow"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-yellow"
         >
           Color Yellow
@@ -11639,6 +12070,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Default Formik Value 1`]
           value="oarnge"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-oarnge"
         >
           Color Orange
@@ -11658,6 +12090,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Default Formik Value 1`]
           value="violet"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-violet"
         >
           Color Violet
@@ -11677,6 +12110,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Default Formik Value 1`]
           value="brown"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-brown"
         >
           Color Brown
@@ -11696,6 +12130,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Default Formik Value 1`]
           value="black"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-black"
         >
           Color Black
@@ -11724,7 +12159,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input multiple x-background2 y-main2"
+    className="base choices-input multiple x-main"
     id="colors"
     style={
       {
@@ -11750,6 +12185,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="red"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-red"
         >
           Color Red
@@ -11769,6 +12205,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="blue"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-blue"
         >
           Color Blue
@@ -11788,6 +12225,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="green"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-green"
         >
           Color Green
@@ -11807,6 +12245,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="yellow"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-yellow"
         >
           Color Yellow
@@ -11826,6 +12265,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="oarnge"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-oarnge"
         >
           Color Orange
@@ -11845,6 +12285,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="violet"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-violet"
         >
           Color Violet
@@ -11864,6 +12305,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="brown"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-brown"
         >
           Color Brown
@@ -11883,6 +12325,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="black"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-black"
         >
           Color Black
@@ -11911,7 +12354,7 @@ exports[`Storyshots f/fields/ChoicesInput Optional 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input x-background2 y-main2"
+    className="base choices-input x-main"
     id="colors"
     style={
       {
@@ -11943,6 +12386,7 @@ exports[`Storyshots f/fields/ChoicesInput Optional 1`] = `
           value="red"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-red"
         >
           Color Red
@@ -11962,6 +12406,7 @@ exports[`Storyshots f/fields/ChoicesInput Optional 1`] = `
           value="blue"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-blue"
         >
           Color Blue
@@ -11981,6 +12426,7 @@ exports[`Storyshots f/fields/ChoicesInput Optional 1`] = `
           value="green"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-green"
         >
           Color Green
@@ -12000,6 +12446,7 @@ exports[`Storyshots f/fields/ChoicesInput Optional 1`] = `
           value="yellow"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-yellow"
         >
           Color Yellow
@@ -12019,6 +12466,7 @@ exports[`Storyshots f/fields/ChoicesInput Optional 1`] = `
           value="oarnge"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-oarnge"
         >
           Color Orange
@@ -12038,6 +12486,7 @@ exports[`Storyshots f/fields/ChoicesInput Optional 1`] = `
           value="violet"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-violet"
         >
           Color Violet
@@ -12057,6 +12506,7 @@ exports[`Storyshots f/fields/ChoicesInput Optional 1`] = `
           value="brown"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-brown"
         >
           Color Brown
@@ -12076,6 +12526,7 @@ exports[`Storyshots f/fields/ChoicesInput Optional 1`] = `
           value="black"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-black"
         >
           Color Black
@@ -12104,7 +12555,7 @@ exports[`Storyshots f/fields/ChoicesInput With Default Formik Value 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input x-background2 y-main2"
+    className="base choices-input x-main"
     id="colors"
     style={
       {
@@ -12130,6 +12581,7 @@ exports[`Storyshots f/fields/ChoicesInput With Default Formik Value 1`] = `
           value="red"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-red"
         >
           Color Red
@@ -12149,6 +12601,7 @@ exports[`Storyshots f/fields/ChoicesInput With Default Formik Value 1`] = `
           value="blue"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-blue"
         >
           Color Blue
@@ -12168,6 +12621,7 @@ exports[`Storyshots f/fields/ChoicesInput With Default Formik Value 1`] = `
           value="green"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-green"
         >
           Color Green
@@ -12187,6 +12641,7 @@ exports[`Storyshots f/fields/ChoicesInput With Default Formik Value 1`] = `
           value="yellow"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-yellow"
         >
           Color Yellow
@@ -12206,6 +12661,7 @@ exports[`Storyshots f/fields/ChoicesInput With Default Formik Value 1`] = `
           value="oarnge"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-oarnge"
         >
           Color Orange
@@ -12225,6 +12681,7 @@ exports[`Storyshots f/fields/ChoicesInput With Default Formik Value 1`] = `
           value="violet"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-violet"
         >
           Color Violet
@@ -12244,6 +12701,7 @@ exports[`Storyshots f/fields/ChoicesInput With Default Formik Value 1`] = `
           value="brown"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-brown"
         >
           Color Brown
@@ -12263,6 +12721,7 @@ exports[`Storyshots f/fields/ChoicesInput With Default Formik Value 1`] = `
           value="black"
         />
         <label
+          className="with-faded-border"
           htmlFor="color-black"
         >
           Color Black
@@ -12291,7 +12750,7 @@ exports[`Storyshots f/fields/QueryChoices Base 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input x-background2 y-main2"
+    className="base choices-input x-main"
     style={
       {
         "--grid-columns-desktop": 3,
@@ -12321,6 +12780,7 @@ exports[`Storyshots f/fields/QueryChoices Base 1`] = `
           value=""
         />
         <label
+          className="with-faded-border"
           htmlFor="status-"
         >
           Fetching Options
@@ -12349,7 +12809,7 @@ exports[`Storyshots f/fields/QueryChoices Optional 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input x-background2 y-main2"
+    className="base choices-input x-main"
     style={
       {
         "--grid-columns-desktop": 3,
@@ -12380,6 +12840,7 @@ exports[`Storyshots f/fields/QueryChoices Optional 1`] = `
           value=""
         />
         <label
+          className="with-faded-border"
           htmlFor="status-"
         >
           Fetching Options
@@ -12881,7 +13342,7 @@ exports[`Storyshots f/fields/QuerySelect Base 1`] = `
       Select Task Status
     </label>
     <div
-      className="select-wrapper"
+      className="select-wrapper with-faded-border"
     >
       <select
         className="input"
@@ -12924,7 +13385,7 @@ exports[`Storyshots f/fields/QuerySelect Loading Options 1`] = `
       Select Task Status
     </label>
     <div
-      className="select-wrapper"
+      className="select-wrapper with-faded-border"
     >
       <select
         className="input"
@@ -12968,7 +13429,7 @@ exports[`Storyshots f/fields/QuerySelect Optional 1`] = `
        (Optional)
     </label>
     <div
-      className="select-wrapper"
+      className="select-wrapper with-faded-border"
     >
       <select
         className="input"
@@ -13011,7 +13472,7 @@ exports[`Storyshots f/fields/QuerySelect With Default Value 1`] = `
       Select Task Status
     </label>
     <div
-      className="select-wrapper"
+      className="select-wrapper with-faded-border"
     >
       <select
         className="input"
@@ -13702,7 +14163,7 @@ exports[`Storyshots f/fields/SelectInput Base 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base select-input y-background2"
+    className="base select-input y-interactive"
   >
     <label
       className="base form-label x-main2"
@@ -13711,7 +14172,7 @@ exports[`Storyshots f/fields/SelectInput Base 1`] = `
       Work Type
     </label>
     <div
-      className="select-wrapper"
+      className="select-wrapper with-faded-border"
     >
       <select
         className="input"
@@ -13770,7 +14231,75 @@ exports[`Storyshots f/fields/SelectInput Disabled Select Input 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base select-input y-background2"
+    className="base select-input y-interactive"
+  >
+    <label
+      className="base form-label x-main2"
+      htmlFor="workType"
+    >
+      Work Type
+    </label>
+    <div
+      className="select-wrapper with-faded-border"
+    >
+      <select
+        className="input"
+        disabled={true}
+        id="workType"
+        name="workType"
+        onBlur={[Function]}
+        onChange={[Function]}
+        value=""
+      >
+        <option
+          disabled={true}
+          value=""
+        >
+          Select an option
+        </option>
+        <option
+          disabled={false}
+          value="Work"
+        >
+          Work
+        </option>
+        <option
+          disabled={false}
+          value="Managing"
+        >
+          Managing
+        </option>
+        <option
+          disabled={false}
+          value="Training"
+        >
+          Training
+        </option>
+      </select>
+    </div>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/SelectInput Disabled With Description Select Input 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base select-input y-interactive"
   >
     <label
       className="base form-label x-main2"
@@ -13779,7 +14308,7 @@ exports[`Storyshots f/fields/SelectInput Disabled Select Input 1`] = `
       Work Type
     </label>
     <div
-      className="select-wrapper"
+      className="select-wrapper with-faded-border"
     >
       <select
         className="input"
@@ -13816,6 +14345,11 @@ exports[`Storyshots f/fields/SelectInput Disabled Select Input 1`] = `
         </option>
       </select>
     </div>
+    <div
+      className="base description v50 mt-v s-1 x-metadata"
+    >
+      This is a description
+    </div>
   </div>
   <div
     className="debugger"
@@ -13838,7 +14372,7 @@ exports[`Storyshots f/fields/SelectInput Optional 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base select-input y-background2"
+    className="base select-input y-interactive"
   >
     <label
       className="base form-label x-main2"
@@ -13848,7 +14382,7 @@ exports[`Storyshots f/fields/SelectInput Optional 1`] = `
        (Optional)
     </label>
     <div
-      className="select-wrapper"
+      className="select-wrapper with-faded-border"
     >
       <select
         className="input"
@@ -13907,7 +14441,7 @@ exports[`Storyshots f/fields/SelectInput Required 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base select-input y-background2"
+    className="base select-input y-interactive"
   >
     <label
       className="base form-label x-main2"
@@ -13916,7 +14450,7 @@ exports[`Storyshots f/fields/SelectInput Required 1`] = `
       Work Type
     </label>
     <div
-      className="select-wrapper"
+      className="select-wrapper with-faded-border"
     >
       <select
         className="input"
@@ -13975,7 +14509,7 @@ exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base select-input y-background2"
+    className="base select-input y-interactive"
   >
     <label
       className="base form-label x-main2"
@@ -13984,7 +14518,7 @@ exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
       Work Type
     </label>
     <div
-      className="select-wrapper"
+      className="select-wrapper with-faded-border"
     >
       <select
         className="input"
@@ -14068,20 +14602,24 @@ exports[`Storyshots f/fields/TextInput Base 1`] = `
     >
       <label
         className="base form-label v50 mb-v x-main2"
-        htmlFor="firstName"
+        htmlFor="email"
       >
-        What's your first name ?
+        How can we reach you ?
       </label>
-      <input
-        className="input"
-        disabled={false}
-        id="firstName"
-        name="firstName"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="text"
-        value=""
-      />
+      <div
+        className="input-wrapper with-faded-border"
+      >
+        <input
+          className="input"
+          disabled={false}
+          id="email"
+          name="email"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="text"
+          value=""
+        />
+      </div>
     </div>
     <div
       className="debugger"
@@ -14116,16 +14654,19 @@ exports[`Storyshots f/fields/TextInput Date 1`] = `
       >
         Select date
       </label>
-      <input
-        className="input"
-        disabled={false}
-        id="date"
-        name="date"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="date"
-        value=""
-      />
+      <div
+        className="input-wrapper with-faded-border"
+      >
+        <input
+          className="input"
+          disabled={false}
+          id="date"
+          name="date"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="date"
+        />
+      </div>
     </div>
     <div
       className="debugger"
@@ -14156,21 +14697,25 @@ exports[`Storyshots f/fields/TextInput Optional 1`] = `
     >
       <label
         className="base form-label v50 mb-v x-main2"
-        htmlFor="firstName"
+        htmlFor="email"
       >
-        What's your first name ?
+        How can we reach you ?
          (Optional)
       </label>
-      <input
-        className="input"
-        disabled={false}
-        id="firstName"
-        name="firstName"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="text"
-        value=""
-      />
+      <div
+        className="input-wrapper with-faded-border"
+      >
+        <input
+          className="input"
+          disabled={false}
+          id="email"
+          name="email"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="text"
+          value=""
+        />
+      </div>
     </div>
     <div
       className="debugger"
@@ -14205,16 +14750,19 @@ exports[`Storyshots f/fields/TextInput Time 1`] = `
       >
         Select time
       </label>
-      <input
-        className="input"
-        disabled={false}
-        id="time"
-        name="time"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="time"
-        value=""
-      />
+      <div
+        className="input-wrapper with-faded-border"
+      >
+        <input
+          className="input"
+          disabled={false}
+          id="time"
+          name="time"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="time"
+        />
+      </div>
     </div>
     <div
       className="debugger"
@@ -14245,21 +14793,25 @@ exports[`Storyshots f/fields/TextInput With Auto Complete Off 1`] = `
     >
       <label
         className="base form-label v50 mb-v x-main2"
-        htmlFor="firstName"
+        htmlFor="email"
       >
-        What's your first name ?
+        How can we reach you ?
       </label>
-      <input
-        autoComplete="off"
-        className="input"
-        disabled={false}
-        id="firstName"
-        name="firstName"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="text"
-        value=""
-      />
+      <div
+        className="input-wrapper with-faded-border"
+      >
+        <input
+          autoComplete="off"
+          className="input"
+          disabled={false}
+          id="email"
+          name="email"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="text"
+          value=""
+        />
+      </div>
     </div>
     <div
       className="debugger"
@@ -14290,20 +14842,24 @@ exports[`Storyshots f/fields/TextInput With Disabled 1`] = `
     >
       <label
         className="base form-label v50 mb-v x-main2"
-        htmlFor="firstName"
+        htmlFor="email"
       >
-        What's your first name ?
+        How can we reach you ?
       </label>
-      <input
-        className="input"
-        disabled={true}
-        id="firstName"
-        name="firstName"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="text"
-        value=""
-      />
+      <div
+        className="input-wrapper with-faded-border"
+      >
+        <input
+          className="input"
+          disabled={true}
+          id="email"
+          name="email"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="text"
+          value=""
+        />
+      </div>
     </div>
     <div
       className="debugger"
@@ -14334,21 +14890,25 @@ exports[`Storyshots f/fields/TextInput With Placeholder 1`] = `
     >
       <label
         className="base form-label v50 mb-v x-main2"
-        htmlFor="firstName"
+        htmlFor="email"
       >
-        What's your first name ?
+        How can we reach you ?
       </label>
-      <input
-        className="input"
-        disabled={false}
-        id="firstName"
-        name="firstName"
-        onBlur={[Function]}
-        onChange={[Function]}
-        placeholder="First Name"
-        type="text"
-        value=""
-      />
+      <div
+        className="input-wrapper with-faded-border"
+      >
+        <input
+          className="input"
+          disabled={false}
+          id="email"
+          name="email"
+          onBlur={[Function]}
+          onChange={[Function]}
+          placeholder="Email address"
+          type="text"
+          value=""
+        />
+      </div>
     </div>
     <div
       className="debugger"
@@ -14379,20 +14939,24 @@ exports[`Storyshots f/fields/TextInput With Validation 1`] = `
     >
       <label
         className="base form-label v50 mb-v x-main2"
-        htmlFor="firstName"
+        htmlFor="email"
       >
-        What's your first name ?
+        How can we reach you ?
       </label>
-      <input
-        className="input"
-        disabled={false}
-        id="firstName"
-        name="firstName"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="text"
-        value=""
-      />
+      <div
+        className="input-wrapper with-faded-border"
+      >
+        <input
+          className="input"
+          disabled={false}
+          id="email"
+          name="email"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="text"
+          value=""
+        />
+      </div>
     </div>
     <div
       className="debugger"