@pareto-engineering/design-system 3.0.0-alpha.28 → 4.0.0-alpha.3

package/{src → tests}/__snapshots__/Storyshots.test.js.snap

@@ -1,66 +1,452 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots a/AnimatedCounter After 1`] = `
-<div
-  className="base animated-counter x-main1"
+exports[`Storyshots Example/Button Large 1`] = `
+<button
+  className="storybook-button storybook-button--large storybook-button--secondary"
+  onClick={[Function]}
+  style={null}
+  type="button"
 >
-  <div
-    className="count s3"
-  >
-    <span />
-    <span>
-      %
-    </span>
-  </div>
-</div>
+  not clicked
+  Button
+</button>
 `;
 
-exports[`Storyshots a/AnimatedCounter Base 1`] = `
-<div
-  className="base animated-counter x-main1"
+exports[`Storyshots Example/Button Primary 1`] = `
+<button
+  className="storybook-button storybook-button--medium storybook-button--primary"
+  onClick={[Function]}
+  style={null}
+  type="button"
 >
-  <div
-    className="count s3"
-  >
-    <span />
-    <span>
-      %
-    </span>
-  </div>
-</div>
+  not clicked
+  Button
+</button>
 `;
 
-exports[`Storyshots a/AnimatedCounter Before 1`] = `
-<div
-  className="base animated-counter x-main1"
+exports[`Storyshots Example/Button Secondary 1`] = `
+<button
+  className="storybook-button storybook-button--medium storybook-button--secondary"
+  onClick={[Function]}
+  style={null}
+  type="button"
 >
+  not clicked
+  Button
+</button>
+`;
+
+exports[`Storyshots Example/Button Small 1`] = `
+<button
+  className="storybook-button storybook-button--small storybook-button--secondary"
+  onClick={[Function]}
+  style={null}
+  type="button"
+>
+  not clicked
+  Button
+</button>
+`;
+
+exports[`Storyshots Example/Header Logged In 1`] = `
+<header>
   <div
-    className="count s3"
+    className="wrapper"
   >
-    <span>
-      %
-    </span>
-    <span />
+    <div>
+      <svg
+        height="32"
+        viewBox="0 0 32 32"
+        width="32"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g
+          fill="none"
+          fillRule="evenodd"
+        >
+          <path
+            d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+            fill="#FFF"
+          />
+          <path
+            d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+            fill="#555AB9"
+          />
+          <path
+            d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+            fill="#91BAF8"
+          />
+        </g>
+      </svg>
+      <h1>
+        Acme
+      </h1>
+    </div>
+    <div>
+      <span
+        className="welcome"
+      >
+        Welcome,
+         
+        <b>
+          Jane Doe
+        </b>
+        !
+      </span>
+      <button
+        className="storybook-button storybook-button--small storybook-button--secondary"
+        onClick={[Function]}
+        style={null}
+        type="button"
+      >
+        not clicked
+        Log out
+      </button>
+    </div>
   </div>
-</div>
+</header>
 `;
 
-exports[`Storyshots a/AnimatedCounter Before And After 1`] = `
-<div
-  className="base animated-counter x-main1"
->
+exports[`Storyshots Example/Header Logged Out 1`] = `
+<header>
   <div
-    className="count s3"
+    className="wrapper"
   >
-    <span>
-      %
-    </span>
-    <span />
-    <span>
-      +
-    </span>
+    <div>
+      <svg
+        height="32"
+        viewBox="0 0 32 32"
+        width="32"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g
+          fill="none"
+          fillRule="evenodd"
+        >
+          <path
+            d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+            fill="#FFF"
+          />
+          <path
+            d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+            fill="#555AB9"
+          />
+          <path
+            d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+            fill="#91BAF8"
+          />
+        </g>
+      </svg>
+      <h1>
+        Acme
+      </h1>
+    </div>
+    <div>
+      <button
+        className="storybook-button storybook-button--small storybook-button--secondary"
+        onClick={[Function]}
+        style={null}
+        type="button"
+      >
+        not clicked
+        Log in
+      </button>
+      <button
+        className="storybook-button storybook-button--small storybook-button--primary"
+        onClick={[Function]}
+        style={null}
+        type="button"
+      >
+        not clicked
+        Sign up
+      </button>
+    </div>
   </div>
