@pareto-engineering/design-system 2.0.0-alpha.20 → 2.0.0-alpha.24

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

@@ -8567,7 +8567,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
   }
 >
   <div
-    className="base content-slides y-background1 u1 md-u2"
+    className="base content-slides y-background1 b-dark-y u1 md-u2"
   >
     <nav
       className="sidebar"
@@ -8716,7 +8716,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
             Welcome
           </span>
           <svg
-            className="base svg base logo x-main2 xs-h sm-h"
+            className="base svg base logo x-paragraph xs-h sm-h"
             height="2em"
             preserveAspectRatio="xMinYMin meet"
             version="1.1"
@@ -8939,7 +8939,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
 
 exports[`Storyshots c/ContentSlides Simple 1`] = `
 <div
-  className="base content-slides y-background1 simple u1 md-u2"
+  className="base content-slides y-background1 b-dark-y simple u1 md-u2"
 >
   <div
     className="horizontal-menu"
@@ -8969,7 +8969,286 @@ exports[`Storyshots c/ContentSlides Simple 1`] = `
           Welcome
         </span>
         <svg
-          className="base svg base logo x-main2 xs-h sm-h"
+          className="base svg base logo x-paragraph xs-h sm-h"
+          height="2em"
+          preserveAspectRatio="xMinYMin meet"
+          version="1.1"
+          viewBox="0 0 688 250"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <use
+            className=""
+            href="/logo_parts.svg#logo__p"
+            id="logo__p"
+            style={
+              Object {
+                "style": undefined,
+              }
+            }
+          />
+          <use
+            className=""
+            href="/logo_parts.svg#logo__areto"
+            id="logo__areto"
+            style={
+              Object {
+                "style": undefined,
+              }
+            }
+          />
+          <use
+            className=""
+            href="/logo_parts.svg#logo__t"
+            id="logo__t"
+            style={
+              Object {
+                "style": undefined,
+              }
+            }
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+   
+  <main>
+    <div
+      className="modifierActive slide"
+    >
+      <div
+        className="wrapper"
+      >
+        <div
+          className="content"
+        >
+          <div
+            className="base title"
+          >
+            <h1
+              className="small heading"
+            >
+              Welcome
+            </h1>
+            <p
+              className="subtitle"
+            >
+              Welcome to this site. We hope you will have an amazing experience here.
+            </p>
+          </div>
+          <div
+            className="navigator"
+          >
+            <span />
+            <button
+              className="base button x-main2 next x-main1 modifierCompact"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="slide"
+    >
+      <div
+        className="wrapper"
+      >
+        <div
+          className="content"
+        >
+          <div
+            className="base title"
+          >
+            <h1
+              className="small heading"
+            >
+              Part 2
+            </h1>
+            <p
+              className="subtitle"
+            >
+              Welcome to this site. We hope you will have an amazing experience here.
+            </p>
+          </div>
+          <p>
+            In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas, non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus, enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo. 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"
+            >
+              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"
+        >
+          <div
+            className="base title"
+          >
+            <h1
+              className="small 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>
+  </main>
+</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",
+      }
+    }
+  >
+    <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"
+  >
+    <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"
+    >
+      <div
+        className="left"
+      />
+      <div
+        className="title"
+      >
+        <span
+          className="md-h lg-h"
+        >
+          Welcome
+        </span>
+        <svg
+          className="base svg base logo x-paragraph xs-h sm-h"
           height="2em"
           preserveAspectRatio="xMinYMin meet"
           version="1.1"
@@ -9281,7 +9560,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base text-input form-input"
+    className="base text-input form-input y-background2"
   >
     <label
       className="base label v50 mb-v x-main2"
@@ -9290,7 +9569,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
       What's your first name ?
     </label>
     <input
-      className="input input-border"
+      className="input"
       disabled={false}
       id="firstName"
       name="firstName"
@@ -9301,7 +9580,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     />
   </div>
   <div
-    className="base text-input form-input"
+    className="base text-input form-input y-background2"
   >
     <label
       className="base label v50 mb-v x-main2"
@@ -9310,7 +9589,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
       What's your last name ?
     </label>
     <input
-      className="input input-border"
+      className="input"
       disabled={false}
       id="lastName"
       name="lastName"
