@pareto-engineering/design-system 2.0.0-alpha.60 → 2.0.0-alpha.62

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

@@ -1400,6 +1400,785 @@ exports[`Storyshots a/IconList Base 1`] = `
 </ul>
 `;
 
+exports[`Storyshots a/Label Base 1`] = `
+<div
+  className="base label x-main1"
+>
+  Label Value
+</div>
+`;
+
+exports[`Storyshots a/Label Compact 1`] = `
+Array [
+  <div
+    className="base label x-main1 modifierCompact"
+  >
+    This is a
+     
+    main1
+     
+    label
+  </div>,
+  <div
+    className="base label x-main2 modifierCompact"
+  >
+    This is a
+     
+    main2
+     
+    label
+  </div>,
+  <div
+    className="base label x-main3 modifierCompact"
+  >
+    This is a
+     
+    main3
+     
+    label
+  </div>,
+  <div
+    className="base label x-main4 modifierCompact"
+  >
+    This is a
+     
+    main4
+     
+    label
+  </div>,
+  <div
+    className="base label x-success modifierCompact"
+  >
+    This is a
+     
+    success
+     
+    label
+  </div>,
+  <div
+    className="base label x-warning modifierCompact"
+  >
+    This is a
+     
+    warning
+     
+    label
+  </div>,
+  <div
+    className="base label x-error modifierCompact"
+  >
+    This is a
+     
+    error
+     
+    label
+  </div>,
+  <div
+    className="base label x-background1 modifierCompact"
+  >
+    This is a
+     
+    background1
+     
+    label
+  </div>,
+  <div
+    className="base label x-background2 modifierCompact"
+  >
+    This is a
+     
+    background2
+     
+    label
+  </div>,
+  <div
+    className="base label x-background3 modifierCompact"
+  >
+    This is a
+     
+    background3
+     
+    label
+  </div>,
+  <div
+    className="base label x-background4 modifierCompact"
+  >
+    This is a
+     
+    background4
+     
+    label
+  </div>,
+  <div
+    className="base label x-background5 modifierCompact"
+  >
+    This is a
+     
+    background5
+     
+    label
+  </div>,
+  <div
+    className="base label x-background6 modifierCompact"
+  >
+    This is a
+     
+    background6
+     
+    label
+  </div>,
+  <div
+    className="base label x-heading modifierCompact"
+  >
+    This is a
+     
+    heading
+     
+    label
+  </div>,
+  <div
+    className="base label x-paragraph modifierCompact"
+  >
+    This is a
+     
+    paragraph
+     
+    label
+  </div>,
+  <div
+    className="base label x-subtitle modifierCompact"
+  >
+    This is a
+     
+    subtitle
+     
+    label
+  </div>,
+  <div
+    className="base label x-metadata modifierCompact"
+  >
+    This is a
+     
+    metadata
+     
+    label
+  </div>,
+  <div
+    className="base label x-link modifierCompact"
+  >
+    This is a
+     
+    link
+     
+    label
+  </div>,
+  <div
+    className="base label x-navlink modifierCompact"
+  >
+    This is a
+     
+    navlink
+     
+    label
+  </div>,
+  <div
+    className="base label x-twitter modifierCompact"
+  >
+    This is a
+     
+    twitter
+     
+    label
+  </div>,
+  <div
+    className="base label x-facebook modifierCompact"
+  >
+    This is a
+     
+    facebook
+     
+    label
+  </div>,
+  <div
+    className="base label x-instagram modifierCompact"
+  >
+    This is a
+     
+    instagram
+     
+    label
+  </div>,
+  <div
+    className="base label x-google modifierCompact"
+  >
+    This is a
+     
+    google
+     
+    label
+  </div>,
+  <div
+    className="base label x-black modifierCompact"
+  >
+    This is a
+     
+    black
+     
+    label
+  </div>,
+  <div
+    className="base label x-anchor modifierCompact"
+  >
+    This is a
+     
+    anchor
+     
+    label
+  </div>,
+  <div
+    className="base label x-grey modifierCompact"
+  >
+    This is a
+     
+    grey
+     
+    label
+  </div>,
+  <div
+    className="base label x-pearl modifierCompact"
+  >
+    This is a
+     
+    pearl
+     
+    label
+  </div>,
+  <div
+    className="base label x-white modifierCompact"
+  >
+    This is a
+     
+    white
+     
+    label
+  </div>,
+]
+`;
+
+exports[`Storyshots a/Label Ghost 1`] = `
+Array [
+  <div
+    className="base label x-main1 modifierGhost"
+  >
+    This is a
+     
+    main1
+     
+    label
+  </div>,
+  <div
+    className="base label x-main2 modifierGhost"
+  >
+    This is a
+     
+    main2
+     
+    label
+  </div>,
+  <div
+    className="base label x-main3 modifierGhost"
+  >
+    This is a
+     
+    main3
+     
+    label
+  </div>,
+  <div
+    className="base label x-main4 modifierGhost"
+  >
+    This is a
+     
+    main4
+     
+    label
+  </div>,
+  <div
+    className="base label x-success modifierGhost"
+  >
+    This is a
+     
+    success
+     
+    label
+  </div>,
+  <div
+    className="base label x-warning modifierGhost"
+  >
+    This is a
+     
+    warning
+     
+    label
+  </div>,
+  <div
+    className="base label x-error modifierGhost"
+  >
+    This is a
+     
+    error
+     
+    label
+  </div>,
+  <div
+    className="base label x-background1 modifierGhost"
+  >
+    This is a
+     
+    background1
+     
+    label
+  </div>,
+  <div
+    className="base label x-background2 modifierGhost"
+  >
+    This is a
+     
+    background2
+     
+    label
+  </div>,
+  <div
+    className="base label x-background3 modifierGhost"
+  >
+    This is a
+     
+    background3
+     
+    label
+  </div>,
+  <div
+    className="base label x-background4 modifierGhost"
+  >
+    This is a
+     
+    background4
+     
+    label
+  </div>,
+  <div
+    className="base label x-background5 modifierGhost"
+  >
+    This is a
+     
+    background5
+     
+    label
+  </div>,
+  <div
+    className="base label x-background6 modifierGhost"
+  >
+    This is a
+     
+    background6
+     
+    label
+  </div>,
+  <div
+    className="base label x-heading modifierGhost"
+  >
+    This is a
+     
+    heading
+     
+    label
+  </div>,
+  <div
+    className="base label x-paragraph modifierGhost"
+  >
+    This is a
+     
+    paragraph
+     
+    label
+  </div>,
+  <div
+    className="base label x-subtitle modifierGhost"
+  >
+    This is a
+     
+    subtitle
+     
+    label
+  </div>,
+  <div
+    className="base label x-metadata modifierGhost"
+  >
+    This is a
+     
+    metadata
+     
+    label
+  </div>,
+  <div
+    className="base label x-link modifierGhost"
+  >
+    This is a
+     
+    link
+     
+    label
+  </div>,
+  <div
+    className="base label x-navlink modifierGhost"
+  >
+    This is a
+     
+    navlink
+     
+    label
+  </div>,
+  <div
+    className="base label x-twitter modifierGhost"
+  >
+    This is a
+     
+    twitter
+     
+    label
+  </div>,
+  <div
+    className="base label x-facebook modifierGhost"
+  >
+    This is a
+     
+    facebook
+     
+    label
+  </div>,
+  <div
+    className="base label x-instagram modifierGhost"
+  >
+    This is a
+     
+    instagram
+     
+    label
+  </div>,
+  <div
+    className="base label x-google modifierGhost"
+  >
+    This is a
+     
+    google
+     
+    label
+  </div>,
+  <div
+    className="base label x-black modifierGhost"
+  >
+    This is a
+     
+    black
+     
+    label
+  </div>,
+  <div
+    className="base label x-anchor modifierGhost"
+  >
+    This is a
+     
+    anchor
+     
+    label
+  </div>,
+  <div
+    className="base label x-grey modifierGhost"
+  >
+    This is a
+     
+    grey
+     
+    label
+  </div>,
+  <div
+    className="base label x-pearl modifierGhost"
+  >
+    This is a
+     
+    pearl
+     
+    label
+  </div>,
+  <div
+    className="base label x-white modifierGhost"
+  >
+    This is a
+     
+    white
+     
+    label
+  </div>,
+]
+`;
+
+exports[`Storyshots a/Label Normal 1`] = `
+Array [
+  <div
+    className="base label x-main1"
+  >
+    This is a
+     
+    main1
+     
+    label
+  </div>,
+  <div
+    className="base label x-main2"
+  >
+    This is a
+     
+    main2
+     
+    label
+  </div>,
+  <div
+    className="base label x-main3"
+  >
+    This is a
+     
+    main3
+     
+    label
+  </div>,
+  <div
+    className="base label x-main4"
+  >
+    This is a
+     
+    main4
+     
+    label
+  </div>,
+  <div
+    className="base label x-success"
+  >
+    This is a
+     
+    success
+     
+    label
+  </div>,
+  <div
+    className="base label x-warning"
+  >
+    This is a
+     
+    warning
+     
+    label
+  </div>,
+  <div
+    className="base label x-error"
+  >
+    This is a
+     
+    error
+     
+    label
+  </div>,
+  <div
+    className="base label x-background1"
+  >
+    This is a
+     
+    background1
+     
+    label
+  </div>,
+  <div
+    className="base label x-background2"
+  >
+    This is a
+     
+    background2
+     
+    label
+  </div>,
+  <div
+    className="base label x-background3"
+  >
+    This is a
+     
+    background3
+     
+    label
+  </div>,
+  <div
+    className="base label x-background4"
+  >
+    This is a
+     
+    background4
+     
+    label
+  </div>,
+  <div
+    className="base label x-background5"
+  >
+    This is a
+     
+    background5
+     
+    label
+  </div>,
+  <div
+    className="base label x-background6"
+  >
+    This is a
+     
+    background6
+     
+    label
+  </div>,
+  <div
+    className="base label x-heading"
+  >
+    This is a
+     
+    heading
+     
+    label
+  </div>,
+  <div
+    className="base label x-paragraph"
+  >
+    This is a
+     
+    paragraph
+     
+    label
+  </div>,
+  <div
+    className="base label x-subtitle"
+  >
+    This is a
+     
+    subtitle
+     
+    label
+  </div>,
+  <div
+    className="base label x-metadata"
+  >
+    This is a
+     
+    metadata
+     
+    label
+  </div>,
+  <div
+    className="base label x-link"
+  >
+    This is a
+     
+    link
+     
+    label
+  </div>,
+  <div
+    className="base label x-navlink"
+  >
+    This is a
+     
+    navlink
+     
+    label
+  </div>,
+  <div
+    className="base label x-twitter"
+  >
+    This is a
+     
+    twitter
+     
+    label
+  </div>,
+  <div
+    className="base label x-facebook"
+  >
+    This is a
+     
+    facebook
+     
+    label
+  </div>,
+  <div
+    className="base label x-instagram"
+  >
+    This is a
+     
+    instagram
+     
+    label
+  </div>,
+  <div
+    className="base label x-google"
+  >
+    This is a
+     
+    google
+     
+    label
+  </div>,
+  <div
+    className="base label x-black"
+  >
+    This is a
+     
+    black
+     
+    label
+  </div>,
+  <div
+    className="base label x-anchor"
+  >
+    This is a
+     
+    anchor
+     
+    label
+  </div>,
+  <div
+    className="base label x-grey"
+  >
+    This is a
+     
+    grey
+     
+    label
+  </div>,
+  <div
+    className="base label x-pearl"
+  >
+    This is a
+     
+    pearl
+     
+    label
+  </div>,
+  <div
+    className="base label x-white"
+  >
+    This is a
+     
+    white
+     
+    label
+  </div>,
+]
+`;
+
 exports[`Storyshots a/LoadingCircle Base 1`] = `
 <div
   className="x-main1 b-x"
@@ -2950,7 +3729,7 @@ exports[`Storyshots a/Timestamp Distance Format 1`] = `
   className="base timestamp"
   onClick={[Function]}
 >
