@pareto-engineering/design-system 4.0.0-alpha.70 → 4.0.0-alpha.73

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

@@ -1040,6 +1040,42 @@ exports[`Storyshots a/Label Compact 1`] = `
      
     label
   </span>,
+  <span
+    className="base label x-deepblue modifierCompact"
+  >
+    This is a
+     
+    deepblue
+     
+    label
+  </span>,
+  <span
+    className="base label x-light-blue modifierCompact"
+  >
+    This is a
+     
+    light-blue
+     
+    label
+  </span>,
+  <span
+    className="base label x-light-purple modifierCompact"
+  >
+    This is a
+     
+    light-purple
+     
+    label
+  </span>,
+  <span
+    className="base label x-light-seagreen modifierCompact"
+  >
+    This is a
+     
+    light-seagreen
+     
+    label
+  </span>,
   <span
     className="base label x-ui-main modifierCompact"
   >
@@ -1396,6 +1432,42 @@ exports[`Storyshots a/Label Ghost 1`] = `
      
     label
   </span>,
+  <span
+    className="base label x-deepblue modifierGhost"
+  >
+    This is a
+     
+    deepblue
+     
+    label
+  </span>,
+  <span
+    className="base label x-light-blue modifierGhost"
+  >
+    This is a
+     
+    light-blue
+     
+    label
+  </span>,
+  <span
+    className="base label x-light-purple modifierGhost"
+  >
+    This is a
+     
+    light-purple
+     
+    label
+  </span>,
+  <span
+    className="base label x-light-seagreen modifierGhost"
+  >
+    This is a
+     
+    light-seagreen
+     
+    label
+  </span>,
   <span
     className="base label x-ui-main modifierGhost"
   >
@@ -1752,6 +1824,42 @@ exports[`Storyshots a/Label Normal 1`] = `
      
     label
   </span>,
+  <span
+    className="base label x-deepblue"
+  >
+    This is a
+     
+    deepblue
+     
+    label
+  </span>,
+  <span
+    className="base label x-light-blue"
+  >
+    This is a
+     
+    light-blue
+     
+    label
+  </span>,
+  <span
+    className="base label x-light-purple"
+  >
+    This is a
+     
+    light-purple
+     
+    label
+  </span>,
+  <span
+    className="base label x-light-seagreen"
+  >
+    This is a
+     
+    light-seagreen
+     
+    label
+  </span>,
   <span
     className="base label x-ui-main"
   >
@@ -2016,6 +2124,21 @@ exports[`Storyshots a/Label Normal 1`] = `
 ]
 `;
 
+exports[`Storyshots a/LexicalPreview Base 1`] = `
+<div
+  className="base lexical-preview y-paragraph"
+>
+  <div
+    aria-autocomplete="none"
+    aria-readonly={true}
+    className="content-editable"
+    contentEditable={false}
+    role="textbox"
+    spellCheck={true}
+  />
+</div>
+`;
+
 exports[`Storyshots a/LoadingCircle Base 1`] = `
 <div
   className="x-main1 b-x"
@@ -2146,6 +2269,7 @@ exports[`Storyshots a/People Base 1`] = `
       <img
         alt="Phoebe Yao, Pareto Founder"
         className="image v50 mr-v"
+        onError={[Function]}
         src="https://lh3.googleusercontent.com/a-/AOh14GiVivY1C3gxFz1kjHfih0jzpV08rlIIfMIgBvPs"
       />
       <div
@@ -2169,6 +2293,7 @@ exports[`Storyshots a/People Base 1`] = `
       <img
         alt="Lanie Col-long, Pareto Partner"
         className="image v50 mr-v"
+        onError={[Function]}
         src="https://pareto-v1.s3.us-west-2.amazonaws.com/profile-pictures/Lanie-Col-long.png"
       />
       <div
@@ -2192,6 +2317,7 @@ exports[`Storyshots a/People Base 1`] = `
       <img
         alt="Camillie Arigo, Pareto Partner"
         className="image v50 mr-v"
+        onError={[Function]}
         src="https://pareto-v1.s3.us-west-2.amazonaws.com/profile-pictures/Camille-Arigo.jpg"
       />
       <div
@@ -2232,6 +2358,7 @@ exports[`Storyshots a/People One Person 1`] = `
       <img
         alt="Camillie Arigo, Pareto Partner"
         className="image v50 mr-v"
+        onError={[Function]}
         src="https://pareto-v1.s3.us-west-2.amazonaws.com/profile-pictures/Camille-Arigo.jpg"
       />
       <div