@@ -9320,7 +9599,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     />
   </div>
   <div
-    className="base text-area-input form-input x-background1"
+    className="base text-area-input form-input y-background2"
   >
     <label
       className="base label v50 mb-v x-main2"
@@ -9329,7 +9608,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
       Describe yourself in a few sentences
     </label>
     <textarea
-      className="textarea v50 pv-v input-border"
+      className="textarea"
       disabled={false}
       name="description"
       onBlur={[Function]}
@@ -9412,7 +9691,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     </div>
   </div>
   <div
-    className="base select-input form-input"
+    className="base select-input form-input y-background2"
   >
     <label
       className="base label input-label x-main2"
@@ -9421,7 +9700,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
       What do you want for dinner ?
     </label>
     <select
-      className="input v25 pv-v"
+      className="input"
       disabled={false}
       id="food"
       name="food"
@@ -9431,18 +9710,21 @@ exports[`Storyshots f/FormInput Base 1`] = `
     >
       <option
         disabled={false}
+        selected={true}
         value="italian"
       >
         A nice pizza
       </option>
       <option
         disabled={false}
+        selected={true}
         value="turkish"
       >
         A delicious kebab
       </option>
       <option
         disabled={false}
+        selected={true}
         value="french"
       >
         A three course delicate french meal
@@ -9470,7 +9752,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base text-input form-input"
+    className="base text-input form-input y-background2"
   >
     <label
       className="base label v50 mb-v x-main2"
@@ -9479,7 +9761,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
       What's your first name ?
     </label>
     <input
-      className="input input-border"
+      className="input"
       disabled={true}
       id="firstName"
       name="firstName"
@@ -9490,7 +9772,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     />
   </div>
   <div
-    className="base text-input form-input"
+    className="base text-input form-input y-background2"
   >
     <label
       className="base label v50 mb-v x-main2"
@@ -9499,7 +9781,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
       What's your last name ?
     </label>
     <input
-      className="input input-border"
+      className="input"
       disabled={true}
       id="lastName"
       name="lastName"
@@ -9509,7 +9791,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     />
   </div>
   <div
-    className="base text-area-input form-input x-background1"
+    className="base text-area-input form-input y-background2"
   >
     <label
       className="base label v50 mb-v x-main2"
@@ -9518,7 +9800,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
       Describe yourself in a few sentences
     </label>
     <textarea
-      className="textarea v50 pv-v input-border"
+      className="textarea"
       disabled={true}
       name="description"
       onBlur={[Function]}
@@ -9601,7 +9883,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     </div>
   </div>
   <div
-    className="base select-input form-input"
+    className="base select-input form-input y-background2"
   >
     <label
       className="base label input-label x-main2"
@@ -9610,7 +9892,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
       What do you want for dinner ?
     </label>
     <select
-      className="input v25 pv-v"
+      className="input"
       disabled={true}
       id="food"
       name="food"
@@ -9620,18 +9902,21 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     >
       <option
         disabled={false}
+        selected={true}
         value="italian"
       >
         A nice pizza
       </option>
       <option
         disabled={false}
+        selected={true}
         value="turkish"
       >
         A delicious kebab
       </option>
       <option
         disabled={false}
+        selected={true}
         value="french"
       >
         A three course delicate french meal
@@ -9659,7 +9944,7 @@ exports[`Storyshots f/FormInput Extensible Form Input 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base text-input form-input"
+    className="base text-input form-input y-background2"
   >
     <label
       className="base label v50 mb-v x-main2"
