FIX snapshots

addons/links/src/react/components/__snapshots__/link.test.js.snap

@@ -1,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`LinkTo render should render a link 1`] = `
-<RoutedLink
+<Link
+  cancel={true}
   href="http://localhost/?id=foo-bar"
   onClick={[Function]}
 />

examples/angular-cli/src/stories/__snapshots__/custom-pipes.stories.storyshot

@@ -13,17 +13,3 @@ exports[`Storyshots Custom|Pipes Simple 1`] = `
   </storybook-name>
 </storybook-dynamic-app-root>
 `;
-
-exports[`Storyshots Custom|Pipes With Knobs 1`] = `
-<storybook-dynamic-app-root
-  cfr={[Function CodegenComponentFactoryResolver]}
-  data={[Function Object]}
-  target={[Function ViewContainerRef_]}
->
-  <storybook-name>
-    <h1>
-      CustomPipe: foobar
-    </h1>
-  </storybook-name>
-</storybook-dynamic-app-root>
-`;

examples/angular-cli/src/stories/__snapshots__/custom-providers.stories.storyshot

@@ -16,20 +16,3 @@ exports[`Storyshots Custom|Providers Simple 1`] = `
   </storybook-simple-service-component>
 </storybook-dynamic-app-root>
 `;
-
-exports[`Storyshots Custom|Providers With knobs 1`] = `
-<storybook-dynamic-app-root
-  cfr={[Function CodegenComponentFactoryResolver]}
-  data={[Function Object]}
-  target={[Function ViewContainerRef_]}
->
-  <storybook-simple-service-component>
-    <p>
-      Dynamic knob:
-    </p>
-    <ul>
-      
-    </ul>
-  </storybook-simple-service-component>
-</storybook-dynamic-app-root>
-`;

examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot

@@ -20,24 +20,3 @@ exports[`Storyshots Custom|Style Default 1`] = `
   </ng-component>
 </storybook-dynamic-app-root>
 `;
-
-exports[`Storyshots Custom|Style With Knobs 1`] = `
-<storybook-dynamic-app-root
-  cfr={[Function CodegenComponentFactoryResolver]}
-  data={[Function Object]}
-  target={[Function ViewContainerRef_]}
->
-  <ng-component>
-    <storybook-button-component
-      _nghost-c12=""
-      ng-reflect-text="Button with custom styles"
-    >
-      <button
-        _ngcontent-c12=""
-      >
-        Button with custom styles
-      </button>
-    </storybook-button-component>
-  </ng-component>
-</storybook-dynamic-app-root>
-`;

examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot

@@ -30,34 +30,3 @@ exports[`Storyshots Custom|Dependencies inputs and inject dependencies 1`] = `
   </storybook-di-component>
 </storybook-dynamic-app-root>
 `;
-
-exports[`Storyshots Custom|Dependencies inputs and inject dependencies with knobs 1`] = `
-<storybook-dynamic-app-root
-  cfr={[Function CodegenComponentFactoryResolver]}
-  data={[Function Object]}
-  target={[Function ViewContainerRef_]}
->
-  <storybook-di-component>
-    <div>
-      <div>
-        All dependencies are defined: true
-      </div>
-      <div>
-        Title: Component dependencies
-      </div>
-      <div>
-        Injector: function Injector_(view, elDef) {
-              this.view = view;
-              this.elDef = elDef;
-          }
-      </div>
-      <div>
-        ElementRef: {"nativeElement":{}}
-      </div>
-      <div>
-        TestToken: 123
-      </div>
-    </div>
-  </storybook-di-component>
-</storybook-dynamic-app-root>
-`;

examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot

@@ -445,12 +445,7 @@ exports[`Storyshots Button with some emoji 1`] = `
   style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
   type="button"
 >
-  <span
+  😀 😎 👍 💯
-    aria-label="so cool"
-    role="img"
-  >
-    😀 😎 👍 💯
-  </span>
 </button>
 `;
 

examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot

@@ -1,5 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Storyshots Addons|A11y/BaseButton Default 1`] = `
+<button
+  type="button"
+/>
+`;
+
+exports[`Storyshots Addons|A11y/BaseButton Disabled 1`] = `
+<button
+  disabled=""
+  type="button"
+>
+  Testing the a11y addon
+</button>
+`;
+
+exports[`Storyshots Addons|A11y/BaseButton Invalid contrast 1`] = `
+<button
+  style="color:black;background-color:black"
+  type="button"
+>
+  Testing the a11y addon
+</button>
+`;
+
+exports[`Storyshots Addons|A11y/BaseButton Label 1`] = `
+<button
+  type="button"
+>
+  Testing the a11y addon
+</button>
+`;
+
+exports[`Storyshots Addons|A11y/BaseButton delayed render 1`] = `<div />`;
+
 exports[`Storyshots Addons|A11y/Button Content 1`] = `
 <button
   style="padding:12px 6px;font-size:12px;line-height:16px;border-radius:5px;background-color:#028402;color:#ffffff"
@@ -46,37 +80,19 @@ exports[`Storyshots Addons|A11y/Button Label 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|A11y/Form With label 1`] = `
-<div>
-  <label
-    for="1"
-    style="padding:0 6px"
-  >
-    Testing the a11y addon
-  </label>
-  <input
-    id="1"
-  />
-</div>
-`;
-
-exports[`Storyshots Addons|A11y/Form With placeholder 1`] = `
-<div>
-  <input
-    id="1"
-    placeholder="Testing the a11y addon"
-  />
-</div>
-`;
-
 exports[`Storyshots Addons|A11y/Form Without Label 1`] = `
-<div>
+<label
-  <input />
+  class="css-1n4tt73-Wrapper evz11jd0"
-</div>
+>
+  <input
+    class="css-yli1rb-Input e1iqivjq0"
+  />
+</label>
 `;
 
 exports[`Storyshots Addons|A11y/Image Presentation 1`] = `
 <img
+  class="css-1suhias-Img eipkw3i0"
   role="presentation"
   src="http://placehold.it/350x150"
 />
@@ -85,78 +101,34 @@ exports[`Storyshots Addons|A11y/Image Presentation 1`] = `
 exports[`Storyshots Addons|A11y/Image With alt 1`] = `
 <img
   alt="Testing the a11y addon"