@@ -2272,6 +2399,7 @@ exports[`Storyshots a/People Without Role 1`] = `
       <img
         alt="Camillie Arigo, undefined"
         className="image v50 mr-v"
+        onError={[Function]}
         src="https://pareto-v1.s3.us-west-2.amazonaws.com/profile-pictures/Camille-Arigo.jpg"
       />
       <div
@@ -2732,7 +2860,7 @@ exports[`Storyshots a/ProgressBar Base 1`] = `
 
 exports[`Storyshots a/ProgressBar Color 1`] = `
 <div
-  className="base progress-bar x-main1"
+  className="base progress-bar x-main"
   data-length="50%"
   style={
     {
@@ -2745,7 +2873,7 @@ exports[`Storyshots a/ProgressBar Color 1`] = `
 
 exports[`Storyshots a/ProgressBar Height 1`] = `
 <div
-  className="base progress-bar x-main1"
+  className="base progress-bar x-main"
   data-length="50%"
   style={
     {
@@ -3205,7 +3333,7 @@ exports[`Storyshots a/Timestamp Distance Format 1`] = `
   className="base timestamp"
   onClick={[Function]}
 >
-  about 1 year ago
+  over 1 year ago
 </p>
 `;
 
@@ -3378,6 +3506,46 @@ exports[`Storyshots b/Button Arrow Left 1`] = `
      
     button
   </button>,
+  <button
+    className="base button x-deepblue arrow-left"
+    type="button"
+  >
+    This is a
+     
+    deepblue
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-blue arrow-left"
+    type="button"
+  >
+    This is a
+     
+    light-blue
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-purple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    light-purple
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-seagreen arrow-left"
+    type="button"
+  >
+    This is a
+     
+    light-seagreen
+     
+    button
+  </button>,
   <button
     className="base button x-ui-main arrow-left"
     type="button"
@@ -3813,6 +3981,62 @@ exports[`Storyshots b/Button Arrow Left Simple 1`] = `
       button
     </span>
   </button>,
+  <button
+    className="base button x-deepblue modifierSimple arrow-left"
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      deepblue
+       
+      button
+    </span>
+  </button>,
+  <button
+    className="base button x-light-blue modifierSimple arrow-left"
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      light-blue
+       
+      button
+    </span>
+  </button>,
+  <button
+    className="base button x-light-purple modifierSimple arrow-left"
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      light-purple
+       
+      button
+    </span>
+  </button>,
+  <button
+    className="base button x-light-seagreen modifierSimple arrow-left"
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      light-seagreen
+       
+      button
+    </span>
+  </button>,
   <button
     className="base button x-ui-main modifierSimple arrow-left"
     type="button"
@@ -4324,6 +4548,46 @@ exports[`Storyshots b/Button Arrow Right 1`] = `
      
     button
   </button>,
+  <button
+    className="base button x-deepblue arrow-right"
+    type="button"
+  >
+    This is a
+     
+    deepblue
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-blue arrow-right"
+    type="button"
+  >
+    This is a
+     
+    light-blue
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-purple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    light-purple
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-seagreen arrow-right"
+    type="button"
+  >
+    This is a
+     
+    light-seagreen
+     
+    button
+  </button>,
   <button
     className="base button x-ui-main arrow-right"
     type="button"
@@ -4759,6 +5023,62 @@ exports[`Storyshots b/Button Arrow Right Simple 1`] = `
       button
     </span>
   </button>,
+  <button
+    className="base button x-deepblue modifierSimple arrow-right"
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      deepblue
+       
+      button
+    </span>
+  </button>,
+  <button
+    className="base button x-light-blue modifierSimple arrow-right"
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      light-blue
+       
+      button
+    </span>
+  </button>,
+  <button
+    className="base button x-light-purple modifierSimple arrow-right"
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      light-purple
+       
+      button
+    </span>
+  </button>,
+  <button
+    className="base button x-light-seagreen modifierSimple arrow-right"
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      light-seagreen
+       
+      button
+    </span>
+  </button>,
   <button
     className="base button x-ui-main modifierSimple arrow-right"
     type="button"
@@ -5280,27 +5600,67 @@ exports[`Storyshots b/Button Compact 1`] = `
     button
   </button>,
   <button
-    className="base button x-ui-main modifierCompact"
+    className="base button x-deepblue modifierCompact"
     type="button"
   >
     This is a
      