@@ -9668,7 +9953,7 @@ exports[`Storyshots f/FormInput Extensible Form Input 1`] = `
       Extended type input
     </label>
     <input
-      className="input input-border"
+      className="input"
       disabled={false}
       id="extended"
       name="extended"
@@ -9707,130 +9992,6 @@ exports[`Storyshots f/common/Label Base 1`] = `
 </label>
 `;
 
-exports[`Storyshots f/fields/CheckboxInput Base 1`] = `
-<form
-  action="#"
-  onReset={[Function]}
-  onSubmit={[Function]}
->
-  <div
-    className="y-background1 b-y"
-  >
-    <div
-      className="base checkbox-input"
-    >
-      <div
-        className="not-selected input-content uc v1 pv-v"
-      >
-        <label
-          className="base label x-main2"
-          htmlFor="businessTypes"
-        >
-          <input
-            className="input"
-            id="businessTypes"
-            name="businessTypes"
-            onBlur={[Function]}
-            onChange={[Function]}
-            type="checkbox"
-            value="Business to customer"
-          />
-          <span>
-            Business to customer
-          </span>
-        </label>
-      </div>
-    </div>
-    <div
-      className="base checkbox-input"
-    >
-      <div
-        className="not-selected input-content uc v1 pv-v"
-      >
-        <label
-          className="base label x-main2"
-          htmlFor="businessTypes"
-        >
-          <input
-            className="input"
-            id="businessTypes"
-            name="businessTypes"
-            onBlur={[Function]}
-            onChange={[Function]}
-            type="checkbox"
-            value="Business to business"
-          />
-          <span>
-            Business to business
-          </span>
-        </label>
-      </div>
-    </div>
-    <div
-      className="base checkbox-input"
-    >
-      <div
-        className="not-selected input-content uc v1 pv-v"
-      >
-        <label
-          className="base label x-main2"
-          htmlFor="businessTypes"
-        >
-          <input
-            className="input"
-            id="businessTypes"
-            name="businessTypes"
-            onBlur={[Function]}
-            onChange={[Function]}
-            type="checkbox"
-            value="E-commerce"
-          />
-          <span>
-            E-commerce
-          </span>
-        </label>
-      </div>
-    </div>
-    <div
-      className="base checkbox-input"
-    >
-      <div
-        className="not-selected input-content uc v1 pv-v"
-      >
-        <label
-          className="base label x-main2"
-          htmlFor="businessTypes"
-        >
-          <input
-            className="input"
-            id="businessTypes"
-            name="businessTypes"
-            onBlur={[Function]}
-            onChange={[Function]}
-            type="checkbox"
-            value="Marketplace"
-          />
-          <span>
-            Marketplace
-          </span>
-        </label>
-      </div>
-    </div>
-    <div
-      className="debugger"
-    >
-      <button
-        className="base button x-main2"
-        onClick={[Function]}
-        type="button"
-      >
-        Open FormDebugger
-      </button>
-    </div>
-  </div>
-</form>
-`;
-
 exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
 <form
   action="#"
@@ -10376,134 +10537,6 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/RadioInput Base 1`] = `
-<form
-  action="#"
-  onReset={[Function]}
-  onSubmit={[Function]}
->
-  <div
-    className="base radio-input"
-  >
-    <div
-      className="not-selected uc v1 pv-v"
-    >
-      <label
-        className="base label x-main2"
-        htmlFor="companySize"
-      >
-        <input
-          className="input"
-          id="companySize"
-          name="companySize"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value="1-3"
-        />
-        <span
-          className="text"
-        >
-          1-3
-        </span>
-      </label>
-    </div>
-  </div>
-  <div
-    className="base radio-input"
-  >
-    <div
-      className="not-selected uc v1 pv-v"
-    >
-      <label
-        className="base label x-main2"
-        htmlFor="companySize"
-      >
-        <input
-          className="input"
-          id="companySize"
-          name="companySize"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value="4-7"
-        />
-        <span
-          className="text"
-        >
-          4-7
-        </span>
-      </label>
-    </div>
-  </div>
-  <div
-    className="base radio-input"
-  >
-    <div
-      className="not-selected uc v1 pv-v"
-    >
-      <label
-        className="base label x-main2"
-        htmlFor="companySize"
-      >
-        <input
-          className="input"
-          id="companySize"
-          name="companySize"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value="8-10"
-        />
-        <span
-          className="text"
-        >
-          8-10
-        </span>
-      </label>
-    </div>
-  </div>
-  <div
-    className="base radio-input"
-  >
-    <div
-      className="not-selected uc v1 pv-v"
-    >
-      <label
-        className="base label x-main2"
-        htmlFor="companySize"
-      >
-        <input
-          className="input"
-          id="companySize"
-          name="companySize"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value="11-20"
-        />
-        <span
-          className="text"
-        >
-          11-20
-        </span>
-      </label>
-    </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="#"
@@ -11268,7 +11301,7 @@ exports[`Storyshots f/fields/SelectInput Base 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base select-input"
+    className="base select-input y-background2"
   >
     <label
       className="base label input-label x-main2"
