@pareto-engineering/design-system 2.0.0-alpha.12 → 2.0.0-alpha.16

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

@@ -114,10 +114,10 @@ exports[`Storyshots a/ContentCard Content After 1`] = `
         </p>
       </div>
       <div
-        className="base conversation illustration y-background u1"
+        className="base conversation illustration y-background2 u1"
       >
         <div
-          className="base message x-main2 ours"
+          className="base message x-background1 ours v1"
         >
           <div
             className="elementContent"
@@ -134,7 +134,7 @@ exports[`Storyshots a/ContentCard Content After 1`] = `
           </div>
         </div>
         <div
-          className="base message x-background2"
+          className="base message x-background1 v1"
         >
           <div
             className="elementContent"
@@ -151,7 +151,7 @@ exports[`Storyshots a/ContentCard Content After 1`] = `
           </div>
         </div>
         <div
-          className="base message x-main2 ours"
+          className="base message x-background1 ours v1"
         >
           <div
             className="elementContent"
@@ -228,10 +228,10 @@ exports[`Storyshots a/ContentCard Layout Left 1`] = `
         </p>
       </div>
       <div
-        className="base conversation illustration y-background u1"
+        className="base conversation illustration y-background2 u1"
       >
         <div
-          className="base message x-main2 ours"
+          className="base message x-background1 ours v1"
         >
           <div
             className="elementContent"
@@ -248,7 +248,7 @@ exports[`Storyshots a/ContentCard Layout Left 1`] = `
           </div>
         </div>
         <div
-          className="base message x-background2"
+          className="base message x-background1 v1"
         >
           <div
             className="elementContent"
@@ -265,7 +265,7 @@ exports[`Storyshots a/ContentCard Layout Left 1`] = `
           </div>
         </div>
         <div
-          className="base message x-main2 ours"
+          className="base message x-background1 ours v1"
         >
           <div
             className="elementContent"
@@ -317,10 +317,10 @@ exports[`Storyshots a/ContentCard Layout Right 1`] = `
         </p>
       </div>
       <div
-        className="base conversation illustration y-background u1"
+        className="base conversation illustration y-background2 u1"
       >
         <div
-          className="base message x-main2 ours"
+          className="base message x-background1 ours v1"
         >
           <div
             className="elementContent"
@@ -337,7 +337,7 @@ exports[`Storyshots a/ContentCard Layout Right 1`] = `
           </div>
         </div>
         <div
-          className="base message x-background2"
+          className="base message x-background1 v1"
         >
           <div
             className="elementContent"
@@ -354,7 +354,7 @@ exports[`Storyshots a/ContentCard Layout Right 1`] = `
           </div>
         </div>
         <div
-          className="base message x-main2 ours"
+          className="base message x-background1 ours v1"
         >
           <div
             className="elementContent"
@@ -378,10 +378,10 @@ exports[`Storyshots a/ContentCard Layout Right 1`] = `
 
 exports[`Storyshots a/Conversation Base 1`] = `
 <div
-  className="base conversation y-background u1"
+  className="base conversation y-background2 u1"
 >
   <div
-    className="base message x-background2"
+    className="base message x-background1 v1"
   >
     <div
       className="elementContent"
@@ -398,7 +398,7 @@ exports[`Storyshots a/Conversation Base 1`] = `
     </div>
   </div>
   <div
-    className="base message x-main2 ours"
+    className="base message x-background1 ours v1"
   >
     <div
       className="elementContent"
@@ -410,12 +410,12 @@ exports[`Storyshots a/Conversation Base 1`] = `
         :
       </p>
       <p>
-        Hi Humbl, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.
+        Hi Morgan! Here is the database we prepared for you.
       </p>
     </div>
   </div>
   <div
-    className="base message x-background2"
+    className="base message x-background1 v1"
   >
     <div
       className="elementContent"
@@ -431,6 +431,201 @@ exports[`Storyshots a/Conversation Base 1`] = `
       </p>
     </div>
   </div>