-    ui-main
+    deepblue
      
     button
   </button>,
   <button
-    className="base button x-ui-main-2 modifierCompact"
+    className="base button x-light-blue modifierCompact"
     type="button"
   >
     This is a
      
-    ui-main-2
+    light-blue
      
     button
   </button>,
   <button
-    className="base button x-ui-lines modifierCompact"
+    className="base button x-light-purple modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    light-purple
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-seagreen modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    light-seagreen
+     
+    button
+  </button>,
+  <button
+    className="base button x-ui-main modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    ui-main
+     
+    button
+  </button>,
+  <button
+    className="base button x-ui-main-2 modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    ui-main-2
+     
+    button
+  </button>,
+  <button
+    className="base button x-ui-lines modifierCompact"
     type="button"
   >
     This is a
@@ -5684,6 +6044,50 @@ exports[`Storyshots b/Button Disabled 1`] = `
      
     button
   </button>,
+  <button
+    className="base button x-deepblue"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    deepblue
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-blue"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    light-blue
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-purple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    light-purple
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-seagreen"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    light-seagreen
+     
+    button
+  </button>,
   <button
     className="base button x-ui-main"
     disabled={true}
@@ -6118,6 +6522,50 @@ exports[`Storyshots b/Button Disabled Arrow Left 1`] = `
      
     button
   </button>,
+  <button
+    className="base button x-deepblue arrow-left"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    deepblue
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-blue arrow-left"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    light-blue
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-purple arrow-left"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    light-purple
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-seagreen arrow-left"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    light-seagreen
+     
+    button
+  </button>,
   <button
     className="base button x-ui-main arrow-left"
     disabled={true}
@@ -6552,6 +7000,50 @@ exports[`Storyshots b/Button Disabled Arrow Right 1`] = `
      
     button
   </button>,
+  <button
+    className="base button x-deepblue arrow-right"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    deepblue
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-blue arrow-right"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    light-blue
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-purple arrow-right"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    light-purple
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-seagreen arrow-right"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    light-seagreen
+     
+    button
+  </button>,
   <button
     className="base button x-ui-main arrow-right"
     disabled={true}
@@ -6995,6 +7487,50 @@ exports[`Storyshots b/Button Ghost Disabled 1`] = `
      
     button
   </button>,
+  <button
+    className="base button x-deepblue modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    deepblue
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-blue modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    light-blue
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-purple modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    light-purple
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-seagreen modifierGhost"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    light-seagreen
+     
+    button
+  </button>,
   <button
     className="base button x-ui-main modifierGhost"
     disabled={true}
@@ -7419,6 +7955,46 @@ exports[`Storyshots b/Button Ghosts 1`] = `
      
     button
   </button>,
+  <button
+    className="base button x-deepblue modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    deepblue
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-blue modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    light-blue
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-purple modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    light-purple
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-seagreen modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    light-seagreen
+     
+    button
+  </button>,
   <button
     className="base button x-ui-main modifierGhost"
     type="button"
@@ -7814,6 +8390,46 @@ exports[`Storyshots b/Button Gradient 1`] = `
      
     button
   </button>,
+  <button
+    className="base button x-deepblue modifierGradient"
+    type="button"
+  >
+    This is a
+     
+    deepblue
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-blue modifierGradient"
+    type="button"
+  >
+    This is a
+     
+    light-blue
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-purple modifierGradient"
+    type="button"
+  >
+    This is a
+     
+    light-purple
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-seagreen modifierGradient"
+    type="button"
+  >
+    This is a
+     
+    light-seagreen
+     
+    button
+  </button>,
   <button
     className="base button x-ui-main modifierGradient"
     type="button"
@@ -8520,7 +9136,7 @@ exports[`Storyshots b/Button Loading 1`] = `
     </div>
   </button>,
   <button
-    className="base button x-ui-main"
+    className="base button x-deepblue"
     type="button"
   >
     <div
@@ -8561,7 +9177,7 @@ exports[`Storyshots b/Button Loading 1`] = `
     </div>
   </button>,
   <button
-    className="base button x-ui-main-2"
+    className="base button x-light-blue"
     type="button"
   >
     <div
@@ -8602,7 +9218,7 @@ exports[`Storyshots b/Button Loading 1`] = `
     </div>
   </button>,
   <button
-    className="base button x-ui-lines"
+    className="base button x-light-purple"
     type="button"
   >
     <div
@@ -8643,7 +9259,7 @@ exports[`Storyshots b/Button Loading 1`] = `
     </div>
   </button>,
   <button