-  src="http://placehold.it/350x150"
+  class="css-1suhias-Img eipkw3i0"
-/>
-`;
-
-exports[`Storyshots Addons|A11y/Image Without alt 1`] = `
-<img
   src="http://placehold.it/350x150"
 />
 `;
 
 exports[`Storyshots Addons|A11y/Typography Correct 1`] = `
 Array [
-  <h1>
+  <header
-    Testing the a11y addon
+    class="css-yfonvn-Container e14vg0o61"
-  </h1>,
+  >
-  <p>
+    <h1
+      class="css-4bak20-getElement e14vg0o60"
+    >
+      <span>
+        Testing the a11y addon
+      </span>
+    </h1>
+  </header>,
+  <p
+    class="css-cn4ebp-Text e17gaumq0"
+  >
     Testing the a11y addon
   </p>,
   <a
+    class="css-1a69rwi-A ehzniak0"
     href="javascript:void 0"
   >
     Testing the a11y addon...
   </a>,
 ]
 `;
-
-exports[`Storyshots Addons|A11y/Typography Empty Heading 1`] = `<h2 />`;
-
-exports[`Storyshots Addons|A11y/Typography Empty Link 1`] = `
-<a
-  href="javascript:void 0"
-/>
-`;
-
-exports[`Storyshots Addons|A11y/Typography Empty Paragraph 1`] = `<p />`;
-
-exports[`Storyshots Addons|A11y/Typography Link without href 1`] = `
-<a>
-  Testing the a11y addon...
-</a>
-`;
-
-exports[`Storyshots Addons|a11y Default 1`] = `
-<button
-  type="button"
-/>
-`;
-
-exports[`Storyshots Addons|a11y Disabled 1`] = `
-<button
-  disabled=""
-  type="button"
->
-  Testing the a11y addon
-</button>
-`;
-
-exports[`Storyshots Addons|a11y Invalid contrast 1`] = `
-<button
-  style="color:black;background-color:black"
-  type="button"
->
-  Testing the a11y addon
-</button>
-`;
-
-exports[`Storyshots Addons|a11y Label 1`] = `
-<button
-  type="button"
->
-  Testing the a11y addon
-</button>
-`;
-
-exports[`Storyshots Addons|a11y delayed render 1`] = `<div />`;

examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot

@@ -3,102 +3,102 @@
 exports[`Storyshots Addons|Actions All types 1`] = `
 Array [
   <button
-    class="css-1pzmux7-Button e1lk8yn73"
+    class="css-1pzmux7-Button e1iqivjq3"
   >
     Array
   </button>,
   <button
-    class="css-1pzmux7-Button e1lk8yn73"
+    class="css-1pzmux7-Button e1iqivjq3"
   >
     Boolean
   </button>,
   <button
-    class="css-1pzmux7-Button e1lk8yn73"
+    class="css-1pzmux7-Button e1iqivjq3"
   >
     Empty Object
   </button>,
   <button
-    class="css-1pzmux7-Button e1lk8yn73"
+    class="css-1pzmux7-Button e1iqivjq3"
   >
     File
   </button>,
   <button
-    class="css-1pzmux7-Button e1lk8yn73"
+    class="css-1pzmux7-Button e1iqivjq3"
   >
     Function A
   </button>,
   <button
-    class="css-1pzmux7-Button e1lk8yn73"
+    class="css-1pzmux7-Button e1iqivjq3"
   >
     Bound Function B
   </button>,
   <button
-    class="css-1pzmux7-Button e1lk8yn73"
+    class="css-1pzmux7-Button e1iqivjq3"
   >
     Infinity
   </button>,
   <button
-    class="css-1pzmux7-Button e1lk8yn73"
+    class="css-1pzmux7-Button e1iqivjq3"
   >
     -Infinity
   </button>,
   <button
-    class="css-1pzmux7-Button e1lk8yn73"
+    class="css-1pzmux7-Button e1iqivjq3"
   >
     NaN
   </button>,
   <button
-    class="css-1pzmux7-Button e1lk8yn73"
+    class="css-1pzmux7-Button e1iqivjq3"
   >
     null
   </button>,
   <button
-    class="css-1pzmux7-Button e1lk8yn73"
+    class="css-1pzmux7-Button e1iqivjq3"
   >
     Number
   </button>,
   <button
-    class="css-1pzmux7-Button e1lk8yn73"
+    class="css-1pzmux7-Button e1iqivjq3"
   >
     Multiple
   </button>,
   <button
-    class="css-1pzmux7-Button e1lk8yn73"
+    class="css-1pzmux7-Button e1iqivjq3"
   >
     Plain Object
   </button>,
   <button
-    class="css-1pzmux7-Button e1lk8yn73"
+    class="css-1pzmux7-Button e1iqivjq3"
   >
     Object (depth: 2)
   </button>,
   <button
-    class="css-1pzmux7-Button e1lk8yn73"
+    class="css-1pzmux7-Button e1iqivjq3"
   >
     RegExp
   </button>,
   <button
-    class="css-1pzmux7-Button e1lk8yn73"
+    class="css-1pzmux7-Button e1iqivjq3"
   >
     String
   </button>,
   <button
-    class="css-1pzmux7-Button e1lk8yn73"
+    class="css-1pzmux7-Button e1iqivjq3"
   >
     Symbol
   </button>,
   <button
-    class="css-1pzmux7-Button e1lk8yn73"
+    class="css-1pzmux7-Button e1iqivjq3"
   >
     SyntheticEvent
   </button>,
   <button
-    class="css-1pzmux7-Button e1lk8yn73"
+    class="css-1pzmux7-Button e1iqivjq3"
   >
     undefined
   </button>,
   <button
-    class="css-1pzmux7-Button e1lk8yn73"
+    class="css-1pzmux7-Button e1iqivjq3"
   >
     Window
   </button>,
@@ -107,7 +107,7 @@ Array [
 
 exports[`Storyshots Addons|Actions Basic example 1`] = `
 <button
-  class="css-1pzmux7-Button e1lk8yn73"
+  class="css-1pzmux7-Button e1iqivjq3"
 >
   Hello World
 </button>
@@ -115,7 +115,7 @@ exports[`Storyshots Addons|Actions Basic example 1`] = `
 
 exports[`Storyshots Addons|Actions Circular Payload 1`] = `
 <button
-  class="css-1pzmux7-Button e1lk8yn73"
+  class="css-1pzmux7-Button e1iqivjq3"
 >
   Circular Payload
 </button>
@@ -123,7 +123,7 @@ exports[`Storyshots Addons|Actions Circular Payload 1`] = `
 
 exports[`Storyshots Addons|Actions Decorated action + config 1`] = `
 <button
-  class="css-1pzmux7-Button e1lk8yn73"
+  class="css-1pzmux7-Button e1iqivjq3"
 >
   Moving away from this story will persist the action logger
 </button>
@@ -131,7 +131,7 @@ exports[`Storyshots Addons|Actions Decorated action + config 1`] = `
 
 exports[`Storyshots Addons|Actions Decorated action 1`] = `
 <button
-  class="css-1pzmux7-Button e1lk8yn73"
+  class="css-1pzmux7-Button e1iqivjq3"
 >
   Native Event
 </button>
@@ -139,7 +139,7 @@ exports[`Storyshots Addons|Actions Decorated action 1`] = `
 
 exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
 <button
-  class="css-1pzmux7-Button e1lk8yn73"
+  class="css-1pzmux7-Button e1iqivjq3"
 >
   Moving away from this story will persist the action logger
 </button>
@@ -147,7 +147,7 @@ exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
 
 exports[`Storyshots Addons|Actions Decorated actions 1`] = `
 <button
-  class="css-1pzmux7-Button e1lk8yn73"
+  class="css-1pzmux7-Button e1iqivjq3"
 >
   Native Event
 </button>
@@ -156,12 +156,12 @@ exports[`Storyshots Addons|Actions Decorated actions 1`] = `
 exports[`Storyshots Addons|Actions Limit Action Output 1`] = `
 Array [
   <button
-    class="css-1pzmux7-Button e1lk8yn73"
+    class="css-1pzmux7-Button e1iqivjq3"
   >
     False
   </button>,
   <button
-    class="css-1pzmux7-Button e1lk8yn73"
+    class="css-1pzmux7-Button e1iqivjq3"
   >
     True
   </button>,
@@ -170,7 +170,7 @@ Array [
 
 exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
 <button
-  class="css-1pzmux7-Button e1lk8yn73"
+  class="css-1pzmux7-Button e1iqivjq3"
 >
   Moving away from this story will persist the action logger
 </button>
@@ -178,7 +178,7 @@ exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
 
 exports[`Storyshots Addons|Actions Multiple actions 1`] = `
 <button
-  class="css-1pzmux7-Button e1lk8yn73"
+  class="css-1pzmux7-Button e1iqivjq3"
 >
   Hello World
 </button>
@@ -186,7 +186,7 @@ exports[`Storyshots Addons|Actions Multiple actions 1`] = `
 
 exports[`Storyshots Addons|Actions Multiple actions as object 1`] = `
 <button
-  class="css-1pzmux7-Button e1lk8yn73"
+  class="css-1pzmux7-Button e1iqivjq3"
 >
   Hello World
 </button>
@@ -194,7 +194,7 @@ exports[`Storyshots Addons|Actions Multiple actions as object 1`] = `
 
 exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
 <button
-  class="css-1pzmux7-Button e1lk8yn73"
+  class="css-1pzmux7-Button e1iqivjq3"
 >
   Moving away from this story will persist the action logger
 </button>
@@ -206,7 +206,7 @@ Array [
     Moving away from this story will persist the action logger
   </p>,
   <button
-    class="css-1pzmux7-Button e1lk8yn73"
+    class="css-1pzmux7-Button e1iqivjq3"
   >
     Object (configured clearOnStoryChange: false)
   </button>,
@@ -215,7 +215,7 @@ Array [
 
 exports[`Storyshots Addons|Actions Reserved keyword as name 1`] = `
 <button
-  class="css-1pzmux7-Button e1lk8yn73"
+  class="css-1pzmux7-Button e1iqivjq3"
 >
   Delete
 </button>
@@ -223,7 +223,7 @@ exports[`Storyshots Addons|Actions Reserved keyword as name 1`] = `
 
 exports[`Storyshots Addons|Actions configureActionsDepth 1`] = `
 <button
-  class="css-1pzmux7-Button e1lk8yn73"
+  class="css-1pzmux7-Button e1iqivjq3"
 >
   Object (configured depth: 2)
 </button>
@@ -231,7 +231,7 @@ exports[`Storyshots Addons|Actions configureActionsDepth 1`] = `
 
 exports[`Storyshots Addons|Actions.deprecated Decorated Action 1`] = `
 <button
-  class="css-1pzmux7-Button e1lk8yn73"
+  class="css-1pzmux7-Button e1iqivjq3"
 >
   Native Event
 </button>

examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot

@@ -178,9 +178,3 @@ exports[`Storyshots Addons|Knobs.withKnobs using options accepts options 1`] = `
   <h1>Hello</h1>
 </div>
 `;
-
-exports[`Storyshots Addons|Knobs.withKnobsOptions displays HTML code 1`] = `
-<div>
-  &lt;h1&gt;Hello&lt;/h1&gt;
-</div>
-`;

examples/official-storybook/stories/__snapshots__/core.stories.storyshot

@@ -21,7 +21,7 @@ exports[`Storyshots Core|Parameters adds data to storyFn 1`] = `
         "name": "Custom Storybook",
         "hierarchySeparator": {},
         "hierarchyRootSeparator": "|",
-        "selectedAddonPanel": "storybook/actions/panel",
+        "selectedPanel": "storybook/actions/panel",
         "selectedPanel": "storybook/background/panel",
         "panel": "storybook/actions/panel",
         "showPanel": false
@@ -198,7 +198,7 @@ Array [
     "name": "Custom Storybook",
     "hierarchySeparator": {},
     "hierarchyRootSeparator": "|",
-    "selectedAddonPanel": "storybook/actions/panel",
+    "selectedPanel": "storybook/actions/panel",
     "selectedPanel": "storybook/background/panel",
     "panel": "storybook/actions/panel",
     "showPanel": false

examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap

@@ -4,7 +4,7 @@ exports[`Storyshots Core|Errors story errors 1`] = `null`;
 
 exports[`Storyshots Core|Events Force re-render 1`] = `
 <button
-  class="css-1pzmux7-Button e1lk8yn73"
+  class="css-1pzmux7-Button e1iqivjq3"
 >
   Clicked: 0
 </button>

lib/components/src/form/__snapshots__/form.stories.storyshot

@@ -8,7 +8,7 @@ exports[`Storyshots Components|Form/Button alignment 1`] = `
     class="css-1nttea4-Flexed e1cifqpq0"
   >
     <button
-      class="css-h3sobf-Button e1lk8yn73"
+      class="css-h3sobf-Button e1iqivjq3"
     >
       click this button
     </button>
@@ -17,7 +17,7 @@ exports[`Storyshots Components|Form/Button alignment 1`] = `
     class="css-1nttea4-Flexed e1cifqpq0"
   >
     <button
-      class="css-f5ome0-Button e1lk8yn73"
+      class="css-f5ome0-Button e1iqivjq3"
     >
       click this button
     </button>
@@ -26,7 +26,7 @@ exports[`Storyshots Components|Form/Button alignment 1`] = `
     class="css-1nttea4-Flexed e1cifqpq0"
   >
     <button
-      class="css-4ds05y-Button e1lk8yn73"
+      class="css-4ds05y-Button e1iqivjq3"
     >
       click this button
     </button>
@@ -42,7 +42,7 @@ exports[`Storyshots Components|Form/Button sizes 1`] = `
     class="css-1nttea4-Flexed e1cifqpq0"
   >
     <button
-      class="css-1pzmux7-Button e1lk8yn73"
+      class="css-1pzmux7-Button e1iqivjq3"
     >
       click this button
     </button>
@@ -51,7 +51,7 @@ exports[`Storyshots Components|Form/Button sizes 1`] = `
     class="css-1nttea4-Flexed e1cifqpq0"
   >
     <button
-      class="css-1hyuh0l-Button e1lk8yn73"
+      class="css-1hyuh0l-Button e1iqivjq3"
     >
       click this button
     </button>
@@ -60,7 +60,7 @@ exports[`Storyshots Components|Form/Button sizes 1`] = `
     class="css-1nttea4-Flexed e1cifqpq0"
   >
     <button
-      class="css-4ds05y-Button e1lk8yn73"
+      class="css-4ds05y-Button e1iqivjq3"
     >
       click this button
     </button>
@@ -76,7 +76,7 @@ exports[`Storyshots Components|Form/Button validations 1`] = `
     class="css-1nttea4-Flexed e1cifqpq0"
   >
     <button
-      class="css-wvpv7w-Button e1lk8yn73"
+      class="css-wvpv7w-Button e1iqivjq3"
     >
       click this button
     </button>
@@ -85,7 +85,7 @@ exports[`Storyshots Components|Form/Button validations 1`] = `
     class="css-1nttea4-Flexed e1cifqpq0"
   >
     <button
-      class="css-1g2cn2b-Button e1lk8yn73"
+      class="css-1g2cn2b-Button e1iqivjq3"
     >
       click this button
     </button>
@@ -94,7 +94,7 @@ exports[`Storyshots Components|Form/Button validations 1`] = `
     class="css-1nttea4-Flexed e1cifqpq0"
   >
     <button
-      class="css-c7m30k-Button e1lk8yn73"
+      class="css-c7m30k-Button e1iqivjq3"
     >
       click this button
     </button>
@@ -103,7 +103,7 @@ exports[`Storyshots Components|Form/Button validations 1`] = `
     class="css-1nttea4-Flexed e1cifqpq0"
   >
     <button
-      class="css-4ds05y-Button e1lk8yn73"
+      class="css-4ds05y-Button e1iqivjq3"
     >
       click this button
     </button>
@@ -111,12 +111,207 @@ exports[`Storyshots Components|Form/Button validations 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components|Form/Button with knobs 1`] = `
+exports[`Storyshots Components|Form/Field field 1`] = `
-<button
+<label
-  class="css-1pzmux7-Button e1lk8yn73"
+  class="css-1n4tt73-Wrapper evz11jd0"
 >
-  💌  love letter to storybook team
+  <span
-</button>
+    class="css-1e2pl7n-Label evz11jd1"
+  >
+    <span>
+      label
+    </span>
+  </span>
+  <select
+    class="css-bsjfx3-Select e1iqivjq1"
+    size="1"
+  >
+    <option
+      value="val1"
+    >
+      Value 1
+    </option>
+    <option
+      selected=""
+      value="val2"
+    >
+      Value 2
+    </option>
+    <option
+      value="val3"
+    >
+      Value 3
+    </option>
+  </select>
+</label>
+`;
+
+exports[`Storyshots Components|Form/Input alignment 1`] = `
+<div
+  class="css-1mvfu07-Container ecq4n7c0"
+>
+  <div
+    class="css-1nttea4-Flexed e1cifqpq0"
+  >
+    <input
+      class="css-szkw5p-Input e1iqivjq0"
+      value="text"
+    />
+  </div>
+  <div
+    class="css-1nttea4-Flexed e1cifqpq0"
+  >
+    <input
+      class="css-1y2wvrw-Input e1iqivjq0"
+      value="text"
+    />
+  </div>
+  <div
+    class="css-1nttea4-Flexed e1cifqpq0"
+  >
+    <input
+      class="css-16q8oyb-Input e1iqivjq0"
+      value="text"
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components|Form/Input sizes 1`] = `
+<div
+  class="css-1mvfu07-Container ecq4n7c0"
+>
+  <div
+    class="css-1nttea4-Flexed e1cifqpq0"
+  >
+    <input
+      class="css-yli1rb-Input e1iqivjq0"
+      value="text"
+    />
+  </div>
+  <div
+    class="css-1nttea4-Flexed e1cifqpq0"
+  >
+    <input
+      class="css-1isdddd-Input e1iqivjq0"
+      value="text"
+    />
+  </div>
+  <div
+    class="css-1nttea4-Flexed e1cifqpq0"
+  >
+    <input
+      class="css-16q8oyb-Input e1iqivjq0"
+      value="text"
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components|Form/Input validations 1`] = `
+<div
+  class="css-1mvfu07-Container ecq4n7c0"
+>
+  <div
+    class="css-1nttea4-Flexed e1cifqpq0"
+  >
+    <input
+      class="css-1ixcpjc-Input e1iqivjq0"
+      value="text"
+    />
+  </div>
+  <div
+    class="css-1nttea4-Flexed e1cifqpq0"
+  >
+    <input
+      class="css-7fui90-Input e1iqivjq0"
+      value="text"
+    />
+  </div>
+  <div
+    class="css-1nttea4-Flexed e1cifqpq0"
+  >
+    <input
+      class="css-13lwlbq-Input e1iqivjq0"
+      value="text"
+    />
+  </div>
+  <div
+    class="css-1nttea4-Flexed e1cifqpq0"
+  >
+    <input
+      class="css-16q8oyb-Input e1iqivjq0"
+      value="text"
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots Components|Form/Select alignment 1`] = `
+<div
+  class="css-1mvfu07-Container ecq4n7c0"
+>
+  <select
+    class="css-1sgistt-Select e1iqivjq1"
+  >
+    <option
+      value="val1"
+    >
+      Value 1
+    </option>
+    <option
+      selected=""
+      value="val2"
+    >
+      Value 2
+    </option>
+    <option
+      value="val3"
+    >
+      Value 3
+    </option>
+  </select>
+  <select
+    class="css-fxcaf9-Select e1iqivjq1"
+  >
+    <option
+      value="val1"
+    >
+      Value 1
+    </option>
+    <option
+      selected=""
+      value="val2"
+    >
+      Value 2
+    </option>
+    <option
+      value="val3"
+    >
+      Value 3
+    </option>
+  </select>
+  <select
+    class="css-170lhp0-Select e1iqivjq1"
+  >
+    <option
+      value="val1"
+    >
+      Value 1
+    </option>
+    <option
+      selected=""
+      value="val2"
+    >
+      Value 2
+    </option>
+    <option
+      value="val3"
+    >
+      Value 3
+    </option>
+  </select>
+</div>
 `;
 
 exports[`Storyshots Components|Form/Select sizes 1`] = `
@@ -127,7 +322,7 @@ exports[`Storyshots Components|Form/Select sizes 1`] = `
     class="css-1nttea4-Flexed e1cifqpq0"
   >
     <select
-      class="css-bsjfx3-Select e1lk8yn71"
+      class="css-bsjfx3-Select e1iqivjq1"
     >
       <option
         value="val1"
@@ -151,7 +346,7 @@ exports[`Storyshots Components|Form/Select sizes 1`] = `
     class="css-1nttea4-Flexed e1cifqpq0"
   >
     <select
-      class="css-1mq6ser-Select e1lk8yn71"
+      class="css-1mq6ser-Select e1iqivjq1"
     >
       <option
         value="val1"
@@ -175,7 +370,7 @@ exports[`Storyshots Components|Form/Select sizes 1`] = `
     class="css-1nttea4-Flexed e1cifqpq0"
   >
     <select
-      class="css-170lhp0-Select e1lk8yn71"
+      class="css-170lhp0-Select e1iqivjq1"
     >
       <option
         value="val1"
@@ -203,7 +398,7 @@ exports[`Storyshots Components|Form/Select validations 1`] = `
   class="css-1mvfu07-Container ecq4n7c0"
 >
   <select
-    class="css-hxwf21-Select e1lk8yn71"
+    class="css-hxwf21-Select e1iqivjq1"
   >
     <option
       value="val1"
@@ -223,7 +418,7 @@ exports[`Storyshots Components|Form/Select validations 1`] = `
     </option>
   </select>
   <select
-    class="css-1pbuugy-Select e1lk8yn71"
+    class="css-1pbuugy-Select e1iqivjq1"
   >
     <option
       value="val1"
@@ -243,7 +438,7 @@ exports[`Storyshots Components|Form/Select validations 1`] = `
     </option>
   </select>
   <select
-    class="css-p4579u-Select e1lk8yn71"
+    class="css-p4579u-Select e1iqivjq1"
   >
     <option
       value="val1"
@@ -263,7 +458,7 @@ exports[`Storyshots Components|Form/Select validations 1`] = `
     </option>
   </select>
   <select
-    class="css-170lhp0-Select e1lk8yn71"
+    class="css-170lhp0-Select e1iqivjq1"
   >
     <option
       value="val1"
@@ -294,7 +489,7 @@ exports[`Storyshots Components|Form/Textarea alignment 1`] = `
   >
     <textarea
       align="end"
-      class="css-ok7c03-Textarea e1lk8yn72"
+      class="css-ok7c03-Textarea e1iqivjq2"
       style="height:0"
     >
       text
@@ -305,7 +500,7 @@ exports[`Storyshots Components|Form/Textarea alignment 1`] = `
   >
     <textarea
       align="center"
-      class="css-djty3k-Textarea e1lk8yn72"
+      class="css-djty3k-Textarea e1iqivjq2"
       style="height:0"
     >
       text
@@ -316,7 +511,7 @@ exports[`Storyshots Components|Form/Textarea alignment 1`] = `
   >
     <textarea
       align="start"
-      class="css-pul98m-Textarea e1lk8yn72"
+      class="css-pul98m-Textarea e1iqivjq2"
       style="height:0"
     >
       text
@@ -333,7 +528,7 @@ exports[`Storyshots Components|Form/Textarea sizes 1`] = `
     class="css-1nttea4-Flexed e1cifqpq0"
   >
     <textarea
-      class="css-fpmx1h-Textarea e1lk8yn72"
+      class="css-fpmx1h-Textarea e1iqivjq2"
       style="height:0"
     >
       text
@@ -343,7 +538,7 @@ exports[`Storyshots Components|Form/Textarea sizes 1`] = `
     class="css-1nttea4-Flexed e1cifqpq0"
   >
     <textarea
-      class="css-5rqdpj-Textarea e1lk8yn72"
+      class="css-5rqdpj-Textarea e1iqivjq2"
       style="height:0"
     >
       text
@@ -353,7 +548,7 @@ exports[`Storyshots Components|Form/Textarea sizes 1`] = `
     class="css-1nttea4-Flexed e1cifqpq0"
   >
     <textarea
-      class="css-pul98m-Textarea e1lk8yn72"
+      class="css-pul98m-Textarea e1iqivjq2"
       style="height:0"
     >
       text
@@ -370,7 +565,7 @@ exports[`Storyshots Components|Form/Textarea validations 1`] = `
     class="css-1nttea4-Flexed e1cifqpq0"
   >
     <textarea
-      class="css-vcj5vs-Textarea e1lk8yn72"
+      class="css-vcj5vs-Textarea e1iqivjq2"
       style="height:0"
       valid="error"
     >
@@ -381,7 +576,7 @@ exports[`Storyshots Components|Form/Textarea validations 1`] = `
     class="css-1nttea4-Flexed e1cifqpq0"
   >
     <textarea
-      class="css-1orv7tn-Textarea e1lk8yn72"
+      class="css-1orv7tn-Textarea e1iqivjq2"
       style="height:0"
       valid="warn"
     >
@@ -392,7 +587,7 @@ exports[`Storyshots Components|Form/Textarea validations 1`] = `
     class="css-1nttea4-Flexed e1cifqpq0"
   >
     <textarea
-      class="css-1gb1gub-Textarea e1lk8yn72"
+      class="css-1gb1gub-Textarea e1iqivjq2"
       style="height:0"
       valid="valid"
     >
@@ -403,7 +598,7 @@ exports[`Storyshots Components|Form/Textarea validations 1`] = `
     class="css-1nttea4-Flexed e1cifqpq0"
   >
     <textarea
-      class="css-pul98m-Textarea e1lk8yn72"
+      class="css-pul98m-Textarea e1iqivjq2"
       style="height:0"
     >
       text
@@ -411,14 +606,3 @@ exports[`Storyshots Components|Form/Textarea validations 1`] = `
   </div>
 </div>
 `;
-
-exports[`Storyshots Components|Form/Textarea with knobs (controlled) 1`] = `
-<textarea
-  class="css-pul98m-Textarea e1lk8yn72"
-  style="height:0"
->
-  OMG, multiple lines!
-
-That is amazing
-</textarea>
-`;

lib/components/src/preview/__snapshots__/preview.stories.storyshot

@@ -9,7 +9,7 @@ Array [
       class="css-1g91tai-Side e18hjm8i2"
     >
       <div
-        class="css-1jsscdj-TabBar e1lzzkxx1"
+        class="css-1p9vzbx-TabBar e1lzzkxx1"
       >
         <a
           class="css-1e55byq-UnstyledLink e15lz5d2"

lib/components/src/tabs/__snapshots__/tabs.stories.storyshot

@@ -8,10 +8,10 @@ exports[`Storyshots Components|Tabs stateful - dynamic 1`] = `
     class="css-z5a1p4-Wrapper e1lzzkxx0"
   >
     <div
-      class="css-1x21rq3-TabBarWrapper e1lzzkxx2"
+      class="css-1am2yyz-TabBarWrapper e1lzzkxx2"
     >
       <div
-        class="css-1qbrtvg-TabBar e1lzzkxx1"
+        class="css-l8emx-TabBar e1lzzkxx1"
         role="tablist"
       >
         <button
@@ -61,30 +61,68 @@ exports[`Storyshots Components|Tabs stateful - dynamic 1`] = `
     <div
       class="css-1eu9ihj-Content e1lzzkxx5"
     >
-      <div
-        id="test1"
-        title="Tab title #1"
-      />
       <div
         id="test2"
-        title="Tab title #2"
+        style="background:hotpink;min-height:100%;display:none"
-      />
+      >
+        CONTENT 2
+      </div>
       <div
         id="test3"
-        title="Tab with scroll!"
+      >
-      />
+        <div
+          style="background:#000000;height:30.8px"
+        />
+        <div
+          style="background:#111111;height:31.3px"
+        />
+        <div
+          style="background:#222222;height:32.1px"
+        />
+        <div
+          style="background:#333333;height:33.4px"
+        />
+        <div
+          style="background:#444444;height:35.5px"
+        />
+        <div
+          style="background:#555555;height:38.9px"
+        />
+        <div
+          style="background:#666666;height:44.4px"
+        />
+        <div
+          style="background:#777777;height:53.3px"
+        />
+        <div
+          style="background:#888888;height:67.7px"
+        />
+        <div
+          style="background:#999999;height:91px"
+        />
+        <div
+          style="background:#aaaaaa;height:128.7px"
+        />
+        <div
+          style="background:#bbbbbb;height:189.7px"
+        />
+        <div
+          style="background:#cccccc;height:288.4px"
+        />
+        <div
+          style="background:#dddddd;height:448.1px"
+        />
+        <div
+          style="background:#eeeeee;height:706.5px"
+        />
+      </div>
       <div
-        id="test4"
+        class="css-ovi531-VisuallyHidden e1lzzkxx6"
-        title="Tab title #4"
+      >
-      />
+        <div>
-      <div
+          CONTENT 6
-        id="test5"
+        </div>
-        title="Tab title #5"
+      </div>
-      />
-      <div
-        id="test6"
-        title="Tab title #6"
-      />
     </div>
   </div>
 </div>
@@ -98,10 +136,10 @@ exports[`Storyshots Components|Tabs stateful - no initial 1`] = `
     class="css-z5a1p4-Wrapper e1lzzkxx0"
   >
     <div
-      class="css-1x21rq3-TabBarWrapper e1lzzkxx2"
+      class="css-1am2yyz-TabBarWrapper e1lzzkxx2"
     >
       <div
-        class="css-1qbrtvg-TabBar e1lzzkxx1"
+        class="css-l8emx-TabBar e1lzzkxx1"
         role="tablist"
       >
         <button
@@ -153,76 +191,20 @@ exports[`Storyshots Components|Tabs stateful - no initial 1`] = `
     >
       <div
         id="test1"
-        title="Tab title #1"
-      />
-      <div
-        id="test2"
-        title="Tab title #2"
-      />
-      <div
-        id="test3"
-        title="Tab with scroll!"
-      />
-      <div
-        id="test4"
-        title="Tab title #4"
-      />
-      <div
-        id="test5"
-        title="Tab title #5"
-      />
-      <div
-        id="test6"
-        title="Tab title #6"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Components|Tabs stateful - static 1`] = `
-<div
-  style="height:calc(100vh - 20px)"
->
-  <div
-    class="css-z5a1p4-Wrapper e1lzzkxx0"
-  >
-    <div
-      class="css-1x21rq3-TabBarWrapper e1lzzkxx2"
-    >
-      <div
-        class="css-1qbrtvg-TabBar e1lzzkxx1"
-        role="tablist"
       >
-        <button
+        CONTENT 1
-          class="css-1ghc1c-TabButton e1lzzkxx4"
-          role="tab"
-          type="button"
-        >
-          With a function
-        </button>
-        <button
-          class="css-1jt6nsk-TabButton e1lzzkxx4"
-          role="tab"
-          type="button"
-        >
-          With markup
-        </button>
       </div>
-    </div>
-    <div
-      class="css-1eu9ihj-Content e1lzzkxx5"
-    >
-      <div
-        id="test1"
-        title="With a function"
-      />
       <div
         id="test2"
-        title="With markup"
+        style="background:hotpink;min-height:100%;display:none"
+      >
+        CONTENT 2
+      </div>
+      <div
+        class="css-ovi531-VisuallyHidden e1lzzkxx6"
       >
         <div>
-          test2 is always active (but visually hidden)
+          CONTENT 6
         </div>
       </div>
     </div>
@@ -238,10 +220,10 @@ exports[`Storyshots Components|Tabs stateless - absolute 1`] = `
     class="css-rpkhur-Wrapper e1lzzkxx0"
   >
     <div
-      class="css-1x21rq3-TabBarWrapper e1lzzkxx2"
+      class="css-1am2yyz-TabBarWrapper e1lzzkxx2"
     >
       <div
-        class="css-1qbrtvg-TabBar e1lzzkxx1"
+        class="css-l8emx-TabBar e1lzzkxx1"
         role="tablist"
       >
         <button
@@ -291,30 +273,68 @@ exports[`Storyshots Components|Tabs stateless - absolute 1`] = `
     <div
       class="css-1od9ihz-Content e1lzzkxx5"
     >
-      <div
-        id="test1"
-        title="Tab title #1"
-      />
       <div
         id="test2"
-        title="Tab title #2"
+        style="background:hotpink;min-height:100%;display:none"
-      />
+      >
+        CONTENT 2
+      </div>
       <div
         id="test3"
-        title="Tab with scroll!"
+      >
-      />
+        <div
+          style="background:#000000;height:30.8px"
+        />
+        <div
+          style="background:#111111;height:31.3px"
+        />
+        <div
+          style="background:#222222;height:32.1px"
+        />
+        <div
+          style="background:#333333;height:33.4px"
+        />
+        <div
+          style="background:#444444;height:35.5px"
+        />
+        <div
+          style="background:#555555;height:38.9px"
+        />
+        <div
+          style="background:#666666;height:44.4px"
+        />
+        <div
+          style="background:#777777;height:53.3px"
+        />
+        <div
+          style="background:#888888;height:67.7px"
+        />
+        <div
+          style="background:#999999;height:91px"
+        />
+        <div
+          style="background:#aaaaaa;height:128.7px"
+        />
+        <div
+          style="background:#bbbbbb;height:189.7px"
+        />
+        <div
+          style="background:#cccccc;height:288.4px"
+        />
+        <div
+          style="background:#dddddd;height:448.1px"
+        />
+        <div
+          style="background:#eeeeee;height:706.5px"
+        />
+      </div>
       <div
-        id="test4"
+        class="css-ovi531-VisuallyHidden e1lzzkxx6"
-        title="Tab title #4"
+      >
-      />
+        <div>
-      <div
+          CONTENT 6
-        id="test5"
+        </div>
-        title="Tab title #5"
+      </div>
-      />
-      <div
-        id="test6"
-        title="Tab title #6"
-      />
     </div>
   </div>
 </div>
@@ -328,10 +348,10 @@ exports[`Storyshots Components|Tabs stateless - bordered 1`] = `
     class="css-1nivq3t-Wrapper e1lzzkxx0"
   >
     <div
-      class="css-1x21rq3-TabBarWrapper e1lzzkxx2"
+      class="css-1am2yyz-TabBarWrapper e1lzzkxx2"
     >
       <div
-        class="css-1qbrtvg-TabBar e1lzzkxx1"
+        class="css-l8emx-TabBar e1lzzkxx1"
         role="tablist"
       >
         <button
@@ -381,30 +401,68 @@ exports[`Storyshots Components|Tabs stateless - bordered 1`] = `
     <div
       class="css-1eu9ihj-Content e1lzzkxx5"
     >
-      <div
-        id="test1"
-        title="Tab title #1"
-      />
       <div
         id="test2"
-        title="Tab title #2"
+        style="background:hotpink;min-height:100%;display:none"
-      />
+      >
+        CONTENT 2
+      </div>
       <div
         id="test3"
-        title="Tab with scroll!"
+      >
-      />
+        <div
+          style="background:#000000;height:30.8px"
+        />
+        <div
+          style="background:#111111;height:31.3px"
+        />
+        <div
+          style="background:#222222;height:32.1px"
+        />
+        <div
+          style="background:#333333;height:33.4px"
+        />
+        <div
+          style="background:#444444;height:35.5px"
+        />
+        <div
+          style="background:#555555;height:38.9px"
+        />
+        <div
+          style="background:#666666;height:44.4px"
+        />
+        <div
+          style="background:#777777;height:53.3px"
+        />
+        <div
+          style="background:#888888;height:67.7px"
+        />
+        <div
+          style="background:#999999;height:91px"
+        />
+        <div
+          style="background:#aaaaaa;height:128.7px"
+        />
+        <div
+          style="background:#bbbbbb;height:189.7px"
+        />
+        <div
+          style="background:#cccccc;height:288.4px"
+        />
+        <div
+          style="background:#dddddd;height:448.1px"
+        />
+        <div
+          style="background:#eeeeee;height:706.5px"
+        />
+      </div>
       <div
-        id="test4"
+        class="css-ovi531-VisuallyHidden e1lzzkxx6"
-        title="Tab title #4"
+      >
-      />
+        <div>
-      <div
+          CONTENT 6
-        id="test5"
+        </div>
-        title="Tab title #5"
+      </div>
-      />
-      <div
-        id="test6"
-        title="Tab title #6"
-      />
     </div>
   </div>
 </div>
@@ -430,10 +488,10 @@ exports[`Storyshots Components|Tabs stateless - no scrolling 1`] = `
     class="css-1nivq3t-Wrapper e1lzzkxx0"
   >
     <div
-      class="css-1x21rq3-TabBarWrapper e1lzzkxx2"
+      class="css-1am2yyz-TabBarWrapper e1lzzkxx2"
     >
       <div
-        class="css-1jsscdj-TabBar e1lzzkxx1"
+        class="css-1p9vzbx-TabBar e1lzzkxx1"
         role="tablist"
       >
         <button
@@ -483,30 +541,68 @@ exports[`Storyshots Components|Tabs stateless - no scrolling 1`] = `
     <div
       class="css-1eu9ihj-Content e1lzzkxx5"
     >
-      <div
-        id="test1"
-        title="Tab title #1"
-      />
       <div
         id="test2"
-        title="Tab title #2"
+        style="background:hotpink;min-height:100%;display:none"
-      />
+      >
+        CONTENT 2
+      </div>
       <div
         id="test3"
-        title="Tab with scroll!"
+      >
-      />
+        <div
+          style="background:#000000;height:30.8px"
+        />
+        <div
+          style="background:#111111;height:31.3px"
+        />
+        <div
+          style="background:#222222;height:32.1px"
+        />
+        <div
+          style="background:#333333;height:33.4px"
+        />
+        <div
+          style="background:#444444;height:35.5px"
+        />
+        <div
+          style="background:#555555;height:38.9px"
+        />
+        <div
+          style="background:#666666;height:44.4px"
+        />
+        <div
+          style="background:#777777;height:53.3px"
+        />
+        <div
+          style="background:#888888;height:67.7px"
+        />
+        <div
+          style="background:#999999;height:91px"
+        />
+        <div
+          style="background:#aaaaaa;height:128.7px"
+        />
+        <div
+          style="background:#bbbbbb;height:189.7px"
+        />
+        <div
+          style="background:#cccccc;height:288.4px"
+        />
+        <div
+          style="background:#dddddd;height:448.1px"
+        />
+        <div
+          style="background:#eeeeee;height:706.5px"
+        />
+      </div>
       <div
-        id="test4"
+        class="css-ovi531-VisuallyHidden e1lzzkxx6"
-        title="Tab title #4"
+      >
-      />
+        <div>
-      <div
+          CONTENT 6
-        id="test5"
+        </div>
-        title="Tab title #5"
+      </div>
-      />
-      <div
-        id="test6"
-        title="Tab title #6"
-      />
     </div>
   </div>
 </div>
@@ -520,10 +616,10 @@ exports[`Storyshots Components|Tabs stateless - with tools 1`] = `
     class="css-z5a1p4-Wrapper e1lzzkxx0"
   >
     <div
-      class="css-1x21rq3-TabBarWrapper e1lzzkxx2"
+      class="css-1am2yyz-TabBarWrapper e1lzzkxx2"
     >
       <div
-        class="css-1qbrtvg-TabBar e1lzzkxx1"
+        class="css-l8emx-TabBar e1lzzkxx1"
         role="tablist"
       >
         <button
@@ -587,30 +683,68 @@ exports[`Storyshots Components|Tabs stateless - with tools 1`] = `
     <div
       class="css-1eu9ihj-Content e1lzzkxx5"
     >
-      <div
-        id="test1"
-        title="Tab title #1"
-      />
       <div
         id="test2"
-        title="Tab title #2"
+        style="background:hotpink;min-height:100%;display:none"
-      />
+      >
+        CONTENT 2
+      </div>
       <div
         id="test3"
-        title="Tab with scroll!"
+      >
-      />
+        <div
+          style="background:#000000;height:30.8px"
+        />
+        <div
+          style="background:#111111;height:31.3px"
+        />
+        <div
+          style="background:#222222;height:32.1px"
+        />
+        <div
+          style="background:#333333;height:33.4px"
+        />
+        <div
+          style="background:#444444;height:35.5px"
+        />
+        <div
+          style="background:#555555;height:38.9px"
+        />
+        <div
+          style="background:#666666;height:44.4px"
+        />
+        <div
+          style="background:#777777;height:53.3px"
+        />
+        <div
+          style="background:#888888;height:67.7px"
+        />
+        <div
+          style="background:#999999;height:91px"
+        />
+        <div
+          style="background:#aaaaaa;height:128.7px"
+        />
+        <div
+          style="background:#bbbbbb;height:189.7px"
+        />
+        <div
+          style="background:#cccccc;height:288.4px"
+        />
+        <div
+          style="background:#dddddd;height:448.1px"
+        />
+        <div
+          style="background:#eeeeee;height:706.5px"
+        />
+      </div>
       <div
-        id="test4"
+        class="css-ovi531-VisuallyHidden e1lzzkxx6"
-        title="Tab title #4"
+      >
-      />
+        <div>
-      <div
+          CONTENT 6
-        id="test5"
+        </div>
-        title="Tab title #5"
+      </div>
-      />
-      <div
-        id="test6"
-        title="Tab title #6"
-      />
     </div>
   </div>
 </div>

lib/components/src/typography/heading/__snapshots__/heading.stories.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Components|Heading types 1`] = `
+exports[`Storyshots Components|Typography/Heading types 1`] = `
 <div>
   <div
     class="css-ys6tvt-Holder eu04e0w0"

lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot

@@ -130,7 +130,16 @@ exports[`Storyshots UI|Mobile layout initial 0 1`] = `
               1
             </h2>
             <pre>
-              {}
+              {
+  "id": "iframe",
+  "path": "/components/UI-DesktopLayout-noNav",
+  "componentId": "UI-DesktopLayout-noNav",
+  "location": "http://localhost:9011/?path=/components/UI-DesktopLayout-noNav",
+  "viewMode": "components",
+  "debug": {
+    "initialActive": 0
+  }
+}
             </pre>
           </div>
         </div>
@@ -219,7 +228,16 @@ exports[`Storyshots UI|Mobile layout initial 1 1`] = `
               1
             </h2>
             <pre>
-              {}
+              {
+  "id": "iframe",
+  "path": "/components/UI-DesktopLayout-noNav",
+  "componentId": "UI-DesktopLayout-noNav",
+  "location": "http://localhost:9011/?path=/components/UI-DesktopLayout-noNav",
+  "viewMode": "components",
+  "debug": {
+    "initialActive": 1
+  }
+}
             </pre>
           </div>
         </div>
@@ -308,7 +326,16 @@ exports[`Storyshots UI|Mobile layout initial 2 1`] = `
               1
             </h2>
             <pre>
-              {}
+              {
+  "id": "iframe",
+  "path": "/components/UI-DesktopLayout-noNav",
+  "componentId": "UI-DesktopLayout-noNav",
+  "location": "http://localhost:9011/?path=/components/UI-DesktopLayout-noNav",
+  "viewMode": "components",
+  "debug": {
+    "initialActive": 2
+  }
+}
             </pre>
           </div>
         </div>
@@ -399,7 +426,15 @@ exports[`Storyshots UI|Mobile layout page 1`] = `
               1
             </h2>
             <pre>