+  <div
+    className="base message x-background1 ours v1"
+  >
+    <div
+      className="elementContent"
+    >
+      <p
+        className="sender v25 mb-v s-1"
+      >
+        CAMILLE
+        :
+      </p>
+      <p>
+        Hi Morgan! Here is the database we prepared for you.
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Conversation With Attachment 1`] = `
+<div
+  className="base conversation y-background2 u1"
+>
+  <div
+    className="base message x-background1 v1"
+  >
+    <div
+      className="elementContent"
+    >
+      <p
+        className="sender v25 mb-v s-1"
+      >
+        HUMBL
+        :
+      </p>
+      <p>
+        Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.
+      </p>
+    </div>
+  </div>
+  <div
+    className="base message x-background1 ours v1"
+  >
+    <div
+      className="elementContent"
+    >
+      <p
+        className="sender v25 mb-v s-1"
+      >
+        CAMILLE
+        :
+      </p>
+      <p>
+        Hi Morgan! Here is the database we prepared for you.
+      </p>
+      <div
+        className="attachment y-main4"
+      >
+        <span
+          className="f-icons"
+        >
+          A
+        </span>
+        <p
+          className="ml-v"
+        >
+          spreadsheet.xlsx
+        </p>
+      </div>
+    </div>
+  </div>
+  <div
+    className="base message x-background1 v1"
+  >
+    <div
+      className="elementContent"
+    >
+      <p
+        className="sender v25 mb-v s-1"
+      >
+        HUMBL
+        :
+      </p>
+      <p>
+        Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.
+      </p>
+    </div>
+  </div>
+  <div
+    className="base message x-background1 ours v1"
+  >
+    <div
+      className="elementContent"
+    >
+      <p
+        className="sender v25 mb-v s-1"
+      >
+        CAMILLE
+        :
+      </p>
+      <p>
+        Hi Morgan! Here is the database we prepared for you.
+      </p>
+      <div
+        className="attachment y-main4"
+      >
+        <span
+          className="f-icons"
+        >
+          A
+        </span>
+        <p
+          className="ml-v"
+        >
+          spreadsheet.xlsx
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Conversation With Triangle 1`] = `
+<div
+  className="base conversation y-background2 u1"
+>
+  <div
+    className="base message x-background1 has-triangle v1"
+  >
+    <div
+      className="elementContent"
+    >
+      <p
+        className="sender v25 mb-v s-1"
+      >
+        HUMBL
+        :
+      </p>
+      <p>
+        Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.
+      </p>
+    </div>
+  </div>
+  <div
+    className="base message x-background1 ours has-triangle v1"
+  >
+    <div
+      className="elementContent"
+    >
+      <p
+        className="sender v25 mb-v s-1"
+      >
+        CAMILLE
+        :
+      </p>
+      <p>
+        Hi Morgan! Here is the database we prepared for you.
+      </p>
+    </div>
+  </div>
+  <div
+    className="base message x-background1 has-triangle v1"
+  >
+    <div
+      className="elementContent"
+    >
+      <p
+        className="sender v25 mb-v s-1"
+      >
+        HUMBL
+        :
+      </p>
+      <p>
+        Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.
+      </p>
+    </div>
+  </div>
+  <div
+    className="base message x-background1 ours has-triangle v1"
+  >
+    <div
+      className="elementContent"
+    >
+      <p
+        className="sender v25 mb-v s-1"
+      >
+        CAMILLE
+        :
+      </p>
+      <p>
+        Hi Morgan! Here is the database we prepared for you.
+      </p>
+    </div>
+  </div>
 </div>
 `;
 
@@ -7656,11 +7851,11 @@ exports[`Storyshots b/Page Item Type 1`] = `
 exports[`Storyshots b/Page Sections With Background 1`] = `
 <main
   className="base page"
-  id="with-sections"
+  id="with-background"
 >
   <section
     className="base section y-success b-light-y"
-    id="with-sections_s1"
+    id="with-background_s1"
     style={
       Object {
         "alignItems": "center",
@@ -7709,6 +7904,55 @@ exports[`Storyshots b/Page Sections With Background 1`] = `
 </main>
 `;
 
+exports[`Storyshots b/Page Sections With Background Gradient 1`] = `
+<main
+  className="base page"
+  id="with-background-gradient"
+>
+  <section
+    className="base section y-success"
+    id="with-background-gradient_s1"
+    style={
+      Object {
+        "alignItems": "center",
+        "display": "flex",
+        "height": "30em",
+        "justifyContent": "center",
+      }
+    }
+  >
+    <figure
+      className="base quote x-paragraph"
+    >
+      <blockquote
+        className="blockquote uc"
+      >
+        <p
+          className="quotation c-x md-s0 s-1"
+        >
+          Pareto was like having a full-time employee without having to hire somebody. That’s how I would explain it. An on-call, on-demand full-time employee.
+        </p>
+      </blockquote>
+      <figcaption
+        className="figcaption"
+      >
+        <cite>
+          Austen Spoonts
+        </cite>
+      </figcaption>
+    </figure>
+    <div
+      className="base background-gradient"
+      style={
+        Object {
+          "--gradient-height": "50em",
+        }
+      }
+    />
+  </section>
+</main>
+`;
+
 exports[`Storyshots b/Page With Sections 1`] = `
 <main
   className="base page"
