@pareto-engineering/design-system 4.0.0-alpha.69 → 4.0.0-alpha.72

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>
 `;
 
@@ -3264,6 +3392,18 @@ exports[`Storyshots a/ToggleSwitch Base 1`] = `
 </button>
 `;
 
+exports[`Storyshots a/XMLEditor Base 1`] = `
+<div
+  className="base code-editor"
+  style={
+    {
+      "--gutter-width": "3em",
+      "--height": "20em",
+    }
+  }
+/>
+`;
+
 exports[`Storyshots b/Button Arrow Left 1`] = `
 [
   <button
@@ -3366,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"
@@ -3801,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"
@@ -4312,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"
@@ -4748,7 +5024,7 @@ exports[`Storyshots b/Button Arrow Right Simple 1`] = `
     </span>
   </button>,
   <button
-    className="base button x-ui-main modifierSimple arrow-right"
+    className="base button x-deepblue modifierSimple arrow-right"
     type="button"
   >
     <span
@@ -4756,13 +5032,13 @@ exports[`Storyshots b/Button Arrow Right Simple 1`] = `
     >
       This is a
        
-      ui-main
+      deepblue
        
       button
     </span>
   </button>,
   <button
-    className="base button x-ui-main-2 modifierSimple arrow-right"
+    className="base button x-light-blue modifierSimple arrow-right"
     type="button"
   >
     <span
@@ -4770,13 +5046,13 @@ exports[`Storyshots b/Button Arrow Right Simple 1`] = `
     >
       This is a
        
-      ui-main-2
+      light-blue
        
       button
     </span>
   </button>,
   <button
-    className="base button x-ui-lines modifierSimple arrow-right"
+    className="base button x-light-purple modifierSimple arrow-right"
     type="button"
   >
     <span
@@ -4784,13 +5060,13 @@ exports[`Storyshots b/Button Arrow Right Simple 1`] = `
     >
       This is a
        
-      ui-lines
+      light-purple
        
       button
     </span>
   </button>,
   <button
-    className="base button x-ui-icons modifierSimple arrow-right"
+    className="base button x-light-seagreen modifierSimple arrow-right"
     type="button"
   >
     <span
@@ -4798,13 +5074,13 @@ exports[`Storyshots b/Button Arrow Right Simple 1`] = `
     >
       This is a
        
-      ui-icons
+      light-seagreen
        
       button
     </span>
   </button>,
   <button
-    className="base button x-heading modifierSimple arrow-right"
+    className="base button x-ui-main modifierSimple arrow-right"
     type="button"
   >
     <span
@@ -4812,13 +5088,13 @@ exports[`Storyshots b/Button Arrow Right Simple 1`] = `
     >
       This is a
        
-      heading
+      ui-main
        
       button
     </span>
   </button>,
   <button
-    className="base button x-paragraph modifierSimple arrow-right"
+    className="base button x-ui-main-2 modifierSimple arrow-right"
     type="button"
   >
     <span
@@ -4826,13 +5102,13 @@ exports[`Storyshots b/Button Arrow Right Simple 1`] = `
     >
       This is a
        
-      paragraph
+      ui-main-2
        
       button
     </span>
   </button>,
   <button
-    className="base button x-subtitle modifierSimple arrow-right"
+    className="base button x-ui-lines modifierSimple arrow-right"
     type="button"
   >
     <span
@@ -4840,13 +5116,13 @@ exports[`Storyshots b/Button Arrow Right Simple 1`] = `
     >
       This is a
        
-      subtitle
+      ui-lines
        
       button
     </span>
   </button>,
   <button
-    className="base button x-metadata modifierSimple arrow-right"
+    className="base button x-ui-icons modifierSimple arrow-right"
     type="button"
   >
     <span
@@ -4854,13 +5130,13 @@ exports[`Storyshots b/Button Arrow Right Simple 1`] = `
     >
       This is a
        
-      metadata
+      ui-icons
        
       button
     </span>
   </button>,
   <button
-    className="base button x-link modifierSimple arrow-right"
+    className="base button x-heading modifierSimple arrow-right"
     type="button"
   >
     <span
@@ -4868,13 +5144,13 @@ exports[`Storyshots b/Button Arrow Right Simple 1`] = `
     >
       This is a
        
-      link
+      heading
        
       button
     </span>
   </button>,
   <button
-    className="base button x-disabled modifierSimple arrow-right"
+    className="base button x-paragraph modifierSimple arrow-right"
     type="button"
   >
     <span
@@ -4882,13 +5158,13 @@ exports[`Storyshots b/Button Arrow Right Simple 1`] = `
     >
       This is a
        
-      disabled
+      paragraph
        
       button
     </span>
   </button>,
   <button
-    className="base button x-shadow modifierSimple arrow-right"
+    className="base button x-subtitle modifierSimple arrow-right"
     type="button"
   >
     <span
@@ -4896,13 +5172,13 @@ exports[`Storyshots b/Button Arrow Right Simple 1`] = `
     >
       This is a
        
-      shadow
+      subtitle
        
       button
     </span>
   </button>,
   <button
-    className="base button x-transparent modifierSimple arrow-right"
+    className="base button x-metadata modifierSimple arrow-right"
     type="button"
   >
     <span
@@ -4910,13 +5186,13 @@ exports[`Storyshots b/Button Arrow Right Simple 1`] = `
     >
       This is a
        
-      transparent
+      metadata
        
       button
     </span>
   </button>,
   <button
-    className="base button x-highlighted modifierSimple arrow-right"
+    className="base button x-link modifierSimple arrow-right"
     type="button"
   >
     <span
@@ -4924,13 +5200,69 @@ exports[`Storyshots b/Button Arrow Right Simple 1`] = `
     >
       This is a
        
-      highlighted
+      link
        
       button
     </span>
   </button>,
   <button
-    className="base button x-interactive modifierSimple arrow-right"
+    className="base button x-disabled modifierSimple arrow-right"
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      disabled
+       
+      button
+    </span>
+  </button>,
+  <button
+    className="base button x-shadow modifierSimple arrow-right"
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      shadow
+       
+      button
+    </span>
+  </button>,
+  <button
+    className="base button x-transparent modifierSimple arrow-right"
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      transparent
+       
+      button
+    </span>
+  </button>,
+  <button
+    className="base button x-highlighted modifierSimple arrow-right"
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      highlighted
+       
+      button
+    </span>
+  </button>,
+  <button
+    className="base button x-interactive modifierSimple arrow-right"
     type="button"
   >
     <span
@@ -5267,6 +5599,46 @@ exports[`Storyshots b/Button Compact 1`] = `
      
     button
   </button>,
+  <button
+    className="base button x-deepblue modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    deepblue
+     
+    button
+  </button>,
+  <button
+    className="base button x-light-blue modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    light-blue
+     
+    button
+  </button>,
+  <button
+    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"
@@ -5672,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}
@@ -6106,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}
@@ -6540,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}
@@ -6983,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}
@@ -7408,82 +7956,122 @@ exports[`Storyshots b/Button Ghosts 1`] = `
     button
   </button>,
   <button
-    className="base button x-ui-main modifierGhost"
+    className="base button x-deepblue modifierGhost"
     type="button"
   >
     This is a
      
-    ui-main
+    deepblue
      
     button
   </button>,
   <button
-    className="base button x-ui-main-2 modifierGhost"
+    className="base button x-light-blue modifierGhost"
     type="button"
   >
     This is a
      
-    ui-main-2
+    light-blue
      
     button
   </button>,
   <button
-    className="base button x-ui-lines modifierGhost"
+    className="base button x-light-purple modifierGhost"
     type="button"
   >
     This is a
      
-    ui-lines
+    light-purple
      
     button
   </button>,
   <button
-    className="base button x-ui-icons modifierGhost"
+    className="base button x-light-seagreen modifierGhost"
     type="button"
   >
     This is a
      
-    ui-icons
+    light-seagreen
      
     button
   </button>,
   <button
-    className="base button x-heading modifierGhost"
+    className="base button x-ui-main modifierGhost"
     type="button"
   >
     This is a
      
-    heading
+    ui-main
      
     button
   </button>,
   <button
-    className="base button x-paragraph modifierGhost"
+    className="base button x-ui-main-2 modifierGhost"
     type="button"
   >
     This is a
      
-    paragraph
+    ui-main-2
      
     button
   </button>,
   <button
-    className="base button x-subtitle modifierGhost"
+    className="base button x-ui-lines modifierGhost"
     type="button"
   >
     This is a
      
-    subtitle
+    ui-lines
      
     button
   </button>,
   <button
-    className="base button x-metadata modifierGhost"
+    className="base button x-ui-icons modifierGhost"
     type="button"
   >
     This is a
      
-    metadata
+    ui-icons
+     
+    button
+  </button>,
+  <button
+    className="base button x-heading modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    heading
+     
+    button
+  </button>,
+  <button
+    className="base button x-paragraph modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    paragraph
+     
+    button
+  </button>,
+  <button
+    className="base button x-subtitle modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    subtitle
+     
+    button
+  </button>,
+  <button
+    className="base button x-metadata modifierGhost"
+    type="button"
+  >
+    This is a
+     
+    metadata
      
     button
   </button>,
@@ -7802,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"
@@ -8507,6 +9135,170 @@ exports[`Storyshots b/Button Loading 1`] = `
       </svg>
     </div>
   </button>,
+  <button
+    className="base button x-deepblue"
+    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-light-blue"
+    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-light-purple"
+    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-light-seagreen"
+    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-ui-main"
     type="button"
@@ -9802,82 +10594,122 @@ exports[`Storyshots b/Button Normal 1`] = `
     button
   </button>,
   <button
-    className="base button x-ui-main"
+    className="base button x-deepblue"
     type="button"
   >
     This is a
      
-    ui-main
+    deepblue
      
     button
   </button>,
   <button
-    className="base button x-ui-main-2"
+    className="base button x-light-blue"
     type="button"
   >
     This is a
      
-    ui-main-2
+    light-blue
      
     button
   </button>,
   <button
-    className="base button x-ui-lines"
+    className="base button x-light-purple"
     type="button"
   >
     This is a
      
-    ui-lines
+    light-purple
      
     button
   </button>,
   <button
-    className="base button x-ui-icons"
+    className="base button x-light-seagreen"
     type="button"
   >
     This is a
      
-    ui-icons
+    light-seagreen
      
     button
   </button>,
   <button
-    className="base button x-heading"
+    className="base button x-ui-main"
     type="button"
   >
     This is a
      
-    heading
+    ui-main
      
     button
   </button>,
   <button
-    className="base button x-paragraph"
+    className="base button x-ui-main-2"
     type="button"
   >
     This is a
      
-    paragraph
+    ui-main-2
      
     button
   </button>,
   <button
-    className="base button x-subtitle"
+    className="base button x-ui-lines"
     type="button"
   >
     This is a
      
-    subtitle
+    ui-lines
      
     button
   </button>,
   <button
-    className="base button x-metadata"
+    className="base button x-ui-icons"
     type="button"
   >
     This is a
      
-    metadata
+    ui-icons
+     
+    button
+  </button>,
+  <button
+    className="base button x-heading"
+    type="button"
+  >
+    This is a
+     
+    heading
+     
+    button
+  </button>,
+  <button
+    className="base button x-paragraph"
+    type="button"
+  >
+    This is a
+     
+    paragraph
+     
+    button
+  </button>,
+  <button
+    className="base button x-subtitle"
+    type="button"
+  >
+    This is a
+     
+    subtitle
+     
+    button
+  </button>,
+  <button
+    className="base button x-metadata"
+    type="button"
+  >
+    This is a
+     
+    metadata
      
     button
   </button>,
@@ -10236,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"
@@ -10797,6 +11685,66 @@ exports[`Storyshots b/Button Simple Disabled 1`] = `
       button
     </span>
   </button>,
+  <button
+    className="base button x-deepblue modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      deepblue
+       
+      button
+    </span>
+  </button>,
+  <button
+    className="base button x-light-blue modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      light-blue
+       
+      button
+    </span>
+  </button>,
+  <button
+    className="base button x-light-purple modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      light-purple
+       
+      button
+    </span>
+  </button>,
+  <button
+    className="base button x-light-seagreen modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    <span
+      className="modifierUnderlined"
+    >
+      This is a
+       
+      light-seagreen
+       
+      button
+    </span>
+  </button>,
   <button
     className="base button x-ui-main modifierSimple"
     disabled={true}
@@ -11339,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"
@@ -11860,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"
@@ -12185,7 +13209,7 @@ exports[`Storyshots b/Logo Color 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"
@@ -12214,7 +13238,7 @@ exports[`Storyshots b/Logo Color 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"
@@ -12243,7 +13267,7 @@ exports[`Storyshots b/Logo Color 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"
@@ -12272,7 +13296,7 @@ exports[`Storyshots b/Logo Color 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"
@@ -12301,7 +13325,7 @@ exports[`Storyshots b/Logo Color 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"
@@ -12330,7 +13354,7 @@ exports[`Storyshots b/Logo Color 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"
@@ -12359,7 +13383,7 @@ exports[`Storyshots b/Logo Color 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"
@@ -12388,7 +13412,7 @@ exports[`Storyshots b/Logo Color 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"
@@ -12417,7 +13441,7 @@ exports[`Storyshots b/Logo Color 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"
@@ -12446,7 +13470,7 @@ exports[`Storyshots b/Logo Color 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"
@@ -12475,7 +13499,7 @@ exports[`Storyshots b/Logo Color 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"
@@ -12504,7 +13528,7 @@ exports[`Storyshots b/Logo Color 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"
@@ -12533,7 +13557,7 @@ exports[`Storyshots b/Logo Color 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"
@@ -12562,7 +13586,7 @@ exports[`Storyshots b/Logo Color 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"
@@ -12591,7 +13615,7 @@ exports[`Storyshots b/Logo Color 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"
@@ -12620,7 +13644,7 @@ exports[`Storyshots b/Logo Color 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"
@@ -12649,7 +13673,7 @@ exports[`Storyshots b/Logo Color 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"
@@ -12678,7 +13702,7 @@ exports[`Storyshots b/Logo Color 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-background-cards y-transparent"
+    className="base svg base logo x-interactive y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -12707,7 +13731,7 @@ exports[`Storyshots b/Logo Color 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-background-mesh y-transparent"
+    className="base svg base logo x-background-far y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -12736,7 +13760,7 @@ exports[`Storyshots b/Logo Color 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-outline-inputs y-transparent"
+    className="base svg base logo x-background-near y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -12765,7 +13789,7 @@ exports[`Storyshots b/Logo Color 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-twitter y-transparent"
+    className="base svg base logo x-background-inputs y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -12794,7 +13818,7 @@ exports[`Storyshots b/Logo Color 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-facebook y-transparent"
+    className="base svg base logo x-background-cards y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -12823,7 +13847,7 @@ exports[`Storyshots b/Logo Color 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-instagram y-transparent"
+    className="base svg base logo x-background-mesh y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -12852,7 +13876,7 @@ exports[`Storyshots b/Logo Color 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-google y-transparent"
+    className="base svg base logo x-outline-inputs y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -12881,7 +13905,7 @@ exports[`Storyshots b/Logo Color 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-black y-transparent"
+    className="base svg base logo x-twitter y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -12910,7 +13934,7 @@ exports[`Storyshots b/Logo Color 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-anchor y-transparent"
+    className="base svg base logo x-facebook y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -12939,7 +13963,7 @@ exports[`Storyshots b/Logo Color 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-grey y-transparent"
+    className="base svg base logo x-instagram y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -12968,7 +13992,7 @@ exports[`Storyshots b/Logo Color 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-pearl y-transparent"
+    className="base svg base logo x-google y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -12997,7 +14021,7 @@ exports[`Storyshots b/Logo Color 1`] = `
     />
   </svg>,
   <svg
-    className="base svg base logo x-white y-transparent"
+    className="base svg base logo x-black y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -13025,13 +14049,129 @@ exports[`Storyshots b/Logo Color 1`] = `
       }
     />
   </svg>,
-]
-`;
-
-exports[`Storyshots b/Logo Square 1`] = `
-[
   <svg
-    className="base svg base logo x-main y-transparent"
+    className="base svg base logo x-anchor 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-grey 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-pearl 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-white 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>,
+]
+`;
+
+exports[`Storyshots b/Logo Square 1`] = `
+[
+  <svg
+    className="base svg base logo x-main y-transparent"
     height="2em"
     preserveAspectRatio="xMinYMin meet"
     version="1.1"
@@ -13220,6 +14360,82 @@ exports[`Storyshots b/Logo Square 1`] = `
       }
     />
   </svg>,
+  <svg
+    className="base svg base logo x-deepblue 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-light-blue 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-light-purple 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-light-seagreen 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-ui-main y-transparent"
     height="2em"
@@ -14061,673 +15277,77 @@ exports[`Storyshots b/Title Sizes 1`] = `
         <h3
           className="heading"
         >
-          This is a title in h3
-        </h3>
-        <p
-          className="subtitle"
-        >
-          Here goes the subtitle
-        </p>
-      </div>
-    </div>
-  </div>,
-  <div
-    className="u2 pv-u"
-  >
-    <div
-      className="y-background-far b-hard-y"
-    >
-      <div
-        className="base title"
-      >
-        <h4
-          className="heading"
-        >
-          This is a title in h4
-        </h4>
-        <p
-          className="subtitle"
-        >
-          Here goes the subtitle
-        </p>
-      </div>
-    </div>
-  </div>,
-  <div
-    className="u2 pv-u"
-  >
-    <div
-      className="y-background-far b-hard-y"
-    >
-      <div
-        className="base title"
-      >
-        <h5
-          className="heading"
-        >
-          This is a title in h5
-        </h5>
-        <p
-          className="subtitle"
-        >
-          Here goes the subtitle
-        </p>
-      </div>
-    </div>
-  </div>,
-]
-`;
-
-exports[`Storyshots b/Title With Subtitle 1`] = `
-<div
-  className="base title"
->
-  <h1
-    className="heading"
-  >
-    Test
-  </h1>
-  <p
-    className="subtitle"
-  >
-    This will appear as the subtitle
-  </p>
-</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>
+          This is a title in h3
+        </h3>
+        <p
+          className="subtitle"
+        >
+          Here goes the subtitle
+        </p>
       </div>
+    </div>
+  </div>,
+  <div
+    className="u2 pv-u"
+  >
+    <div
+      className="y-background-far b-hard-y"
+    >
       <div
-        className="slide"
+        className="base title"
       >
-        <div
-          className="wrapper"
+        <h4
+          className="heading"
         >
-          <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>
+          This is a title in h4
+        </h4>
+        <p
+          className="subtitle"
+        >
+          Here goes the subtitle
+        </p>
       </div>
+    </div>
+  </div>,
+  <div
+    className="u2 pv-u"
+  >
+    <div
+      className="y-background-far b-hard-y"
+    >
       <div
-        className="slide"
+        className="base title"
       >
-        <div
-          className="wrapper"
+        <h5
+          className="heading"
         >
-          <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>
+          This is a title in h5
+        </h5>
+        <p
+          className="subtitle"
+        >
+          Here goes the subtitle
+        </p>
       </div>
-    </main>
-  </div>
+    </div>
+  </div>,
+]
+`;
+
+exports[`Storyshots b/Title With Subtitle 1`] = `
+<div
+  className="base title"
+>
+  <h1
+    className="heading"
+  >
+    Test
+  </h1>
+  <p
+    className="subtitle"
+  >
+    This will appear as the subtitle
+  </p>
 </div>
 `;
 
@@ -14769,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"
 >
@@ -14784,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"
 >
@@ -18869,7 +19489,7 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik S
 </form>
 `;
 
-exports[`Storyshots f/fields/QueryCombobox Multiple Select With Prompt For New Options 1`] = `
+exports[`Storyshots f/fields/QueryCombobox Multiple Select With Get Tag Color Function 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -18898,6 +19518,52 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Prompt For New O
       >
         Search for a team
       </label>
+      <div
+        className="selected-items"
+      >
+        <div
+          className="item"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          tabIndex={-1}
+        >
+          <button
+            className="base button x-red modifierCompact"
+            onClick={[Function]}
+            type="button"
+          >
+            <span>
+              Apple
+            </span>
+            <span
+              className="icon close"
+            >
+              Y
+            </span>
+          </button>
+        </div>
+        <div
+          className="item"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          tabIndex={-1}
+        >
+          <button
+            className="base button x-green modifierCompact"
+            onClick={[Function]}
+            type="button"
+          >
+            <span>
+              Pear
+            </span>
+            <span
+              className="icon close"
+            >
+              Y
+            </span>
+          </button>
+        </div>
+      </div>
       <div
         className="input-container"
       >
@@ -18952,7 +19618,7 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Prompt For New O
 </form>
 `;
 
-exports[`Storyshots f/fields/QueryCombobox Optional 1`] = `
+exports[`Storyshots f/fields/QueryCombobox Multiple Select With Prompt For New Options 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -18971,16 +19637,15 @@ exports[`Storyshots f/fields/QueryCombobox Optional 1`] = `
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="downshift-5-menu"
-      className="base combobox y-interactive"
+      className="base multiple-combobox"
       role="combobox"
     >
       <label
-        className="base form-label x-paragraph"
-        htmlFor="team"
+        className="base form-label base multiple-combobox x-paragraph"
+        htmlFor="teams"
         id="downshift-5-label"
       >
         Search for a team
-         (Optional)
       </label>
       <div
         className="input-container"
@@ -18995,6 +19660,7 @@ exports[`Storyshots f/fields/QueryCombobox Optional 1`] = `
           id="downshift-5-input"
           onBlur={[Function]}
           onChange={[Function]}
+          onClick={[Function]}
           onKeyDown={[Function]}
           value=""
         />
@@ -19028,14 +19694,14 @@ exports[`Storyshots f/fields/QueryCombobox Optional 1`] = `
         onClick={[Function]}
         type="button"
       >
-        Replace formik value
+        Add formik values
       </button>
     </div>
   </div>
 </form>
 `;
 
-exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
+exports[`Storyshots f/fields/QueryCombobox Optional 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -19063,6 +19729,7 @@ exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
         id="downshift-6-label"
       >
         Search for a team
+         (Optional)
       </label>
       <div
         className="input-container"
@@ -19117,7 +19784,7 @@ exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik State 1`] = `
+exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -19160,6 +19827,88 @@ exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik Sta
           onBlur={[Function]}
           onChange={[Function]}
           onKeyDown={[Function]}
+          value=""
+        />
+      </div>
+      <div
+        className="base popover x-background-near bottom left"
+      >
+        <ul
+          aria-labelledby="downshift-7-label"
+          className="base menu y-interactive"
+          id="downshift-7-menu"
+          onMouseLeave={[Function]}
+          role="listbox"
+        />
+      </div>
+    </div>
+    <div>
+      <div
+        className="debugger"
+      >
+        <button
+          className="base button x-main2"
+          onClick={[Function]}
+          type="button"
+        >
+          Open FormDebugger
+        </button>
+      </div>
+      <button
+        className="base button x-main"
+        onClick={[Function]}
+        type="button"
+      >
+        Replace formik value
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik State 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    style={
+      {
+        "display": "flex",
+        "flexDirection": "column",
+        "gap": "1rem",
+      }
+    }
+  >
+    <div
+      aria-expanded={false}
+      aria-haspopup="listbox"
+      aria-owns="downshift-8-menu"
+      className="base combobox y-interactive"
+      role="combobox"
+    >
+      <label
+        className="base form-label x-paragraph"
+        htmlFor="team"
+        id="downshift-8-label"
+      >
+        Search for a team
+      </label>
+      <div
+        className="input-container"
+      >
+        <input
+          aria-autocomplete="list"
+          aria-controls="downshift-8-menu"
+          aria-labelledby="downshift-8-label"
+          autoComplete="off"
+          className="input"
+          disabled={false}
+          id="downshift-8-input"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onKeyDown={[Function]}
           value="Apple"
         />
         <button
@@ -19182,9 +19931,9 @@ exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik Sta
         className="base popover x-background-near bottom left"
       >
         <ul
-          aria-labelledby="downshift-7-label"
+          aria-labelledby="downshift-8-label"
           className="base menu y-interactive"
-          id="downshift-7-menu"
+          id="downshift-8-menu"
           onMouseLeave={[Function]}
           role="listbox"
         />
@@ -19232,14 +19981,14 @@ exports[`Storyshots f/fields/QueryCombobox With Placeholder 1`] = `
     <div
       aria-expanded={false}
       aria-haspopup="listbox"
-      aria-owns="downshift-8-menu"
+      aria-owns="downshift-9-menu"
       className="base combobox y-interactive"
       role="combobox"
     >
       <label
         className="base form-label x-paragraph"
         htmlFor="team"
-        id="downshift-8-label"
+        id="downshift-9-label"
       >
         Search for a team
       </label>
@@ -19248,12 +19997,12 @@ exports[`Storyshots f/fields/QueryCombobox With Placeholder 1`] = `
       >
         <input
           aria-autocomplete="list"
-          aria-controls="downshift-8-menu"
-          aria-labelledby="downshift-8-label"
+          aria-controls="downshift-9-menu"
+          aria-labelledby="downshift-9-label"
           autoComplete="off"
           className="input"
           disabled={false}
-          id="downshift-8-input"
+          id="downshift-9-input"
           onBlur={[Function]}
           onChange={[Function]}
           onKeyDown={[Function]}
@@ -19265,9 +20014,9 @@ exports[`Storyshots f/fields/QueryCombobox With Placeholder 1`] = `
         className="base popover x-background-near bottom left"
       >
         <ul
-          aria-labelledby="downshift-8-label"
+          aria-labelledby="downshift-9-label"
           className="base menu y-interactive"
-          id="downshift-8-menu"
+          id="downshift-9-menu"
           onMouseLeave={[Function]}
           role="listbox"
         />
@@ -19315,14 +20064,14 @@ exports[`Storyshots f/fields/QueryCombobox With Prompt To Create New Option 1`]
     <div
       aria-expanded={false}
       aria-haspopup="listbox"
-      aria-owns="downshift-9-menu"
+      aria-owns="downshift-10-menu"
       className="base combobox y-interactive"
       role="combobox"
     >
       <label
         className="base form-label x-paragraph"
         htmlFor="team"
-        id="downshift-9-label"
+        id="downshift-10-label"
       >
         Search for a team
       </label>
@@ -19331,12 +20080,12 @@ exports[`Storyshots f/fields/QueryCombobox With Prompt To Create New Option 1`]
       >
         <input
           aria-autocomplete="list"
-          aria-controls="downshift-9-menu"
-          aria-labelledby="downshift-9-label"
+          aria-controls="downshift-10-menu"
+          aria-labelledby="downshift-10-label"
           autoComplete="off"
           className="input"
           disabled={false}
-          id="downshift-9-input"
+          id="downshift-10-input"
           onBlur={[Function]}
           onChange={[Function]}
           onKeyDown={[Function]}
@@ -19348,9 +20097,9 @@ exports[`Storyshots f/fields/QueryCombobox With Prompt To Create New Option 1`]
         className="base popover x-background-near bottom left"
       >
         <ul
-          aria-labelledby="downshift-9-label"
+          aria-labelledby="downshift-10-label"
           className="base menu y-interactive"
-          id="downshift-9-menu"
+          id="downshift-10-menu"
           onMouseLeave={[Function]}
           role="listbox"
         />