@@ -11277,28 +11310,38 @@ exports[`Storyshots f/fields/SelectInput Base 1`] = `
       Work Type
     </label>
     <select
-      className="input v25 pv-v"
+      className="input"
       disabled={false}
       id="workType"
       name="workType"
       onBlur={[Function]}
       onChange={[Function]}
-      value="Work"
+      value=""
     >
+      <option
+        disabled={true}
+        selected={true}
+        value=""
+      >
+        Select an option
+      </option>
       <option
         disabled={false}
+        selected={true}
         value="Work"
       >
         Work
       </option>
       <option
         disabled={false}
+        selected={true}
         value="Managing"
       >
         Managing
       </option>
       <option
         disabled={false}
+        selected={true}
         value="Training"
       >
         Training
@@ -11326,7 +11369,7 @@ exports[`Storyshots f/fields/SelectInput Disabled Select Input 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base select-input"
+    className="base select-input y-background2"
   >
     <label
       className="base label input-label x-main2"
@@ -11335,40 +11378,52 @@ exports[`Storyshots f/fields/SelectInput Disabled Select Input 1`] = `
       Work Type
     </label>
     <select
-      className="input v25 pv-v"
+      className="input"
       disabled={true}
       id="workType"
       name="workType"
       onBlur={[Function]}
       onChange={[Function]}
-      value="Work"
+      value=""
     >
+      <option
+        disabled={true}
+        selected={true}
+        value=""
+      >
+        Select an option
+      </option>
       <option
         disabled={false}
+        selected={true}
         value="Work"
       >
         Work
       </option>
       <option
         disabled={false}
+        selected={true}
         value="Managing"
       >
         Managing
       </option>
       <option
         disabled={false}
+        selected={true}
         value="Training"
       >
         Training
       </option>
       <option
         disabled={false}
+        selected={true}
         value="20th Aug 2020 to 19th Sept, 2020"
       >
         20th Aug 2020 to 19th Sept, 2020
       </option>
       <option
         disabled={false}
+        selected={true}
         value="20th Sept 2020 to 19th Oct, 2020"
       >
         20th Sept 2020 to 19th Oct, 2020
@@ -11396,7 +11451,7 @@ exports[`Storyshots f/fields/SelectInput Objects 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base select-input"
+    className="base select-input y-background2"
   >
     <label
       className="base label input-label x-main2"
@@ -11405,22 +11460,31 @@ exports[`Storyshots f/fields/SelectInput Objects 1`] = `
       Work Type
     </label>
     <select
-      className="input v25 pv-v"
+      className="input"
       disabled={false}
       id="workType"
       name="workType"
       onBlur={[Function]}
       onChange={[Function]}
-      value="Work"
+      value=""
     >
+      <option
+        disabled={true}
+        selected={true}
+        value=""
+      >
+        Select an option
+      </option>
       <option
         disabled={false}
+        selected={true}
         value="20th Aug 2020 to 19th Sept, 2020"
       >
         20th Aug 2020 to 19th Sept, 2020
       </option>
       <option
         disabled={false}
+        selected={true}
         value="20th Sept 2020 to 19th Oct, 2020"
       >
         20th Sept 2020 to 19th Oct, 2020
@@ -11448,7 +11512,7 @@ exports[`Storyshots f/fields/SelectInput Required Select 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base select-input"
+    className="base select-input y-background2"
   >
     <label
       className="base label input-label x-main2"
@@ -11457,7 +11521,7 @@ exports[`Storyshots f/fields/SelectInput Required Select 1`] = `
       Activity Type
     </label>
     <select
-      className="input v25 pv-v"
+      className="input"
       disabled={false}
       id="activity"
       name="activity"
@@ -11467,18 +11531,21 @@ exports[`Storyshots f/fields/SelectInput Required Select 1`] = `
     >
       <option
         disabled={true}
+        selected={true}
         value=""
       >
-        Select activity type
+        Select an option
       </option>
       <option
         disabled={false}
+        selected={true}
         value="review"
       >
         Review
       </option>
       <option
         disabled={false}
+        selected={true}
         value="Approve"
       >
         Approve