@@ -8388,7 +8632,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
             >
               <span />
               <button
-                className="base button x-main1 next x-main1"
+                className="base button x-main2 next x-main1 modifierCompact"
                 disabled={false}
                 onClick={[Function]}
                 type="button"
@@ -8445,7 +8689,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
             >
               <span />
               <button
-                className="base button x-main1 next x-main1"
+                className="base button x-main2 next x-main1 modifierCompact"
                 disabled={false}
                 onClick={[Function]}
                 type="button"
@@ -8484,7 +8728,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
             >
               <span />
               <button
-                className="base button x-main1 next x-main1"
+                className="base button x-main2 next x-main1 modifierCompact"
                 disabled={false}
                 onClick={[Function]}
                 type="button"
@@ -8523,7 +8767,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
             >
               <span />
               <button
-                className="base button x-main1 next x-main1"
+                className="base button x-main2 next x-main1 modifierCompact"
                 disabled={false}
                 onClick={[Function]}
                 type="button"
@@ -8642,7 +8886,7 @@ exports[`Storyshots c/ContentSlides Simple 1`] = `
           >
             <span />
             <button
-              className="base button x-main1 next x-main1"
+              className="base button x-main2 next x-main1 modifierCompact"
               disabled={false}
               onClick={[Function]}
               type="button"
@@ -8697,7 +8941,7 @@ exports[`Storyshots c/ContentSlides Simple 1`] = `
           >
             <span />
             <button
-              className="base button x-main1 next x-main1"
+              className="base button x-main2 next x-main1 modifierCompact"
               disabled={false}
               onClick={[Function]}
               type="button"
@@ -8736,7 +8980,7 @@ exports[`Storyshots c/ContentSlides Simple 1`] = `
           >
             <span />
             <button
-              className="base button x-main1 next x-main1"
+              className="base button x-main2 next x-main1 modifierCompact"
               disabled={false}
               onClick={[Function]}
               type="button"
@@ -8775,7 +9019,7 @@ exports[`Storyshots c/ContentSlides Simple 1`] = `
           >
             <span />
             <button
-              className="base button x-main1 next x-main1"
+              className="base button x-main2 next x-main1 modifierCompact"
               disabled={false}
               onClick={[Function]}
               type="button"
@@ -8886,7 +9130,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     className="base text-input form-input"
   >
     <label
-      className="base label input-label v50 mb-v x-main1"
+      className="base label input-label v50 mb-v x-main2"
       htmlFor="firstName"
     >
       What's your first name ?
@@ -8906,7 +9150,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     className="base text-input form-input"
   >
     <label
-      className="base label input-label v50 mb-v x-main1"
+      className="base label input-label v50 mb-v x-main2"
       htmlFor="lastName"
     >
       What's your last name ?