-</div>
+</header>
+`;
+
+exports[`Storyshots Example/Page Logged In 1`] = `
+<article>
+  <header>
+    <div
+      className="wrapper"
+    >
+      <div>
+        <svg
+          height="32"
+          viewBox="0 0 32 32"
+          width="32"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g
+            fill="none"
+            fillRule="evenodd"
+          >
+            <path
+              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+              fill="#FFF"
+            />
+            <path
+              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+              fill="#555AB9"
+            />
+            <path
+              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+              fill="#91BAF8"
+            />
+          </g>
+        </svg>
+        <h1>
+          Acme
+        </h1>
+      </div>
+      <div>
+        <button
+          className="storybook-button storybook-button--small storybook-button--secondary"
+          onClick={[Function]}
+          style={null}
+          type="button"
+        >
+          not clicked
+          Log in
+        </button>
+        <button
+          className="storybook-button storybook-button--small storybook-button--primary"
+          onClick={[Function]}
+          style={null}
+          type="button"
+        >
+          not clicked
+          Sign up
+        </button>
+      </div>
+    </div>
+  </header>
+  <section>
+    <h2>
+      Pages in Storybook
+    </h2>
+    <p>
+      We recommend building UIs with a
+       
+      <a
+        href="https://componentdriven.org"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <strong>
+          component-driven
+        </strong>
+      </a>
+       
+      process starting with atomic components and ending with pages.
+    </p>
+    <p>
+      Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:
+    </p>
+    <ul>
+      <li>
+        Use a higher-level connected component. Storybook helps you compose such data from the args of child component stories
+      </li>
+      <li>
+        Assemble data in the page component from your services. You can mock these services out using Storybook.
+      </li>
+    </ul>
+    <p>
+      Get a guided tutorial on component-driven development at
+       
+      <a
+        href="https://storybook.js.org/tutorials/"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        Storybook tutorials
+      </a>
+      . Read more in the
+       
+      <a
+        href="https://storybook.js.org/docs"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        docs
+      </a>
+      .
+    </p>
+    <div
+      className="tip-wrapper"
+    >
+      <span
+        className="tip"
+      >
+        Tip
+      </span>
+       
+      Adjust the width of the canvas with the
+       
+      <svg
+        height="10"
+        viewBox="0 0 12 12"
+        width="10"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g
+          fill="none"
+          fillRule="evenodd"
+        >
+          <path
+            d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+            fill="#999"
+            id="a"
+          />
+        </g>
+      </svg>
+      Viewports addon in the toolbar
+    </div>
+  </section>
+</article>
+`;
+
+exports[`Storyshots Example/Page Logged Out 1`] = `
+<article>
+  <header>
+    <div
+      className="wrapper"
+    >
+      <div>
+        <svg
+          height="32"
+          viewBox="0 0 32 32"
+          width="32"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g
+            fill="none"
+            fillRule="evenodd"
+          >
+            <path
+              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+              fill="#FFF"
+            />
+            <path
+              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+              fill="#555AB9"
+            />
+            <path
+              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+              fill="#91BAF8"
+            />
+          </g>
+        </svg>
+        <h1>
+          Acme
+        </h1>
+      </div>
+      <div>
+        <button
+          className="storybook-button storybook-button--small storybook-button--secondary"
+          onClick={[Function]}
+          style={null}
+          type="button"
+        >
+          not clicked
+          Log in
+        </button>
+        <button
+          className="storybook-button storybook-button--small storybook-button--primary"
+          onClick={[Function]}
+          style={null}
+          type="button"
+        >
+          not clicked
+          Sign up
+        </button>
+      </div>
+    </div>
+  </header>
+  <section>
+    <h2>
+      Pages in Storybook
+    </h2>
+    <p>
+      We recommend building UIs with a
+       
+      <a
+        href="https://componentdriven.org"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <strong>
+          component-driven
+        </strong>
+      </a>
+       
+      process starting with atomic components and ending with pages.
+    </p>
+    <p>
+      Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:
+    </p>
+    <ul>
+      <li>
+        Use a higher-level connected component. Storybook helps you compose such data from the args of child component stories
+      </li>
+      <li>
+        Assemble data in the page component from your services. You can mock these services out using Storybook.
+      </li>
+    </ul>
+    <p>
+      Get a guided tutorial on component-driven development at
+       
+      <a
+        href="https://storybook.js.org/tutorials/"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        Storybook tutorials
+      </a>
+      . Read more in the
+       
+      <a
+        href="https://storybook.js.org/docs"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        docs
+      </a>
+      .
+    </p>
+    <div
+      className="tip-wrapper"
+    >
+      <span
+        className="tip"
+      >
+        Tip
+      </span>
+       
+      Adjust the width of the canvas with the
+       
+      <svg
+        height="10"
+        viewBox="0 0 12 12"
+        width="10"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g
+          fill="none"
+          fillRule="evenodd"
+        >
+          <path
+            d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+            fill="#999"
+            id="a"
+          />
+        </g>
+      </svg>
+      Viewports addon in the toolbar
+    </div>
+  </section>
+</article>
 `;
 
 exports[`Storyshots a/AppContext Base 1`] = `"Sample AppContext"`;
@@ -68,7 +454,7 @@ exports[`Storyshots a/AppContext Base 1`] = `"Sample AppContext"`;
 exports[`Storyshots a/ContentTree Base 1`] = `
 <div
   style={
-    Object {
+    {
       "display": "grid",
       "gridTemplateColumns": "5fr 2fr",
     }
@@ -477,7 +863,7 @@ exports[`Storyshots a/DotInfo False 1`] = `
 <div
   className="base x-error dot-info"
   style={
-    Object {
+    {
       "--height": "2em",
     }
   }
@@ -488,7 +874,7 @@ exports[`Storyshots a/DotInfo Nullish 1`] = `
 <div
   className="base empty x-metadata dot-info"
   style={
-    Object {
+    {
       "--height": "2em",
     }
   }
@@ -499,7 +885,7 @@ exports[`Storyshots a/DotInfo True 1`] = `
 <div
   className="base x-success dot-info"
   style={
-    Object {
+    {
       "--height": "2em",
     }
   }
@@ -544,7 +930,7 @@ exports[`Storyshots a/IconList Base 1`] = `
 <ul
   className="base icon-list"
   style={
-    Object {
+    {
       "--list-icon": undefined,
       "--list-icon-hover": undefined,
     }
@@ -553,8 +939,8 @@ exports[`Storyshots a/IconList Base 1`] = `
   <li
     className="elementItem"
     style={
-      Object {
-        "--list-icon": "\\"J\\"",
+      {
+        "--list-icon": ""J"",
         "--list-icon-hover": undefined,
       }
     }
@@ -564,8 +950,8 @@ exports[`Storyshots a/IconList Base 1`] = `
   <li
     className="elementItem x-red xh-orange c-x"
     style={
-      Object {
-        "--list-icon": "\\"f\\"",
+      {
+        "--list-icon": ""f"",
         "--list-icon-hover": undefined,
       }
     }
@@ -575,7 +961,7 @@ exports[`Storyshots a/IconList Base 1`] = `
   <li
     className="elementItem"
     style={
-      Object {
+      {
         "--list-icon": undefined,
         "--list-icon-hover": undefined,
       }
@@ -586,9 +972,9 @@ exports[`Storyshots a/IconList Base 1`] = `
   <li
     className="elementItem"
     style={
-      Object {
-        "--list-icon": "\\"I\\"",
-        "--list-icon-hover": "\\"L\\"",
+      {
+        "--list-icon": ""I"",
+        "--list-icon-hover": ""L"",
       }
     }
   >
@@ -606,7 +992,7 @@ exports[`Storyshots a/Label Base 1`] = `
 `;
 
 exports[`Storyshots a/Label Compact 1`] = `
-Array [
+[
   <div
     className="base label x-main1 modifierCompact"
   >
@@ -863,7 +1249,7 @@ Array [
 `;
 
 exports[`Storyshots a/Label Ghost 1`] = `
-Array [
+[
   <div
     className="base label x-main1 modifierGhost"
   >
@@ -1120,7 +1506,7 @@ Array [
 `;
 
 exports[`Storyshots a/Label Normal 1`] = `
-Array [
+[
   <div
     className="base label x-main1"
   >
@@ -1383,7 +1769,7 @@ exports[`Storyshots a/LoadingCircle Base 1`] = `
   <div
     className="base loading-circle"
     style={
-      Object {
+      {
         "--height-width": "3em",
         "--stroke-width": undefined,
         "--x": "var(--on-x)",
@@ -1394,7 +1780,7 @@ exports[`Storyshots a/LoadingCircle Base 1`] = `
       className="svg-circle"
       preserveAspectRatio="xMinYMin meet"
       style={
-        Object {
+        {
           "--animation-duration": "2s",
         }
       }
@@ -1426,7 +1812,7 @@ exports[`Storyshots a/People Base 1`] = `
   <div
     className="base people u1"
     style={
-      Object {
+      {
         "--column-width": "12em",
         "--image-size": "3em",
       }
@@ -1512,7 +1898,7 @@ exports[`Storyshots a/People One Person 1`] = `
   <div
     className="base people u1"
     style={
-      Object {
+      {
         "--column-width": "12em",
         "--image-size": "3em",
       }
@@ -1583,7 +1969,7 @@ exports[`Storyshots a/Popover Bottom Left 1`] = `
   </div>
   <div
     style={
-      Object {
+      {
         "margin": "0 auto",
         "position": "relative",
         "textAlign": "center",
@@ -1686,7 +2072,7 @@ exports[`Storyshots a/Popover Bottom Right 1`] = `
   </div>
   <div
     style={
-      Object {
+      {
         "margin": "0 auto",
         "position": "relative",
         "textAlign": "center",
@@ -1789,7 +2175,7 @@ exports[`Storyshots a/Popover Top Left 1`] = `
   </div>
   <div
     style={
-      Object {
+      {
         "margin": "0 auto",
         "position": "relative",
         "textAlign": "center",
@@ -1892,7 +2278,7 @@ exports[`Storyshots a/Popover Top Right 1`] = `
   </div>
   <div
     style={
-      Object {
+      {
         "margin": "0 auto",
         "position": "relative",
         "textAlign": "center",
@@ -1958,12 +2344,12 @@ exports[`Storyshots a/Popover Top Right 1`] = `
 `;
 
 exports[`Storyshots a/ProgressBar Base 1`] = `
-Array [
+[
   <div
     className="base progress-bar"
     data-length="50%"
     style={
-      Object {
+      {
         "--height": undefined,
         "--progress": 40,
       }
@@ -1992,7 +2378,7 @@ exports[`Storyshots a/ProgressBar Color 1`] = `
   className="base progress-bar x-main1"
   data-length="50%"
   style={
-    Object {
+    {
       "--height": undefined,
       "--progress": 70,
     }
@@ -2005,7 +2391,7 @@ exports[`Storyshots a/ProgressBar Height 1`] = `
   className="base progress-bar x-main1"
   data-length="50%"
   style={
-    Object {
+    {
       "--height": "5em",
       "--progress": 70,
     }
@@ -2041,7 +2427,7 @@ exports[`Storyshots a/Quote Base 1`] = `
 `;
 
 exports[`Storyshots a/SVG Animated 1`] = `
-Array [
+[
   <svg
     className="base svg y-red modifierAnimated"
     height="200"
@@ -2055,7 +2441,7 @@ Array [
       className=""
       href="/sprite.svg#engine"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -2066,7 +2452,7 @@ Array [
     height="200"
     preserveAspectRatio="xMinYMin meet"
     style={
-      Object {
+      {
         "--svg-animation-repeats": "3",
         "--svg-animation-time": "10s",
         "--svg-origin-stroke-dashoffset": 100,
@@ -2083,7 +2469,7 @@ Array [
       className=""
       href="/sprite.svg#engine"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -2094,7 +2480,7 @@ Array [
     height="200"
     preserveAspectRatio="xMinYMin meet"
     style={
-      Object {
+      {
         "--svg-animation-repeats": "infinite",
         "--svg-animation-time": "20s",
         "--svg-origin-stroke-dashoffset": 5000,
@@ -2110,7 +2496,7 @@ Array [
       className=""
       href="/sprite.svg#engine"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -2133,7 +2519,7 @@ exports[`Storyshots a/SVG Base 1`] = `
     className=""
     href="/sprite.svg#engine"
     style={
-      Object {
+      {
         "style": undefined,
       }
     }
@@ -2142,7 +2528,7 @@ exports[`Storyshots a/SVG Base 1`] = `
 `;
 
 exports[`Storyshots a/SVG Logo 1`] = `
-Array [
+[
   <p>
     The logo can be used as a simple SVG, but you are probably looking for
      
@@ -2163,7 +2549,7 @@ Array [
       className=""
       href="/logo.svg#logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -2186,7 +2572,7 @@ exports[`Storyshots a/SVG Stroke 1`] = `
     className=""
     href="/sprite.svg#engine"
     style={
-      Object {
+      {
         "style": undefined,
       }
     }
@@ -2198,7 +2584,7 @@ exports[`Storyshots a/SnapScroller Base 1`] = `
 <div
   className="base snap-scroller u1 pv-u"
   style={
-    Object {
+    {
       "background": "var(--background4)",
     }
   }
@@ -2206,7 +2592,7 @@ exports[`Storyshots a/SnapScroller Base 1`] = `
   <div
     className="card"
     style={
-      Object {
+      {
         "background": "var(--background1)",
         "height": "400px",
         "minWidth": "330px",
@@ -2219,7 +2605,7 @@ exports[`Storyshots a/SnapScroller Base 1`] = `
   <div
     className="card"
     style={
-      Object {
+      {
         "background": "var(--background1)",
         "height": "400px",
         "minWidth": "330px",
@@ -2232,7 +2618,7 @@ exports[`Storyshots a/SnapScroller Base 1`] = `
   <div
     className="card"
     style={
-      Object {
+      {
         "background": "var(--background1)",
         "height": "400px",
         "minWidth": "330px",
@@ -2245,7 +2631,7 @@ exports[`Storyshots a/SnapScroller Base 1`] = `
   <div
     className="card"
     style={
-      Object {
+      {
         "background": "var(--background1)",
         "height": "400px",
         "minWidth": "330px",
@@ -2258,7 +2644,7 @@ exports[`Storyshots a/SnapScroller Base 1`] = `
   <div
     className="card"
     style={
-      Object {
+      {
         "background": "var(--background1)",
         "height": "400px",
         "minWidth": "330px",
@@ -2275,7 +2661,7 @@ exports[`Storyshots a/SnapScroller No Scroll On Desktop 1`] = `
 <div
   className="base snap-scroller u1 pv-u desktop-no-scroll"
   style={
-    Object {
+    {
       "background": "var(--background4)",
     }
   }
@@ -2283,7 +2669,7 @@ exports[`Storyshots a/SnapScroller No Scroll On Desktop 1`] = `
   <div
     className="card"
     style={
-      Object {
+      {
         "background": "var(--background1)",
         "height": "400px",
         "padding": "var(--u)",
@@ -2296,7 +2682,7 @@ exports[`Storyshots a/SnapScroller No Scroll On Desktop 1`] = `
   <div
     className="card"
     style={
-      Object {
+      {
         "background": "var(--background1)",
         "height": "400px",
         "padding": "var(--u)",
@@ -2309,7 +2695,7 @@ exports[`Storyshots a/SnapScroller No Scroll On Desktop 1`] = `
   <div
     className="card"
     style={
-      Object {
+      {
         "background": "var(--background1)",
         "height": "400px",
         "padding": "var(--u)",
@@ -2322,7 +2708,7 @@ exports[`Storyshots a/SnapScroller No Scroll On Desktop 1`] = `
   <div
     className="card"
     style={
-      Object {
+      {
         "background": "var(--background1)",
         "height": "400px",
         "padding": "var(--u)",
@@ -2335,7 +2721,7 @@ exports[`Storyshots a/SnapScroller No Scroll On Desktop 1`] = `
   <div
     className="card"
     style={
-      Object {
+      {
         "background": "var(--background1)",
         "height": "400px",
         "padding": "var(--u)",
@@ -2411,7 +2797,7 @@ exports[`Storyshots a/Timestamp Relative Format 1`] = `
 `;
 
 exports[`Storyshots b/Button Arrow Left 1`] = `
-Array [
+[
   <button
     className="base button x-main1 arrow-left"
     type="button"
@@ -2696,7 +3082,7 @@ Array [
 `;
 
 exports[`Storyshots b/Button Arrow Left Simple 1`] = `
-Array [
+[
   <button
     className="base button x-main1 modifierSimple arrow-left"
     type="button"
@@ -2981,7 +3367,7 @@ Array [
 `;
 
 exports[`Storyshots b/Button Arrow Right 1`] = `
-Array [
+[
   <button
     className="base button x-main1 arrow-right"
     type="button"
@@ -3266,7 +3652,7 @@ Array [
 `;
 
 exports[`Storyshots b/Button Arrow Right Simple 1`] = `
-Array [
+[
   <button
     className="base button x-main1 modifierSimple arrow-right"
     type="button"
@@ -3560,7 +3946,7 @@ exports[`Storyshots b/Button Base 1`] = `
 `;
 
 exports[`Storyshots b/Button Compact 1`] = `
-Array [
+[
   <button
     className="base button x-main1 modifierCompact"
     type="button"
@@ -3845,7 +4231,7 @@ Array [
 `;
 
 exports[`Storyshots b/Button Disabled 1`] = `
-Array [
+[
   <button
     className="base button x-main1"
     disabled={true}
@@ -4167,7 +4553,7 @@ exports[`Storyshots b/Button Ghost 1`] = `
 `;
 
 exports[`Storyshots b/Button Ghost Disabled 1`] = `
-Array [
+[
   <button
     className="base button x-main1 modifierGhost"
     disabled={true}
@@ -4480,7 +4866,7 @@ Array [
 `;
 
 exports[`Storyshots b/Button Ghosts 1`] = `
-Array [
+[
   <button
     className="base button x-main1 modifierGhost"
     type="button"
@@ -4765,7 +5151,7 @@ Array [
 `;
 
 exports[`Storyshots b/Button Loading 1`] = `
-Array [
+[
   <button
     className="base button x-main1"
     type="button"
@@ -4773,7 +5159,7 @@ Array [
     <div
       className="base loading-circle"
       style={
-        Object {
+        {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
           "--x": "var(--on-x)",
@@ -4784,7 +5170,7 @@ Array [
         className="svg-circle"
         preserveAspectRatio="xMinYMin meet"
         style={
-          Object {
+          {
             "--animation-duration": "2s",
           }
         }
@@ -4814,7 +5200,7 @@ Array [
     <div
       className="base loading-circle"
       style={
-        Object {
+        {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
           "--x": "var(--on-x)",
@@ -4825,7 +5211,7 @@ Array [
         className="svg-circle"
         preserveAspectRatio="xMinYMin meet"
         style={
-          Object {
+          {
             "--animation-duration": "2s",
           }
         }
@@ -4855,7 +5241,7 @@ Array [
     <div
       className="base loading-circle"
       style={
-        Object {
+        {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
           "--x": "var(--on-x)",
@@ -4866,7 +5252,7 @@ Array [
         className="svg-circle"
         preserveAspectRatio="xMinYMin meet"
         style={
-          Object {
+          {
             "--animation-duration": "2s",
           }
         }
@@ -4896,7 +5282,7 @@ Array [
     <div
       className="base loading-circle"
       style={
-        Object {
+        {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
           "--x": "var(--on-x)",
@@ -4907,7 +5293,7 @@ Array [
         className="svg-circle"
         preserveAspectRatio="xMinYMin meet"
         style={
-          Object {
+          {
             "--animation-duration": "2s",
           }
         }
@@ -4937,7 +5323,7 @@ Array [
     <div
       className="base loading-circle"
       style={
-        Object {
+        {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
           "--x": "var(--on-x)",
@@ -4948,7 +5334,7 @@ Array [
         className="svg-circle"
         preserveAspectRatio="xMinYMin meet"
         style={
-          Object {
+          {
             "--animation-duration": "2s",
           }
         }
@@ -4978,7 +5364,7 @@ Array [
     <div
       className="base loading-circle"
       style={
-        Object {
+        {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
           "--x": "var(--on-x)",
@@ -4989,7 +5375,7 @@ Array [
         className="svg-circle"
         preserveAspectRatio="xMinYMin meet"
         style={
-          Object {
+          {
             "--animation-duration": "2s",
           }
         }
@@ -5019,7 +5405,7 @@ Array [
     <div
       className="base loading-circle"
       style={
-        Object {
+        {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
           "--x": "var(--on-x)",
@@ -5030,7 +5416,7 @@ Array [
         className="svg-circle"
         preserveAspectRatio="xMinYMin meet"
         style={
-          Object {
+          {
             "--animation-duration": "2s",
           }
         }
@@ -5060,7 +5446,7 @@ Array [
     <div
       className="base loading-circle"
       style={
-        Object {
+        {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
           "--x": "var(--on-x)",
@@ -5071,7 +5457,7 @@ Array [
         className="svg-circle"
         preserveAspectRatio="xMinYMin meet"
         style={
-          Object {
+          {
             "--animation-duration": "2s",
           }
         }
@@ -5101,7 +5487,7 @@ Array [
     <div
       className="base loading-circle"
       style={
-        Object {
+        {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
           "--x": "var(--on-x)",
@@ -5112,7 +5498,7 @@ Array [
         className="svg-circle"
         preserveAspectRatio="xMinYMin meet"
         style={
-          Object {
+          {
             "--animation-duration": "2s",
           }
         }
@@ -5142,7 +5528,7 @@ Array [
     <div
       className="base loading-circle"
       style={
-        Object {
+        {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
           "--x": "var(--on-x)",
@@ -5153,7 +5539,7 @@ Array [
         className="svg-circle"
         preserveAspectRatio="xMinYMin meet"
         style={
-          Object {
+          {
             "--animation-duration": "2s",
           }
         }
@@ -5183,7 +5569,7 @@ Array [
     <div
       className="base loading-circle"
       style={
-        Object {
+        {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
           "--x": "var(--on-x)",
@@ -5194,7 +5580,7 @@ Array [
         className="svg-circle"
         preserveAspectRatio="xMinYMin meet"
         style={
-          Object {
+          {
             "--animation-duration": "2s",
           }
         }
@@ -5224,7 +5610,7 @@ Array [
     <div
       className="base loading-circle"
       style={
-        Object {
+        {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
           "--x": "var(--on-x)",
@@ -5235,7 +5621,7 @@ Array [
         className="svg-circle"
         preserveAspectRatio="xMinYMin meet"
         style={
-          Object {
+          {
             "--animation-duration": "2s",
           }
         }
@@ -5265,7 +5651,7 @@ Array [
     <div
       className="base loading-circle"
       style={
-        Object {
+        {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
           "--x": "var(--on-x)",
@@ -5276,7 +5662,7 @@ Array [
         className="svg-circle"
         preserveAspectRatio="xMinYMin meet"
         style={
-          Object {
+          {
             "--animation-duration": "2s",
           }
         }
@@ -5306,7 +5692,7 @@ Array [
     <div
       className="base loading-circle"
       style={
-        Object {
+        {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
           "--x": "var(--on-x)",
@@ -5317,7 +5703,7 @@ Array [
         className="svg-circle"
         preserveAspectRatio="xMinYMin meet"
         style={
-          Object {
+          {
             "--animation-duration": "2s",
           }
         }
@@ -5347,7 +5733,7 @@ Array [
     <div
       className="base loading-circle"
       style={
-        Object {
+        {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
           "--x": "var(--on-x)",
@@ -5358,7 +5744,7 @@ Array [
         className="svg-circle"
         preserveAspectRatio="xMinYMin meet"
         style={
-          Object {
+          {
             "--animation-duration": "2s",
           }
         }
@@ -5388,7 +5774,7 @@ Array [
     <div
       className="base loading-circle"
       style={
-        Object {
+        {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
           "--x": "var(--on-x)",
@@ -5399,7 +5785,7 @@ Array [
         className="svg-circle"
         preserveAspectRatio="xMinYMin meet"
         style={
-          Object {
+          {
             "--animation-duration": "2s",
           }
         }
@@ -5429,7 +5815,7 @@ Array [
     <div
       className="base loading-circle"
       style={
-        Object {
+        {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
           "--x": "var(--on-x)",
@@ -5440,7 +5826,7 @@ Array [
         className="svg-circle"
         preserveAspectRatio="xMinYMin meet"
         style={
-          Object {
+          {
             "--animation-duration": "2s",
           }
         }
@@ -5470,7 +5856,7 @@ Array [
     <div
       className="base loading-circle"
       style={
-        Object {
+        {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
           "--x": "var(--on-x)",
@@ -5481,7 +5867,7 @@ Array [
         className="svg-circle"
         preserveAspectRatio="xMinYMin meet"
         style={
-          Object {
+          {
             "--animation-duration": "2s",
           }
         }
@@ -5511,7 +5897,7 @@ Array [
     <div
       className="base loading-circle"
       style={
-        Object {
+        {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
           "--x": "var(--on-x)",
@@ -5522,7 +5908,7 @@ Array [
         className="svg-circle"
         preserveAspectRatio="xMinYMin meet"
         style={
-          Object {
+          {
             "--animation-duration": "2s",
           }
         }
@@ -5552,7 +5938,7 @@ Array [
     <div
       className="base loading-circle"
       style={
-        Object {
+        {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
           "--x": "var(--on-x)",
@@ -5563,7 +5949,7 @@ Array [
         className="svg-circle"
         preserveAspectRatio="xMinYMin meet"
         style={
-          Object {
+          {
             "--animation-duration": "2s",
           }
         }
@@ -5593,7 +5979,7 @@ Array [
     <div
       className="base loading-circle"
       style={
-        Object {
+        {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
           "--x": "var(--on-x)",
@@ -5604,7 +5990,7 @@ Array [
         className="svg-circle"
         preserveAspectRatio="xMinYMin meet"
         style={
-          Object {
+          {
             "--animation-duration": "2s",
           }
         }
@@ -5634,7 +6020,7 @@ Array [
     <div
       className="base loading-circle"
       style={
-        Object {
+        {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
           "--x": "var(--on-x)",
@@ -5645,7 +6031,7 @@ Array [
         className="svg-circle"
         preserveAspectRatio="xMinYMin meet"
         style={
-          Object {
+          {
             "--animation-duration": "2s",
           }
         }
@@ -5675,7 +6061,7 @@ Array [
     <div
       className="base loading-circle"
       style={
-        Object {
+        {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
           "--x": "var(--on-x)",
@@ -5686,7 +6072,7 @@ Array [
         className="svg-circle"
         preserveAspectRatio="xMinYMin meet"
         style={
-          Object {
+          {
             "--animation-duration": "2s",
           }
         }
@@ -5716,7 +6102,7 @@ Array [
     <div
       className="base loading-circle"
       style={
-        Object {
+        {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
           "--x": "var(--on-x)",
@@ -5727,7 +6113,7 @@ Array [
         className="svg-circle"
         preserveAspectRatio="xMinYMin meet"
         style={
-          Object {
+          {
             "--animation-duration": "2s",
           }
         }
@@ -5757,7 +6143,7 @@ Array [
     <div
       className="base loading-circle"
       style={
-        Object {
+        {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
           "--x": "var(--on-x)",
@@ -5768,7 +6154,7 @@ Array [
         className="svg-circle"
         preserveAspectRatio="xMinYMin meet"
         style={
-          Object {
+          {
             "--animation-duration": "2s",
           }
         }
@@ -5798,7 +6184,7 @@ Array [
     <div
       className="base loading-circle"
       style={
-        Object {
+        {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
           "--x": "var(--on-x)",
@@ -5809,7 +6195,7 @@ Array [
         className="svg-circle"
         preserveAspectRatio="xMinYMin meet"
         style={
-          Object {
+          {
             "--animation-duration": "2s",
           }
         }
@@ -5839,7 +6225,7 @@ Array [
     <div
       className="base loading-circle"
       style={
-        Object {
+        {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
           "--x": "var(--on-x)",
@@ -5850,7 +6236,7 @@ Array [
         className="svg-circle"
         preserveAspectRatio="xMinYMin meet"
         style={
-          Object {
+          {
             "--animation-duration": "2s",
           }
         }
@@ -5880,7 +6266,7 @@ Array [
     <div
       className="base loading-circle"
       style={
-        Object {
+        {
           "--height-width": "1.15em",
           "--stroke-width": undefined,
           "--x": "var(--on-x)",
@@ -5891,7 +6277,7 @@ Array [
         className="svg-circle"
         preserveAspectRatio="xMinYMin meet"
         style={
-          Object {
+          {
             "--animation-duration": "2s",
           }
         }
@@ -5918,7 +6304,7 @@ Array [
 `;
 
 exports[`Storyshots b/Button Normal 1`] = `
-Array [
+[
   <button
     className="base button x-main1"
     type="button"
@@ -6203,7 +6589,7 @@ Array [
 `;
 
 exports[`Storyshots b/Button Simple 1`] = `
-Array [
+[
   <button
     className="base button x-main1 modifierSimple"
     type="button"
@@ -6488,7 +6874,7 @@ Array [
 `;
 
 exports[`Storyshots b/Button Simple Disabled 1`] = `
-Array [
+[
   <button
     className="base button x-main1 modifierSimple"
     disabled={true}
@@ -6814,7 +7200,7 @@ exports[`Storyshots b/Logo Base 1`] = `
     href="/logo.svg#logo_squares"
     id="logo_squares"
     style={
-      Object {
+      {
         "style": undefined,
       }
     }
@@ -6824,7 +7210,7 @@ exports[`Storyshots b/Logo Base 1`] = `
     href="/logo.svg#logo_pareto"
     id="logo_pareto"
     style={
-      Object {
+      {
         "style": undefined,
       }
     }
@@ -6833,7 +7219,7 @@ exports[`Storyshots b/Logo Base 1`] = `
 `;
 
 exports[`Storyshots b/Logo Color 1`] = `
-Array [
+[
   <svg
     className="base svg base logo x-main1 y-transparent"
     height="2em"
@@ -6847,7 +7233,7 @@ Array [
       href="/logo.svg#logo_squares"
       id="logo_squares"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -6857,7 +7243,7 @@ Array [
       href="/logo.svg#logo_pareto"
       id="logo_pareto"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -6876,7 +7262,7 @@ Array [
       href="/logo.svg#logo_squares"
       id="logo_squares"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -6886,7 +7272,7 @@ Array [
       href="/logo.svg#logo_pareto"
       id="logo_pareto"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -6905,7 +7291,7 @@ Array [
       href="/logo.svg#logo_squares"
       id="logo_squares"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -6915,7 +7301,7 @@ Array [
       href="/logo.svg#logo_pareto"
       id="logo_pareto"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -6934,7 +7320,7 @@ Array [
       href="/logo.svg#logo_squares"
       id="logo_squares"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -6944,7 +7330,7 @@ Array [
       href="/logo.svg#logo_pareto"
       id="logo_pareto"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -6963,7 +7349,7 @@ Array [
       href="/logo.svg#logo_squares"
       id="logo_squares"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -6973,7 +7359,7 @@ Array [
       href="/logo.svg#logo_pareto"
       id="logo_pareto"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -6992,7 +7378,7 @@ Array [
       href="/logo.svg#logo_squares"
       id="logo_squares"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7002,7 +7388,7 @@ Array [
       href="/logo.svg#logo_pareto"
       id="logo_pareto"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7021,7 +7407,7 @@ Array [
       href="/logo.svg#logo_squares"
       id="logo_squares"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7031,7 +7417,7 @@ Array [
       href="/logo.svg#logo_pareto"
       id="logo_pareto"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7050,7 +7436,7 @@ Array [
       href="/logo.svg#logo_squares"
       id="logo_squares"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7060,7 +7446,7 @@ Array [
       href="/logo.svg#logo_pareto"
       id="logo_pareto"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7079,7 +7465,7 @@ Array [
       href="/logo.svg#logo_squares"
       id="logo_squares"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7089,7 +7475,7 @@ Array [
       href="/logo.svg#logo_pareto"
       id="logo_pareto"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7108,7 +7494,7 @@ Array [
       href="/logo.svg#logo_squares"
       id="logo_squares"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7118,7 +7504,7 @@ Array [
       href="/logo.svg#logo_pareto"
       id="logo_pareto"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7137,7 +7523,7 @@ Array [
       href="/logo.svg#logo_squares"
       id="logo_squares"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7147,7 +7533,7 @@ Array [
       href="/logo.svg#logo_pareto"
       id="logo_pareto"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7166,7 +7552,7 @@ Array [
       href="/logo.svg#logo_squares"
       id="logo_squares"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7176,7 +7562,7 @@ Array [
       href="/logo.svg#logo_pareto"
       id="logo_pareto"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7195,7 +7581,7 @@ Array [
       href="/logo.svg#logo_squares"
       id="logo_squares"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7205,7 +7591,7 @@ Array [
       href="/logo.svg#logo_pareto"
       id="logo_pareto"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7224,7 +7610,7 @@ Array [
       href="/logo.svg#logo_squares"
       id="logo_squares"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7234,7 +7620,7 @@ Array [
       href="/logo.svg#logo_pareto"
       id="logo_pareto"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7253,7 +7639,7 @@ Array [
       href="/logo.svg#logo_squares"
       id="logo_squares"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7263,7 +7649,7 @@ Array [
       href="/logo.svg#logo_pareto"
       id="logo_pareto"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7282,7 +7668,7 @@ Array [
       href="/logo.svg#logo_squares"
       id="logo_squares"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7292,7 +7678,7 @@ Array [
       href="/logo.svg#logo_pareto"
       id="logo_pareto"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7311,7 +7697,7 @@ Array [
       href="/logo.svg#logo_squares"
       id="logo_squares"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7321,7 +7707,7 @@ Array [
       href="/logo.svg#logo_pareto"
       id="logo_pareto"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7340,7 +7726,7 @@ Array [
       href="/logo.svg#logo_squares"
       id="logo_squares"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7350,7 +7736,7 @@ Array [
       href="/logo.svg#logo_pareto"
       id="logo_pareto"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7369,7 +7755,7 @@ Array [
       href="/logo.svg#logo_squares"
       id="logo_squares"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7379,7 +7765,7 @@ Array [
       href="/logo.svg#logo_pareto"
       id="logo_pareto"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7398,7 +7784,7 @@ Array [
       href="/logo.svg#logo_squares"
       id="logo_squares"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7408,7 +7794,7 @@ Array [
       href="/logo.svg#logo_pareto"
       id="logo_pareto"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7427,7 +7813,7 @@ Array [
       href="/logo.svg#logo_squares"
       id="logo_squares"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7437,7 +7823,7 @@ Array [
       href="/logo.svg#logo_pareto"
       id="logo_pareto"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7456,7 +7842,7 @@ Array [
       href="/logo.svg#logo_squares"
       id="logo_squares"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7466,7 +7852,7 @@ Array [
       href="/logo.svg#logo_pareto"
       id="logo_pareto"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7485,7 +7871,7 @@ Array [
       href="/logo.svg#logo_squares"
       id="logo_squares"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7495,7 +7881,7 @@ Array [
       href="/logo.svg#logo_pareto"
       id="logo_pareto"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7514,7 +7900,7 @@ Array [
       href="/logo.svg#logo_squares"
       id="logo_squares"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7524,7 +7910,7 @@ Array [
       href="/logo.svg#logo_pareto"
       id="logo_pareto"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7543,7 +7929,7 @@ Array [
       href="/logo.svg#logo_squares"
       id="logo_squares"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7553,7 +7939,7 @@ Array [
       href="/logo.svg#logo_pareto"
       id="logo_pareto"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7572,7 +7958,7 @@ Array [
       href="/logo.svg#logo_squares"
       id="logo_squares"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7582,7 +7968,7 @@ Array [
       href="/logo.svg#logo_pareto"
       id="logo_pareto"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7601,7 +7987,7 @@ Array [
       href="/logo.svg#logo_squares"
       id="logo_squares"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7611,7 +7997,7 @@ Array [
       href="/logo.svg#logo_pareto"
       id="logo_pareto"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7630,7 +8016,7 @@ Array [
       href="/logo.svg#logo_squares"
       id="logo_squares"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7640,7 +8026,7 @@ Array [
       href="/logo.svg#logo_pareto"
       id="logo_pareto"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7650,7 +8036,7 @@ Array [
 `;
 
 exports[`Storyshots b/Logo Square 1`] = `
-Array [
+[
   <svg
     className="base svg base logo x-main1 y-transparent"
     height="2em"
@@ -7664,7 +8050,7 @@ Array [
       href="/logo_square.svg#logo"
       id="logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7683,7 +8069,7 @@ Array [
       href="/logo_square.svg#logo"
       id="logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7702,7 +8088,7 @@ Array [
       href="/logo_square.svg#logo"
       id="logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7721,7 +8107,7 @@ Array [
       href="/logo_square.svg#logo"
       id="logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7740,7 +8126,7 @@ Array [
       href="/logo_square.svg#logo"
       id="logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7759,7 +8145,7 @@ Array [
       href="/logo_square.svg#logo"
       id="logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7778,7 +8164,7 @@ Array [
       href="/logo_square.svg#logo"
       id="logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7797,7 +8183,7 @@ Array [
       href="/logo_square.svg#logo"
       id="logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7816,7 +8202,7 @@ Array [
       href="/logo_square.svg#logo"
       id="logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7835,7 +8221,7 @@ Array [
       href="/logo_square.svg#logo"
       id="logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7854,7 +8240,7 @@ Array [
       href="/logo_square.svg#logo"
       id="logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7873,7 +8259,7 @@ Array [
       href="/logo_square.svg#logo"
       id="logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7892,7 +8278,7 @@ Array [
       href="/logo_square.svg#logo"
       id="logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7911,7 +8297,7 @@ Array [
       href="/logo_square.svg#logo"
       id="logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7930,7 +8316,7 @@ Array [
       href="/logo_square.svg#logo"
       id="logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7949,7 +8335,7 @@ Array [
       href="/logo_square.svg#logo"
       id="logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7968,7 +8354,7 @@ Array [
       href="/logo_square.svg#logo"
       id="logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -7987,7 +8373,7 @@ Array [
       href="/logo_square.svg#logo"
       id="logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -8006,7 +8392,7 @@ Array [
       href="/logo_square.svg#logo"
       id="logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -8025,7 +8411,7 @@ Array [
       href="/logo_square.svg#logo"
       id="logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -8044,7 +8430,7 @@ Array [
       href="/logo_square.svg#logo"
       id="logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -8063,7 +8449,7 @@ Array [
       href="/logo_square.svg#logo"
       id="logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -8082,7 +8468,7 @@ Array [
       href="/logo_square.svg#logo"
       id="logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -8101,7 +8487,7 @@ Array [
       href="/logo_square.svg#logo"
       id="logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -8120,7 +8506,7 @@ Array [
       href="/logo_square.svg#logo"
       id="logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -8139,7 +8525,7 @@ Array [
       href="/logo_square.svg#logo"
       id="logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -8158,7 +8544,7 @@ Array [
       href="/logo_square.svg#logo"
       id="logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -8177,7 +8563,7 @@ Array [
       href="/logo_square.svg#logo"
       id="logo"
       style={
-        Object {
+        {
           "style": undefined,
         }
       }
@@ -8237,7 +8623,7 @@ exports[`Storyshots b/Page With Sections 1`] = `
 `;
 
 exports[`Storyshots b/SocialMediaButton Base 1`] = `
-Array [
+[
   <a
     href="https://www.facebook.com/hellopareto"
     rel="noreferrer"
@@ -8290,7 +8676,7 @@ Array [
 `;
 
 exports[`Storyshots b/SocialMediaButton Transparent 1`] = `
-Array [
+[
   <a
     href="https://www.facebook.com/hellopareto"
     rel="noreferrer"
@@ -8375,7 +8761,7 @@ exports[`Storyshots b/Title Base 1`] = `
 `;
 
 exports[`Storyshots b/Title Sizes 1`] = `
-Array [
+[
   <div
     className="u2 pv-u"
   >
@@ -8510,7 +8896,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
 <div
   className="ui-light"
   style={
-    Object {
+    {
       "height": "100%",
     }
   }
@@ -8535,7 +8921,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
             href="/logo.svg#logo_squares"
             id="logo_squares"
             style={
-              Object {
+              {
                 "style": undefined,
               }
             }
@@ -8545,7 +8931,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
             href="/logo.svg#logo_pareto"
             id="logo_pareto"
             style={
-              Object {
+              {
                 "style": undefined,
               }
             }
@@ -8558,7 +8944,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
         <ul
           className="base icon-list"
           style={
-            Object {
+            {
               "--list-icon": undefined,
               "--list-icon-hover": undefined,
             }
@@ -8567,8 +8953,8 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
           <li
             className="elementItem x-heading c-x"
             style={
-              Object {
-                "--list-icon": "\\"L\\"",
+              {
+                "--list-icon": ""L"",
                 "--list-icon-hover": undefined,
               }
             }
@@ -8578,7 +8964,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
           <li
             className="elementItem x-subtitle c-x"
             style={
-              Object {
+              {
                 "--list-icon": undefined,
                 "--list-icon-hover": undefined,
               }
@@ -8589,7 +8975,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
           <li
             className="elementItem x-subtitle c-x"
             style={
-              Object {
+              {
                 "--list-icon": undefined,
                 "--list-icon-hover": undefined,
               }
@@ -8600,7 +8986,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
           <li
             className="elementItem x-subtitle c-x"
             style={
-              Object {
+              {
                 "--list-icon": undefined,
                 "--list-icon-hover": undefined,
               }
@@ -8619,7 +9005,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
         className="base progress-bar modifierAttached x-main2 y-background1 b-hard-y"
         data-length="50%"
         style={
-          Object {
+          {
             "--height": ".4em",
             "--progress": 40,
           }
@@ -8652,7 +9038,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
               href="/logo.svg#logo_squares"
               id="logo_squares"
               style={
-                Object {
+                {
                   "style": undefined,
                 }
               }
@@ -8662,7 +9048,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
               href="/logo.svg#logo_pareto"
               id="logo_pareto"
               style={
-                Object {
+                {
                   "style": undefined,
                 }
               }
@@ -8855,7 +9241,7 @@ exports[`Storyshots c/ContentSlides Simple 1`] = `
 <div
   className="ui-light"
   style={
-    Object {
+    {
       "height": "100%",
     }
   }
@@ -8870,7 +9256,7 @@ exports[`Storyshots c/ContentSlides Simple 1`] = `
         className="base progress-bar modifierAttached x-main2 y-background1 b-hard-y"
         data-length="50%"
         style={
-          Object {
+          {
             "--height": ".4em",
             "--progress": 40,
           }
@@ -8903,7 +9289,7 @@ exports[`Storyshots c/ContentSlides Simple 1`] = `
               href="/logo.svg#logo_squares"
               id="logo_squares"
               style={
-                Object {
+                {
                   "style": undefined,
                 }
               }
@@ -8913,7 +9299,7 @@ exports[`Storyshots c/ContentSlides Simple 1`] = `
               href="/logo.svg#logo_pareto"
               id="logo_pareto"
               style={
-                Object {
+                {
                   "style": undefined,
                 }
               }
@@ -9116,7 +9502,7 @@ exports[`Storyshots c/Shortener Base 1`] = `
 <span
   className="base shortener"
   style={
-    Object {
+    {
       "maxWidth": "300px",
     }
   }
@@ -9225,7 +9611,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
       onChange={[Function]}
       rows={3}
       style={
-        Object {
+        {
           "resize": "vertical",
         }
       }
@@ -9254,7 +9640,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
   <div
     className="base choices-input form-input x-background2 y-main2"
     style={
-      Object {
+      {
         "--grid-columns-desktop": 3,
         "--grid-columns-mobile": 2,
       }
@@ -9445,7 +9831,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
       onChange={[Function]}
       rows={3}
       style={
-        Object {
+        {
           "resize": "vertical",
         }
       }
@@ -9454,7 +9840,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
   <div
     className="base choices-input form-input x-background2 y-main2"
     style={
-      Object {
+      {
         "--grid-columns-desktop": 3,
         "--grid-columns-mobile": 2,
       }
@@ -9651,7 +10037,7 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
   <div
     className="base choices-input form-input x-background2 y-main2"
     style={
-      Object {
+      {
         "--grid-columns-desktop": 3,
         "--grid-columns-mobile": 2,
       }
@@ -9790,7 +10176,7 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
   <div
     className="base choices-input form-input x-background2 y-main2"
     style={
-      Object {
+      {
         "--grid-columns-desktop": 3,
         "--grid-columns-mobile": 2,
       }
@@ -10396,7 +10782,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
     className="base choices-input x-background2 y-main2"
     id="colors"
     style={
-      Object {
+      {
         "--grid-columns-desktop": 3,
         "--grid-columns-mobile": 2,
       }
@@ -10583,7 +10969,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
     className="base choices-input x-background2 y-main2"
     id="colors"
     style={
-      Object {
+      {
         "--grid-columns-desktop": 3,
         "--grid-columns-mobile": 2,
       }
@@ -10775,7 +11161,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
     className="base choices-input x-background2 y-main2"
     id="colors"
     style={
-      Object {
+      {
         "--grid-columns-desktop": 3,
         "--grid-columns-mobile": 2,
       }
@@ -10967,7 +11353,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
     className="base choices-input multiple x-background2 y-main2"
     id="colors"
     style={
-      Object {
+      {
         "--grid-columns-desktop": 3,
         "--grid-columns-mobile": 2,
       }
@@ -11154,7 +11540,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Default Formik Value 1`]
     className="base choices-input multiple x-background2 y-main2"
     id="colors"
     style={
-      Object {
+      {
         "--grid-columns-desktop": 3,
         "--grid-columns-mobile": 2,
       }
@@ -11341,7 +11727,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
     className="base choices-input multiple x-background2 y-main2"
     id="colors"
     style={
-      Object {
+      {
         "--grid-columns-desktop": 2,
         "--grid-columns-mobile": 2,
       }
@@ -11528,7 +11914,7 @@ exports[`Storyshots f/fields/ChoicesInput Optional 1`] = `
     className="base choices-input x-background2 y-main2"
     id="colors"
     style={
-      Object {
+      {
         "--grid-columns-desktop": 3,
         "--grid-columns-mobile": 2,
       }
@@ -11721,7 +12107,7 @@ exports[`Storyshots f/fields/ChoicesInput With Default Formik Value 1`] = `
     className="base choices-input x-background2 y-main2"
     id="colors"
     style={
-      Object {
+      {
         "--grid-columns-desktop": 3,
         "--grid-columns-mobile": 2,
       }
@@ -11907,7 +12293,7 @@ exports[`Storyshots f/fields/QueryChoices Base 1`] = `
   <div
     className="base choices-input x-background2 y-main2"
     style={
-      Object {
+      {
         "--grid-columns-desktop": 3,
         "--grid-columns-mobile": 2,
       }
@@ -11965,7 +12351,7 @@ exports[`Storyshots f/fields/QueryChoices Optional 1`] = `
   <div
     className="base choices-input x-background2 y-main2"
     style={
-      Object {
+      {
         "--grid-columns-desktop": 3,
         "--grid-columns-mobile": 2,
       }
@@ -12067,7 +12453,7 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select 1`] = `
   </div>
   <div
     style={
-      Object {
+      {
         "alignItems": "flex-end",
         "display": "flex",
         "flexDirection": "column",
@@ -12198,7 +12584,7 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik S
   </div>
   <div
     style={
-      Object {
+      {
         "alignItems": "flex-end",
         "display": "flex",
         "flexDirection": "column",
@@ -12279,7 +12665,7 @@ exports[`Storyshots f/fields/QueryCombobox Optional 1`] = `
   </div>
   <div
     style={
-      Object {
+      {
         "alignItems": "flex-end",
         "display": "flex",
         "flexDirection": "column",
@@ -12359,7 +12745,7 @@ exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
   </div>
   <div
     style={
-      Object {
+      {
         "alignItems": "flex-end",
         "display": "flex",
         "flexDirection": "column",
@@ -12450,7 +12836,7 @@ exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik Sta
   </div>
   <div
     style={
-      Object {
+      {
         "alignItems": "flex-end",
         "display": "flex",
         "flexDirection": "column",
@@ -14046,7 +14432,7 @@ exports[`Storyshots f/fields/TextareaInput Base 1`] = `
       onChange={[Function]}
       rows={3}
       style={
-        Object {
+        {
           "resize": "vertical",
         }
       }
@@ -14090,7 +14476,7 @@ exports[`Storyshots f/fields/TextareaInput Disable Resize 1`] = `
       onChange={[Function]}
       rows={3}
       style={
-        Object {
+        {
           "resize": "none",
         }
       }
@@ -14134,7 +14520,7 @@ exports[`Storyshots f/fields/TextareaInput Disabled 1`] = `
       onChange={[Function]}
       rows={3}
       style={
-        Object {
+        {
           "resize": "vertical",
         }
       }
@@ -14178,7 +14564,7 @@ exports[`Storyshots f/fields/TextareaInput Horizontal Resize 1`] = `
       onChange={[Function]}
       rows={3}
       style={
-        Object {
+        {
           "resize": "horizontal",
         }
       }
@@ -14223,7 +14609,7 @@ exports[`Storyshots f/fields/TextareaInput Optional 1`] = `
       onChange={[Function]}
       rows={3}
       style={
-        Object {
+        {
           "resize": "vertical",
         }
       }
@@ -14268,7 +14654,7 @@ exports[`Storyshots f/fields/TextareaInput Placeholder 1`] = `
       placeholder="Type your feedback here..."
       rows={3}
       style={
-        Object {
+        {
           "resize": "vertical",
         }
       }
@@ -14312,7 +14698,7 @@ exports[`Storyshots f/fields/TextareaInput Validation 1`] = `
       onChange={[Function]}
       rows={3}
       style={
-        Object {
+        {
           "resize": "vertical",
         }
       }
@@ -14356,7 +14742,7 @@ exports[`Storyshots f/fields/TextareaInput Vertical Resize 1`] = `
       onChange={[Function]}
       rows={3}
       style={
-        Object {
+        {
           "resize": "vertical",
         }
       }