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

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"
+  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,
@@ -6707,16 +6603,16 @@ exports[`Storyshots b/Logo Color 1`] = `
 Array [
   <svg
     className="base svg base logo x-main1"
-    height="4em"
+    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,
@@ -6746,16 +6632,16 @@ Array [
   </svg>,
   <svg
     className="base svg base logo x-main2"
-    height="4em"
+    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,
@@ -6785,26 +6661,16 @@ Array [
   </svg>,
   <svg
     className="base svg base logo x-main3"
-    height="4em"
+    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,
@@ -6824,16 +6690,16 @@ Array [
   </svg>,
   <svg
     className="base svg base logo x-main4"
-    height="4em"
+    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,
@@ -6863,26 +6719,16 @@ Array [
   </svg>,
   <svg
     className="base svg base logo x-success"
-    height="4em"
+    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,
@@ -6902,26 +6748,16 @@ Array [
   </svg>,
   <svg
     className="base svg base logo x-warning"
-    height="4em"
+    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,
@@ -6941,16 +6777,16 @@ Array [
   </svg>,
   <svg
     className="base svg base logo x-error"
-    height="4em"
+    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,
@@ -6980,26 +6806,16 @@ Array [
   </svg>,
   <svg
     className="base svg base logo x-background1"
-    height="4em"
+    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,
@@ -7019,16 +6835,16 @@ Array [
   </svg>,
   <svg
     className="base svg base logo x-background2"
-    height="4em"
+    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,
@@ -7058,16 +6864,16 @@ Array [
   </svg>,
   <svg
     className="base svg base logo x-background3"
-    height="4em"
+    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,
@@ -7097,26 +6893,16 @@ Array [
   </svg>,
   <svg
     className="base svg base logo x-background4"
-    height="4em"
+    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,
@@ -7136,16 +6922,16 @@ Array [
   </svg>,
   <svg
     className="base svg base logo x-background5"
-    height="4em"
+    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,
@@ -7175,16 +6951,16 @@ Array [
   </svg>,
   <svg
     className="base svg base logo x-background6"
-    height="4em"
+    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,
@@ -7214,16 +6980,16 @@ Array [
   </svg>,
   <svg
     className="base svg base logo x-heading"
-    height="4em"
+    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,
@@ -7253,16 +7009,16 @@ Array [
   </svg>,
   <svg
     className="base svg base logo x-paragraph"
-    height="4em"
+    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,
@@ -7292,26 +7038,16 @@ Array [
   </svg>,
   <svg
     className="base svg base logo x-subtitle"
-    height="4em"
+    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,
@@ -7331,16 +7067,16 @@ Array [
   </svg>,
   <svg
     className="base svg base logo x-metadata"
-    height="4em"
+    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,
@@ -7370,16 +7096,16 @@ Array [
   </svg>,
   <svg
     className="base svg base logo x-link"
-    height="4em"
+    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,
@@ -7409,26 +7125,16 @@ Array [
   </svg>,
   <svg
     className="base svg base logo x-navlink"
-    height="4em"
+    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,
@@ -7448,26 +7154,16 @@ Array [
   </svg>,
   <svg
     className="base svg base logo x-twitter"
-    height="4em"
+    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,
@@ -7487,16 +7183,16 @@ Array [
   </svg>,
   <svg
     className="base svg base logo x-facebook"
-    height="4em"
+    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,
@@ -7526,26 +7212,16 @@ Array [
   </svg>,
   <svg
     className="base svg base logo x-instagram"
-    height="4em"
+    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,
@@ -7565,26 +7241,16 @@ Array [
   </svg>,
   <svg
     className="base svg base logo x-google"
-    height="4em"
+    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,
@@ -7604,16 +7270,16 @@ Array [
   </svg>,
   <svg
     className="base svg base logo x-black"
-    height="4em"
+    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,
@@ -7643,26 +7299,16 @@ Array [
   </svg>,
   <svg
     className="base svg base logo x-anchor"
-    height="4em"
+    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,
@@ -7682,26 +7328,16 @@ Array [
   </svg>,
   <svg
     className="base svg base logo x-grey"
-    height="4em"
+    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,
@@ -7721,16 +7357,16 @@ Array [
   </svg>,
   <svg
     className="base svg base logo x-pearl"
-    height="4em"
+    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,
@@ -7760,26 +7386,16 @@ Array [
   </svg>,
   <svg
     className="base svg base logo x-white"
-    height="4em"
+    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"
@@ -8575,16 +8149,16 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
       <header>
         <svg
           className="base svg base logo x-paragraph"
-          height="4em"
+          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,
@@ -8720,23 +8284,13 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
             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,
@@ -8973,13 +8527,13 @@ exports[`Storyshots c/ContentSlides Simple 1`] = `
           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,
@@ -9252,23 +8796,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 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