@pareto-engineering/design-system 2.0.0-alpha.51 → 2.0.0-alpha.54

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

@@ -63,6 +63,8 @@ exports[`Storyshots a/AnimatedCounter Before And After 1`] = `
 </div>
 `;
 
+exports[`Storyshots a/AppContext Base 1`] = `"Sample AppContext"`;
+
 exports[`Storyshots a/BackgroundGradient Base 1`] = `
 <div
   className="y-background4"
@@ -907,24 +909,14 @@ exports[`Storyshots a/DotInfo False 1`] = `
 `;
 
 exports[`Storyshots a/DotInfo Nullish 1`] = `
-Array [
-  <div
-    className="base empty x-metadata dot-info"
-    style={
-      Object {
-        "--height": "2em",
-      }
-    }
-  />,
-  <div
-    className="base empty x-metadata dot-info"
-    style={
-      Object {
-        "--height": "2em",
-      }
+<div
+  className="base empty x-metadata dot-info"
+  style={
+    Object {
+      "--height": "2em",
     }
-  />,
-]
+  }
+/>
 `;
 
 exports[`Storyshots a/DotInfo True 1`] = `
@@ -1806,12 +1798,12 @@ exports[`Storyshots a/ProgressBar Color 1`] = `
 
 exports[`Storyshots a/ProgressBar Height 1`] = `
 <div
-  className="base progress-bar"
+  className="base progress-bar x-main1"
   data-length="50%"
   style={
     Object {
       "--height": "5em",
-      "--progress": 62,
+      "--progress": 70,
     }
   }
 />
@@ -2436,8 +2428,6 @@ exports[`Storyshots a/Shapes Triangle 1`] = `
 </div>
 `;
 
-exports[`Storyshots a/SiteContext Base 1`] = `"Sample SiteContext"`;
-
 exports[`Storyshots a/SnapScroller Base 1`] = `
 <div
   className="base snap-scroller u1 pv-u"
@@ -2681,15 +2671,12 @@ exports[`Storyshots a/Timestamp Prefix 1`] = `
 `;
 
 exports[`Storyshots a/Timestamp Relative Format 1`] = `
-Array [
-  "Click to see relative format. Relative format has not been enabled by default because of chromatic snapshots.",
-  <p
-    className="base timestamp"
-    onClick={[Function]}
-  >
-    2022-10-10T00:00:00.000+00:00
-  </p>,
-]
+<p
+  className="base timestamp"
+  onClick={[Function]}
+>
+  2022-10-12T00:00:00.000+00:00
+</p>
 `;
 
 exports[`Storyshots b/Button Arrow Left 1`] = `
@@ -9058,6 +9045,7 @@ Array [
     </button>
   </a>,
   <a
+    href="https://www.linkedin.com/company/hellopareto"
     rel="noreferrer"
     target="_blank"
   >
@@ -9597,511 +9585,531 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
 
 exports[`Storyshots c/ContentSlides Simple 1`] = `
 <div
-  className="base content-slides y-background1 b-dark-y simple u1 md-u2"
+  className="ui-light"
+  style={
+    Object {
+      "height": "100%",
+    }
+  }
 >
   <div
-    className="horizontal-menu"
+    className="base content-slides y-background1 b-dark-y simple u1 md-u2"
   >
     <div
-      className="base progress-bar modifierAttached x-main2 y-background1 b-dark-y"
-      data-length="50%"
-      style={
-        Object {
-          "--height": ".4em",
-          "--progress": 40,
-        }
-      }
-    />
-    <div
-      className="elementContent"
+      className="horizontal-menu"
     >
       <div
-        className="left"
+        className="base progress-bar modifierAttached x-main2 y-background1 b-dark-y"
+        data-length="50%"
+        style={
+          Object {
+            "--height": ".4em",
+            "--progress": 40,
+          }
+        }
       />
       <div
-        className="title"
+        className="elementContent"
       >
-        <span
-          className="md-h lg-h"
-        >
-          Welcome
-        </span>
-        <svg
-          className="base svg base logo x-paragraph y-transparent xs-h sm-h y-transparent"
-          height="1.1em"
-          preserveAspectRatio="xMinYMin meet"
-          version="1.1"
-          viewBox="0 0 156 30"
-          xmlns="http://www.w3.org/2000/svg"
+        <div
+          className="left"
+        />
+        <div
+          className="title"
         >
-          <use
-            className=""
-            href="/logo.svg#logo_squares"
-            id="logo_squares"
-            style={
-              Object {
-                "style": undefined,
+          <span
+            className="md-h lg-h"
+          >
+            Welcome
+          </span>
+          <svg
+            className="base svg base logo x-paragraph y-transparent xs-h sm-h y-transparent"
+            height="1.1em"
+            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,
+            />
+            <use
+              className=""
+              href="/logo.svg#logo_pareto"
+              id="logo_pareto"
+              style={
+                Object {
+                  "style": undefined,
+                }
               }
-            }
-          />
-        </svg>
+            />
+          </svg>
+        </div>
       </div>
     </div>
-  </div>
-   
-  <main>
-    <div
-      className="modifierActive slide"
-    >
+    <main>
       <div
-        className="wrapper"
+        className="modifierActive slide"
       >
         <div
-          className="content"
+          className="wrapper"
         >
           <div
-            className="base title"
+            className="content"
           >
-            <h1
-              className="small heading"
-            >
-              Welcome
-            </h1>
-            <p
-              className="subtitle"
+            <div
+              className="base title"
             >
-              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"
+              <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"
             >
-              Next
-            </button>
+              <span />
+              <button
+                className="base button x-main2 next x-main1 modifierCompact"
+                disabled={false}
+                onClick={[Function]}
+                type="button"
+              >
+                Next
+              </button>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div
-      className="slide"
-    >
       <div
-        className="wrapper"
+        className="slide"
       >
         <div
-          className="content"
+          className="wrapper"
         >
           <div
-            className="base title"
+            className="content"
           >
-            <h1
-              className="small heading"
-            >
-              Part 2
-            </h1>
-            <p
-              className="subtitle"
+            <div
+              className="base title"
             >
-              Welcome to this site. We hope you will have an amazing experience here.
+              <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>
-          </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. 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>
-            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. 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>
-            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. 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>
-            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. 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"
+            <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"
             >
-              Next
-            </button>
+              <span />
+              <button
+                className="base button x-main2 next x-main1 modifierCompact"
+                disabled={false}
+                onClick={[Function]}
+                type="button"
+              >
+                Next
+              </button>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div
-      className="slide"
-    >
       <div
-        className="wrapper"
+        className="slide"
       >
         <div
-          className="content"
+          className="wrapper"
         >
           <div
-            className="base title"
+            className="content"
           >
-            <h1
-              className="small heading"
-            >
-              Part 3
-            </h1>
-            <p
-              className="subtitle"
+            <div
+              className="base title"
             >
-              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"
+              <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"
             >
-              Next
-            </button>
+              <span />
+              <button
+                className="base button x-main2 next x-main1 modifierCompact"
+                disabled={false}
+                onClick={[Function]}
+                type="button"
+              >
+                Next
+              </button>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div
-      className="slide"
-    >
       <div
-        className="wrapper"
+        className="slide"
       >
         <div
-          className="content"
+          className="wrapper"
         >
           <div
-            className="base title"
+            className="content"
           >
-            <h1
-              className="small heading"
-            >
-              Part 4
-            </h1>
-            <p
-              className="subtitle"
+            <div
+              className="base title"
             >
-              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"
+              <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"
             >
-              Next
-            </button>
+              <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>
+    </main>
+  </div>
 </div>
 `;
 
 exports[`Storyshots c/ContentSlides With Background Shape 1`] = `
 <div
-  className="base content-slides y-background4 b-light-y simple u1 md-u2"
->
-  <div
-    className="base shapes"
-    style={
-      Object {
-        "--horizontal-align": "flex-start",
-        "--overflow": "hidden",
-        "--shape-height": "65em",
-        "--vertical-align": "center",
-      }
+  className="ui-light"
+  style={
+    Object {
+      "height": "100%",
     }
-  >
-    <div
-      className="spiral"
-    >
-      <div
-        className="circle-one"
-      />
-      <div
-        className="circle-two"
-      />
-      <div
-        className="circle-three"
-      />
-      <div
-        className="circle-four"
-      />
-    </div>
-  </div>
+  }
+>
   <div
-    className="horizontal-menu"
+    className="base content-slides y-background1 b-dark-y simple u1 md-u2"
   >
     <div
-      className="base progress-bar modifierAttached x-main2 y-background1 b-dark-y"
-      data-length="50%"
+      className="base shapes y-background4 b-light-y"
       style={
         Object {
-          "--height": ".4em",
-          "--progress": 40,
+          "--horizontal-align": "flex-start",
+          "--overflow": "hidden",
+          "--shape-height": "65em",
+          "--vertical-align": "center",
         }
       }
-    />
-    <div
-      className="elementContent"
-    >
-      <div
-        className="left"
-      />
-      <div
-        className="title"
-      >
-        <span
-          className="md-h lg-h"
-        >
-          Welcome
-        </span>
-        <svg
-          className="base svg base logo x-paragraph y-transparent xs-h sm-h y-transparent"
-          height="1.1em"
-          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"
+        className="spiral"
       >
         <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>
+          className="circle-one"
+        />
+        <div
+          className="circle-two"
+        />
+        <div
+          className="circle-three"
+        />
+        <div
+          className="circle-four"
+        />
       </div>
     </div>
     <div
-      className="slide"
+      className="horizontal-menu"
     >
       <div
-        className="wrapper"
+        className="base progress-bar modifierAttached x-main2 y-background1 b-dark-y"
+        data-length="50%"
+        style={
+          Object {
+            "--height": ".4em",
+            "--progress": 40,
+          }
+        }
+      />
+      <div
+        className="elementContent"
       >
         <div
-          className="content"
+          className="left"
+        />
+        <div
+          className="title"
         >
-          <div
-            className="base title"
+          <span
+            className="md-h lg-h"
           >
-            <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. 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>
-            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. 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>
-            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. 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>
-            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. 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"
+            Welcome
+          </span>
+          <svg
+            className="base svg base logo x-paragraph y-transparent xs-h sm-h y-transparent"
+            height="1.1em"
+            preserveAspectRatio="xMinYMin meet"
+            version="1.1"
+            viewBox="0 0 156 30"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <span />
-            <button
-              className="base button x-main2 next x-main1 modifierCompact"
-              disabled={false}
-              onClick={[Function]}
-              type="button"
-            >
-              Next
-            </button>
-          </div>
+            <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>
-    <div
-      className="slide"
-    >
+    <main>
       <div
-        className="wrapper"
+        className="modifierActive slide"
       >
         <div
-          className="content"
+          className="wrapper"
         >
           <div
-            className="base title"
+            className="content"
           >
-            <h1
-              className="small heading"
-            >
-              Part 3
-            </h1>
-            <p
-              className="subtitle"
+            <div
+              className="base title"
             >
-              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"
+              <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"
             >
-              Next
-            </button>
+              <span />
+              <button
+                className="base button x-main2 next x-main1 modifierCompact"
+                disabled={false}
+                onClick={[Function]}
+                type="button"
+              >
+                Next
+              </button>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div
-      className="slide"
-    >
       <div
-        className="wrapper"
+        className="slide"
       >
         <div
-          className="content"
+          className="wrapper"
         >
           <div
-            className="base title"
+            className="content"
           >
-            <h1
-              className="small heading"
-            >
-              Part 4
-            </h1>
-            <p
-              className="subtitle"
+            <div
+              className="base title"
             >
-              Welcome to this site. We hope you will have an amazing experience here.
+              <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>
-          </div>
-          <div
-            className="navigator"
+            <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>
+        </div>
+      </div>
+      <div
+        className="slide"
+      >
+        <div
+          className="wrapper"
+        >
+          <div
+            className="content"
           >
-            <span />
-            <button
-              className="base button x-main2 next x-main1 modifierCompact"
-              disabled={false}
-              onClick={[Function]}
-              type="button"
+            <div
+              className="base title"
             >
-              Next
-            </button>
+              <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>
+    </main>
+  </div>
 </div>
 `;
 
@@ -10282,7 +10290,6 @@ exports[`Storyshots f/FormInput Base 1`] = `
       onChange={[Function]}
       rows={3}
     />
-     
   </div>
   <div
     className="base choices-input form-input x-background2 y-main2"
@@ -10475,7 +10482,6 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
       onChange={[Function]}
       rows={3}
     />
-     
   </div>
   <div
     className="base choices-input form-input x-background2 y-main2"
@@ -10980,11 +10986,17 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
 `;
 
 exports[`Storyshots f/common/Description Base 1`] = `
-<div
-  className="base description x-metadata"
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
 >
-  Sample Description
-</div>
+  <div
+    className="base description x-metadata"
+  >
+    Sample Description
+  </div>
+</form>
 `;
 
 exports[`Storyshots f/common/Label Base 1`] = `
@@ -11068,62 +11080,22 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
           Color Green
         </label>
       </div>
-    </div>
-  </div>
-  <div
-    className="debugger"
-  >
-    <button
-      className="base button x-main2"
-      onClick={[Function]}
-      type="button"
-    >
-      Open FormDebugger
-    </button>
-  </div>
-</form>
-`;
-
-exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
-<form
-  action="#"
-  onReset={[Function]}
-  onSubmit={[Function]}
->
-  <div
-    className="base choices-input x-background2 y-main2"
-    id="shapes"
-    style={
-      Object {
-        "--grid-columns-desktop": 3,
-        "--grid-columns-mobile": 2,
-      }
-    }
-  >
-    <p
-      className="base label x-main2"
-    >
-      Geometric Shapes
-    </p>
-    <div
-      className="choices"
-    >
       <div
         className="base choice"
       >
         <input
           disabled={false}
-          id="shapes-triangle"
-          name="shape"
+          id="colors-yellow"
+          name="color"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
-          value="triangle"
+          value="yellow"
         />
         <label
-          htmlFor="shapes-triangle"
+          htmlFor="colors-yellow"
         >
-          Triangle
+          Color Yellow
         </label>
       </div>
       <div
@@ -11131,17 +11103,17 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
       >
         <input
           disabled={false}
-          id="shapes-square"
-          name="shape"
+          id="colors-oarnge"
+          name="color"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
-          value="square"
+          value="oarnge"
         />
         <label
-          htmlFor="shapes-square"
+          htmlFor="colors-oarnge"
         >
-          Square
+          Color Orange
         </label>
       </div>
       <div
@@ -11149,111 +11121,53 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
       >
         <input
           disabled={false}
-          id="shapes-rectangle"
-          name="shape"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value="rectangle"
-        />
-        <label
-          htmlFor="shapes-rectangle"
-        >
-          Rectangle
-        </label>
-      </div>
-    </div>
-  </div>
-  <div
-    className="debugger"
-  >
-    <button
-      className="base button x-main2"
-      onClick={[Function]}
-      type="button"
-    >
-      Open FormDebugger
-    </button>
-  </div>
-</form>
-`;
-
-exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
-<form
-  action="#"
-  onReset={[Function]}
-  onSubmit={[Function]}
->
-  <div
-    className="base choices-input x-background2 y-main2"
-    id="shapes"
-    style={
-      Object {
-        "--grid-columns-desktop": 3,
-        "--grid-columns-mobile": 2,
-      }
-    }
-  >
-    <p
-      className="base label x-main2"
-    >
-      Geometric Shapes
-    </p>
-    <div
-      className="choices"
-    >
-      <div
-        className="base choice"
-      >
-        <input
-          disabled={true}
-          id="shapes-triangle"
-          name="shape"
+          id="colors-violet"
+          name="color"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
-          value="triangle"
+          value="violet"
         />
         <label
-          htmlFor="shapes-triangle"
+          htmlFor="colors-violet"
         >
-          Triangle
+          Color Violet
         </label>
       </div>
       <div
         className="base choice"
       >
         <input
-          disabled={true}
-          id="shapes-square"
-          name="shape"
+          disabled={false}
+          id="colors-brown"
+          name="color"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
-          value="square"
+          value="brown"
         />
         <label
-          htmlFor="shapes-square"
+          htmlFor="colors-brown"
         >
-          Square
+          Color Brown
         </label>
       </div>
       <div
         className="base choice"
       >
         <input
-          disabled={true}
-          id="shapes-rectangle"
-          name="shape"
+          disabled={false}
+          id="colors-black"
+          name="color"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
-          value="rectangle"
+          value="black"
         />
         <label
-          htmlFor="shapes-rectangle"
+          htmlFor="colors-black"
         >
-          Rectangle
+          Color Black
         </label>
       </div>
     </div>
@@ -11272,14 +11186,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 {
@@ -11288,6 +11202,11 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
       }
     }
   >
+    <p
+      className="base label x-main2"
+    >
+      Select color
+    </p>
     <div
       className="choices"
     >
@@ -11300,7 +11219,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="checkbox"
+          type="radio"
           value="red"
         />
         <label
@@ -11318,7 +11237,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="checkbox"
+          type="radio"
           value="blue"
         />
         <label
@@ -11336,7 +11255,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="checkbox"
+          type="radio"
           value="green"
         />
         <label
@@ -11345,10 +11264,100 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
           Color Green
         </label>
       </div>
-    </div>
-  </div>
-  <div
-    className="debugger"
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="colors-yellow"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="yellow"
+        />
+        <label
+          htmlFor="colors-yellow"
+        >
+          Color Yellow
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="colors-oarnge"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="oarnge"
+        />
+        <label
+          htmlFor="colors-oarnge"
+        >
+          Color Orange
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="colors-violet"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="violet"
+        />
+        <label
+          htmlFor="colors-violet"
+        >
+          Color Violet
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="colors-brown"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="brown"
+        />
+        <label
+          htmlFor="colors-brown"
+        >
+          Color Brown
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="colors-black"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="black"
+        />
+        <label
+          htmlFor="colors-black"
+        >
+          Color Black
+        </label>
+      </div>
+    </div>
+  </div>
+  <div
+    className="debugger"
   >
     <button
       className="base button x-main2"
@@ -11361,22 +11370,27 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 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 {
-        "--grid-columns-desktop": 2,
+        "--grid-columns-desktop": 3,
         "--grid-columns-mobile": 2,
       }
     }
   >
+    <p
+      className="base label x-main2"
+    >
+      Select color
+    </p>
     <div
       className="choices"
     >
@@ -11384,12 +11398,12 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
-          disabled={false}
+          disabled={true}
           id="colors-red"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="checkbox"
+          type="radio"
           value="red"
         />
         <label
@@ -11402,12 +11416,12 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
-          disabled={false}
+          disabled={true}
           id="colors-blue"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="checkbox"
+          type="radio"
           value="blue"
         />
         <label
@@ -11420,12 +11434,12 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
-          disabled={false}
+          disabled={true}
           id="colors-green"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="checkbox"
+          type="radio"
           value="green"
         />
         <label
@@ -11438,12 +11452,12 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
-          disabled={false}
+          disabled={true}
           id="colors-yellow"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="checkbox"
+          type="radio"
           value="yellow"
         />
         <label
@@ -11456,12 +11470,12 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
-          disabled={false}
+          disabled={true}
           id="colors-oarnge"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="checkbox"
+          type="radio"
           value="oarnge"
         />
         <label
@@ -11474,12 +11488,12 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
-          disabled={false}
+          disabled={true}
           id="colors-violet"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="checkbox"
+          type="radio"
           value="violet"
         />
         <label
@@ -11492,12 +11506,12 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
-          disabled={false}
+          disabled={true}
           id="colors-brown"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="checkbox"
+          type="radio"
           value="brown"
         />
         <label
@@ -11510,12 +11524,12 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
-          disabled={false}
+          disabled={true}
           id="colors-black"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
-          type="checkbox"
+          type="radio"
           value="black"
         />
         <label
@@ -11540,338 +11554,408 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/QueryCombobox Multiple Select 1`] = `
+exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
   <div
-    className="base multiple-combobox y-background2"
-  >
-    <label
-      className="base label x-main2"
-      htmlFor="teams"
-      id="downshift-4-label"
-    >
-      Search for a team
-    </label>
-    <div
-      aria-expanded={false}
-      aria-haspopup="listbox"
-      aria-owns="downshift-4-menu"
-      className="input-wrapper"
-      role="combobox"
-    >
-      <input
-        aria-autocomplete="list"
-        aria-controls="downshift-4-menu"
-        aria-labelledby="downshift-4-label"
-        autoComplete="off"
-        className="input"
-        id="downshift-4-input"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        value=""
-      />
-    </div>
-    <div
-      className="base popover x-background1 bottom left"
-    >
-      <ul
-        aria-labelledby="downshift-4-label"
-        className="base menu"
-        id="downshift-4-menu"
-        onMouseLeave={[Function]}
-        role="listbox"
-      />
-    </div>
-  </div>
-  <div
+    className="base choices-input multiple x-background2 y-main2"
+    id="colors"
     style={
       Object {
-        "alignItems": "flex-end",
-        "display": "flex",
-        "flexDirection": "column",
+        "--grid-columns-desktop": 3,
+        "--grid-columns-mobile": 2,
       }
     }
   >
     <div
-      className="debugger"
-    >
-      <button
-        className="base button x-main2"
-        onClick={[Function]}
-        type="button"
-      >
-        Open FormDebugger
-      </button>
-    </div>
-    <button
-      className="base button x-main1"
-      onClick={[Function]}
-      type="button"
-    >
-      Add formik values
-    </button>
-  </div>
-</form>
-`;
-
-exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik State 1`] = `
-<form
-  action="#"
-  onReset={[Function]}
-  onSubmit={[Function]}
->
-  <div
-    className="base multiple-combobox y-background2"
-  >
-    <label
-      className="base label x-main2"
-      htmlFor="teams"
-      id="downshift-5-label"
-    >
-      Search for a team
-    </label>
-    <div
-      className="selected-items"
+      className="choices"
     >
       <div
-        className="item"
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        tabIndex={-1}
+        className="base choice"
       >
-        <button
-          className="base button x-background2 modifierCompact modifierSimple"
-          onClick={[Function]}
-          type="button"
+        <input
+          disabled={false}
+          id="colors-red"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="red"
+        />
+        <label
+          htmlFor="colors-red"
         >
-          <span
-            className="v25 mr-v"
-          >
-            Apple
-          </span>
-          <span
-            className="f-icons close"
-          >
-            Y
-          </span>
-        </button>
+          Color Red
+        </label>
       </div>
       <div
-        className="item"
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        tabIndex={-1}
+        className="base choice"
       >
-        <button
-          className="base button x-background2 modifierCompact modifierSimple"
-          onClick={[Function]}
-          type="button"
+        <input
+          disabled={false}
+          id="colors-blue"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="blue"
+        />
+        <label
+          htmlFor="colors-blue"
         >
-          <span
-            className="v25 mr-v"
-          >
-            Pear
-          </span>
-          <span
-            className="f-icons close"
-          >
-            Y
-          </span>
-        </button>
+          Color Blue
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="colors-green"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="green"
+        />
+        <label
+          htmlFor="colors-green"
+        >
+          Color Green
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="colors-yellow"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="yellow"
+        />
+        <label
+          htmlFor="colors-yellow"
+        >
+          Color Yellow
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="colors-oarnge"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="oarnge"
+        />
+        <label
+          htmlFor="colors-oarnge"
+        >
+          Color Orange
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="colors-violet"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="violet"
+        />
+        <label
+          htmlFor="colors-violet"
+        >
+          Color Violet
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="colors-brown"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="brown"
+        />
+        <label
+          htmlFor="colors-brown"
+        >
+          Color Brown
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="colors-black"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="black"
+        />
+        <label
+          htmlFor="colors-black"
+        >
+          Color Black
+        </label>
       </div>
-    </div>
-    <div
-      aria-expanded={false}
-      aria-haspopup="listbox"
-      aria-owns="downshift-5-menu"
-      className="input-wrapper"
-      role="combobox"
-    >
-      <input
-        aria-autocomplete="list"
-        aria-controls="downshift-5-menu"
-        aria-labelledby="downshift-5-label"
-        autoComplete="off"
-        className="input"
-        id="downshift-5-input"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        value=""
-      />
-    </div>
-    <div
-      className="base popover x-background1 bottom left"
-    >
-      <ul
-        aria-labelledby="downshift-5-label"
-        className="base menu"
-        id="downshift-5-menu"
-        onMouseLeave={[Function]}
-        role="listbox"
-      />
     </div>
   </div>
   <div
-    style={
-      Object {
-        "alignItems": "flex-end",
-        "display": "flex",
-        "flexDirection": "column",
-      }
-    }
+    className="debugger"
   >
-    <div
-      className="debugger"
-    >
-      <button
-        className="base button x-main2"
-        onClick={[Function]}
-        type="button"
-      >
-        Open FormDebugger
-      </button>
-    </div>
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
-      Add formik values
+      Open FormDebugger
     </button>
   </div>
 </form>
 `;
 
-exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
+exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
   <div
-    className="base combobox y-background2"
-  >
-    <label
-      className="base label x-main2"
-      htmlFor="team"
-      id="downshift-2-label"
-    >
-      Search for a team
-    </label>
-    <div
-      aria-expanded={false}
-      aria-haspopup="listbox"
-      aria-owns="downshift-2-menu"
-      className="input-wrapper"
-      role="combobox"
-    >
-      <input
-        aria-autocomplete="list"
-        aria-controls="downshift-2-menu"
-        aria-labelledby="downshift-2-label"
-        autoComplete="off"
-        className="input"
-        id="downshift-2-input"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onKeyDown={[Function]}
-        value=""
-      />
-    </div>
-    <div
-      className="base popover x-background1 bottom left"
-    >
-      <ul
-        aria-labelledby="downshift-2-label"
-        className="base menu"
-        id="downshift-2-menu"
-        onMouseLeave={[Function]}
-        role="listbox"
-      />
-    </div>
-  </div>
-  <div
+    className="base choices-input multiple x-background2 y-main2"
+    id="colors"
     style={
       Object {
-        "alignItems": "flex-end",
-        "display": "flex",
-        "flexDirection": "column",
+        "--grid-columns-desktop": 2,
+        "--grid-columns-mobile": 2,
       }
     }
   >
     <div
-      className="debugger"
+      className="choices"
     >
-      <button
-        className="base button x-main2"
-        onClick={[Function]}
-        type="button"
+      <div
+        className="base choice"
       >
-        Open FormDebugger
-      </button>
+        <input
+          disabled={false}
+          id="colors-red"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="red"
+        />
+        <label
+          htmlFor="colors-red"
+        >
+          Color Red
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="colors-blue"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="blue"
+        />
+        <label
+          htmlFor="colors-blue"
+        >
+          Color Blue
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="colors-green"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="green"
+        />
+        <label
+          htmlFor="colors-green"
+        >
+          Color Green
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="colors-yellow"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="yellow"
+        />
+        <label
+          htmlFor="colors-yellow"
+        >
+          Color Yellow
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="colors-oarnge"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="oarnge"
+        />
+        <label
+          htmlFor="colors-oarnge"
+        >
+          Color Orange
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="colors-violet"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="violet"
+        />
+        <label
+          htmlFor="colors-violet"
+        >
+          Color Violet
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="colors-brown"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="brown"
+        />
+        <label
+          htmlFor="colors-brown"
+        >
+          Color Brown
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="colors-black"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="black"
+        />
+        <label
+          htmlFor="colors-black"
+        >
+          Color Black
+        </label>
+      </div>
     </div>
+  </div>
+  <div
+    className="debugger"
+  >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
-      Replace formik value
+      Open FormDebugger
     </button>
   </div>
 </form>
 `;
 
-exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik State 1`] = `
+exports[`Storyshots f/fields/QueryCombobox Multiple Select 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
   <div
-    className="base combobox y-background2"
+    className="base multiple-combobox y-background2"
   >
     <label
       className="base label x-main2"
-      htmlFor="team"
-      id="downshift-3-label"
+      htmlFor="teams"
+      id="downshift-4-label"
     >
       Search for a team
     </label>
     <div
       aria-expanded={false}
       aria-haspopup="listbox"
-      aria-owns="downshift-3-menu"
+      aria-owns="downshift-4-menu"
       className="input-wrapper"
       role="combobox"
     >
       <input
         aria-autocomplete="list"
-        aria-controls="downshift-3-menu"
-        aria-labelledby="downshift-3-label"
+        aria-controls="downshift-4-menu"
+        aria-labelledby="downshift-4-label"
         autoComplete="off"
         className="input"
-        id="downshift-3-input"
+        id="downshift-4-input"
         onBlur={[Function]}
         onChange={[Function]}
+        onClick={[Function]}
         onKeyDown={[Function]}
-        value="Apple"
+        value=""
       />
     </div>
     <div
       className="base popover x-background1 bottom left"
     >
       <ul
-        aria-labelledby="downshift-3-label"
+        aria-labelledby="downshift-4-label"
         className="base menu"
-        id="downshift-3-menu"
+        id="downshift-4-menu"
         onMouseLeave={[Function]}
         role="listbox"
       />
@@ -11902,274 +11986,327 @@ exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik Sta
       onClick={[Function]}
       type="button"
     >
-      Replace formik value
+      Add formik values
     </button>
   </div>
 </form>
 `;
 
-exports[`Storyshots f/fields/QuerySelect Base 1`] = `
+exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik State 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
   <div
-    className="base select-input y-background2"
+    className="base multiple-combobox y-background2"
   >
     <label
       className="base label x-main2"
-      htmlFor="status"
+      htmlFor="teams"
+      id="downshift-5-label"
     >
-      Select Task Status
+      Search for a team
     </label>
     <div
-      className="select-wrapper"
+      className="selected-items"
     >
-      <select
+      <div
+        className="item"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        tabIndex={-1}
+      >
+        <button
+          className="base button x-background2 modifierCompact modifierSimple"
+          onClick={[Function]}
+          type="button"
+        >
+          <span
+            className="v25 mr-v"
+          >
+            Apple
+          </span>
+          <span
+            className="f-icons close"
+          >
+            Y
+          </span>
+        </button>
+      </div>
+      <div
+        className="item"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        tabIndex={-1}
+      >
+        <button
+          className="base button x-background2 modifierCompact modifierSimple"
+          onClick={[Function]}
+          type="button"
+        >
+          <span
+            className="v25 mr-v"
+          >
+            Pear
+          </span>
+          <span
+            className="f-icons close"
+          >
+            Y
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      aria-expanded={false}
+      aria-haspopup="listbox"
+      aria-owns="downshift-5-menu"
+      className="input-wrapper"
+      role="combobox"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-5-menu"
+        aria-labelledby="downshift-5-label"
+        autoComplete="off"
         className="input"
-        disabled={false}
-        id="status"
-        name="status"
+        id="downshift-5-input"
         onBlur={[Function]}
         onChange={[Function]}
-        value=""
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        value=""
+      />
+    </div>
+    <div
+      className="base popover x-background1 bottom left"
+    >
+      <ul
+        aria-labelledby="downshift-5-label"
+        className="base menu"
+        id="downshift-5-menu"
+        onMouseLeave={[Function]}
+        role="listbox"
       />
     </div>
   </div>
   <div
-    className="debugger"
+    style={
+      Object {
+        "alignItems": "flex-end",
+        "display": "flex",
+        "flexDirection": "column",
+      }
+    }
   >
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
     <button
-      className="base button x-main2"
+      className="base button x-main1"
       onClick={[Function]}
       type="button"
     >
-      Open FormDebugger
+      Add formik values
     </button>
   </div>
 </form>
 `;
 
-exports[`Storyshots f/fields/QuerySelect Loading Options 1`] = `
+exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
   <div
-    className="base select-input y-background2"
+    className="base combobox y-background2"
   >
     <label
       className="base label x-main2"
-      htmlFor="status"
+      htmlFor="team"
+      id="downshift-2-label"
     >
-      Select Task Status
+      Search for a team
     </label>
     <div
-      className="select-wrapper"
+      aria-expanded={false}
+      aria-haspopup="listbox"
+      aria-owns="downshift-2-menu"
+      className="input-wrapper"
+      role="combobox"
     >
-      <select
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-2-menu"
+        aria-labelledby="downshift-2-label"
+        autoComplete="off"
         className="input"
-        disabled={false}
-        id="status"
-        name="status"
+        id="downshift-2-input"
         onBlur={[Function]}
         onChange={[Function]}
+        onKeyDown={[Function]}
         value=""
       />
     </div>
+    <div
+      className="base popover x-background1 bottom left"
+    >
+      <ul
+        aria-labelledby="downshift-2-label"
+        className="base menu"
+        id="downshift-2-menu"
+        onMouseLeave={[Function]}
+        role="listbox"
+      />
+    </div>
   </div>
   <div
-    className="debugger"
+    style={
+      Object {
+        "alignItems": "flex-end",
+        "display": "flex",
+        "flexDirection": "column",
+      }
+    }
   >
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
     <button
-      className="base button x-main2"
+      className="base button x-main1"
       onClick={[Function]}
       type="button"
     >
-      Open FormDebugger
+      Replace formik value
     </button>
   </div>
 </form>
 `;
 
-exports[`Storyshots f/fields/QuerySelect With Default Value 1`] = `
+exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik State 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
   <div
-    className="base select-input y-background2"
+    className="base combobox y-background2"
   >
     <label
       className="base label x-main2"
-      htmlFor="status"
+      htmlFor="team"
+      id="downshift-3-label"
     >
-      Select Task Status
+      Search for a team
     </label>
     <div
-      className="select-wrapper"
+      aria-expanded={false}
+      aria-haspopup="listbox"
+      aria-owns="downshift-3-menu"
+      className="input-wrapper"
+      role="combobox"
     >
-      <select
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-3-menu"
+        aria-labelledby="downshift-3-label"
+        autoComplete="off"
         className="input"
-        disabled={false}
-        id="status"
-        name="status"
+        id="downshift-3-input"
         onBlur={[Function]}
         onChange={[Function]}
-        value="VGFza1N0YXR1c05vZGU6NGRiYjNlMmItMGIxYy00ZjIxLTk0MmUtZTNjZGQwMjdiNjU3"
+        onKeyDown={[Function]}
+        value="Apple"
+      />
+    </div>
+    <div
+      className="base popover x-background1 bottom left"
+    >
+      <ul
+        aria-labelledby="downshift-3-label"
+        className="base menu"
+        id="downshift-3-menu"
+        onMouseLeave={[Function]}
+        role="listbox"
       />
     </div>
   </div>
   <div
-    className="debugger"
+    style={
+      Object {
+        "alignItems": "flex-end",
+        "display": "flex",
+        "flexDirection": "column",
+      }
+    }
   >
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
     <button
-      className="base button x-main2"
+      className="base button x-main1"
       onClick={[Function]}
       type="button"
     >
-      Open FormDebugger
+      Replace formik value
     </button>
   </div>
 </form>
 `;
 
-exports[`Storyshots f/fields/RatingsInput Base 1`] = `
+exports[`Storyshots f/fields/QuerySelect Base 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
   <div
-    className="base ratings-input"
+    className="base select-input y-background2"
   >
     <label
-      className="base label input-label v50 mb-v x-main2"
-      htmlFor="ratings"
+      className="base label x-main2"
+      htmlFor="status"
     >
-      Your Rating
+      Select Task Status
     </label>
     <div
-      className="stars"
+      className="select-wrapper"
     >
-      <div
-        className="base rating x-main1 y-background2"
-      >
-        <label
-          htmlFor="ratings-1"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <span
-            className="f-icons c-dark-y"
-          >
-            [
-          </span>
-        </label>
-        <input
-          id="ratings-1"
-          name="ratings"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value={1}
-        />
-      </div>
-      <div
-        className="base rating x-main1 y-background2"
-      >
-        <label
-          htmlFor="ratings-2"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <span
-            className="f-icons c-dark-y"
-          >
-            [
-          </span>
-        </label>
-        <input
-          id="ratings-2"
-          name="ratings"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value={2}
-        />
-      </div>
-      <div
-        className="base rating x-main1 y-background2"
-      >
-        <label
-          htmlFor="ratings-3"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <span
-            className="f-icons c-dark-y"
-          >
-            [
-          </span>
-        </label>
-        <input
-          id="ratings-3"
-          name="ratings"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value={3}
-        />
-      </div>
-      <div
-        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
-          id="ratings-4"
-          name="ratings"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value={4}
-        />
-      </div>
-      <div
-        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
-          id="ratings-5"
-          name="ratings"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value={5}
-        />
-      </div>
+      <select
+        className="input"
+        disabled={false}
+        id="status"
+        name="status"
+        onBlur={[Function]}
+        onChange={[Function]}
+        value=""
+      />
     </div>
   </div>
   <div
@@ -12186,182 +12323,118 @@ exports[`Storyshots f/fields/RatingsInput Base 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
+exports[`Storyshots f/fields/QuerySelect Loading Options 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
   <div
-    className="base ratings-input"
+    className="base select-input y-background2"
   >
     <label
-      className="base label input-label v50 mb-v x-main2"
-      htmlFor="ratings"
+      className="base label x-main2"
+      htmlFor="status"
     >
-      Your Rating
+      Select Task Status
     </label>
     <div
-      className="stars"
+      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/fields/QuerySelect With Default Value 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base select-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="VGFza1N0YXR1c05vZGU6NGRiYjNlMmItMGIxYy00ZjIxLTk0MmUtZTNjZGQwMjdiNjU3"
+      />
+    </div>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/RatingsInput Base 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base ratings-input"
+  >
+    <label
+      className="base label input-label v50 mb-v x-main2"
+      htmlFor="ratings"
+    >
+      Your Rating
+    </label>
+    <div
+      className="stars"
     >
-      <p
-        className="label-text md-s-1 s-2 x-metadata c-x"
-      >
-        not satisfied.
-      </p>
-      <div
-        className="base rating x-main1 y-background2"
-      >
-        <label
-          htmlFor="ratings-1"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <span
-            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
-          >
-            1
-          </span>
-          <span
-            className="f-icons c-dark-y"
-          >
-            [
-          </span>
-        </label>
-        <input
-          id="ratings-1"
-          name="ratings"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value={1}
-        />
-      </div>
-      <div
-        className="base rating x-main1 y-background2"
-      >
-        <label
-          htmlFor="ratings-2"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <span
-            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
-          >
-            2
-          </span>
-          <span
-            className="f-icons c-dark-y"
-          >
-            [
-          </span>
-        </label>
-        <input
-          id="ratings-2"
-          name="ratings"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value={2}
-        />
-      </div>
-      <div
-        className="base rating x-main1 y-background2"
-      >
-        <label
-          htmlFor="ratings-3"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <span
-            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
-          >
-            3
-          </span>
-          <span
-            className="f-icons c-dark-y"
-          >
-            [
-          </span>
-        </label>
-        <input
-          id="ratings-3"
-          name="ratings"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value={3}
-        />
-      </div>
-      <div
-        className="base rating x-main1 y-background2"
-      >
-        <label
-          htmlFor="ratings-4"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <span
-            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
-          >
-            4
-          </span>
-          <span
-            className="f-icons c-dark-y"
-          >
-            [
-          </span>
-        </label>
-        <input
-          id="ratings-4"
-          name="ratings"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value={4}
-        />
-      </div>
-      <div
-        className="base rating x-main1 y-background2"
-      >
-        <label
-          htmlFor="ratings-5"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <span
-            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
-          >
-            5
-          </span>
-          <span
-            className="f-icons c-dark-y"
-          >
-            [
-          </span>
-        </label>
-        <input
-          id="ratings-5"
-          name="ratings"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value={5}
-        />
-      </div>
       <div
         className="base rating x-main1 y-background2"
       >
         <label
-          htmlFor="ratings-6"
+          htmlFor="ratings-1"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
-          <span
-            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
-          >
-            6
-          </span>
           <span
             className="f-icons c-dark-y"
           >
@@ -12369,27 +12442,22 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
           </span>
         </label>
         <input
-          id="ratings-6"
+          id="ratings-1"
           name="ratings"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
-          value={6}
+          value={1}
         />
       </div>
       <div
         className="base rating x-main1 y-background2"
       >
         <label
-          htmlFor="ratings-7"
+          htmlFor="ratings-2"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
-          <span
-            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
-          >
-            7
-          </span>
           <span
             className="f-icons c-dark-y"
           >
@@ -12397,27 +12465,22 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
           </span>
         </label>
         <input
-          id="ratings-7"
+          id="ratings-2"
           name="ratings"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
-          value={7}
+          value={2}
         />
       </div>
       <div
         className="base rating x-main1 y-background2"
       >
         <label
-          htmlFor="ratings-8"
+          htmlFor="ratings-3"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
-          <span
-            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
-          >
-            8
-          </span>
           <span
             className="f-icons c-dark-y"
           >
@@ -12425,27 +12488,22 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
           </span>
         </label>
         <input
-          id="ratings-8"
+          id="ratings-3"
           name="ratings"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
-          value={8}
+          value={3}
         />
       </div>
       <div
         className="base rating x-main1 y-background2"
       >
         <label
-          htmlFor="ratings-9"
+          htmlFor="ratings-4"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
-          <span
-            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
-          >
-            9
-          </span>
           <span
             className="f-icons c-dark-y"
           >
@@ -12453,27 +12511,22 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
           </span>
         </label>
         <input
-          id="ratings-9"
+          id="ratings-4"
           name="ratings"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
-          value={9}
+          value={4}
         />
       </div>
       <div
         className="base rating x-main1 y-background2"
       >
         <label
-          htmlFor="ratings-10"
+          htmlFor="ratings-5"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
-          <span
-            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
-          >
-            10
-          </span>
           <span
             className="f-icons c-dark-y"
           >
@@ -12481,19 +12534,14 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
           </span>
         </label>
         <input
-          id="ratings-10"
+          id="ratings-5"
           name="ratings"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
-          value={10}
+          value={5}
         />
       </div>
-      <p
-        className="label-text md-s-1 s-2 x-metadata c-x"
-      >
-        very satisfied.
-      </p>
     </div>
   </div>
   <div
@@ -12510,7 +12558,7 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
+exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -12528,6 +12576,11 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
     <div
       className="stars"
     >
+      <p
+        className="label-text md-s-1 s-2 x-metadata c-x"
+      >
+        not satisfied.
+      </p>
       <div
         className="base rating x-main1 y-background2"
       >
@@ -12668,18 +12721,57 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
           value={5}
         />
       </div>
+      <p
+        className="label-text md-s-1 s-2 x-metadata c-x"
+      >
+        very satisfied.
+      </p>
+    </div>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base ratings-input"
+  >
+    <label
+      className="base label input-label v50 mb-v x-main2"
+      htmlFor="ratings"
+    >
+      Your Rating
+    </label>
+    <div
+      className="stars"
+    >
       <div
         className="base rating x-main1 y-background2"
       >
         <label
-          htmlFor="ratings-6"
+          htmlFor="ratings-1"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
           <span
             className="v25 mb-v md-s-1 s-2 x-metadata c-x"
           >
-            6
+            1
           </span>
           <span
             className="f-icons c-dark-y"
@@ -12688,26 +12780,26 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
           </span>
         </label>
         <input
-          id="ratings-6"
+          id="ratings-1"
           name="ratings"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
-          value={6}
+          value={1}
         />
       </div>
       <div
         className="base rating x-main1 y-background2"
       >
         <label
-          htmlFor="ratings-7"
+          htmlFor="ratings-2"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
           <span
             className="v25 mb-v md-s-1 s-2 x-metadata c-x"
           >
-            7
+            2
           </span>
           <span
             className="f-icons c-dark-y"
@@ -12716,26 +12808,26 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
           </span>
         </label>
         <input
-          id="ratings-7"
+          id="ratings-2"
           name="ratings"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
-          value={7}
+          value={2}
         />
       </div>
       <div
         className="base rating x-main1 y-background2"
       >
         <label
-          htmlFor="ratings-8"
+          htmlFor="ratings-3"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
           <span
             className="v25 mb-v md-s-1 s-2 x-metadata c-x"
           >
-            8
+            3
           </span>
           <span
             className="f-icons c-dark-y"
@@ -12744,26 +12836,26 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
           </span>
         </label>
         <input
-          id="ratings-8"
+          id="ratings-3"
           name="ratings"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
-          value={8}
+          value={3}
         />
       </div>
       <div
         className="base rating x-main1 y-background2"
       >
         <label
-          htmlFor="ratings-9"
+          htmlFor="ratings-4"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
           <span
             className="v25 mb-v md-s-1 s-2 x-metadata c-x"
           >
-            9
+            4
           </span>
           <span
             className="f-icons c-dark-y"
@@ -12772,26 +12864,26 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
           </span>
         </label>
         <input
-          id="ratings-9"
+          id="ratings-4"
           name="ratings"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
-          value={9}
+          value={4}
         />
       </div>
       <div
         className="base rating x-main1 y-background2"
       >
         <label
-          htmlFor="ratings-10"
+          htmlFor="ratings-5"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
           <span
             className="v25 mb-v md-s-1 s-2 x-metadata c-x"
           >
-            10
+            5
           </span>
           <span
             className="f-icons c-dark-y"
@@ -12800,12 +12892,12 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
           </span>
         </label>
         <input
-          id="ratings-10"
+          id="ratings-5"
           name="ratings"
           onBlur={[Function]}
           onChange={[Function]}
           type="radio"
-          value={10}
+          value={5}
         />
       </div>
     </div>
@@ -12927,95 +13019,21 @@ exports[`Storyshots f/fields/SelectInput Disabled Select Input 1`] = `
         </option>
         <option
           disabled={false}
-          value="Work"
-        >
-          Work
-        </option>
-        <option
-          disabled={false}
-          value="Managing"
-        >
-          Managing
-        </option>
-        <option
-          disabled={false}
-          value="Training"
-        >
-          Training
-        </option>
-        <option
-          disabled={false}
-          value="20th Aug 2020 to 19th Sept, 2020"
-        >
-          20th Aug 2020 to 19th Sept, 2020
-        </option>
-        <option
-          disabled={false}
-          value="20th Sept 2020 to 19th Oct, 2020"
-        >
-          20th Sept 2020 to 19th Oct, 2020
-        </option>
-      </select>
-    </div>
-  </div>
-  <div
-    className="debugger"
-  >
-    <button
-      className="base button x-main2"
-      onClick={[Function]}
-      type="button"
-    >
-      Open FormDebugger
-    </button>
-  </div>
-</form>
-`;
-
-exports[`Storyshots f/fields/SelectInput Objects 1`] = `
-<form
-  action="#"
-  onReset={[Function]}
-  onSubmit={[Function]}
->
-  <div
-    className="base select-input y-background2"
-  >
-    <label
-      className="base label x-main2"
-      htmlFor="workType"
-    >
-      Work Type
-    </label>
-    <div
-      className="select-wrapper"
-    >
-      <select
-        className="input"
-        disabled={false}
-        id="workType"
-        name="workType"
-        onBlur={[Function]}
-        onChange={[Function]}
-        value=""
-      >
-        <option
-          disabled={true}
-          value=""
+          value="Work"
         >
-          Select an option
+          Work
         </option>
         <option
           disabled={false}
-          value="20th Aug 2020 to 19th Sept, 2020"
+          value="Managing"
         >
-          20th Aug 2020 to 19th Sept, 2020
+          Managing
         </option>
         <option
           disabled={false}
-          value="20th Sept 2020 to 19th Oct, 2020"
+          value="Training"
         >
-          20th Sept 2020 to 19th Oct, 2020
+          Training
         </option>
       </select>
     </div>
@@ -13034,7 +13052,7 @@ exports[`Storyshots f/fields/SelectInput Objects 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/SelectInput Required Select 1`] = `
+exports[`Storyshots f/fields/SelectInput Required 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -13045,9 +13063,9 @@ exports[`Storyshots f/fields/SelectInput Required Select 1`] = `
   >
     <label
       className="base label x-main2"
-      htmlFor="activity"
+      htmlFor="workType"
     >
-      Activity Type
+      Work Type
     </label>
     <div
       className="select-wrapper"
@@ -13055,8 +13073,8 @@ exports[`Storyshots f/fields/SelectInput Required Select 1`] = `
       <select
         className="input"
         disabled={false}
-        id="activity"
-        name="activity"
+        id="workType"
+        name="workType"
         onBlur={[Function]}
         onChange={[Function]}
         value=""
@@ -13069,15 +13087,21 @@ exports[`Storyshots f/fields/SelectInput Required Select 1`] = `
         </option>
         <option
           disabled={false}
-          value="review"
+          value="Work"
+        >
+          Work
+        </option>
+        <option
+          disabled={false}
+          value="Managing"
         >
-          Review
+          Managing
         </option>
         <option
           disabled={false}
-          value="Approve"
+          value="Training"
         >
-          Approve
+          Training
         </option>
       </select>
     </div>
@@ -13149,15 +13173,21 @@ exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
         </option>
         <option
           disabled={false}
-          value="20th Aug 2020 to 19th Sept, 2020"
+          value="Option1"
+        >
+          Option1
+        </option>
+        <option
+          disabled={false}
+          value="Option2"
         >
-          20th Aug 2020 to 19th Sept, 2020
+          Option2
         </option>
         <option
           disabled={false}
-          value="20th Sept 2020 to 19th Oct, 2020"
+          value="Option3"
         >
-          20th Sept 2020 to 19th Oct, 2020
+          Option3
         </option>
       </select>
     </div>
@@ -13220,13 +13250,15 @@ exports[`Storyshots f/fields/TextInput Base 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/TextInput Date Time 1`] = `
+exports[`Storyshots f/fields/TextInput Date 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
-  <div>
+  <div
+    className=" u2 pb-u"
+  >
     <div
       className="base text-input y-background2"
     >
@@ -13247,6 +13279,30 @@ exports[`Storyshots f/fields/TextInput Date Time 1`] = `
         value=""
       />
     </div>
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/TextInput Time 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className=" u2 pb-u"
+  >
     <div
       className="base text-input y-background2"
     >
@@ -13282,14 +13338,14 @@ exports[`Storyshots f/fields/TextInput Date Time 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/TextInput Disabled 1`] = `
+exports[`Storyshots f/fields/TextInput With Auto Complete Off 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
   <div
-    className="u2 pb-u"
+    className=" u2 pb-u"
   >
     <div
       className="base text-input y-background2"
@@ -13301,8 +13357,9 @@ exports[`Storyshots f/fields/TextInput Disabled 1`] = `
         What's your first name ?
       </label>
       <input
+        autoComplete="off"
         className="input"
-        disabled={true}
+        disabled={false}
         id="firstName"
         name="firstName"
         onBlur={[Function]}
@@ -13311,18 +13368,29 @@ exports[`Storyshots f/fields/TextInput Disabled 1`] = `
         value=""
       />
     </div>
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
   </div>
 </form>
 `;
 
-exports[`Storyshots f/fields/TextInput Placeholder 1`] = `
+exports[`Storyshots f/fields/TextInput With Disabled 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
   <div
-    className="u2 pb-u"
+    className=" u2 pb-u"
   >
     <div
       className="base text-input y-background2"
@@ -13335,12 +13403,11 @@ exports[`Storyshots f/fields/TextInput Placeholder 1`] = `
       </label>
       <input
         className="input"
-        disabled={false}
+        disabled={true}
         id="firstName"
         name="firstName"
         onBlur={[Function]}
         onChange={[Function]}
-        placeholder="First Name"
         type="text"
         value=""
       />
@@ -13360,32 +13427,35 @@ exports[`Storyshots f/fields/TextInput Placeholder 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/TextareaInput Base 1`] = `
+exports[`Storyshots f/fields/TextInput With Placeholder 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
-  <div>
+  <div
+    className=" u2 pb-u"
+  >
     <div
-      className="base text-area-input y-background2"
+      className="base text-input y-background2"
     >
       <label
         className="base label v50 mb-v x-main2"
-        htmlFor="feedback"
+        htmlFor="firstName"
       >
-        What can we improve on?
+        What's your first name ?
       </label>
-      <textarea
-        className="textarea"
+      <input
+        className="input"
         disabled={false}
-        name="feedback"
+        id="firstName"
+        name="firstName"
         onBlur={[Function]}
         onChange={[Function]}
-        rows={3}
+        placeholder="First Name"
+        type="text"
         value=""
       />
-       
     </div>
     <div
       className="debugger"
@@ -13402,32 +13472,34 @@ exports[`Storyshots f/fields/TextareaInput Base 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/TextareaInput Disabled 1`] = `
+exports[`Storyshots f/fields/TextInput With Validation 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
-  <div>
+  <div
+    className=" u2 pb-u"
+  >
     <div
-      className="base text-area-input y-background2"
+      className="base text-input y-background2"
     >
       <label
         className="base label v50 mb-v x-main2"
-        htmlFor="feedback"
+        htmlFor="firstName"
       >
-        What can we improve on?
+        What's your first name ?
       </label>
-      <textarea
-        className="textarea"
-        disabled={true}
-        name="feedback"
+      <input
+        className="input"
+        disabled={false}
+        id="firstName"
+        name="firstName"
         onBlur={[Function]}
         onChange={[Function]}
-        rows={3}
+        type="text"
         value=""
       />
-       
     </div>
     <div
       className="debugger"
@@ -13444,45 +13516,120 @@ exports[`Storyshots f/fields/TextareaInput Disabled 1`] = `
 </form>
 `;
 
+exports[`Storyshots f/fields/TextareaInput Base 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base text-area-input y-background2"
+  >
+    <label
+      className="base label v50 mb-v x-main2"
+      htmlFor="feedback"
+    >
+      What can we improve on?
+    </label>
+    <textarea
+      className="textarea"
+      disabled={false}
+      name="feedback"
+      onBlur={[Function]}
+      onChange={[Function]}
+      rows={3}
+      value=""
+    />
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/TextareaInput Disabled 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base text-area-input y-background2"
+  >
+    <label
+      className="base label v50 mb-v x-main2"
+      htmlFor="feedback"
+    >
+      What can we improve on?
+    </label>
+    <textarea
+      className="textarea"
+      disabled={true}
+      name="feedback"
+      onBlur={[Function]}
+      onChange={[Function]}
+      rows={3}
+      value=""
+    />
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/fields/TextareaInput Placeholder 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
-  <div>
-    <div
-      className="base text-area-input y-background2"
+  <div
+    className="base text-area-input y-background2"
+  >
+    <label
+      className="base label v50 mb-v x-main2"
+      htmlFor="feedback"
     >
-      <label
-        className="base label v50 mb-v x-main2"
-        htmlFor="feedback"
-      >
-        What can we improve on?
-      </label>
-      <textarea
-        className="textarea"
-        disabled={false}
-        name="feedback"
-        onBlur={[Function]}
-        onChange={[Function]}
-        placeholder="Type your feedback here..."
-        rows={3}
-        value=""
-      />
-       
-    </div>
-    <div
-      className="debugger"
+      What can we improve on?
+    </label>
+    <textarea
+      className="textarea"
+      disabled={false}
+      name="feedback"
+      onBlur={[Function]}
+      onChange={[Function]}
+      placeholder="Type your feedback here..."
+      rows={3}
+      value=""
+    />
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
     >
-      <button
-        className="base button x-main2"
-        onClick={[Function]}
-        type="button"
-      >
-        Open FormDebugger
-      </button>
-    </div>
+      Open FormDebugger
+    </button>
   </div>
 </form>
 `;
@@ -13493,39 +13640,35 @@ exports[`Storyshots f/fields/TextareaInput Validation 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
-  <div>
-    <div
-      className="base text-area-input y-background2"
+  <div
+    className="base text-area-input y-background2"
+  >
+    <label
+      className="base label v50 mb-v x-main2"
+      htmlFor="feedback"
     >
-      <label
-        className="base label v50 mb-v x-main2"
-        htmlFor="feedback"
-      >
-        What can we improve on?
-      </label>
-      <textarea
-        className="textarea"
-        disabled={false}
-        name="feedback"
-        onBlur={[Function]}
-        onChange={[Function]}
-        placeholder="Type your feedback here..."
-        rows={3}
-        value=""
-      />
-       
-    </div>
-    <div
-      className="debugger"
+      What can we improve on?
+    </label>
+    <textarea
+      className="textarea"
+      disabled={false}
+      name="feedback"
+      onBlur={[Function]}
+      onChange={[Function]}
+      rows={3}
+      value=""
+    />
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
     >
-      <button
-        className="base button x-main2"
-        onClick={[Function]}
-        type="button"
-      >
-        Open FormDebugger
-      </button>
-    </div>
+      Open FormDebugger
+    </button>
   </div>
 </form>
 `;