-  16 days ago
+  23 days ago
 </p>
 `;
 
@@ -10204,170 +10983,35 @@ exports[`Storyshots c/ContentSlides With Background Shape 1`] = `
             preserveAspectRatio="xMinYMin meet"
             version="1.1"
             viewBox="0 0 156 30"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <use
-              className=""
-              href="/logo.svg#logo_squares"
-              id="logo_squares"
-              style={
-                Object {
-                  "style": undefined,
-                }
-              }
-            />
-            <use
-              className=""
-              href="/logo.svg#logo_pareto"
-              id="logo_pareto"
-              style={
-                Object {
-                  "style": undefined,
-                }
-              }
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-    <main>
-      <div
-        className="modifierActive slide"
-      >
-        <div
-          className="wrapper"
-        >
-          <div
-            className="content"
-          >
-            <div
-              className="base title"
-            >
-              <h1
-                className="small heading"
-              >
-                Welcome
-              </h1>
-              <p
-                className="subtitle"
-              >
-                Welcome to this site. We hope you will have an amazing experience here.
-              </p>
-            </div>
-            <div
-              className="navigator"
-            >
-              <span />
-              <button
-                className="base button x-main2 next x-main1 modifierCompact"
-                disabled={false}
-                onClick={[Function]}
-                type="button"
-              >
-                Next
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="slide"
-      >
-        <div
-          className="wrapper"
-        >
-          <div
-            className="content"
-          >
-            <div
-              className="base title"
-            >
-              <h1
-                className="small heading"
-              >
-                Part 2
-              </h1>
-              <p
-                className="subtitle"
-              >
-                Welcome to this site. We hope you will have an amazing experience here.
-              </p>
-            </div>
-            <p>
-              In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas, non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus, enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo.
-            </p>
-            <p>
-              Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu. enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo.
-            </p>
-            <p>
-              Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu. enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo. Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu.
-               
-            </p>
-            <p>
-              Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu. enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo. Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu.
-               
-            </p>
-            <p>
-              Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu. enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo. Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu.
-               
-            </p>
-            <div
-              className="navigator"
-            >
-              <span />
-              <button
-                className="base button x-main2 next x-main1 modifierCompact"
-                disabled={false}
-                onClick={[Function]}
-                type="button"
-              >
-                Next
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="slide"
-      >
-        <div
-          className="wrapper"
-        >
-          <div
-            className="content"
-          >
-            <div
-              className="base title"
-            >
-              <h1
-                className="small heading"
-              >
-                Part 3
-              </h1>
-              <p
-                className="subtitle"
-              >
-                Welcome to this site. We hope you will have an amazing experience here.
-              </p>
-            </div>
-            <div
-              className="navigator"
-            >
-              <span />
-              <button
-                className="base button x-main2 next x-main1 modifierCompact"
-                disabled={false}
-                onClick={[Function]}
-                type="button"
-              >
-                Next
-              </button>
-            </div>
-          </div>
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <use
+              className=""
+              href="/logo.svg#logo_squares"
+              id="logo_squares"
+              style={
+                Object {
+                  "style": undefined,
+                }
+              }
+            />
+            <use
+              className=""
+              href="/logo.svg#logo_pareto"
+              id="logo_pareto"
+              style={
+                Object {
+                  "style": undefined,
+                }
+              }
+            />
+          </svg>
         </div>
       </div>
+    </div>
+    <main>
       <div
-        className="slide"
+        className="modifierActive slide"
       >
         <div
           className="wrapper"