-              {}
+              {
+  "id": "iframe",
+  "path": "/components/UI-DesktopLayout-noNav",
+  "componentId": "UI-DesktopLayout-noNav",
+  "location": "http://localhost:9011/?path=/components/UI-DesktopLayout-noNav",
+  "debug": {
+    "initialActive": 1
+  }
+}
             </pre>
           </div>
         </div>

lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot

@@ -9,10 +9,10 @@ exports[`Storyshots UI|Panel default 1`] = `
     id="storybook-panel-root"
   >
     <div
-      class="css-1x21rq3-TabBarWrapper e1lzzkxx2"
+      class="css-1am2yyz-TabBarWrapper e1lzzkxx2"
     >
       <div
-        class="css-i6idqx-TabBar e1lzzkxx1"
+        class="css-1gsy9it-TabBar e1lzzkxx1"
         role="tablist"
       >
         <button
@@ -71,19 +71,10 @@ exports[`Storyshots UI|Panel default 1`] = `
     <div
       class="css-1od9ihz-Content e1lzzkxx5"
     >
-      <div
-        id="test1"
-        title="Test 1"
-      />
       <div
         id="test2"
-        title="Test 2"
       >
-        <div
+        TEST 2
-          id="test2"
-        >
-          TEST 2
-        </div>
       </div>
     </div>
   </div>