-    className="base button x-ui-icons"
+    className="base button x-light-seagreen"
     type="button"
   >
     <div
@@ -8684,7 +9300,7 @@ exports[`Storyshots b/Button Loading 1`] = `
     </div>
   </button>,
   <button
-    className="base button x-heading"
+    className="base button x-ui-main"
     type="button"
   >
     <div
@@ -8725,7 +9341,7 @@ exports[`Storyshots b/Button Loading 1`] = `
     </div>
   </button>,
   <button
-    className="base button x-paragraph"
+    className="base button x-ui-main-2"
     type="button"
   >
     <div
@@ -8766,7 +9382,7 @@ exports[`Storyshots b/Button Loading 1`] = `
     </div>
   </button>,
   <button
-    className="base button x-subtitle"
+    className="base button x-ui-lines"
     type="button"
   >
     <div
@@ -8807,7 +9423,171 @@ exports[`Storyshots b/Button Loading 1`] = `
     </div>
   </button>,
   <button
-    className="base button x-metadata"
+    className="base button x-ui-icons"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--stroke-color, var(--on-x))",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-heading"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--stroke-color, var(--on-x))",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-paragraph"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--stroke-color, var(--on-x))",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-subtitle"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--stroke-color, var(--on-x))",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-metadata"
     type="button"
   >
     <div
@@ -9813,6 +10593,46 @@ exports[`Storyshots b/Button Normal 1`] = `
      
     button
   </button>,
+  <button
+    className="base button x-deepblue"
+    type="button"
+  >
+    This is a
+     
+    deepblue
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-blue"
+    type="button"
+  >
+    This is a
+     
+    light-blue
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-purple"
+    type="button"
+  >
+    This is a
+     
+    light-purple
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-seagreen"
+    type="button"
+  >
+    This is a
+     
+    light-seagreen
+     
+    button
+  </button>,
   <button
     className="base button x-ui-main"
     type="button"
@@ -10248,6 +11068,62 @@ exports[`Storyshots b/Button Simple 1`] = `
       button
     </span>
   </button>,
+  <button
+    className="base button x-deepblue modifierSimple"
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      deepblue
+       
+      button
+    </span>
+  </button>,
+  <button
+    className="base button x-light-blue modifierSimple"
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      light-blue
+       
+      button
+    </span>
+  </button>,
+  <button
+    className="base button x-light-purple modifierSimple"
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      light-purple
+       
+      button
+    </span>
+  </button>,
+  <button
+    className="base button x-light-seagreen modifierSimple"
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      light-seagreen
+       
+      button
+    </span>
+  </button>,
   <button
     className="base button x-ui-main modifierSimple"
     type="button"
@@ -10810,7 +11686,7 @@ exports[`Storyshots b/Button Simple Disabled 1`] = `
     </span>
   </button>,
   <button
-    className="base button x-ui-main modifierSimple"
+    className="base button x-deepblue modifierSimple"
     disabled={true}
     type="button"
   >
@@ -10819,13 +11695,13 @@ exports[`Storyshots b/Button Simple Disabled 1`] = `
     >
       This is a
        
-      ui-main
+      deepblue
        
       button
     </span>
   </button>,
   <button
-    className="base button x-ui-main-2 modifierSimple"
+    className="base button x-light-blue modifierSimple"
     disabled={true}
     type="button"
   >
@@ -10834,13 +11710,13 @@ exports[`Storyshots b/Button Simple Disabled 1`] = `
     >
       This is a
        
-      ui-main-2
+      light-blue
        
       button
     </span>
   </button>,
   <button
-    className="base button x-ui-lines modifierSimple"
+    className="base button x-light-purple modifierSimple"
     disabled={true}
     type="button"
   >
@@ -10849,13 +11725,13 @@ exports[`Storyshots b/Button Simple Disabled 1`] = `
     >
       This is a
        
-      ui-lines
+      light-purple
        
       button
     </span>
   </button>,
   <button
-    className="base button x-ui-icons modifierSimple"
+    className="base button x-light-seagreen modifierSimple"
     disabled={true}
     type="button"
   >
@@ -10864,13 +11740,13 @@ exports[`Storyshots b/Button Simple Disabled 1`] = `
     >
       This is a
        
-      ui-icons
+      light-seagreen
        
       button
     </span>
   </button>,
   <button
-    className="base button x-heading modifierSimple"
+    className="base button x-ui-main modifierSimple"
     disabled={true}
     type="button"
   >
@@ -10879,7 +11755,67 @@ exports[`Storyshots b/Button Simple Disabled 1`] = `
     >
       This is a
        