@@ -10379,354 +11023,289 @@ exports[`Storyshots c/ContentSlides With Background Shape 1`] = `
               className="base title"
             >
               <h1
-                className="heading"
+                className="small heading"
               >
-                Part 4
+                Welcome
               </h1>
               <p
                 className="subtitle"
               >
-                Welcome to this site. We hope you will have an amazing experience here.
-              </p>
-            </div>
-            <div
-              className="navigator"
-            >
-              <span />
-              <button
-                className="base button x-main2 next x-main1 modifierCompact"
-                disabled={false}
-                onClick={[Function]}
-                type="button"
-              >
-                Next
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </main>
-  </div>
-</div>
-`;
-
-exports[`Storyshots c/Hero Base 1`] = `
-<div
-  className="base hero"
->
-  <div
-    className="title"
-  >
-    <div
-      className="base title"
-    >
-      <h1
-        className="heading"
-      >
-        Say no to busywork.
-        <br />
-        Get back to changing the world
-      </h1>
-      <p
-        className="subtitle"
-      >
-        Send us the repetitive tasks you don't have time for. Focus on the critical tasks only you can do.
-      </p>
-    </div>
-  </div>
-  <div
-    className="illustration"
-  >
-    <svg
-      className="base svg"
-      height="512"
-      preserveAspectRatio="xMinYMin meet"
-      version="1.1"
-      viewBox="0 0 512 512"
-      width="512"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <use
-        className=""
-        href="/sprite.svg"
-        style={
-          Object {
-            "style": undefined,
-          }
-        }
-      />
-    </svg>
-  </div>
-  <div
-    className="cta"
-  >
-    <button
-      className="base button x-primary x-main1"
-      type="button"
-    >
-      Free trial
-    </button>
-    <p
-      className="s-1 v1 mt-v"
-    >
-      No credit card required. Cancel anytime.
-    </p>
-  </div>
-</div>
-`;
-
-exports[`Storyshots c/Shortener Base 1`] = `
-<span
-  className="base shortener"
-  style={
-    Object {
-      "maxWidth": "300px",
-    }
-  }
->
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-  ... 
-  <button
-    className="base button s-2 x-main1 modifierSimple"
-    onClick={[Function]}
-    type="button"
-  >
-    Show
-  </button>
-</span>
-`;
-
-exports[`Storyshots c/SocialMediaShareButton Facebook 1`] = `
-<a
-  className="base social-media-share-button x-facebook"
-  href="https://www.facebook.com/sharer/sharer.php?u=http://localhost/#/welcome"
-  rel="noreferrer"
-  target="_blank"
->
-  <button
-    type="button"
-  >
-    f
-  </button>
-</a>
-`;
-
-exports[`Storyshots c/SocialMediaShareButton Twitter 1`] = `
-<a
-  className="base social-media-share-button x-twitter"
-  href="https://twitter.com/intent/tweet?url=http://localhost/#/welcome"
-  rel="noreferrer"
-  target="_blank"
->
-  <button
-    type="button"
-  >
-    t
-  </button>
-</a>
-`;
-
-exports[`Storyshots f/FormInput Base 1`] = `
-<form
-  action="#"
-  onReset={[Function]}
-  onSubmit={[Function]}
->
-  <div
-    className="base text-input form-input y-background2"
-  >
-    <label
-      className="base label v50 mb-v x-main2"
-      htmlFor="firstName"
-    >
-      What's your first name ?
-    </label>
-    <input
-      className="input"
-      disabled={false}
-      id="firstName"
-      name="firstName"
-      onBlur={[Function]}
-      onChange={[Function]}
-      type="text"
-      value="Test"
-    />
-  </div>
-  <div
-    className="base text-input form-input y-background2"
-  >
-    <label
-      className="base label v50 mb-v x-main2"
-      htmlFor="lastName"
-    >
-      What's your last name ?
-    </label>
-    <input
-      className="input"
-      disabled={false}
-      id="lastName"
-      name="lastName"
-      onBlur={[Function]}
-      onChange={[Function]}
-      type="text"
-    />
-  </div>
-  <div
-    className="base text-area-input form-input y-background2"
-  >
-    <label
-      className="base label v50 mb-v x-main2"
-      htmlFor="description"
-    >
-      Describe yourself in a few sentences
-    </label>
-    <textarea
-      className="textarea"
-      disabled={false}
-      name="description"
-      onBlur={[Function]}
-      onChange={[Function]}
-      rows={3}
-      style={
-        Object {
-          "resize": "vertical",
-        }
-      }
-    />
-  </div>
-  <div
-    className="base choices-input form-input x-background2 y-main2"
-    style={
-      Object {
-        "--grid-columns-desktop": 3,
-        "--grid-columns-mobile": 2,
-      }
-    }
-  >
-    <p
-      className="base label x-main2"
-    >
-      What are your favourite colors ?
-    </p>
-    <div
-      className="choices"
-    >
+                Welcome to this site. We hope you will have an amazing experience here.
+              </p>
+            </div>
+            <div
+              className="navigator"
+            >
+              <span />
+              <button
+                className="base button x-main2 next x-main1 modifierCompact"
+                disabled={false}
+                onClick={[Function]}
+                type="button"
+              >
+                Next
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
       <div
-        className="base choice"
+        className="slide"
       >
-        <input
-          checked={false}
-          disabled={false}
-          id="colors-red"
-          name="colors"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value="red"
-        />
-        <label
-          htmlFor="colors-red"
+        <div
+          className="wrapper"
         >
-          Color Red
-        </label>
+          <div
+            className="content"
+          >
+            <div
+              className="base title"
+            >
+              <h1
+                className="small heading"
+              >
+                Part 2
+              </h1>
+              <p
+                className="subtitle"
+              >
+                Welcome to this site. We hope you will have an amazing experience here.
+              </p>
+            </div>
+            <p>
+              In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas, non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus, enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo.
+            </p>
+            <p>
+              Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu. enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo.
+            </p>
+            <p>
+              Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu. enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo. Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu.
+               
+            </p>
+            <p>
+              Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu. enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo. Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu.
+               
+            </p>
+            <p>
+              Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu. enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo. Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu.
+               
+            </p>
+            <div
+              className="navigator"
+            >
+              <span />
+              <button
+                className="base button x-main2 next x-main1 modifierCompact"
+                disabled={false}
+                onClick={[Function]}
+                type="button"
+              >
+                Next
+              </button>
+            </div>
+          </div>
+        </div>
       </div>
       <div
-        className="base choice"
+        className="slide"
       >
-        <input
-          checked={false}
-          disabled={false}
-          id="colors-blue"
-          name="colors"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value="blue"
-        />
-        <label
-          htmlFor="colors-blue"
+        <div
+          className="wrapper"
         >
-          Color Blue
-        </label>
+          <div
+            className="content"
+          >
+            <div
+              className="base title"
+            >
+              <h1
+                className="small heading"
+              >
+                Part 3
+              </h1>
+              <p
+                className="subtitle"
+              >
+                Welcome to this site. We hope you will have an amazing experience here.
+              </p>
+            </div>
+            <div
+              className="navigator"
+            >
+              <span />
+              <button
+                className="base button x-main2 next x-main1 modifierCompact"
+                disabled={false}
+                onClick={[Function]}
+                type="button"
+              >
+                Next
+              </button>
+            </div>
+          </div>
+        </div>
       </div>
       <div
-        className="base choice"
+        className="slide"
       >
-        <input
-          checked={false}
-          disabled={false}
-          id="colors-green"
-          name="colors"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value="green"
-        />
-        <label
-          htmlFor="colors-green"
+        <div
+          className="wrapper"
         >
-          Color Green
-        </label>
+          <div
+            className="content"
+          >
+            <div
+              className="base title"
+            >
+              <h1
+                className="heading"
+              >
+                Part 4
+              </h1>
+              <p
+                className="subtitle"
+              >
+                Welcome to this site. We hope you will have an amazing experience here.
+              </p>
+            </div>
+            <div
+              className="navigator"
+            >
+              <span />
+              <button
+                className="base button x-main2 next x-main1 modifierCompact"
+                disabled={false}
+                onClick={[Function]}
+                type="button"
+              >
+                Next
+              </button>
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
+    </main>
   </div>
+</div>
+`;
+
+exports[`Storyshots c/Hero Base 1`] = `
+<div
+  className="base hero"
+>
   <div
-    className="base select-input form-input y-background2"
+    className="title"
   >
-    <label
-      className="base label x-main2"
-      htmlFor="food"
-    >
-      What do you want for dinner ?
-    </label>
     <div
-      className="select-wrapper"
+      className="base title"
     >
-      <select
-        className="input"
-        disabled={false}
-        id="food"
-        name="food"
-        onBlur={[Function]}
-        onChange={[Function]}
-        value=""
+      <h1
+        className="heading"
       >
-        <option
-          disabled={false}
-          value="italian"
-        >
-          A nice pizza
-        </option>
-        <option
-          disabled={false}
-          value="turkish"
-        >
-          A delicious kebab
-        </option>
-        <option
-          disabled={false}
-          value="french"
-        >
-          A three course delicate french meal
-        </option>
-      </select>
+        Say no to busywork.
+        <br />
+        Get back to changing the world
+      </h1>
+      <p
+        className="subtitle"
+      >
+        Send us the repetitive tasks you don't have time for. Focus on the critical tasks only you can do.
+      </p>
     </div>
   </div>
   <div
-    className="debugger"
+    className="illustration"
+  >
+    <svg
+      className="base svg"
+      height="512"
+      preserveAspectRatio="xMinYMin meet"
+      version="1.1"
+      viewBox="0 0 512 512"
+      width="512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <use
+        className=""
+        href="/sprite.svg"
+        style={
+          Object {
+            "style": undefined,
+          }
+        }
+      />
+    </svg>
+  </div>
+  <div
+    className="cta"
   >
     <button
-      className="base button x-main2"
-      onClick={[Function]}
+      className="base button x-primary x-main1"
       type="button"
     >
-      Open FormDebugger
+      Free trial
     </button>
+    <p
+      className="s-1 v1 mt-v"
+    >
+      No credit card required. Cancel anytime.
+    </p>
   </div>
-</form>
+</div>
 `;
 
-exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
+exports[`Storyshots c/Shortener Base 1`] = `
+<span
+  className="base shortener"
+  style={
+    Object {
+      "maxWidth": "300px",
+    }
+  }
+>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+  ... 
+  <button
+    className="base button s-2 x-main1 modifierSimple"
+    onClick={[Function]}
+    type="button"
+  >
+    Show
+  </button>
+</span>
+`;
+
+exports[`Storyshots c/SocialMediaShareButton Facebook 1`] = `
+<a
+  className="base social-media-share-button x-facebook"
+  href="https://www.facebook.com/sharer/sharer.php?u=http://localhost/#/welcome"
+  rel="noreferrer"
+  target="_blank"
+>
+  <button
+    type="button"
+  >
+    f
+  </button>
+</a>
+`;
+
+exports[`Storyshots c/SocialMediaShareButton Twitter 1`] = `
+<a
+  className="base social-media-share-button x-twitter"
+  href="https://twitter.com/intent/tweet?url=http://localhost/#/welcome"
+  rel="noreferrer"
+  target="_blank"
+>
+  <button
+    type="button"
+  >
+    t
+  </button>
+</a>
+`;
+
+exports[`Storyshots f/FormInput Base 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -10743,7 +11322,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     </label>
     <input
       className="input"
-      disabled={true}
+      disabled={false}
       id="firstName"
       name="firstName"
       onBlur={[Function]}
@@ -10761,234 +11340,57 @@ 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>
-  <div
-    className="base text-area-input form-input y-background2"
-  >
-    <label
-      className="base label v50 mb-v x-main2"
-      htmlFor="description"
-    >
-      Describe yourself in a few sentences
-    </label>
-    <textarea
-      className="textarea"
-      disabled={true}
-      name="description"
-      onBlur={[Function]}
-      onChange={[Function]}
-      rows={3}
-      style={
-        Object {
-          "resize": "vertical",
-        }
-      }
-    />
-  </div>
-  <div
-    className="base choices-input form-input x-background2 y-main2"
-    style={
-      Object {
-        "--grid-columns-desktop": 3,
-        "--grid-columns-mobile": 2,
-      }
-    }
-  >
-    <p
-      className="base label x-main2"
-    >
-      What are your favourite colors ?
-    </p>
-    <div
-      className="choices"
-    >
-      <div
-        className="base choice"
-      >
-        <input
-          checked={false}
-          disabled={true}
-          id="colors-red"
-          name="colors"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value="red"
-        />
-        <label
-          htmlFor="colors-red"
-        >
-          Color Red
-        </label>
-      </div>
-      <div
-        className="base choice"
-      >
-        <input
-          checked={false}
-          disabled={true}
-          id="colors-blue"
-          name="colors"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value="blue"
-        />
-        <label
-          htmlFor="colors-blue"
-        >
-          Color Blue
-        </label>
-      </div>
-      <div
-        className="base choice"
-      >
-        <input
-          checked={false}
-          disabled={true}
-          id="colors-green"
-          name="colors"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value="green"
-        />
-        <label
-          htmlFor="colors-green"
-        >
-          Color Green
-        </label>
-      </div>
-    </div>
-  </div>
-  <div
-    className="base select-input form-input y-background2"
-  >
-    <label
-      className="base label x-main2"
-      htmlFor="food"
-    >
-      What do you want for dinner ?
-    </label>
-    <div
-      className="select-wrapper"
-    >
-      <select
-        className="input"
-        disabled={true}
-        id="food"
-        name="food"
-        onBlur={[Function]}
-        onChange={[Function]}
-        value=""
-      >
-        <option
-          disabled={false}
-          value="italian"
-        >
-          A nice pizza
-        </option>
-        <option
-          disabled={false}
-          value="turkish"
-        >
-          A delicious kebab
-        </option>
-        <option
-          disabled={false}
-          value="french"
-        >
-          A three course delicate french meal
-        </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/FormInput Extensible Form Input 1`] = `
-<form
-  action="#"
-  onReset={[Function]}
-  onSubmit={[Function]}
->
-  <div
-    className="base text-input form-input y-background2"
-  >
-    <label
-      className="base label v50 mb-v x-main2"
-      htmlFor="extended"
-    >
-      Extended type input
-    </label>
     <input
       className="input"
       disabled={false}
-      id="extended"
-      name="extended"
+      id="lastName"
+      name="lastName"
       onBlur={[Function]}
       onChange={[Function]}
       type="text"
     />
   </div>
   <div
-    className="debugger"
+    className="base text-area-input form-input y-background2"
   >
-    <button
-      className="base button x-main2"
-      onClick={[Function]}
-      type="button"
+    <label
+      className="base label v50 mb-v x-main2"
+      htmlFor="description"
     >
-      Open FormDebugger
-    </button>
+      Describe yourself in a few sentences
+    </label>
+    <textarea
+      className="textarea"
+      disabled={false}
+      name="description"
+      onBlur={[Function]}
+      onChange={[Function]}
+      rows={3}
+      style={
+        Object {
+          "resize": "vertical",
+        }
+      }
+    />
   </div>
-</form>
-`;
-
-exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
-<form
-  action="#"
-  onReset={[Function]}
-  onSubmit={[Function]}
->
   <div
-    className="base text-input form-input y-background2"
+    className="base checkbox form-input"
   >
     <label
-      className="base label v50 mb-v x-main2"
-      htmlFor="firstName"
+      className="base label x-main2"
+      htmlFor="urgent"
     >
-      What's your first name ?
+      Urgent
     </label>
     <input
+      checked={false}
       className="input"
       disabled={false}
-      id="firstName"
-      name="firstName"
+      id="urgent"
+      name="urgent"
       onBlur={[Function]}
       onChange={[Function]}
-      type="text"
-      value="Test"
+      type="checkbox"
     />
   </div>
   <div
@@ -11012,9 +11414,8 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="colors-red"
+          id="undefined-red"
           name="colors"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11022,7 +11423,7 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
           value="red"
         />
         <label
-          htmlFor="colors-red"
+          htmlFor="undefined-red"
         >
           Color Red
         </label>
@@ -11031,9 +11432,8 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="colors-blue"
+          id="undefined-blue"
           name="colors"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11041,7 +11441,7 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
           value="blue"
         />
         <label
-          htmlFor="colors-blue"
+          htmlFor="undefined-blue"
         >
           Color Blue
         </label>
@@ -11050,9 +11450,8 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="colors-green"
+          id="undefined-green"
           name="colors"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11060,7 +11459,7 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
           value="green"
         />
         <label
-          htmlFor="colors-green"
+          htmlFor="undefined-green"
         >
           Color Green
         </label>
@@ -11072,9 +11471,9 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
   >
     <label
       className="base label x-main2"
-      htmlFor="status"
+      htmlFor="food"
     >
-      Select Task Status
+      What do you want for dinner ?
     </label>
     <div
       className="select-wrapper"
@@ -11082,12 +11481,31 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
       <select
         className="input"
         disabled={false}
-        id="status"
-        name="status"
+        id="food"
+        name="food"
         onBlur={[Function]}
         onChange={[Function]}
         value=""
-      />
+      >
+        <option
+          disabled={false}
+          value="italian"
+        >
+          A nice pizza
+        </option>
+        <option
+          disabled={false}
+          value="turkish"
+        >
+          A delicious kebab
+        </option>
+        <option
+          disabled={false}
+          value="french"
+        >
+          A three course delicate french meal
+        </option>
+      </select>
     </div>
   </div>
   <div
@@ -11104,7 +11522,7 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/FormInput With Query Combobox 1`] = `
+exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -11121,7 +11539,7 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
     </label>
     <input
       className="input"
-      disabled={false}
+      disabled={true}
       id="firstName"
       name="firstName"
       onBlur={[Function]}
@@ -11130,338 +11548,163 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
       value="Test"
     />
   </div>