@@ -11506,7 +11573,7 @@ exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base select-input"
+    className="base select-input y-background2"
   >
     <label
       className="base label input-label x-main2"
@@ -11515,40 +11582,52 @@ exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
       Work Type
     </label>
     <select
-      className="input v25 pv-v"
+      className="input"
       disabled={false}
       id="workType"
       name="workType"
       onBlur={[Function]}
       onChange={[Function]}
-      value="Work"
+      value=""
     >
+      <option
+        disabled={true}
+        selected={true}
+        value=""
+      >
+        Select an option
+      </option>
       <option
         disabled={false}
+        selected={true}
         value="Work"
       >
         Work
       </option>
       <option
         disabled={false}
+        selected={true}
         value="Managing"
       >
         Managing
       </option>
       <option
         disabled={false}
+        selected={true}
         value="Training"
       >
         Training
       </option>
       <option
         disabled={false}
+        selected={true}
         value="20th Aug 2020 to 19th Sept, 2020"
       >
         20th Aug 2020 to 19th Sept, 2020
       </option>
       <option
         disabled={false}
+        selected={true}
         value="20th Sept 2020 to 19th Oct, 2020"
       >
         20th Sept 2020 to 19th Oct, 2020
@@ -11569,61 +11648,6 @@ exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/TaskRecommendationInput Base 1`] = `
-<form
-  action="#"
-  onReset={[Function]}
-  onSubmit={[Function]}
->
-  <div
-    className="y-background1 b-y v2 p-v"
-    style={
-      Object {
-        "height": "100%",
-      }
-    }
-  >
-    <div
-      className="base task-recommendation-input x-main2"
-    >
-      <div
-        className="task-content b-on-x"
-      >
-        <div
-          className="v1 p-v task"
-        >
-          <label
-            className="base label uc mb-v  x-main2"
-            htmlFor="taskRecommendations"
-          >
-            Find potential business customers
-          </label>
-          <input
-            className="input"
-            id="taskRecommendations"
-            name="taskRecommendations"
-            onBlur={[Function]}
-            onChange={[Function]}
-            type="checkbox"
-            value="businessTypes"
-          />
-          <img
-            alt="img"
-            className="image"
-            src="/Fundraising.svg"
-          />
-          <p
-            className="uc u2 mt-u"
-          >
-            Build a list of contacts at businesses based on my criteria for potential customers
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
 exports[`Storyshots f/fields/TextInput Base 1`] = `
 <form
   action="#"
@@ -11631,10 +11655,10 @@ exports[`Storyshots f/fields/TextInput Base 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="y-background1 b-dark-y u2 pb-u"
+    className=" u2 pb-u"
   >
     <div
-      className="base text-input"
+      className="base text-input y-background2"
     >
       <label
         className="base label v50 mb-v x-main2"
@@ -11643,7 +11667,7 @@ exports[`Storyshots f/fields/TextInput Base 1`] = `
         What's your first name ?
       </label>
       <input
-        className="input input-border"
+        className="input"
         disabled={false}
         id="firstName"
         name="firstName"
@@ -11674,11 +11698,9 @@ exports[`Storyshots f/fields/TextInput Date Time 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
-  <div
-    className="y-background1 b-dark-y"
-  >
+  <div>
     <div
-      className="base text-input"
+      className="base text-input y-background2"
     >
       <label
         className="base label v50 mb-v x-main2"
@@ -11687,7 +11709,7 @@ exports[`Storyshots f/fields/TextInput Date Time 1`] = `
         Select date
       </label>
       <input
-        className="input input-border"
+        className="input"
         disabled={false}
         id="date"
         name="date"
@@ -11698,7 +11720,7 @@ exports[`Storyshots f/fields/TextInput Date Time 1`] = `
       />
     </div>
     <div
-      className="base text-input"
+      className="base text-input y-background2"
     >
       <label
         className="base label v50 mb-v x-main2"