@@ -8922,10 +9166,10 @@ exports[`Storyshots f/FormInput Base 1`] = `
     />
   </div>
   <div
-    className="base text-area-input form-input x-background1 y-main1"
+    className="base text-area-input form-input x-background1 y-main2"
   >
     <label
-      className="base label c-y v50 mb-v x-main1"
+      className="base label c-y v50 mb-v x-main2"
       htmlFor="description"
     >
       Describe yourself in a few sentences
@@ -8941,7 +9185,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
      
   </div>
   <div
-    className="base choices-input form-input x-background2 y-main1"
+    className="base choices-input form-input x-background2 y-main2"
     style={
       Object {
         "--grid-columns-desktop": 3,
@@ -8950,7 +9194,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     }
   >
     <p
-      className="base label x-main1"
+      className="base label x-main2"
     >
       What are your favourite colors ?
     </p>
@@ -9017,7 +9261,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     className="base select-input form-input"
   >
     <label
-      className="base label input-label x-main1"
+      className="base label input-label x-main2"
       htmlFor="food"
     >
       What do you want for dinner ?
@@ -9029,18 +9273,22 @@ exports[`Storyshots f/FormInput Base 1`] = `
       name="food"
       onBlur={[Function]}
       onChange={[Function]}
+      value=""
     >
       <option
+        disabled={false}
         value="italian"
       >
         A nice pizza
       </option>
       <option
+        disabled={false}
         value="turkish"
       >
         A delicious kebab
       </option>
       <option
+        disabled={false}
         value="french"
       >
         A three course delicate french meal
@@ -9051,7 +9299,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -9071,7 +9319,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     className="base text-input form-input"
   >
     <label
-      className="base label input-label v50 mb-v x-main1"
+      className="base label input-label v50 mb-v x-main2"
       htmlFor="firstName"
     >
       What's your first name ?
@@ -9091,7 +9339,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     className="base text-input form-input"
   >
     <label
-      className="base label input-label v50 mb-v x-main1"
+      className="base label input-label v50 mb-v x-main2"
       htmlFor="lastName"
     >
       What's your last name ?
@@ -9107,10 +9355,10 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     />
   </div>
   <div
-    className="base text-area-input form-input x-background1 y-main1"
+    className="base text-area-input form-input x-background1 y-main2"
   >
     <label
-      className="base label c-y v50 mb-v x-main1"
+      className="base label c-y v50 mb-v x-main2"
       htmlFor="description"
     >
       Describe yourself in a few sentences
@@ -9126,7 +9374,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
      
   </div>
   <div
