@pareto-engineering/design-system 2.0.0-alpha.27 → 2.0.0-alpha.30

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

@@ -6569,17 +6569,27 @@ exports[`Storyshots b/Card Group 1`] = `
 
 exports[`Storyshots b/Logo Base 1`] = `
 <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 39 39"
+  viewBox="0 0 156 30"
   xmlns="http://www.w3.org/2000/svg"
 >
   <use
     className=""
-    href="/logo.svg#logo"
-    id="logo"
+    href="/logo.svg#logo_squares"
+    id="logo_squares"
+    style={
+      Object {
+        "style": undefined,
+      }
+    }
+  />
+  <use
+    className=""
+    href="/logo.svg#logo_pareto"
+    id="logo_pareto"
     style={
       Object {
         "style": undefined,
@@ -6592,17 +6602,27 @@ exports[`Storyshots b/Logo Base 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 39 39"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo.svg#logo"
-      id="logo"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -6611,17 +6631,27 @@ 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 39 39"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo.svg#logo"
-      id="logo"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -6630,17 +6660,27 @@ 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 39 39"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo.svg#logo"
-      id="logo"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -6649,17 +6689,27 @@ 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 39 39"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo.svg#logo"
-      id="logo"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -6668,17 +6718,27 @@ 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 39 39"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo.svg#logo"
-      id="logo"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -6687,17 +6747,27 @@ 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 39 39"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo.svg#logo"
-      id="logo"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -6706,17 +6776,27 @@ 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 39 39"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo.svg#logo"
-      id="logo"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -6725,17 +6805,27 @@ 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 39 39"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo.svg#logo"
-      id="logo"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -6744,17 +6834,27 @@ 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 39 39"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo.svg#logo"
-      id="logo"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -6763,17 +6863,27 @@ 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 39 39"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo.svg#logo"
-      id="logo"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -6782,17 +6892,27 @@ 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 39 39"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo.svg#logo"
-      id="logo"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -6801,17 +6921,27 @@ 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 39 39"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo.svg#logo"
-      id="logo"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -6820,17 +6950,27 @@ 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 39 39"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo.svg#logo"
-      id="logo"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -6839,17 +6979,27 @@ 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 39 39"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo.svg#logo"
-      id="logo"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -6858,17 +7008,27 @@ 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 39 39"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo.svg#logo"
-      id="logo"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -6877,17 +7037,27 @@ 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 39 39"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo.svg#logo"
-      id="logo"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -6896,17 +7066,27 @@ 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 39 39"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo.svg#logo"
-      id="logo"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -6915,17 +7095,27 @@ 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 39 39"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo.svg#logo"
-      id="logo"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -6934,17 +7124,27 @@ 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 39 39"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo.svg#logo"
-      id="logo"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -6953,17 +7153,27 @@ 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 39 39"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo.svg#logo"
-      id="logo"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -6972,17 +7182,27 @@ 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 39 39"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo.svg#logo"
-      id="logo"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -6991,17 +7211,27 @@ 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 39 39"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo.svg#logo"
-      id="logo"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -7010,17 +7240,27 @@ 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 39 39"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo.svg#logo"
-      id="logo"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -7029,17 +7269,27 @@ 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 39 39"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo.svg#logo"
-      id="logo"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -7048,17 +7298,27 @@ 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 39 39"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo.svg#logo"
-      id="logo"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -7067,17 +7327,27 @@ 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 39 39"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo.svg#logo"
-      id="logo"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -7086,17 +7356,27 @@ 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 39 39"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo.svg#logo"
-      id="logo"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -7105,17 +7385,27 @@ 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 39 39"
+    viewBox="0 0 156 30"
     xmlns="http://www.w3.org/2000/svg"
   >
     <use
       className=""
-      href="/logo.svg#logo"
-      id="logo"
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
       style={
         Object {
           "style": undefined,
@@ -7858,17 +8148,27 @@ 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 39 39"
+          viewBox="0 0 156 30"
           xmlns="http://www.w3.org/2000/svg"
         >
           <use
             className=""
-            href="/logo.svg#logo"
-            id="logo"
+            href="/logo.svg#logo_squares"
+            id="logo_squares"
+            style={
+              Object {
+                "style": undefined,
+              }
+            }
+          />
+          <use
+            className=""
+            href="/logo.svg#logo_pareto"
+            id="logo_pareto"
             style={
               Object {
                 "style": undefined,
@@ -7980,17 +8280,27 @@ 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 39 39"
+            viewBox="0 0 156 30"
             xmlns="http://www.w3.org/2000/svg"
           >
             <use
               className=""
-              href="/logo.svg#logo"
-              id="logo"
+              href="/logo.svg#logo_squares"
+              id="logo_squares"
+              style={
+                Object {
+                  "style": undefined,
+                }
+              }
+            />
+            <use
+              className=""
+              href="/logo.svg#logo_pareto"
+              id="logo_pareto"
               style={
                 Object {
                   "style": undefined,
@@ -8213,17 +8523,27 @@ 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 39 39"
+          viewBox="0 0 156 30"
           xmlns="http://www.w3.org/2000/svg"
         >
           <use
             className=""
-            href="/logo.svg#logo"
-            id="logo"
+            href="/logo.svg#logo_squares"
+            id="logo_squares"
+            style={
+              Object {
+                "style": undefined,
+              }
+            }
+          />
+          <use
+            className=""
+            href="/logo.svg#logo_pareto"
+            id="logo_pareto"
             style={
               Object {
                 "style": undefined,
@@ -8472,17 +8792,27 @@ 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 39 39"
+          viewBox="0 0 156 30"
           xmlns="http://www.w3.org/2000/svg"
         >
           <use
             className=""
-            href="/logo.svg#logo"
-            id="logo"
+            href="/logo.svg#logo_squares"
+            id="logo_squares"
+            style={
+              Object {
+                "style": undefined,
+              }
+            }
+          />
+          <use
+            className=""
+            href="/logo.svg#logo_pareto"
+            id="logo_pareto"
             style={
               Object {
                 "style": undefined,