-      heading
+      ui-main
+       
+      button
+    </span>
+  </button>,
+  <button
+    className="base button x-ui-main-2 modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      ui-main-2
+       
+      button
+    </span>
+  </button>,
+  <button
+    className="base button x-ui-lines modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      ui-lines
+       
+      button
+    </span>
+  </button>,
+  <button
+    className="base button x-ui-icons modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      ui-icons
+       
+      button
+    </span>
+  </button>,
+  <button
+    className="base button x-heading modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      heading
        
       button
     </span>
@@ -11351,6 +12287,46 @@ exports[`Storyshots b/Button/Group Base 1`] = `
      
     button
   </button>
+  <button
+    className="base button x-deepblue"
+    type="button"
+  >
+    This is a
+     
+    deepblue
+     
+    button
+  </button>
+  <button
+    className="base button x-light-blue"
+    type="button"
+  >
+    This is a
+     
+    light-blue
+     
+    button
+  </button>
+  <button
+    className="base button x-light-purple"
+    type="button"
+  >
+    This is a
+     
+    light-purple
+     
+    button
+  </button>
+  <button
+    className="base button x-light-seagreen"
+    type="button"
+  >
+    This is a
+     
+    light-seagreen
+     
+    button
+  </button>
   <button
     className="base button x-ui-main"
     type="button"
@@ -11872,6 +12848,42 @@ exports[`Storyshots b/Card/Group Card Group Not Snap Scroller 1`] = `
 </div>
 `;
 
+exports[`Storyshots b/ExpandableLexicalPreview Base 1`] = `
+<div
+  className="base expandable-lexical-preview y-paragraph"
+  style={
+    {
+      "--resize": "vertical",
+    }
+  }
+>
+  <p
+    className="title h2"
+  >
+    Task Instructions
+  </p>
+  <div
+    className="lexical-content"
+  >
+    <div
+      aria-autocomplete="none"
+      aria-readonly={true}
+      className="content-editable"
+      contentEditable={false}
+      role="textbox"
+      spellCheck={true}
+    />
+    <button
+      className="base button base expand-button ai-icon x-background-far modifierCompact"
+      onClick={[Function]}
+      type="button"
+    >
+      D
+    </button>
+  </div>
+</div>
+`;
+
 exports[`Storyshots b/Logo Base 1`] = `
 <svg
   className="base svg base logo x-paragraph y-transparent"