-    className="base choices-input form-input x-background2 y-main1"
+    className="base choices-input form-input x-background2 y-main2"
     style={
       Object {
         "--grid-columns-desktop": 3,
@@ -9135,7 +9383,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     }
   >
     <p
-      className="base label x-main1"
+      className="base label x-main2"
     >
       What are your favourite colors ?
     </p>
@@ -9202,7 +9450,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     className="base select-input form-input"
   >
     <label
-      className="base label input-label x-main1"
+      className="base label input-label x-main2"
       htmlFor="food"
     >
       What do you want for dinner ?
@@ -9214,18 +9462,22 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
       name="food"
       onBlur={[Function]}
       onChange={[Function]}
+      value=""
     >
       <option
+        disabled={false}
         value="italian"
       >
         A nice pizza
       </option>
       <option
+        disabled={false}
         value="turkish"
       >
         A delicious kebab
       </option>
       <option
+        disabled={false}
         value="french"
       >
         A three course delicate french meal
@@ -9236,7 +9488,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -9256,7 +9508,7 @@ exports[`Storyshots f/FormInput Extensible Form Input 1`] = `
     className="base text-input form-input"
   >
     <label
-      className="base label input-label v50 mb-v x-main1"
+      className="base label input-label v50 mb-v x-main2"
       htmlFor="extended"
     >
       Extended type input
@@ -9275,7 +9527,7 @@ exports[`Storyshots f/FormInput Extensible Form Input 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -9295,7 +9547,7 @@ exports[`Storyshots f/common/Description Base 1`] = `
 
 exports[`Storyshots f/common/Label Base 1`] = `
 <label
-  className="base label x-main1"
+  className="base label x-main2"
 >
   Sample Label
 </label>
@@ -9317,7 +9569,7 @@ exports[`Storyshots f/fields/CheckboxInput Base 1`] = `
         className="not-selected input-content uc v1 pv-v"
       >
         <label
-          className="base label x-main1"
+          className="base label x-main2"
           htmlFor="businessTypes"
         >
           <input
@@ -9342,7 +9594,7 @@ exports[`Storyshots f/fields/CheckboxInput Base 1`] = `
         className="not-selected input-content uc v1 pv-v"
       >
         <label
-          className="base label x-main1"
+          className="base label x-main2"
           htmlFor="businessTypes"
         >
           <input
@@ -9367,7 +9619,7 @@ exports[`Storyshots f/fields/CheckboxInput Base 1`] = `
         className="not-selected input-content uc v1 pv-v"
       >
         <label
-          className="base label x-main1"
+          className="base label x-main2"
           htmlFor="businessTypes"
         >
           <input
@@ -9392,7 +9644,7 @@ exports[`Storyshots f/fields/CheckboxInput Base 1`] = `
         className="not-selected input-content uc v1 pv-v"
       >
         <label
-          className="base label x-main1"
+          className="base label x-main2"
           htmlFor="businessTypes"
         >
           <input
@@ -9414,7 +9666,7 @@ exports[`Storyshots f/fields/CheckboxInput Base 1`] = `
       className="debugger"
     >
       <button
-        className="base button x-main1"
+        className="base button x-main2"
         onClick={[Function]}
         type="button"
       >
@@ -9432,7 +9684,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input x-background2 y-main1"
+    className="base choices-input x-background2 y-main2"
     id="colors"
     style={
       Object {
@@ -9504,7 +9756,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -9521,7 +9773,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input x-background2 y-main1"
+    className="base choices-input x-background2 y-main2"
     id="shapes"
     style={
       Object {
@@ -9531,7 +9783,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
     }
   >
     <p
-      className="base label x-main1"
+      className="base label x-main2"
     >
       Geometric Shapes
     </p>
@@ -9598,7 +9850,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -9615,7 +9867,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input x-background2 y-main1"
+    className="base choices-input x-background2 y-main2"
     id="shapes"
     style={
       Object {
@@ -9625,7 +9877,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
     }
   >
     <p
-      className="base label x-main1"
+      className="base label x-main2"
     >
       Geometric Shapes
     </p>
@@ -9692,7 +9944,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -9709,7 +9961,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input multiple x-background2 y-main1"
+    className="base choices-input multiple x-background2 y-main2"
     id="colors"
     style={
       Object {
@@ -9781,7 +10033,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -9798,7 +10050,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input multiple x-background2 y-main1"
+    className="base choices-input multiple x-background2 y-main2"
     id="colors"
     style={
       Object {
@@ -9960,7 +10212,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -9983,7 +10235,7 @@ exports[`Storyshots f/fields/RadioInput Base 1`] = `
       className="not-selected uc v1 pv-v"
     >
       <label
-        className="base label x-main1"
+        className="base label x-main2"
         htmlFor="companySize"
       >
         <input
@@ -10010,7 +10262,7 @@ exports[`Storyshots f/fields/RadioInput Base 1`] = `
       className="not-selected uc v1 pv-v"
     >
       <label
-        className="base label x-main1"
+        className="base label x-main2"
         htmlFor="companySize"
       >
         <input
@@ -10037,7 +10289,7 @@ exports[`Storyshots f/fields/RadioInput Base 1`] = `
       className="not-selected uc v1 pv-v"
     >
       <label
-        className="base label x-main1"
+        className="base label x-main2"
         htmlFor="companySize"
       >
         <input
@@ -10064,7 +10316,7 @@ exports[`Storyshots f/fields/RadioInput Base 1`] = `
       className="not-selected uc v1 pv-v"
     >
       <label
-        className="base label x-main1"
+        className="base label x-main2"
         htmlFor="companySize"
       >
         <input
@@ -10088,7 +10340,7 @@ exports[`Storyshots f/fields/RadioInput Base 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -10227,7 +10479,7 @@ exports[`Storyshots f/fields/RatingsInput Base 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -10541,7 +10793,7 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -10845,7 +11097,7 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -10865,7 +11117,7 @@ exports[`Storyshots f/fields/SelectInput Base 1`] = `
     className="base select-input"
   >
     <label
-      className="base label input-label x-main1"
+      className="base label input-label x-main2"
       htmlFor="workType"
     >
       Work Type
@@ -10880,16 +11132,19 @@ exports[`Storyshots f/fields/SelectInput Base 1`] = `
       value="Work"
     >
       <option
+        disabled={false}
         value="Work"
       >
         Work
       </option>
       <option
+        disabled={false}
         value="Managing"
       >
         Managing
       </option>
       <option
+        disabled={false}
         value="Training"
       >
         Training
@@ -10900,7 +11155,7 @@ exports[`Storyshots f/fields/SelectInput Base 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -10920,7 +11175,7 @@ exports[`Storyshots f/fields/SelectInput Disabled Select Input 1`] = `
     className="base select-input"
   >
     <label
-      className="base label input-label x-main1"
+      className="base label input-label x-main2"
       htmlFor="workType"
     >
       Work Type
@@ -10935,26 +11190,31 @@ exports[`Storyshots f/fields/SelectInput Disabled Select Input 1`] = `
       value="Work"
     >
       <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
@@ -10965,7 +11225,7 @@ exports[`Storyshots f/fields/SelectInput Disabled Select Input 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -10985,7 +11245,7 @@ exports[`Storyshots f/fields/SelectInput Objects 1`] = `
     className="base select-input"
   >
     <label
-      className="base label input-label x-main1"
+      className="base label input-label x-main2"
       htmlFor="workType"
     >
       Work Type
@@ -11000,11 +11260,13 @@ exports[`Storyshots f/fields/SelectInput Objects 1`] = `
       value="Work"
     >
       <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
@@ -11015,7 +11277,65 @@ exports[`Storyshots f/fields/SelectInput Objects 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/SelectInput Required Select 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base select-input"
+  >
+    <label
+      className="base label input-label x-main2"
+      htmlFor="activity"
+    >
+      Activity Type
+    </label>
+    <select
+      className="input v25 pv-v"
+      disabled={false}
+      id="activity"
+      name="activity"
+      onBlur={[Function]}
+      onChange={[Function]}
+      value=""
+    >
+      <option
+        disabled={true}
+        value=""
+      >
+        Select activity type
+      </option>
+      <option
+        disabled={false}
+        value="review"
+      >
+        Review
+      </option>
+      <option
+        disabled={false}
+        value="Approve"
+      >
+        Approve
+      </option>
+    </select>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -11035,7 +11355,7 @@ exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
     className="base select-input"
   >
     <label
-      className="base label input-label x-main1"
+      className="base label input-label x-main2"
       htmlFor="workType"
     >
       Work Type
@@ -11050,26 +11370,31 @@ exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
       value="Work"
     >
       <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
@@ -11080,7 +11405,7 @@ exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -11105,7 +11430,7 @@ exports[`Storyshots f/fields/TaskRecommendationInput Base 1`] = `
     }
   >
     <div
-      className="base task-recommendation-input x-main1"
+      className="base task-recommendation-input x-main2"
     >
       <div
         className="task-content b-on-x"
@@ -11114,7 +11439,7 @@ exports[`Storyshots f/fields/TaskRecommendationInput Base 1`] = `
           className="v1 p-v task"
         >
           <label
-            className="base label uc mb-v  x-main1"
+            className="base label uc mb-v  x-main2"
             htmlFor="taskRecommendations"
           >
             Find potential business customers
@@ -11158,7 +11483,7 @@ exports[`Storyshots f/fields/TextInput Base 1`] = `
       className="base text-input"
     >
       <label
-        className="base label input-label v50 mb-v x-main1"
+        className="base label input-label v50 mb-v x-main2"
         htmlFor="firstName"
       >
         What's your first name ?
@@ -11178,7 +11503,7 @@ exports[`Storyshots f/fields/TextInput Base 1`] = `
       className="debugger"
     >
       <button
-        className="base button x-main1"
+        className="base button x-main2"
         onClick={[Function]}
         type="button"
       >
@@ -11202,7 +11527,7 @@ exports[`Storyshots f/fields/TextInput Date Time 1`] = `
       className="base text-input"
     >
       <label
-        className="base label input-label v50 mb-v x-main1"
+        className="base label input-label v50 mb-v x-main2"
         htmlFor="date"
       >
         Select date
@@ -11222,7 +11547,7 @@ exports[`Storyshots f/fields/TextInput Date Time 1`] = `
       className="base text-input"
     >
       <label
-        className="base label input-label v50 mb-v x-main1"
+        className="base label input-label v50 mb-v x-main2"
         htmlFor="time"
       >
         Select time
@@ -11242,7 +11567,7 @@ exports[`Storyshots f/fields/TextInput Date Time 1`] = `
       className="debugger"
     >
       <button
-        className="base button x-main1"
+        className="base button x-main2"
         onClick={[Function]}
         type="button"
       >
@@ -11266,7 +11591,7 @@ exports[`Storyshots f/fields/TextInput Disabled Text Input 1`] = `
       className="base text-input"
     >
       <label
-        className="base label input-label v50 mb-v x-main1"
+        className="base label input-label v50 mb-v x-main2"
         htmlFor="firstName"
       >
         What's your first name ?
@@ -11286,6 +11611,40 @@ exports[`Storyshots f/fields/TextInput Disabled Text Input 1`] = `
 </form>
 `;
 
+exports[`Storyshots f/fields/TextInput Text Input With Place Holder 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="y-background1 b-dark-y u2 pb-u"
+  >
+    <div
+      className="base text-input"
+    >
+      <label
+        className="base label input-label v50 mb-v x-main2"
+        htmlFor="firstName"
+      >
+        What's your first name ?
+      </label>
+      <input
+        className="input input-border"
+        disabled={false}
+        id="firstName"
+        name="firstName"
+        onBlur={[Function]}
+        onChange={[Function]}
+        placeholder="First Name"
+        type="text"
+        value=""
+      />
+    </div>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/fields/TextareaInput Base 1`] = `
 <form
   action="#"
@@ -11296,10 +11655,10 @@ exports[`Storyshots f/fields/TextareaInput Base 1`] = `
     className="y-background1 b-dark-y"
   >
     <div
-      className="base text-area-input x-background1 y-main1"
+      className="base text-area-input x-background1 y-main2"
     >
       <label
-        className="base label c-y v50 mb-v x-main1"
+        className="base label c-y v50 mb-v x-main2"
         htmlFor="feedBack"
       >
         What can we improve on?
@@ -11319,7 +11678,7 @@ exports[`Storyshots f/fields/TextareaInput Base 1`] = `
       className="debugger"
     >
       <button
-        className="base button x-main1"
+        className="base button x-main2"
         onClick={[Function]}
         type="button"
       >
@@ -11340,10 +11699,10 @@ exports[`Storyshots f/fields/TextareaInput Disabled Textarea Input 1`] = `
     className="y-background1 b-dark-y"
   >
     <div
-      className="base text-area-input x-background1 y-main1"
+      className="base text-area-input x-background1 y-main2"
     >
       <label
-        className="base label c-y v50 mb-v x-main1"
+        className="base label c-y v50 mb-v x-main2"
         htmlFor="feedBack"
       >
         What can we improve on?
@@ -11363,7 +11722,7 @@ exports[`Storyshots f/fields/TextareaInput Disabled Textarea Input 1`] = `
       className="debugger"
     >
       <button
-        className="base button x-main1"
+        className="base button x-main2"
         onClick={[Function]}
         type="button"
       >