-  <div
-    className="base choices-input form-input x-background2 y-main2"
-    style={
-      Object {
-        "--grid-columns-desktop": 3,
-        "--grid-columns-mobile": 2,
-      }
-    }
-  >
-    <p
-      className="base label x-main2"
-    >
-      What are your favourite colors ?
-    </p>
-    <div
-      className="choices"
-    >
-      <div
-        className="base choice"
-      >
-        <input
-          checked={false}
-          disabled={false}
-          id="colors-red"
-          name="colors"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value="red"
-        />
-        <label
-          htmlFor="colors-red"
-        >
-          Color Red
-        </label>
-      </div>
-      <div
-        className="base choice"
-      >
-        <input
-          checked={false}
-          disabled={false}
-          id="colors-blue"
-          name="colors"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value="blue"
-        />
-        <label
-          htmlFor="colors-blue"
-        >
-          Color Blue
-        </label>
-      </div>
-      <div
-        className="base choice"
-      >
-        <input
-          checked={false}
-          disabled={false}
-          id="colors-green"
-          name="colors"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value="green"
-        />
-        <label
-          htmlFor="colors-green"
-        >
-          Color Green
-        </label>
-      </div>
-    </div>
-  </div>
-  <div
-    className="base combobox form-input y-background2"
-  >
-    <label
-      className="base label x-main2"
-      htmlFor="team"
-      id="downshift-0-label"
-    >
-      Search for a team
-    </label>
-    <div
-      aria-expanded={false}
-      aria-haspopup="listbox"
-      aria-owns="downshift-0-menu"
-      className="input-wrapper"
-      role="combobox"
-    >
-      <input
-        aria-autocomplete="list"
-        aria-controls="downshift-0-menu"
-        aria-labelledby="downshift-0-label"
-        autoComplete="off"
-        className="input"
-        disabled={false}
-        id="downshift-0-input"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onKeyDown={[Function]}
-        value=""
-      />
-    </div>
-    <div
-      className="base popover x-background1 bottom left"
-    >
-      <ul
-        aria-labelledby="downshift-0-label"
-        className="base menu"
-        id="downshift-0-menu"
-        onMouseLeave={[Function]}
-        role="listbox"
-      />
-    </div>
-  </div>
-  <div
-    className="base multiple-combobox form-input y-background2"
-  >
-    <label
-      className="base label x-main2"
-      htmlFor="teams"
-      id="downshift-1-label"
-    >
-      Search for teams
-    </label>
-    <div
-      aria-expanded={false}
-      aria-haspopup="listbox"
-      aria-owns="downshift-1-menu"
-      className="input-wrapper"
-      role="combobox"
-    >
-      <input
-        aria-autocomplete="list"
-        aria-controls="downshift-1-menu"
-        aria-labelledby="downshift-1-label"
-        autoComplete="off"
-        className="input"
-        disabled={false}
-        id="downshift-1-input"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        value=""
-      />
-    </div>
-    <div
-      className="base popover x-background1 bottom left"
-    >
-      <ul
-        aria-labelledby="downshift-1-label"
-        className="base menu"
-        id="downshift-1-menu"
-        onMouseLeave={[Function]}
-        role="listbox"
-      />
-    </div>
-  </div>
-  <div
-    className="debugger"
-  >
-    <button
-      className="base button x-main2"
-      onClick={[Function]}
-      type="button"
-    >
-      Open FormDebugger
-    </button>
-  </div>
-</form>
-`;
-
-exports[`Storyshots f/FormInput With Ratings Input 1`] = `
-<form
-  action="#"
-  onReset={[Function]}
-  onSubmit={[Function]}
->
   <div
     className="base text-input form-input y-background2"
   >
     <label
       className="base label v50 mb-v x-main2"
-      htmlFor="firstName"
+      htmlFor="lastName"
     >
-      What's your first name ?
+      What's your last name ?
     </label>
     <input
       className="input"
-      disabled={false}
-      id="firstName"
-      name="firstName"
+      disabled={true}
+      id="lastName"
+      name="lastName"
       onBlur={[Function]}
       onChange={[Function]}
       type="text"
-      value="Test"
     />
   </div>
   <div
-    className="base ratings-input form-input"
+    className="base text-area-input form-input y-background2"
   >
     <label
-      className="base label input-label v50 mb-v x-main2"
-      htmlFor="ratings"
+      className="base label v50 mb-v x-main2"
+      htmlFor="description"
     >
-      Your Rating
+      Describe yourself in a few sentences
     </label>
+    <textarea
+      className="textarea"
+      disabled={true}
+      name="description"
+      onBlur={[Function]}
+      onChange={[Function]}
+      rows={3}
+      style={
+        Object {
+          "resize": "vertical",
+        }
+      }
+    />
+  </div>
+  <div
+    className="base choices-input form-input x-background2 y-main2"
+    style={
+      Object {
+        "--grid-columns-desktop": 3,
+        "--grid-columns-mobile": 2,
+      }
+    }
+  >
+    <p
+      className="base label x-main2"
+    >
+      What are your favourite colors ?
+    </p>
     <div
-      className="stars"
+      className="choices"
     >
       <div
-        className="base rating x-main1 y-background2"
+        className="base choice"
       >
