@pareto-engineering/design-system 2.0.0-alpha.13 → 2.0.0-alpha.17

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>
 `;
 
@@ -8437,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"
@@ -8494,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"
@@ -8533,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"
@@ -8572,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"
@@ -8691,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"
@@ -8746,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"
@@ -8785,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"
@@ -8824,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"
@@ -8935,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 ?
@@ -8955,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 ?
@@ -8971,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
@@ -8990,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,
@@ -8999,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>
@@ -9066,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 ?
@@ -9078,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
@@ -9100,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"
     >
@@ -9120,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 ?
@@ -9140,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 ?
@@ -9156,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
@@ -9175,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,
@@ -9184,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>
@@ -9251,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 ?
@@ -9263,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
@@ -9285,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"
     >
@@ -9305,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
@@ -9324,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"
     >
@@ -9344,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>
@@ -9366,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
@@ -9391,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
@@ -9416,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
@@ -9441,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
@@ -9463,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"
       >
@@ -9481,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 {
@@ -9553,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"
     >
@@ -9570,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 {
@@ -9580,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>
@@ -9647,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"
     >
@@ -9664,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 {
@@ -9674,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>
@@ -9741,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"
     >
@@ -9758,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 {
@@ -9830,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"
     >
@@ -9847,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 {
@@ -10009,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"
     >
@@ -10032,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
@@ -10059,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
@@ -10086,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
@@ -10113,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
@@ -10137,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"
     >
@@ -10276,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"
     >
@@ -10590,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"
     >
@@ -10894,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"
     >
@@ -10914,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
@@ -10929,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
@@ -10949,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"
     >
@@ -10969,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
@@ -10984,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
@@ -11014,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"
     >
@@ -11034,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
@@ -11049,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
@@ -11064,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"
     >
@@ -11084,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
@@ -11099,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
@@ -11129,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"
     >
@@ -11154,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"
@@ -11163,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
@@ -11207,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 ?
@@ -11227,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"
       >
@@ -11251,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
@@ -11271,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
@@ -11291,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"
       >
@@ -11315,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 ?
@@ -11335,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="#"
@@ -11345,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?
@@ -11368,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"
       >
@@ -11389,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?
@@ -11412,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"
       >