@@ -12196,6 +13208,122 @@ exports[`Storyshots b/Logo Color 1`] = `
       }
     />
   </svg>,
+  <svg
+    className="base svg base logo x-deepblue y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 156 30"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
+      style={
+        {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-light-blue y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 156 30"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
+      style={
+        {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-light-purple y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 156 30"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
+      style={
+        {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-light-seagreen y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 156 30"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo.svg#logo_squares"
+      id="logo_squares"
+      style={
+        {
+          "style": undefined,
+        }
+      }
+    />
+    <use
+      className=""
+      href="/logo.svg#logo_pareto"
+      id="logo_pareto"
+      style={
+        {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
   <svg
     className="base svg base logo x-ui-main y-transparent"
     height="2em"
@@ -13233,7 +14361,7 @@ exports[`Storyshots b/Logo Square 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-ui-main y-transparent"
+    className="base svg base logo x-deepblue y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -13252,7 +14380,7 @@ exports[`Storyshots b/Logo Square 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-ui-main-2 y-transparent"
+    className="base svg base logo x-light-blue y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -13271,7 +14399,7 @@ exports[`Storyshots b/Logo Square 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-ui-lines y-transparent"
+    className="base svg base logo x-light-purple y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -13290,7 +14418,7 @@ exports[`Storyshots b/Logo Square 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-ui-icons y-transparent"
+    className="base svg base logo x-light-seagreen y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -13309,7 +14437,7 @@ exports[`Storyshots b/Logo Square 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-heading y-transparent"
+    className="base svg base logo x-ui-main y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -13328,7 +14456,7 @@ exports[`Storyshots b/Logo Square 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-paragraph y-transparent"
+    className="base svg base logo x-ui-main-2 y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -13347,7 +14475,7 @@ exports[`Storyshots b/Logo Square 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-subtitle y-transparent"
+    className="base svg base logo x-ui-lines y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -13366,7 +14494,7 @@ exports[`Storyshots b/Logo Square 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-metadata y-transparent"
+    className="base svg base logo x-ui-icons y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -13385,7 +14513,7 @@ exports[`Storyshots b/Logo Square 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-link y-transparent"
+    className="base svg base logo x-heading y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -13404,7 +14532,7 @@ exports[`Storyshots b/Logo Square 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-disabled y-transparent"
+    className="base svg base logo x-paragraph y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -13423,7 +14551,7 @@ exports[`Storyshots b/Logo Square 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-shadow y-transparent"
+    className="base svg base logo x-subtitle y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -13442,7 +14570,7 @@ exports[`Storyshots b/Logo Square 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-transparent y-transparent"
+    className="base svg base logo x-metadata y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -13461,7 +14589,7 @@ exports[`Storyshots b/Logo Square 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-highlighted y-transparent"
+    className="base svg base logo x-link y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -13480,7 +14608,7 @@ exports[`Storyshots b/Logo Square 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-interactive y-transparent"
+    className="base svg base logo x-disabled y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -13499,7 +14627,7 @@ exports[`Storyshots b/Logo Square 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-background-far y-transparent"
+    className="base svg base logo x-shadow y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -13518,7 +14646,7 @@ exports[`Storyshots b/Logo Square 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-background-near y-transparent"
+    className="base svg base logo x-transparent y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -13537,7 +14665,83 @@ exports[`Storyshots b/Logo Square 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-background-inputs y-transparent"
+    className="base svg base logo x-highlighted y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-interactive y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-background-far y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-background-near y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-background-inputs y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -14147,602 +15351,6 @@ exports[`Storyshots b/Title With Subtitle 1`] = `
 </div>
 `;
 
-exports[`Storyshots c/ContentSlides Base 1`] = `
-<div
-  className="ui-light"
-  style={
-    {
-      "height": "100%",
-    }
-  }
->
-  <div
-    className="base content-slides y-background-far b-dark-y u1 md-u2"
-  >
-    <nav
-      className="sidebar"
-    >
-      <header>
-        <svg
-          className="base svg base logo x-paragraph y-transparent"
-          height="2em"
-          preserveAspectRatio="xMinYMin meet"
-          version="1.1"
-          viewBox="0 0 156 30"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <use
-            className=""
-            href="/logo.svg#logo_squares"
-            id="logo_squares"
-            style={
-              {
-                "style": undefined,
-              }
-            }
-          />
-          <use
-            className=""
-            href="/logo.svg#logo_pareto"
-            id="logo_pareto"
-            style={
-              {
-                "style": undefined,
-              }
-            }
-          />
-        </svg>
-      </header>
-      <div
-        className="elementContent"
-      >
-        <ul
-          className="base icon-list"
-          style={
-            {
-              "--list-icon": undefined,
-              "--list-icon-hover": undefined,
-            }
-          }
-        >
-          <li
-            className="elementItem x-heading c-x"
-            style={
-              {
-                "--list-icon": ""L"",
-                "--list-icon-hover": undefined,
-              }
-            }
-          >
-            Welcome
-          </li>
-          <li
-            className="elementItem x-subtitle c-x"
-            style={
-              {
-                "--list-icon": undefined,
-                "--list-icon-hover": undefined,
-              }
-            }
-          >
-            Choose your plan
-          </li>
-          <li
-            className="elementItem x-subtitle c-x"
-            style={
-              {
-                "--list-icon": undefined,
-                "--list-icon-hover": undefined,
-              }
-            }
-          >
-            Personal details
-          </li>
-          <li
-            className="elementItem x-subtitle c-x"
-            style={
-              {
-                "--list-icon": undefined,
-                "--list-icon-hover": undefined,
-              }
-            }
-          >
-            Payment
-          </li>
-        </ul>
-      </div>
-      <span />
-    </nav>
-    <div
-      className="horizontal-menu"
-    >
-      <div
-        className="base progress-bar modifierAttached x-main2 y-background-far b-hard-y"
-        data-length="50%"
-        style={
-          {
-            "--height": ".4em",
-            "--progress": 40,
-          }
-        }
-      />
-      <div
-        className="elementContent"
-      >
-        <div
-          className="left"
-        />
-        <div
-          className="title"
-        >
-          <span
-            className="md-h lg-h"
-          >
-            Welcome
-          </span>
-          <svg
-            className="base svg base logo x-paragraph y-transparent xs-h sm-h y-transparent"
-            height="1.1em"
-            preserveAspectRatio="xMinYMin meet"
-            version="1.1"
-            viewBox="0 0 156 30"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <use
-              className=""
-              href="/logo.svg#logo_squares"
-              id="logo_squares"
-              style={
-                {
-                  "style": undefined,
-                }
-              }
-            />
-            <use
-              className=""
-              href="/logo.svg#logo_pareto"
-              id="logo_pareto"
-              style={
-                {
-                  "style": undefined,
-                }
-              }
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-    <main>
-      <div
-        className="modifierActive slide"
-      >
-        <div
-          className="wrapper"
-        >
-          <div
-            className="content"
-          >
-            <div
-              className="base title"
-            >
-              <h1
-                className="small heading"
-              >
-                Welcome
-              </h1>
-              <p
-                className="subtitle"
-              >
-                Welcome to this site. We hope you will have an amazing experience here.
-              </p>
-            </div>
-            <div
-              className="navigator"
-            >
-              <span />
-              <button
-                className="base button x-main2 next x-main modifierCompact"
-                disabled={false}
-                onClick={[Function]}
-                type="button"
-              >
-                Next
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="slide"
-      >
-        <div
-          className="wrapper"
-        >
-          <div
-            className="content"
-          >
-            <div
-              className="base title"
-            >
-              <h1
-                className="small heading"
-              >
-                Part 2
-              </h1>
-              <p
-                className="subtitle"
-              >
-                Welcome to this site. We hope you will have an amazing experience here.
-              </p>
-            </div>
-            <p>
-              In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas, non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus, enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo.
-            </p>
-            <p>
-              Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu. enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo.
-            </p>
-            <p>
-              Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu. enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo. Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu.
-               
-            </p>
-            <p>
-              Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu. enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo. Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu.
-               
-            </p>
-            <p>
-              Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu. enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo. Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu.
-               
-            </p>
-            <div
-              className="navigator"
-            >
-              <span />
-              <button
-                className="base button x-main2 next x-main modifierCompact"
-                disabled={false}
-                onClick={[Function]}
-                type="button"
-              >
-                Next
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="slide"
-      >
-        <div
-          className="wrapper"
-        >
-          <div
-            className="content"
-          >
-            <div
-              className="base title"
-            >
-              <h1
-                className="small heading"
-              >
-                Part 3
-              </h1>
-              <p
-                className="subtitle"
-              >
-                Welcome to this site. We hope you will have an amazing experience here.
-              </p>
-            </div>
-            <div
-              className="navigator"
-            >
-              <span />
-              <button
-                className="base button x-main2 next x-main modifierCompact"
-                disabled={false}
-                onClick={[Function]}
-                type="button"
-              >
-                Next
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="slide"
-      >
-        <div
-          className="wrapper"
-        >
-          <div
-            className="content"
-          >
-            <div
-              className="base title"
-            >
-              <h1
-                className="heading"
-              >
-                Part 4
-              </h1>
-              <p
-                className="subtitle"
-              >
-                Welcome to this site. We hope you will have an amazing experience here.
-              </p>
-            </div>
-            <div
-              className="navigator"
-            >
-              <span />
-              <button
-                className="base button x-main2 next x-main modifierCompact"
-                disabled={false}
-                onClick={[Function]}
-                type="button"
-              >
-                Next
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </main>
-  </div>
-</div>
-`;
-
-exports[`Storyshots c/ContentSlides Simple 1`] = `
-<div
-  className="ui-light"
-  style={
-    {
-      "height": "100%",
-    }
-  }
->
-  <div
-    className="base content-slides y-background-far b-dark-y simple u1 md-u2"
-  >
-    <div
-      className="horizontal-menu"
-    >
-      <div
-        className="base progress-bar modifierAttached x-main2 y-background-far b-hard-y"
-        data-length="50%"
-        style={
-          {
-            "--height": ".4em",
-            "--progress": 40,
-          }
-        }
-      />
-      <div
-        className="elementContent"
-      >
-        <div
-          className="left"
-        />
-        <div
-          className="title"
-        >
-          <span
-            className="md-h lg-h"
-          >
-            Welcome
-          </span>
-          <svg
-            className="base svg base logo x-paragraph y-transparent xs-h sm-h y-transparent"
-            height="1.1em"
-            preserveAspectRatio="xMinYMin meet"
-            version="1.1"
-            viewBox="0 0 156 30"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <use
-              className=""
-              href="/logo.svg#logo_squares"
-              id="logo_squares"
-              style={
-                {
-                  "style": undefined,
-                }
-              }
-            />
-            <use
-              className=""
-              href="/logo.svg#logo_pareto"
-              id="logo_pareto"
-              style={
-                {
-                  "style": undefined,
-                }
-              }
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-    <main>
-      <div
-        className="modifierActive slide"
-      >
-        <div
-          className="wrapper"
-        >
-          <div
-            className="content"
-          >
-            <div
-              className="base title"
-            >
-              <h1
-                className="small heading"
-              >
-                Welcome
-              </h1>
-              <p
-                className="subtitle"
-              >
-                Welcome to this site. We hope you will have an amazing experience here.
-              </p>
-            </div>
-            <div
-              className="navigator"
-            >
-              <span />
-              <button
-                className="base button x-main2 next x-main modifierCompact"
-                disabled={false}
-                onClick={[Function]}
-                type="button"
-              >
-                Next
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="slide"
-      >
-        <div
-          className="wrapper"
-        >
-          <div
-            className="content"
-          >
-            <div
-              className="base title"
-            >
-              <h1
-                className="small heading"
-              >
-                Part 2
-              </h1>
-              <p
-                className="subtitle"
-              >
-                Welcome to this site. We hope you will have an amazing experience here.
-              </p>
-            </div>
-            <p>
-              In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas, non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus, enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo.
-            </p>
-            <p>
-              Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu. enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo.
-            </p>
-            <p>
-              Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu. enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo. Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu.
-               
-            </p>
-            <p>
-              Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu. enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo. Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu.
-               
-            </p>
-            <p>
-              Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu. enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus. Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget, porta placerat leo. Donec scelerisque enim risus, in pharetra purus fringilla eu. Cras placerat ac enim viverra rhoncus. Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat. Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus. Nullam vel porttitor mi, ut vestibulum arcu.
-               
-            </p>
-            <div
-              className="navigator"
-            >
-              <span />
-              <button
-                className="base button x-main2 next x-main modifierCompact"
-                disabled={false}
-                onClick={[Function]}
-                type="button"
-              >
-                Next
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="slide"
-      >
-        <div
-          className="wrapper"
-        >
-          <div
-            className="content"
-          >
-            <div
-              className="base title"
-            >
-              <h1
-                className="small heading"
-              >
-                Part 3
-              </h1>
-              <p
-                className="subtitle"
-              >
-                Welcome to this site. We hope you will have an amazing experience here.
-              </p>
-            </div>
-            <div
-              className="navigator"
-            >
-              <span />
-              <button
-                className="base button x-main2 next x-main modifierCompact"
-                disabled={false}
-                onClick={[Function]}
-                type="button"
-              >
-                Next
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="slide"
-      >
-        <div
-          className="wrapper"
-        >
-          <div
-            className="content"
-          >
-            <div
-              className="base title"
-            >
-              <h1
-                className="heading"
-              >
-                Part 4
-              </h1>
-              <p
-                className="subtitle"
-              >
-                Welcome to this site. We hope you will have an amazing experience here.
-              </p>
-            </div>
-            <div
-              className="navigator"
-            >
-              <span />
-              <button
-                className="base button x-main2 next x-main modifierCompact"
-                disabled={false}
-                onClick={[Function]}
-                type="button"
-              >
-                Next
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </main>
-  </div>
-</div>
-`;
-
 exports[`Storyshots c/Modal Base 1`] = `
 <button
   className="base button x-anchor"
@@ -14781,7 +15389,7 @@ exports[`Storyshots c/Shortener Base 1`] = `
 exports[`Storyshots c/SocialMediaShareButton Facebook 1`] = `
 <a
   className="base social-media-share-button x-facebook"
-  href="https://www.facebook.com/sharer/sharer.php?u=http://localhost/#/welcome"
+  href="https://www.facebook.com/sharer/sharer.php?u=http://localhost/#/"
   rel="noreferrer"
   target="_blank"
 >
@@ -14796,7 +15404,7 @@ exports[`Storyshots c/SocialMediaShareButton Facebook 1`] = `
 exports[`Storyshots c/SocialMediaShareButton Twitter 1`] = `
 <a
   className="base social-media-share-button x-twitter"
-  href="https://twitter.com/intent/tweet?url=http://localhost/#/welcome"
+  href="https://twitter.com/intent/tweet?url=http://localhost/#/"
   rel="noreferrer"
   target="_blank"
 >