-        <label
-          htmlFor="ratings-1"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <span
-            className="f-icons c-dark-y"
-          >
-            [
-          </span>
-        </label>
         <input
-          id="ratings-1"
-          name="ratings"
+          disabled={true}
+          id="undefined-red"
+          name="colors"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
-          value={1}
+          value="red"
         />
-      </div>
-      <div
-        className="base rating x-main1 y-background2"
-      >
         <label
-          htmlFor="ratings-2"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
+          htmlFor="undefined-red"
         >
-          <span
-            className="f-icons c-dark-y"
-          >
-            [
-          </span>
+          Color Red
         </label>
-        <input
-          id="ratings-2"
-          name="ratings"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value={2}
-        />
       </div>
       <div
-        className="base rating x-main1 y-background2"
+        className="base choice"
       >
-        <label
-          htmlFor="ratings-3"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <span
-            className="f-icons c-dark-y"
-          >
-            [
-          </span>
-        </label>
         <input
-          id="ratings-3"
-          name="ratings"
+          disabled={true}
+          id="undefined-blue"
+          name="colors"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
-          value={3}
+          value="blue"
         />
-      </div>
-      <div
-        className="base rating x-main1 y-background2"
-      >
         <label
-          htmlFor="ratings-4"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
+          htmlFor="undefined-blue"
         >
-          <span
-            className="f-icons c-dark-y"
-          >
-            [
-          </span>
+          Color Blue
         </label>
-        <input
-          id="ratings-4"
-          name="ratings"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value={4}
-        />
       </div>
       <div
-        className="base rating x-main1 y-background2"
+        className="base choice"
       >
-        <label
-          htmlFor="ratings-5"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <span
-            className="f-icons c-dark-y"
-          >
-            [
-          </span>
-        </label>
         <input
-          id="ratings-5"
-          name="ratings"
+          disabled={true}
+          id="undefined-green"
+          name="colors"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
-          value={5}
+          value="green"
         />
+        <label
+          htmlFor="undefined-green"
+        >
+          Color Green
+        </label>
       </div>
     </div>
   </div>
+  <div
+    className="base select-input form-input y-background2"
+  >
+    <label
+      className="base label x-main2"
+      htmlFor="food"
+    >
+      What do you want for dinner ?
+    </label>
+    <div
+      className="select-wrapper"
+    >
+      <select
+        className="input"
+        disabled={true}
+        id="food"
+        name="food"
+        onBlur={[Function]}
+        onChange={[Function]}
+        value=""
+      >
+        <option
+          disabled={false}
+          value="italian"
+        >
+          A nice pizza
+        </option>
+        <option
+          disabled={false}
+          value="turkish"
+        >
+          A delicious kebab
+        </option>
+        <option
+          disabled={false}
+          value="french"
+        >
+          A three course delicate french meal
+        </option>
+      </select>
+    </div>
+  </div>
   <div
     className="debugger"
   >
@@ -11476,37 +11719,73 @@ exports[`Storyshots f/FormInput With Ratings Input 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/common/Description Base 1`] = `
+exports[`Storyshots f/FormInput Extensible Form Input 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
   <div
-    className="base description x-metadata"
+    className="base text-input form-input y-background2"
   >
-    Sample Description
+    <label
+      className="base label v50 mb-v x-main2"
+      htmlFor="extended"
+    >
+      Extended type input
+    </label>
+    <input
+      className="input"
+      disabled={false}
+      id="extended"
+      name="extended"
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="text"
+    />
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
   </div>
 </form>
 `;
 
-exports[`Storyshots f/common/Label Base 1`] = `
-<label
-  className="base label x-main2"
->
-  Sample Label
-</label>
-`;
-
-exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
+exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input x-background2 y-main2"
-    id="colors"
+    className="base text-input form-input y-background2"
+  >
+    <label
+      className="base label v50 mb-v x-main2"
+      htmlFor="firstName"
+    >
+      What's your first name ?
+    </label>
+    <input
+      className="input"
+      disabled={false}
+      id="firstName"
+      name="firstName"
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="text"
+      value="Test"
+    />
+  </div>
+  <div
+    className="base choices-input form-input x-background2 y-main2"
     style={
       Object {
         "--grid-columns-desktop": 3,
@@ -11514,6 +11793,11 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
       }
     }
   >
+    <p
+      className="base label x-main2"
+    >
+      What are your favourite colors ?
+    </p>
     <div
       className="choices"
     >
@@ -11521,17 +11805,16 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-red"
-          name="color"
+          id="undefined-red"
+          name="colors"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
           value="red"
         />
         <label
-          htmlFor="color-red"
+          htmlFor="undefined-red"
         >
           Color Red
         </label>
@@ -11540,17 +11823,16 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-blue"
-          name="color"
+          id="undefined-blue"
+          name="colors"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
           value="blue"
         />
         <label
-          htmlFor="color-blue"
+          htmlFor="undefined-blue"
         >
           Color Blue
         </label>
@@ -11559,118 +11841,245 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-green"
-          name="color"
+          id="undefined-green"
+          name="colors"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
           value="green"
         />
         <label
-          htmlFor="color-green"
+          htmlFor="undefined-green"
         >
           Color Green
         </label>
       </div>
+    </div>
+  </div>
+  <div
+    className="base select-input form-input y-background2"
+  >
+    <label
+      className="base label x-main2"
+      htmlFor="status"
+    >
+      Select Task Status
+    </label>
+    <div
+      className="select-wrapper"
+    >
+      <select
+        className="input"
+        disabled={false}
+        id="status"
+        name="status"
+        onBlur={[Function]}
+        onChange={[Function]}
+        value=""
+      />
+    </div>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/FormInput With Query Combobox 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base text-input form-input y-background2"
+  >
+    <label
+      className="base label v50 mb-v x-main2"
+      htmlFor="firstName"
+    >
+      What's your first name ?
+    </label>
+    <input
+      className="input"
+      disabled={false}
+      id="firstName"
+      name="firstName"
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="text"
+      value="Test"
+    />
+  </div>
+  <div
+    className="base choices-input form-input x-background2 y-main2"
+    style={
+      Object {
+        "--grid-columns-desktop": 3,
+        "--grid-columns-mobile": 2,
+      }
+    }
+  >
+    <p
+      className="base label x-main2"
+    >
+      What are your favourite colors ?
+    </p>
+    <div
+      className="choices"
+    >
       <div
         className="base choice"
       >
         <input
-          checked={false}
-          disabled={false}
-          id="color-yellow"
-          name="color"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value="yellow"
-        />
-        <label
-          htmlFor="color-yellow"
-        >
-          Color Yellow
-        </label>
-      </div>
-      <div
-        className="base choice"
-      >
-        <input
-          checked={false}
-          disabled={false}
-          id="color-oarnge"
-          name="color"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value="oarnge"
-        />
-        <label
-          htmlFor="color-oarnge"
-        >
-          Color Orange
-        </label>
-      </div>
-      <div
-        className="base choice"
-      >
-        <input
-          checked={false}
           disabled={false}
-          id="color-violet"
-          name="color"
+          id="undefined-red"
+          name="colors"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
-          value="violet"
+          value="red"
         />
         <label
-          htmlFor="color-violet"
+          htmlFor="undefined-red"
         >
-          Color Violet
+          Color Red
         </label>
       </div>
       <div
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-brown"
-          name="color"
+          id="undefined-blue"
+          name="colors"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
-          value="brown"
+          value="blue"
         />
         <label
-          htmlFor="color-brown"
+          htmlFor="undefined-blue"
         >
-          Color Brown
+          Color Blue
         </label>
       </div>
       <div
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-black"
-          name="color"
+          id="undefined-green"
+          name="colors"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
-          value="black"
+          value="green"
         />
         <label
-          htmlFor="color-black"
+          htmlFor="undefined-green"
         >
-          Color Black
+          Color Green
         </label>
       </div>
     </div>
   </div>
+  <div
+    className="base combobox form-input y-background2"
+  >
+    <label
+      className="base label x-main2"
+      htmlFor="team"
+      id="downshift-0-label"
+    >
+      Search for a team
+    </label>
+    <div
+      aria-expanded={false}
+      aria-haspopup="listbox"
+      aria-owns="downshift-0-menu"
+      className="input-wrapper"
+      role="combobox"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-0-menu"
+        aria-labelledby="downshift-0-label"
+        autoComplete="off"
+        className="input"
+        disabled={false}
+        id="downshift-0-input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        value=""
+      />
+    </div>
+    <div
+      className="base popover x-background1 bottom left"
+    >
+      <ul
+        aria-labelledby="downshift-0-label"
+        className="base menu"
+        id="downshift-0-menu"
+        onMouseLeave={[Function]}
+        role="listbox"
+      />
+    </div>
+  </div>
+  <div
+    className="base multiple-combobox form-input y-background2"
+  >
+    <label
+      className="base label x-main2"
+      htmlFor="teams"
+      id="downshift-1-label"
+    >
+      Search for teams
+    </label>
+    <div
+      aria-expanded={false}
+      aria-haspopup="listbox"
+      aria-owns="downshift-1-menu"
+      className="input-wrapper"
+      role="combobox"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-1-menu"
+        aria-labelledby="downshift-1-label"
+        autoComplete="off"
+        className="input"
+        disabled={false}
+        id="downshift-1-input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        value=""
+      />
+    </div>
+    <div
+      className="base popover x-background1 bottom left"
+    >
+      <ul
+        aria-labelledby="downshift-1-label"
+        className="base menu"
+        id="downshift-1-menu"
+        onMouseLeave={[Function]}
+        role="listbox"
+      />
+    </div>
+  </div>
   <div
     className="debugger"
   >
@@ -11685,181 +12094,158 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
+exports[`Storyshots f/FormInput With Ratings Input 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input x-background2 y-main2"
-    id="colors"
-    style={
-      Object {
-        "--grid-columns-desktop": 3,
-        "--grid-columns-mobile": 2,
-      }
-    }
+    className="base text-input form-input y-background2"
+  >
+    <label
+      className="base label v50 mb-v x-main2"
+      htmlFor="firstName"
+    >
+      What's your first name ?
+    </label>
+    <input
+      className="input"
+      disabled={false}
+      id="firstName"
+      name="firstName"
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="text"
+      value="Test"
+    />
+  </div>
+  <div
+    className="base ratings-input form-input"
   >
-    <p
-      className="base label x-main2"
+    <label
+      className="base label input-label v50 mb-v x-main2"
+      htmlFor="ratings"
     >
-      Select color
-    </p>
+      Your Rating
+    </label>
     <div
-      className="choices"
+      className="stars"
     >
       <div
-        className="base choice"
+        className="base rating x-main1 y-background2"
       >
-        <input
-          checked={false}
-          disabled={false}
-          id="color-red"
-          name="color"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value="red"
-        />
         <label
-          htmlFor="color-red"
+          htmlFor="ratings-1"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          Color Red
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
         </label>
-      </div>
-      <div
-        className="base choice"
-      >
         <input
-          checked={false}
-          disabled={false}
-          id="color-blue"
-          name="color"
+          id="ratings-1"
+          name="ratings"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
-          value="blue"
+          value={1}
         />
-        <label
-          htmlFor="color-blue"
-        >
-          Color Blue
-        </label>
       </div>
       <div
-        className="base choice"
+        className="base rating x-main1 y-background2"
       >
-        <input
-          checked={false}
-          disabled={false}
-          id="color-green"
-          name="color"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value="green"
-        />
         <label
-          htmlFor="color-green"
+          htmlFor="ratings-2"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          Color Green
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
         </label>
-      </div>
-      <div
-        className="base choice"
-      >
         <input
-          checked={false}
-          disabled={false}
-          id="color-yellow"
-          name="color"
+          id="ratings-2"
+          name="ratings"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
-          value="yellow"
+          value={2}
         />
-        <label
-          htmlFor="color-yellow"
-        >
-          Color Yellow
-        </label>
       </div>
       <div
-        className="base choice"
+        className="base rating x-main1 y-background2"
       >
-        <input
-          checked={false}
-          disabled={false}
-          id="color-oarnge"
-          name="color"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value="oarnge"
-        />
         <label
-          htmlFor="color-oarnge"
+          htmlFor="ratings-3"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          Color Orange
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
         </label>
-      </div>
-      <div
-        className="base choice"
-      >
         <input
-          checked={false}
-          disabled={false}
-          id="color-violet"
-          name="color"
+          id="ratings-3"
+          name="ratings"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
-          value="violet"
+          value={3}
         />
-        <label
-          htmlFor="color-violet"
-        >
-          Color Violet
-        </label>
       </div>
       <div
-        className="base choice"
+        className="base rating x-main1 y-background2"
       >
+        <label
+          htmlFor="ratings-4"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
         <input
-          checked={false}
-          disabled={false}
-          id="color-brown"
-          name="color"
+          id="ratings-4"
+          name="ratings"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
-          value="brown"
+          value={4}
         />
-        <label
-          htmlFor="color-brown"
-        >
-          Color Brown
-        </label>
       </div>
       <div
-        className="base choice"
+        className="base rating x-main1 y-background2"
       >
+        <label
+          htmlFor="ratings-5"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
         <input
-          checked={false}
-          disabled={false}
-          id="color-black"
-          name="color"
+          id="ratings-5"
+          name="ratings"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
-          value="black"
+          value={5}
         />
-        <label
-          htmlFor="color-black"
-        >
-          Color Black
-        </label>
       </div>
     </div>
   </div>
@@ -11877,7 +12263,244 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
+exports[`Storyshots f/common/Description Base 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base description x-metadata"
+  >
+    Sample Description
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/common/Label Base 1`] = `
+<label
+  className="base label x-main2"
+>
+  Sample Label
+</label>
+`;
+
+exports[`Storyshots f/fields/Checkbox Base 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base checkbox"
+  >
+    <input
+      checked={false}
+      className="input"
+      disabled={false}
+      id="urgent"
+      name="urgent"
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="checkbox"
+    />
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/Checkbox Disabled 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base checkbox"
+  >
+    <input
+      checked={false}
+      className="input"
+      disabled={true}
+      id="urgent"
+      name="urgent"
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="checkbox"
+    />
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/Checkbox Optional 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base checkbox"
+  >
+    <input
+      checked={false}
+      className="input"
+      disabled={false}
+      id="urgent"
+      name="urgent"
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="checkbox"
+    />
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/Checkbox With Default Formik Value 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base checkbox"
+  >
+    <input
+      checked={false}
+      className="input"
+      disabled={false}
+      id="urgent"
+      name="urgent"
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="checkbox"
+    />
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/Checkbox With Description 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base checkbox"
+  >
+    <input
+      checked={false}
+      className="input"
+      disabled={false}
+      id="urgent"
+      name="urgent"
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="checkbox"
+    />
+    <div
+      className="base description v50 mt-v s-1 x-metadata"
+    >
+      Click on the checkbox
+    </div>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/Checkbox With Label 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base checkbox"
+  >
+    <label
+      className="base label x-main2"
+      htmlFor="urgent"
+    >
+      Urgent
+    </label>
+    <input
+      checked={false}
+      className="input"
+      disabled={false}
+      id="urgent"
+      name="urgent"
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="checkbox"
+    />
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -11893,11 +12516,6 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
       }
     }
   >
-    <p
-      className="base label x-main2"
-    >
-      Select color
-    </p>
     <div
       className="choices"
     >
@@ -11905,9 +12523,8 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
-          disabled={true}
-          id="color-red"
+          disabled={false}
+          id="colors-red"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11915,7 +12532,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="red"
         />
         <label
-          htmlFor="color-red"
+          htmlFor="colors-red"
         >
           Color Red
         </label>
@@ -11924,9 +12541,8 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
-          disabled={true}
-          id="color-blue"
+          disabled={false}
+          id="colors-blue"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11934,7 +12550,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="blue"
         />
         <label
-          htmlFor="color-blue"
+          htmlFor="colors-blue"
         >
           Color Blue
         </label>
@@ -11943,9 +12559,8 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
-          disabled={true}
-          id="color-green"
+          disabled={false}
+          id="colors-green"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11953,7 +12568,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="green"
         />
         <label
-          htmlFor="color-green"
+          htmlFor="colors-green"
         >
           Color Green
         </label>
@@ -11962,9 +12577,8 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
-          disabled={true}
-          id="color-yellow"
+          disabled={false}
+          id="colors-yellow"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11972,7 +12586,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="yellow"
         />
         <label
-          htmlFor="color-yellow"
+          htmlFor="colors-yellow"
         >
           Color Yellow
         </label>
@@ -11981,9 +12595,8 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
-          disabled={true}
-          id="color-oarnge"
+          disabled={false}
+          id="colors-oarnge"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11991,7 +12604,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="oarnge"
         />
         <label
-          htmlFor="color-oarnge"
+          htmlFor="colors-oarnge"
         >
           Color Orange
         </label>
@@ -12000,9 +12613,8 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
-          disabled={true}
-          id="color-violet"
+          disabled={false}
+          id="colors-violet"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12010,7 +12622,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="violet"
         />
         <label
-          htmlFor="color-violet"
+          htmlFor="colors-violet"
         >
           Color Violet
         </label>
@@ -12019,9 +12631,8 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
-          disabled={true}
-          id="color-brown"
+          disabled={false}
+          id="colors-brown"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12029,7 +12640,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="brown"
         />
         <label
-          htmlFor="color-brown"
+          htmlFor="colors-brown"
         >
           Color Brown
         </label>
@@ -12038,9 +12649,8 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
-          disabled={true}
-          id="color-black"
+          disabled={false}
+          id="colors-black"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12048,7 +12658,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="black"
         />
         <label
-          htmlFor="color-black"
+          htmlFor="colors-black"
         >
           Color Black
         </label>
@@ -12069,14 +12679,14 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
+exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input multiple x-background2 y-main2"
+    className="base choices-input x-background2 y-main2"
     id="colors"
     style={
       Object {
@@ -12085,6 +12695,11 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
       }
     }
   >
+    <p
+      className="base label x-main2"
+    >
+      Select color
+    </p>
     <div
       className="choices"
     >
@@ -12092,17 +12707,16 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-red"
+          id="colors-red"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="checkbox"
+          type="radio"
           value="red"
         />
         <label
-          htmlFor="color-red"
+          htmlFor="colors-red"
         >
           Color Red
         </label>
@@ -12111,17 +12725,16 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-blue"
+          id="colors-blue"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="checkbox"
+          type="radio"
           value="blue"
         />
         <label
-          htmlFor="color-blue"
+          htmlFor="colors-blue"
         >
           Color Blue
         </label>
@@ -12130,17 +12743,16 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-green"
+          id="colors-green"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="checkbox"
+          type="radio"
           value="green"
         />
         <label
-          htmlFor="color-green"
+          htmlFor="colors-green"
         >
           Color Green
         </label>
@@ -12149,17 +12761,16 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-yellow"
+          id="colors-yellow"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="checkbox"
+          type="radio"
           value="yellow"
         />
         <label
-          htmlFor="color-yellow"
+          htmlFor="colors-yellow"
         >
           Color Yellow
         </label>
@@ -12168,17 +12779,16 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-oarnge"
+          id="colors-oarnge"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="checkbox"
+          type="radio"
           value="oarnge"
         />
         <label
-          htmlFor="color-oarnge"
+          htmlFor="colors-oarnge"
         >
           Color Orange
         </label>
@@ -12187,17 +12797,16 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-violet"
+          id="colors-violet"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="checkbox"
+          type="radio"
           value="violet"
         />
         <label
-          htmlFor="color-violet"
+          htmlFor="colors-violet"
         >
           Color Violet
         </label>
@@ -12206,17 +12815,16 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-brown"
+          id="colors-brown"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="checkbox"
+          type="radio"
           value="brown"
         />
         <label
-          htmlFor="color-brown"
+          htmlFor="colors-brown"
         >
           Color Brown
         </label>
@@ -12225,17 +12833,16 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-black"
+          id="colors-black"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="checkbox"
+          type="radio"
           value="black"
         />
         <label
-          htmlFor="color-black"
+          htmlFor="colors-black"
         >
           Color Black
         </label>
@@ -12256,14 +12863,14 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/ChoicesInput Multiple With Default Formik Value 1`] = `
+exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input multiple x-background2 y-main2"
+    className="base choices-input x-background2 y-main2"
     id="colors"
     style={
       Object {
@@ -12272,6 +12879,11 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Default Formik Value 1`]
       }
     }
   >
+    <p
+      className="base label x-main2"
+    >
+      Select color
+    </p>
     <div
       className="choices"
     >
@@ -12279,17 +12891,16 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Default Formik Value 1`]
         className="base choice"
       >
         <input
-          checked={false}
-          disabled={false}
-          id="color-red"
+          disabled={true}
+          id="colors-red"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="checkbox"
+          type="radio"
           value="red"
         />
         <label
-          htmlFor="color-red"
+          htmlFor="colors-red"
         >
           Color Red
         </label>
@@ -12298,17 +12909,16 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Default Formik Value 1`]
         className="base choice"
       >
         <input
-          checked={false}
-          disabled={false}
-          id="color-blue"
+          disabled={true}
+          id="colors-blue"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="checkbox"
+          type="radio"
           value="blue"
         />
         <label
-          htmlFor="color-blue"
+          htmlFor="colors-blue"
         >
           Color Blue
         </label>
@@ -12317,17 +12927,16 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Default Formik Value 1`]
         className="base choice"
       >
         <input
-          checked={false}
-          disabled={false}
-          id="color-green"
+          disabled={true}
+          id="colors-green"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="checkbox"
+          type="radio"
           value="green"
         />
         <label
-          htmlFor="color-green"
+          htmlFor="colors-green"
         >
           Color Green
         </label>
@@ -12336,17 +12945,16 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Default Formik Value 1`]
         className="base choice"
       >
         <input
