@pareto-engineering/design-system 2.0.0-alpha.22 → 2.0.0-alpha.26

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

@@ -1290,7 +1290,7 @@ Array [
   >
     <use
       className=""
-      href="/sprite.svg#engine"
+      href="/sprite.svg"
       style={
         Object {
           "style": undefined,
@@ -1318,7 +1318,7 @@ Array [
   >
     <use
       className=""
-      href="/sprite.svg#engine"
+      href="/sprite.svg"
       style={
         Object {
           "style": undefined,
@@ -1345,7 +1345,7 @@ Array [
   >
     <use
       className=""
-      href="/sprite.svg#engine"
+      href="/sprite.svg"
       style={
         Object {
           "style": undefined,
@@ -1368,7 +1368,7 @@ exports[`Storyshots a/SVG Base 1`] = `
 >
   <use
     className=""
-    href="/sprite.svg#engine"
+    href="/sprite.svg"
     style={
       Object {
         "style": undefined,
@@ -1398,7 +1398,7 @@ Array [
   >
     <use
       className=""
-      href="/logo.svg#logo"
+      href="/logo.svg"
       style={
         Object {
           "style": undefined,
@@ -1421,7 +1421,7 @@ exports[`Storyshots a/SVG Stroke 1`] = `
 >
   <use
     className=""
-    href="/sprite.svg#engine"
+    href="/sprite.svg"
     style={
       Object {
         "style": undefined,
@@ -6567,133 +6567,19 @@ exports[`Storyshots b/Card Group 1`] = `
 </div>
 `;
 
-exports[`Storyshots b/Logo Animated 1`] = `
-<svg
-  className="base svg base logo x-primary modifierAnimated"
-  height="4em"
-  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>
-`;
-
 exports[`Storyshots b/Logo Base 1`] = `
 <svg
-  className="base svg base logo x-primary"
-  height="4em"
-  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>
-`;
-
-exports[`Storyshots b/Logo Beta 1`] = `
-<svg
-  className="base svg base logo x-main1"
+  className="base svg base logo x-paragraph"
   height="4em"
   preserveAspectRatio="xMinYMin meet"
   version="1.1"
-  viewBox="0 0 1000 300"
+  viewBox="0 0 39 39"
   xmlns="http://www.w3.org/2000/svg"
 >
   <use
     className=""
-    href="/logo_parts_beta.svg#logo__p"
-    id="logo__p"
-    style={
-      Object {
-        "style": undefined,
-      }
-    }
-  />
-  <use
-    className=""
-    href="/logo_parts_beta.svg#logo__areto"
-    id="logo__areto"
-    style={
-      Object {
-        "style": undefined,
-      }
-    }
-  />
-  <use
-    className=""
-    href="/logo_parts_beta.svg#logo__t"
-    id="logo__t"
-    style={
-      Object {
-        "style": undefined,
-      }
-    }
-  />
-  <use
-    className=""
-    href="/logo_parts_beta.svg#logo__beta"
-    id="logo__beta"
+    href="/logo.svg#logo"
+    id="logo"
     style={
       Object {
         "style": undefined,
@@ -6710,33 +6596,13 @@ Array [
     height="4em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 39 39"
     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"
+      href="/logo.svg#logo"
+      id="logo"
       style={
         Object {
           "style": undefined,
@@ -6749,33 +6615,51 @@ Array [
     height="4em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 39 39"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo_parts.svg#logo__p"
-      id="logo__p"
+      href="/logo.svg#logo"
+      id="logo"
       style={
         Object {
           "style": undefined,
         }
       }
     />
+  </svg>,
+  <svg
+    className="base svg base logo x-main3"
+    height="4em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <use
       className=""
-      href="/logo_parts.svg#logo__areto"
-      id="logo__areto"
+      href="/logo.svg#logo"
+      id="logo"
       style={
         Object {
           "style": undefined,
         }
       }
     />
+  </svg>,
+  <svg
+    className="base svg base logo x-main4"
+    height="4em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <use
       className=""
-      href="/logo_parts.svg#logo__t"
-      id="logo__t"
+      href="/logo.svg#logo"
+      id="logo"
       style={
         Object {
           "style": undefined,
@@ -6784,37 +6668,55 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-main3"
+    className="base svg base logo x-success"
     height="4em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 39 39"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo_parts.svg#logo__p"
-      id="logo__p"
+      href="/logo.svg#logo"
+      id="logo"
       style={
         Object {
           "style": undefined,
         }
       }
     />
+  </svg>,
+  <svg
+    className="base svg base logo x-warning"
+    height="4em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <use
       className=""
-      href="/logo_parts.svg#logo__areto"
-      id="logo__areto"
+      href="/logo.svg#logo"
+      id="logo"
       style={
         Object {
           "style": undefined,
         }
       }
     />
+  </svg>,
+  <svg
+    className="base svg base logo x-error"
+    height="4em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <use
       className=""
-      href="/logo_parts.svg#logo__t"
-      id="logo__t"
+      href="/logo.svg#logo"
+      id="logo"
       style={
         Object {
           "style": undefined,
@@ -6823,37 +6725,55 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-main4"
+    className="base svg base logo x-background1"
     height="4em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 39 39"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo_parts.svg#logo__p"
-      id="logo__p"
+      href="/logo.svg#logo"
+      id="logo"
       style={
         Object {
           "style": undefined,
         }
       }
     />
+  </svg>,
+  <svg
+    className="base svg base logo x-background2"
+    height="4em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <use
       className=""
-      href="/logo_parts.svg#logo__areto"
-      id="logo__areto"
+      href="/logo.svg#logo"
+      id="logo"
       style={
         Object {
           "style": undefined,
         }
       }
     />
+  </svg>,
+  <svg
+    className="base svg base logo x-background3"
+    height="4em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <use
       className=""
-      href="/logo_parts.svg#logo__t"
-      id="logo__t"
+      href="/logo.svg#logo"
+      id="logo"
       style={
         Object {
           "style": undefined,
@@ -6862,37 +6782,55 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-success"
+    className="base svg base logo x-background4"
     height="4em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 39 39"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo_parts.svg#logo__p"
-      id="logo__p"
+      href="/logo.svg#logo"
+      id="logo"
       style={
         Object {
           "style": undefined,
         }
       }
     />
+  </svg>,
+  <svg
+    className="base svg base logo x-background5"
+    height="4em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <use
       className=""
-      href="/logo_parts.svg#logo__areto"
-      id="logo__areto"
+      href="/logo.svg#logo"
+      id="logo"
       style={
         Object {
           "style": undefined,
         }
       }
     />
+  </svg>,
+  <svg
+    className="base svg base logo x-background6"
+    height="4em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <use
       className=""
-      href="/logo_parts.svg#logo__t"
-      id="logo__t"
+      href="/logo.svg#logo"
+      id="logo"
       style={
         Object {
           "style": undefined,
@@ -6901,37 +6839,55 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-warning"
+    className="base svg base logo x-heading"
     height="4em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 39 39"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo_parts.svg#logo__p"
-      id="logo__p"
+      href="/logo.svg#logo"
+      id="logo"
       style={
         Object {
           "style": undefined,
         }
       }
     />
+  </svg>,
+  <svg
+    className="base svg base logo x-paragraph"
+    height="4em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <use
       className=""
-      href="/logo_parts.svg#logo__areto"
-      id="logo__areto"
+      href="/logo.svg#logo"
+      id="logo"
       style={
         Object {
           "style": undefined,
         }
       }
     />
+  </svg>,
+  <svg
+    className="base svg base logo x-subtitle"
+    height="4em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <use
       className=""
-      href="/logo_parts.svg#logo__t"
-      id="logo__t"
+      href="/logo.svg#logo"
+      id="logo"
       style={
         Object {
           "style": undefined,
@@ -6940,37 +6896,55 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-error"
+    className="base svg base logo x-metadata"
     height="4em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 39 39"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo_parts.svg#logo__p"
-      id="logo__p"
+      href="/logo.svg#logo"
+      id="logo"
       style={
         Object {
           "style": undefined,
         }
       }
     />
+  </svg>,
+  <svg
+    className="base svg base logo x-link"
+    height="4em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <use
       className=""
-      href="/logo_parts.svg#logo__areto"
-      id="logo__areto"
+      href="/logo.svg#logo"
+      id="logo"
       style={
         Object {
           "style": undefined,
         }
       }
     />
+  </svg>,
+  <svg
+    className="base svg base logo x-navlink"
+    height="4em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <use
       className=""
-      href="/logo_parts.svg#logo__t"
-      id="logo__t"
+      href="/logo.svg#logo"
+      id="logo"
       style={
         Object {
           "style": undefined,
@@ -6979,37 +6953,55 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-background1"
+    className="base svg base logo x-twitter"
     height="4em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 39 39"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo_parts.svg#logo__p"
-      id="logo__p"
+      href="/logo.svg#logo"
+      id="logo"
       style={
         Object {
           "style": undefined,
         }
       }
     />
+  </svg>,
+  <svg
+    className="base svg base logo x-facebook"
+    height="4em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <use
       className=""
-      href="/logo_parts.svg#logo__areto"
-      id="logo__areto"
+      href="/logo.svg#logo"
+      id="logo"
       style={
         Object {
           "style": undefined,
         }
       }
     />
+  </svg>,
+  <svg
+    className="base svg base logo x-instagram"
+    height="4em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <use
       className=""
-      href="/logo_parts.svg#logo__t"
-      id="logo__t"
+      href="/logo.svg#logo"
+      id="logo"
       style={
         Object {
           "style": undefined,
@@ -7018,583 +7010,17 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-background2"
+    className="base svg base logo x-google"
     height="4em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 39 39"
     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>,
-  <svg
-    className="base svg base logo x-background3"
-    height="4em"
-    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>,
-  <svg
-    className="base svg base logo x-background4"
-    height="4em"
-    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>,
-  <svg
-    className="base svg base logo x-background5"
-    height="4em"
-    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>,
-  <svg
-    className="base svg base logo x-background6"
-    height="4em"
-    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>,
-  <svg
-    className="base svg base logo x-heading"
-    height="4em"
-    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>,
-  <svg
-    className="base svg base logo x-paragraph"
-    height="4em"
-    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>,
-  <svg
-    className="base svg base logo x-subtitle"
-    height="4em"
-    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>,
-  <svg
-    className="base svg base logo x-metadata"
-    height="4em"
-    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>,
-  <svg
-    className="base svg base logo x-link"
-    height="4em"
-    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>,
-  <svg
-    className="base svg base logo x-navlink"
-    height="4em"
-    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>,
-  <svg
-    className="base svg base logo x-twitter"
-    height="4em"
-    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>,
-  <svg
-    className="base svg base logo x-facebook"
-    height="4em"
-    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>,
-  <svg
-    className="base svg base logo x-instagram"
-    height="4em"
-    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>,
-  <svg
-    className="base svg base logo x-google"
-    height="4em"
-    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"
+      href="/logo.svg#logo"
+      id="logo"
       style={
         Object {
           "style": undefined,
@@ -7607,33 +7033,13 @@ Array [
     height="4em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 39 39"
     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"
+      href="/logo.svg#logo"
+      id="logo"
       style={
         Object {
           "style": undefined,
@@ -7646,33 +7052,13 @@ Array [
     height="4em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 39 39"
     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"
+      href="/logo.svg#logo"
+      id="logo"
       style={
         Object {
           "style": undefined,
@@ -7685,33 +7071,13 @@ Array [
     height="4em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 39 39"
     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"
+      href="/logo.svg#logo"
+      id="logo"
       style={
         Object {
           "style": undefined,
@@ -7724,33 +7090,13 @@ Array [
     height="4em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 39 39"
     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"
+      href="/logo.svg#logo"
+      id="logo"
       style={
         Object {
           "style": undefined,
@@ -7763,33 +7109,13 @@ Array [
     height="4em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 39 39"
     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"
+      href="/logo.svg#logo"
+      id="logo"
       style={
         Object {
           "style": undefined,
@@ -7800,48 +7126,6 @@ Array [
 ]
 `;
 
-exports[`Storyshots b/Logo Loop 1`] = `
-<svg
-  className="base svg base logo x-primary loop modifierAnimated"
-  height="4em"
-  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>
-`;
-
 exports[`Storyshots b/Metrics Base 1`] = `
 <div
   className="base metrics"
@@ -8578,33 +7862,13 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
           height="4em"
           preserveAspectRatio="xMinYMin meet"
           version="1.1"
-          viewBox="0 0 688 250"
+          viewBox="0 0 39 39"
           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"
+            href="/logo.svg#logo"
+            id="logo"
             style={
               Object {
                 "style": undefined,
@@ -8720,33 +7984,13 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
             height="2em"
             preserveAspectRatio="xMinYMin meet"
             version="1.1"
-            viewBox="0 0 688 250"
+            viewBox="0 0 39 39"
             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"
+              href="/logo.svg#logo"
+              id="logo"
               style={
                 Object {
                   "style": undefined,
@@ -8962,44 +8206,24 @@ exports[`Storyshots c/ContentSlides Simple 1`] = `
       />
       <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"
-          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,
-              }
-            }
-          />
+      >
+        <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"
+          viewBox="0 0 39 39"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <use
             className=""
-            href="/logo_parts.svg#logo__t"
-            id="logo__t"
+            href="/logo.svg#logo"
+            id="logo"
             style={
               Object {
                 "style": undefined,
@@ -9252,33 +8476,13 @@ exports[`Storyshots c/ContentSlides With Background Shape 1`] = `
           height="2em"
           preserveAspectRatio="xMinYMin meet"
           version="1.1"
-          viewBox="0 0 688 250"
+          viewBox="0 0 39 39"
           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"
+            href="/logo.svg#logo"
+            id="logo"
             style={
               Object {
                 "style": undefined,
@@ -9560,7 +8764,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"
@@ -9569,7 +8773,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"
@@ -9580,7 +8784,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"
@@ -9589,7 +8793,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"
@@ -9599,7 +8803,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"
@@ -9608,7 +8812,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]}
@@ -9691,7 +8895,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"
@@ -9700,7 +8904,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"
@@ -9710,18 +8914,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
@@ -9749,7 +8956,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"
@@ -9758,7 +8965,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"
@@ -9769,7 +8976,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"
@@ -9778,7 +8985,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"
@@ -9788,7 +8995,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"
@@ -9797,7 +9004,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]}
@@ -9880,7 +9087,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"
@@ -9889,7 +9096,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"
@@ -9899,18 +9106,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
@@ -9938,7 +9148,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"
@@ -9947,7 +9157,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"
@@ -9986,130 +9196,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="#"
@@ -10655,134 +9741,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="#"
@@ -11547,7 +10505,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"
@@ -11556,28 +10514,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
@@ -11605,7 +10573,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"
@@ -11614,40 +10582,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
@@ -11675,7 +10655,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"
@@ -11684,22 +10664,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
@@ -11727,7 +10716,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"
@@ -11736,7 +10725,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"
@@ -11746,18 +10735,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
@@ -11785,7 +10777,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"
@@ -11794,40 +10786,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
@@ -11848,61 +10852,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="#"
@@ -11910,10 +10859,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"
@@ -11922,7 +10871,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"
@@ -11953,11 +10902,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"
@@ -11966,7 +10913,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"
@@ -11977,7 +10924,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"
@@ -11986,7 +10933,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"
@@ -12011,17 +10958,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"
@@ -12030,7 +10977,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"
@@ -12044,17 +10991,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"
@@ -12063,7 +11010,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"
@@ -12074,6 +11021,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>
 `;
@@ -12084,11 +11042,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"
@@ -12097,7 +11053,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]}
@@ -12128,11 +11084,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"
@@ -12141,7 +11095,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]}
@@ -12172,11 +11126,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"
@@ -12185,7 +11137,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]}
@@ -12217,11 +11169,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"
@@ -12230,7 +11180,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]}