@@ -11707,7 +11729,7 @@ exports[`Storyshots f/fields/TextInput Date Time 1`] = `
         Select time
       </label>
       <input
-        className="input input-border"
+        className="input"
         disabled={false}
         id="time"
         name="time"
@@ -11732,17 +11754,17 @@ exports[`Storyshots f/fields/TextInput Date Time 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/TextInput Disabled Text Input 1`] = `
+exports[`Storyshots f/fields/TextInput Disabled 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
   <div
-    className="y-background1 b-dark-y u2 pb-u"
+    className="u2 pb-u"
   >
     <div
-      className="base text-input"
+      className="base text-input y-background2"
     >
       <label
         className="base label v50 mb-v x-main2"
@@ -11751,7 +11773,7 @@ exports[`Storyshots f/fields/TextInput Disabled Text Input 1`] = `
         What's your first name ?
       </label>
       <input
-        className="input input-border"
+        className="input"
         disabled={true}
         id="firstName"
         name="firstName"
@@ -11765,17 +11787,17 @@ exports[`Storyshots f/fields/TextInput Disabled Text Input 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/TextInput Text Input With Place Holder 1`] = `
+exports[`Storyshots f/fields/TextInput Placeholder 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
   <div
-    className="y-background1 b-dark-y u2 pb-u"
+    className="u2 pb-u"
   >
     <div
-      className="base text-input"
+      className="base text-input y-background2"
     >
       <label
         className="base label v50 mb-v x-main2"
@@ -11784,7 +11806,7 @@ exports[`Storyshots f/fields/TextInput Text Input With Place Holder 1`] = `
         What's your first name ?
       </label>
       <input
-        className="input input-border"
+        className="input"
         disabled={false}
         id="firstName"
         name="firstName"
@@ -11795,6 +11817,17 @@ exports[`Storyshots f/fields/TextInput Text Input With Place Holder 1`] = `
         value=""
       />
     </div>
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
   </div>
 </form>
 `;
@@ -11805,11 +11838,9 @@ exports[`Storyshots f/fields/TextareaInput Base 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
-  <div
-    className="y-background1 b-dark-y"
-  >
+  <div>
     <div
-      className="base text-area-input x-background1"
+      className="base text-area-input y-background2"
     >
       <label
         className="base label v50 mb-v x-main2"
@@ -11818,7 +11849,7 @@ exports[`Storyshots f/fields/TextareaInput Base 1`] = `
         What can we improve on?
       </label>
       <textarea
-        className="textarea v50 pv-v input-border"
+        className="textarea"
         disabled={false}
         name="feedback"
         onBlur={[Function]}
@@ -11849,11 +11880,9 @@ exports[`Storyshots f/fields/TextareaInput Disabled 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
-  <div
-    className="y-background1 b-dark-y"
-  >
+  <div>
     <div
-      className="base text-area-input x-background1"
+      className="base text-area-input y-background2"
     >
       <label
         className="base label v50 mb-v x-main2"
@@ -11862,7 +11891,7 @@ exports[`Storyshots f/fields/TextareaInput Disabled 1`] = `
         What can we improve on?
       </label>
       <textarea
-        className="textarea v50 pv-v input-border"
+        className="textarea"
         disabled={true}
         name="feedback"
         onBlur={[Function]}
@@ -11893,11 +11922,9 @@ exports[`Storyshots f/fields/TextareaInput Placeholder 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
-  <div
-    className="y-background1 b-dark-y"
-  >
+  <div>
     <div
-      className="base text-area-input x-background1"
+      className="base text-area-input y-background2"
     >
       <label
         className="base label v50 mb-v x-main2"
@@ -11906,7 +11933,7 @@ exports[`Storyshots f/fields/TextareaInput Placeholder 1`] = `
         What can we improve on?
       </label>
       <textarea
-        className="textarea v50 pv-v input-border"
+        className="textarea"
         disabled={false}
         name="feedback"
         onBlur={[Function]}
@@ -11938,11 +11965,9 @@ exports[`Storyshots f/fields/TextareaInput Validation 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
-  <div
-    className="y-background1 b-dark-y"
-  >
+  <div>
     <div
-      className="base text-area-input x-background1"
+      className="base text-area-input y-background2"
     >
       <label
         className="base label v50 mb-v x-main2"
@@ -11951,7 +11976,7 @@ exports[`Storyshots f/fields/TextareaInput Validation 1`] = `
         What can we improve on?
       </label>
       <textarea
-        className="textarea v50 pv-v input-border"
+        className="textarea"
         disabled={false}
         name="feedback"
         onBlur={[Function]}