-          checked={false}
-          disabled={false}
-          id="color-yellow"
+          disabled={true}
+          id="colors-yellow"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="checkbox"
+          type="radio"
           value="yellow"
         />
         <label
-          htmlFor="color-yellow"
+          htmlFor="colors-yellow"
         >
           Color Yellow
         </label>
@@ -12355,17 +12963,16 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Default Formik Value 1`]
         className="base choice"
       >
         <input
-          checked={false}
-          disabled={false}
-          id="color-oarnge"
+          disabled={true}
+          id="colors-oarnge"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="checkbox"
+          type="radio"
           value="oarnge"
         />
         <label
-          htmlFor="color-oarnge"
+          htmlFor="colors-oarnge"
         >
           Color Orange
         </label>
@@ -12374,17 +12981,16 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Default Formik Value 1`]
         className="base choice"
       >
         <input
-          checked={false}
-          disabled={false}
-          id="color-violet"
+          disabled={true}
+          id="colors-violet"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="checkbox"
+          type="radio"
           value="violet"
         />
         <label
-          htmlFor="color-violet"
+          htmlFor="colors-violet"
         >
           Color Violet
         </label>
@@ -12393,17 +12999,16 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Default Formik Value 1`]
         className="base choice"
       >
         <input
-          checked={false}
-          disabled={false}
-          id="color-brown"
+          disabled={true}
+          id="colors-brown"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="checkbox"
+          type="radio"
           value="brown"
         />
         <label
-          htmlFor="color-brown"
+          htmlFor="colors-brown"
         >
           Color Brown
         </label>
@@ -12412,17 +13017,16 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Default Formik Value 1`]
         className="base choice"
       >
         <input
