@pareto-engineering/design-system 2.0.0-alpha.11 → 2.0.0-alpha.15

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

@@ -63,6 +63,27 @@ exports[`Storyshots a/AnimatedCounter Before And After 1`] = `
 </div>
 `;
 
+exports[`Storyshots a/BackgroundGradient Base 1`] = `
+<div
+  className="y-background4"
+  style={
+    Object {
+      "height": "700px",
+      "position": "relative",
+    }
+  }
+>
+  <div
+    className="base background-gradient"
+    style={
+      Object {
+        "--gradient-height": "50em",
+      }
+    }
+  />
+</div>
+`;
+
 exports[`Storyshots a/ContentCard Content After 1`] = `
 <div
   className="u1 p-u"
@@ -93,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"
@@ -113,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"
@@ -130,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"
@@ -207,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"
@@ -227,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"
@@ -244,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"
@@ -296,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"
@@ -316,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"
@@ -333,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"
@@ -357,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"
@@ -377,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"
@@ -389,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"
@@ -410,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>
 `;
 
@@ -1442,6 +1658,71 @@ exports[`Storyshots a/Shapes Half Ellipses 1`] = `
 </div>
 `;
 
+exports[`Storyshots a/Shapes Intersecting Circles 1`] = `
+<div
+  className="y-background5 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
+>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "30em",
+        "--vertical-align": "center",
+      }
+    }
+  >
+    <div
+      className="intersecting-circles"
+    >
+      <div
+        className="left"
+      />
+      <div
+        className="right"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Shapes Inverted Triangle 1`] = `
+<div
+  className="y-background6 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
+>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "30em",
+        "--vertical-align": "flex-end",
+      }
+    }
+  >
+    <div
+      className="inverted-triangle"
+    />
+  </div>
+</div>
+`;
+
 exports[`Storyshots a/Shapes Rectangles 1`] = `
 <div
   className="y-background5 b-light-y"
@@ -7570,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",
@@ -7623,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"
@@ -8302,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"
@@ -8359,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"
@@ -8398,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"
@@ -8437,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"
@@ -8556,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"
@@ -8611,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"
@@ -8650,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"
@@ -8689,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"
@@ -8800,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 ?
@@ -8820,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 ?
@@ -8836,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
@@ -8855,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,
@@ -8864,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>
@@ -8931,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 ?
@@ -8965,7 +9295,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -8985,7 +9315,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 ?
@@ -9005,7 +9335,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 ?
@@ -9021,10 +9351,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
@@ -9040,7 +9370,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,
@@ -9049,7 +9379,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>
@@ -9116,7 +9446,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 ?
@@ -9150,7 +9480,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"
     >
@@ -9170,7 +9500,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
@@ -9189,7 +9519,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"
     >
@@ -9209,7 +9539,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>
@@ -9231,7 +9561,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
@@ -9256,7 +9586,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
@@ -9281,7 +9611,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
@@ -9306,7 +9636,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
@@ -9328,7 +9658,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"
       >
@@ -9346,7 +9676,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 {
@@ -9418,7 +9748,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"
     >
@@ -9435,7 +9765,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 {
@@ -9445,7 +9775,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
     }
   >
     <p
-      className="base label x-main1"
+      className="base label x-main2"
     >
       Geometric Shapes
     </p>
@@ -9512,7 +9842,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"
     >
@@ -9529,7 +9859,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 {
@@ -9539,7 +9869,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
     }
   >
     <p
-      className="base label x-main1"
+      className="base label x-main2"
     >
       Geometric Shapes
     </p>
@@ -9606,7 +9936,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"
     >
@@ -9623,7 +9953,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 {
@@ -9695,7 +10025,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"
     >
@@ -9712,7 +10042,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 {
@@ -9874,7 +10204,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"
     >
@@ -9897,7 +10227,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
@@ -9924,7 +10254,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
@@ -9951,7 +10281,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
@@ -9978,7 +10308,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
@@ -10002,7 +10332,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"
     >
@@ -10141,7 +10471,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"
     >
@@ -10455,7 +10785,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"
     >
@@ -10759,7 +11089,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"
     >
@@ -10779,7 +11109,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
@@ -10814,7 +11144,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"
     >
@@ -10834,7 +11164,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
@@ -10879,7 +11209,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"
     >
@@ -10899,7 +11229,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
@@ -10929,7 +11259,7 @@ exports[`Storyshots f/fields/SelectInput Objects 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -10949,7 +11279,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
@@ -10994,7 +11324,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"
     >
@@ -11019,7 +11349,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"
@@ -11028,7 +11358,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
@@ -11072,7 +11402,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 ?
@@ -11092,7 +11422,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"
       >
@@ -11116,7 +11446,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
@@ -11136,7 +11466,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
@@ -11156,7 +11486,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"
       >
@@ -11180,7 +11510,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 ?
@@ -11210,10 +11540,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?
@@ -11233,7 +11563,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"
       >
@@ -11254,10 +11584,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?
@@ -11277,7 +11607,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"
       >