@pareto-engineering/design-system 2.0.0-alpha.25 → 2.0.0-alpha.29

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,
@@ -2096,7 +2096,7 @@ exports[`Storyshots a/Timestamp Distance Format 1`] = `
   className="base timestamp"
   onClick={[Function]}
 >
-  in 9 months
+  in 8 months
 </p>
 `;
 
@@ -6567,61 +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"
+  className="base svg base logo x-paragraph y-transparent"
+  height="2em"
   preserveAspectRatio="xMinYMin meet"
   version="1.1"
-  viewBox="0 0 688 250"
+  viewBox="0 0 156 30"
   xmlns="http://www.w3.org/2000/svg"
 >
   <use
     className=""
-    href="/logo_parts.svg#logo__p"
-    id="logo__p"
+    href="/logo.svg#logo_squares"
+    id="logo_squares"
     style={
       Object {
         "style": undefined,
@@ -6630,70 +6588,8 @@ exports[`Storyshots b/Logo Base 1`] = `
   />
   <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"
-  height="4em"
-  preserveAspectRatio="xMinYMin meet"
-  version="1.1"
-  viewBox="0 0 1000 300"
-  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_pareto"
+    id="logo_pareto"
     style={
       Object {
         "style": undefined,
@@ -6706,17 +6602,17 @@ exports[`Storyshots b/Logo Beta 1`] = `
 exports[`Storyshots b/Logo Color 1`] = `
 Array [
   <svg
-    className="base svg base logo x-main1"
-    height="4em"
+    className="base svg base logo x-main1 y-transparent"
+    height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo_parts.svg#logo__p"
-      id="logo__p"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
       style={
         Object {
           "style": undefined,
@@ -6725,18 +6621,8 @@ Array [
     />
     <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_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -6745,17 +6631,17 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-main2"
-    height="4em"
+    className="base svg base logo x-main2 y-transparent"
+    height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo_parts.svg#logo__p"
-      id="logo__p"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
       style={
         Object {
           "style": undefined,
@@ -6764,18 +6650,8 @@ Array [
     />
     <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_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -6784,27 +6660,17 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-main3"
-    height="4em"
+    className="base svg base logo x-main3 y-transparent"
+    height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 156 30"
     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"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
       style={
         Object {
           "style": undefined,
@@ -6813,8 +6679,8 @@ Array [
     />
     <use
       className=""
-      href="/logo_parts.svg#logo__t"
-      id="logo__t"
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -6823,17 +6689,17 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-main4"
-    height="4em"
+    className="base svg base logo x-main4 y-transparent"
+    height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo_parts.svg#logo__p"
-      id="logo__p"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
       style={
         Object {
           "style": undefined,
@@ -6842,18 +6708,8 @@ Array [
     />
     <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_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -6862,27 +6718,17 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-success"
-    height="4em"
+    className="base svg base logo x-success y-transparent"
+    height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 156 30"
     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"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
       style={
         Object {
           "style": undefined,
@@ -6891,8 +6737,8 @@ Array [
     />
     <use
       className=""
-      href="/logo_parts.svg#logo__t"
-      id="logo__t"
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -6901,27 +6747,17 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-warning"
-    height="4em"
+    className="base svg base logo x-warning y-transparent"
+    height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 156 30"
     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"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
       style={
         Object {
           "style": undefined,
@@ -6930,8 +6766,8 @@ Array [
     />
     <use
       className=""
-      href="/logo_parts.svg#logo__t"
-      id="logo__t"
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -6940,17 +6776,17 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-error"
-    height="4em"
+    className="base svg base logo x-error y-transparent"
+    height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo_parts.svg#logo__p"
-      id="logo__p"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
       style={
         Object {
           "style": undefined,
@@ -6959,18 +6795,8 @@ Array [
     />
     <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_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -6979,27 +6805,17 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-background1"
-    height="4em"
+    className="base svg base logo x-background1 y-transparent"
+    height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 156 30"
     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"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
       style={
         Object {
           "style": undefined,
@@ -7008,8 +6824,8 @@ Array [
     />
     <use
       className=""
-      href="/logo_parts.svg#logo__t"
-      id="logo__t"
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -7018,17 +6834,17 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-background2"
-    height="4em"
+    className="base svg base logo x-background2 y-transparent"
+    height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo_parts.svg#logo__p"
-      id="logo__p"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
       style={
         Object {
           "style": undefined,
@@ -7037,18 +6853,8 @@ Array [
     />
     <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_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -7057,17 +6863,17 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-background3"
-    height="4em"
+    className="base svg base logo x-background3 y-transparent"
+    height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo_parts.svg#logo__p"
-      id="logo__p"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
       style={
         Object {
           "style": undefined,
@@ -7076,18 +6882,8 @@ Array [
     />
     <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_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -7096,27 +6892,17 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-background4"
-    height="4em"
+    className="base svg base logo x-background4 y-transparent"
+    height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 156 30"
     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"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
       style={
         Object {
           "style": undefined,
@@ -7125,8 +6911,8 @@ Array [
     />
     <use
       className=""
-      href="/logo_parts.svg#logo__t"
-      id="logo__t"
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -7135,17 +6921,17 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-background5"
-    height="4em"
+    className="base svg base logo x-background5 y-transparent"
+    height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo_parts.svg#logo__p"
-      id="logo__p"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
       style={
         Object {
           "style": undefined,
@@ -7154,18 +6940,8 @@ Array [
     />
     <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_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -7174,17 +6950,17 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-background6"
-    height="4em"
+    className="base svg base logo x-background6 y-transparent"
+    height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo_parts.svg#logo__p"
-      id="logo__p"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
       style={
         Object {
           "style": undefined,
@@ -7193,18 +6969,8 @@ Array [
     />
     <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_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -7213,17 +6979,17 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-heading"
-    height="4em"
+    className="base svg base logo x-heading y-transparent"
+    height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo_parts.svg#logo__p"
-      id="logo__p"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
       style={
         Object {
           "style": undefined,
@@ -7232,18 +6998,8 @@ Array [
     />
     <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_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -7252,17 +7008,17 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-paragraph"
-    height="4em"
+    className="base svg base logo x-paragraph y-transparent"
+    height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo_parts.svg#logo__p"
-      id="logo__p"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
       style={
         Object {
           "style": undefined,
@@ -7271,18 +7027,8 @@ Array [
     />
     <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_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -7291,27 +7037,17 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-subtitle"
-    height="4em"
+    className="base svg base logo x-subtitle y-transparent"
+    height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 156 30"
     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"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
       style={
         Object {
           "style": undefined,
@@ -7320,8 +7056,8 @@ Array [
     />
     <use
       className=""
-      href="/logo_parts.svg#logo__t"
-      id="logo__t"
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -7330,17 +7066,17 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-metadata"
-    height="4em"
+    className="base svg base logo x-metadata y-transparent"
+    height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo_parts.svg#logo__p"
-      id="logo__p"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
       style={
         Object {
           "style": undefined,
@@ -7349,18 +7085,8 @@ Array [
     />
     <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_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -7369,17 +7095,17 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-link"
-    height="4em"
+    className="base svg base logo x-link y-transparent"
+    height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo_parts.svg#logo__p"
-      id="logo__p"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
       style={
         Object {
           "style": undefined,
@@ -7388,18 +7114,8 @@ Array [
     />
     <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_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -7408,27 +7124,17 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-navlink"
-    height="4em"
+    className="base svg base logo x-navlink y-transparent"
+    height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 156 30"
     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"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
       style={
         Object {
           "style": undefined,
@@ -7437,8 +7143,8 @@ Array [
     />
     <use
       className=""
-      href="/logo_parts.svg#logo__t"
-      id="logo__t"
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -7447,27 +7153,17 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-twitter"
-    height="4em"
+    className="base svg base logo x-twitter y-transparent"
+    height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 156 30"
     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"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
       style={
         Object {
           "style": undefined,
@@ -7476,8 +7172,8 @@ Array [
     />
     <use
       className=""
-      href="/logo_parts.svg#logo__t"
-      id="logo__t"
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -7486,17 +7182,17 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-facebook"
-    height="4em"
+    className="base svg base logo x-facebook y-transparent"
+    height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo_parts.svg#logo__p"
-      id="logo__p"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
       style={
         Object {
           "style": undefined,
@@ -7505,18 +7201,8 @@ Array [
     />
     <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_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -7525,27 +7211,17 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-instagram"
-    height="4em"
+    className="base svg base logo x-instagram y-transparent"
+    height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 156 30"
     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"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
       style={
         Object {
           "style": undefined,
@@ -7554,8 +7230,8 @@ Array [
     />
     <use
       className=""
-      href="/logo_parts.svg#logo__t"
-      id="logo__t"
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -7564,27 +7240,17 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-google"
-    height="4em"
+    className="base svg base logo x-google y-transparent"
+    height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 156 30"
     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"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
       style={
         Object {
           "style": undefined,
@@ -7593,8 +7259,8 @@ Array [
     />
     <use
       className=""
-      href="/logo_parts.svg#logo__t"
-      id="logo__t"
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -7603,17 +7269,17 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-black"
-    height="4em"
+    className="base svg base logo x-black y-transparent"
+    height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo_parts.svg#logo__p"
-      id="logo__p"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
       style={
         Object {
           "style": undefined,
@@ -7622,18 +7288,8 @@ Array [
     />
     <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_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -7642,27 +7298,17 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-anchor"
-    height="4em"
+    className="base svg base logo x-anchor y-transparent"
+    height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 156 30"
     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"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
       style={
         Object {
           "style": undefined,
@@ -7671,8 +7317,8 @@ Array [
     />
     <use
       className=""
-      href="/logo_parts.svg#logo__t"
-      id="logo__t"
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -7681,27 +7327,17 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-grey"
-    height="4em"
+    className="base svg base logo x-grey y-transparent"
+    height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 156 30"
     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"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
       style={
         Object {
           "style": undefined,
@@ -7710,8 +7346,8 @@ Array [
     />
     <use
       className=""
-      href="/logo_parts.svg#logo__t"
-      id="logo__t"
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -7720,17 +7356,17 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-pearl"
-    height="4em"
+    className="base svg base logo x-pearl y-transparent"
+    height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo_parts.svg#logo__p"
-      id="logo__p"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
       style={
         Object {
           "style": undefined,
@@ -7739,18 +7375,8 @@ Array [
     />
     <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_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -7759,27 +7385,17 @@ Array [
     />
   </svg>,
   <svg
-    className="base svg base logo x-white"
-    height="4em"
+    className="base svg base logo x-white y-transparent"
+    height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
-    viewBox="0 0 688 250"
+    viewBox="0 0 156 30"
     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"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
       style={
         Object {
           "style": undefined,
@@ -7788,8 +7404,8 @@ Array [
     />
     <use
       className=""
-      href="/logo_parts.svg#logo__t"
-      id="logo__t"
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -7800,48 +7416,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"
@@ -8574,17 +8148,17 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
     >
       <header>
         <svg
-          className="base svg base logo x-paragraph"
-          height="4em"
+          className="base svg base logo x-paragraph y-transparent"
+          height="2em"
           preserveAspectRatio="xMinYMin meet"
           version="1.1"
-          viewBox="0 0 688 250"
+          viewBox="0 0 156 30"
           xmlns="http://www.w3.org/2000/svg"
         >
           <use
             className=""
-            href="/logo_parts.svg#logo__p"
-            id="logo__p"
+            href="/logo.svg#logo_squares"
+            id="logo_squares"
             style={
               Object {
                 "style": undefined,
@@ -8593,18 +8167,8 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
           />
           <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_pareto"
+            id="logo_pareto"
             style={
               Object {
                 "style": undefined,
@@ -8716,27 +8280,17 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
             Welcome
           </span>
           <svg
-            className="base svg base logo x-paragraph xs-h sm-h"
+            className="base svg base logo x-paragraph y-transparent xs-h sm-h"
             height="2em"
             preserveAspectRatio="xMinYMin meet"
             version="1.1"
-            viewBox="0 0 688 250"
+            viewBox="0 0 156 30"
             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"
+              href="/logo.svg#logo_squares"
+              id="logo_squares"
               style={
                 Object {
                   "style": undefined,
@@ -8745,8 +8299,8 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
             />
             <use
               className=""
-              href="/logo_parts.svg#logo__t"
-              id="logo__t"
+              href="/logo.svg#logo_pareto"
+              id="logo_pareto"
               style={
                 Object {
                   "style": undefined,
@@ -8969,17 +8523,17 @@ exports[`Storyshots c/ContentSlides Simple 1`] = `
           Welcome
         </span>
         <svg
-          className="base svg base logo x-paragraph xs-h sm-h"
+          className="base svg base logo x-paragraph y-transparent xs-h sm-h"
           height="2em"
           preserveAspectRatio="xMinYMin meet"
           version="1.1"
-          viewBox="0 0 688 250"
+          viewBox="0 0 156 30"
           xmlns="http://www.w3.org/2000/svg"
         >
           <use
             className=""
-            href="/logo_parts.svg#logo__p"
-            id="logo__p"
+            href="/logo.svg#logo_squares"
+            id="logo_squares"
             style={
               Object {
                 "style": undefined,
@@ -8988,18 +8542,8 @@ exports[`Storyshots c/ContentSlides Simple 1`] = `
           />
           <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_pareto"
+            id="logo_pareto"
             style={
               Object {
                 "style": undefined,
@@ -9248,27 +8792,17 @@ exports[`Storyshots c/ContentSlides With Background Shape 1`] = `
           Welcome
         </span>
         <svg
-          className="base svg base logo x-paragraph xs-h sm-h"
+          className="base svg base logo x-paragraph y-transparent xs-h sm-h"
           height="2em"
           preserveAspectRatio="xMinYMin meet"
           version="1.1"
-          viewBox="0 0 688 250"
+          viewBox="0 0 156 30"
           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"
+            href="/logo.svg#logo_squares"
+            id="logo_squares"
             style={
               Object {
                 "style": undefined,
@@ -9277,8 +8811,8 @@ exports[`Storyshots c/ContentSlides With Background Shape 1`] = `
           />
           <use
             className=""
-            href="/logo_parts.svg#logo__t"
-            id="logo__t"
+            href="/logo.svg#logo_pareto"
+            id="logo_pareto"
             style={
               Object {
                 "style": undefined,
@@ -9710,21 +9244,18 @@ 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
@@ -9902,21 +9433,18 @@ 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
@@ -11320,28 +10848,24 @@ exports[`Storyshots f/fields/SelectInput Base 1`] = `
     >
       <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
@@ -11388,42 +10912,36 @@ exports[`Storyshots f/fields/SelectInput Disabled Select Input 1`] = `
     >
       <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
@@ -11470,21 +10988,18 @@ exports[`Storyshots f/fields/SelectInput Objects 1`] = `
     >
       <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
@@ -11531,21 +11046,18 @@ exports[`Storyshots f/fields/SelectInput Required Select 1`] = `
     >
       <option
         disabled={true}
-        selected={true}
         value=""
       >
         Select an option
       </option>
       <option
         disabled={false}
-        selected={true}
         value="review"
       >
         Review
       </option>
       <option
         disabled={false}
-        selected={true}
         value="Approve"
       >
         Approve
@@ -11592,42 +11104,36 @@ exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
     >
       <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