-          checked={false}
-          disabled={false}
-          id="color-black"
+          disabled={true}
+          id="colors-black"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="checkbox"
+          type="radio"
           value="black"
         />
         <label
-          htmlFor="color-black"
+          htmlFor="colors-black"
         >
           Color Black
         </label>
@@ -12443,7 +13047,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Default Formik Value 1`]
 </form>
 `;
 
-exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
+exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -12454,7 +13058,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
     id="colors"
     style={
       Object {
-        "--grid-columns-desktop": 2,
+        "--grid-columns-desktop": 3,
         "--grid-columns-mobile": 2,
       }
     }
@@ -12466,9 +13070,8 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-red"
+          id="colors-red"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12476,7 +13079,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="red"
         />
         <label
-          htmlFor="color-red"
+          htmlFor="colors-red"
         >
           Color Red
         </label>
@@ -12485,9 +13088,8 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-blue"
+          id="colors-blue"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12495,7 +13097,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="blue"
         />
         <label
-          htmlFor="color-blue"
+          htmlFor="colors-blue"
         >
           Color Blue
         </label>
@@ -12504,9 +13106,8 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-green"
+          id="colors-green"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12514,7 +13115,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="green"
         />
         <label
-          htmlFor="color-green"
+          htmlFor="colors-green"
         >
           Color Green
         </label>
@@ -12523,9 +13124,8 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-yellow"
+          id="colors-yellow"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12533,7 +13133,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="yellow"
         />
         <label
-          htmlFor="color-yellow"
+          htmlFor="colors-yellow"
         >
           Color Yellow
         </label>
@@ -12542,9 +13142,8 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-oarnge"
+          id="colors-oarnge"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12552,7 +13151,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="oarnge"
         />
         <label
-          htmlFor="color-oarnge"
+          htmlFor="colors-oarnge"
         >
           Color Orange
         </label>
@@ -12561,9 +13160,8 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-violet"
+          id="colors-violet"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12571,7 +13169,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="violet"
         />
         <label
-          htmlFor="color-violet"
+          htmlFor="colors-violet"
         >
           Color Violet
         </label>
@@ -12580,9 +13178,8 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-brown"
+          id="colors-brown"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12590,7 +13187,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="brown"
         />
         <label
-          htmlFor="color-brown"
+          htmlFor="colors-brown"
         >
           Color Brown
         </label>
@@ -12599,9 +13196,8 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-black"
+          id="colors-black"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12609,7 +13205,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="black"
         />
         <label
-          htmlFor="color-black"
+          htmlFor="colors-black"
         >
           Color Black
         </label>
@@ -12630,18 +13226,18 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/ChoicesInput With Default Formik Value 1`] = `
+exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input x-background2 y-main2"
+    className="base choices-input multiple x-background2 y-main2"
     id="colors"
     style={
       Object {
-        "--grid-columns-desktop": 3,
+        "--grid-columns-desktop": 2,
         "--grid-columns-mobile": 2,
       }
     }
@@ -12653,17 +13249,16 @@ exports[`Storyshots f/fields/ChoicesInput With Default Formik Value 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-red"
+          id="colors-red"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="radio"
+          type="checkbox"
           value="red"
         />
         <label
-          htmlFor="color-red"
+          htmlFor="colors-red"
         >
           Color Red
         </label>
@@ -12672,17 +13267,16 @@ exports[`Storyshots f/fields/ChoicesInput With Default Formik Value 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-blue"
+          id="colors-blue"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="radio"
+          type="checkbox"
           value="blue"
         />
         <label
-          htmlFor="color-blue"
+          htmlFor="colors-blue"
         >
           Color Blue
         </label>
@@ -12691,17 +13285,16 @@ exports[`Storyshots f/fields/ChoicesInput With Default Formik Value 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-green"
+          id="colors-green"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="radio"
+          type="checkbox"
           value="green"
         />
         <label
-          htmlFor="color-green"
+          htmlFor="colors-green"
         >
           Color Green
         </label>
@@ -12710,17 +13303,16 @@ exports[`Storyshots f/fields/ChoicesInput With Default Formik Value 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-yellow"
+          id="colors-yellow"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="radio"
+          type="checkbox"
           value="yellow"
         />
         <label
-          htmlFor="color-yellow"
+          htmlFor="colors-yellow"
         >
           Color Yellow
         </label>
@@ -12729,17 +13321,16 @@ exports[`Storyshots f/fields/ChoicesInput With Default Formik Value 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-oarnge"
+          id="colors-oarnge"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="radio"
+          type="checkbox"
           value="oarnge"
         />
         <label
-          htmlFor="color-oarnge"
+          htmlFor="colors-oarnge"
         >
           Color Orange
         </label>
@@ -12748,17 +13339,16 @@ exports[`Storyshots f/fields/ChoicesInput With Default Formik Value 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-violet"
+          id="colors-violet"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="radio"
+          type="checkbox"
           value="violet"
         />
         <label
-          htmlFor="color-violet"
+          htmlFor="colors-violet"
         >
           Color Violet
         </label>
@@ -12767,17 +13357,16 @@ exports[`Storyshots f/fields/ChoicesInput With Default Formik Value 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-brown"
+          id="colors-brown"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="radio"
+          type="checkbox"
           value="brown"
         />
         <label
-          htmlFor="color-brown"
+          htmlFor="colors-brown"
         >
           Color Brown
         </label>
@@ -12786,17 +13375,16 @@ exports[`Storyshots f/fields/ChoicesInput With Default Formik Value 1`] = `
         className="base choice"
       >
         <input
-          checked={false}
           disabled={false}
-          id="color-black"
+          id="colors-black"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="radio"
+          type="checkbox"
           value="black"
         />
         <label
-          htmlFor="color-black"
+          htmlFor="colors-black"
         >
           Color Black
         </label>