diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap index f25c10f5c4a..3a5b9950bcc 100644 --- a/addons/info/src/__snapshots__/index.test.js.snap +++ b/addons/info/src/__snapshots__/index.test.js.snap @@ -1,41 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`addon Info should render and external markdown 1`] = ` -.emotion-6 { - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: relative; - overflow: auto; -} - -.emotion-4 code { - opacity: 0.7; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - and external markdown 1`] = ` >
and external markdown 1`] = ` className="hljs" >
                               
                                 
                                    and external markdown 1`] = `
 `;
 
 exports[`addon Info should render  and markdown 1`] = `
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: relative;
-  overflow: auto;
-}
-
-.emotion-4 code {
-  opacity: 0.7;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
 
   
                 
                   
                               
                                 
                                   
   
               
                 
                             
                               
                                 
   
               
                 
                             
                               
                                 
   
                 
                   
             
diff --git a/examples/cra-kitchen-sink/src/storyshots.test.js b/examples/cra-kitchen-sink/src/storyshots.test.js
index 00b2b446903..6b780d80bf0 100644
--- a/examples/cra-kitchen-sink/src/storyshots.test.js
+++ b/examples/cra-kitchen-sink/src/storyshots.test.js
@@ -1,5 +1,4 @@
 import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
-import { createSerializer as emotionCreateSerializer } from 'jest-emotion';
 import path from 'path';
 import { render as renderer, configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
@@ -14,5 +13,5 @@ initStoryshots({
   test: multiSnapshotWithOptions({
     renderer,
   }),
-  snapshotSerializers: [createSerializer(), emotionCreateSerializer()],
+  snapshotSerializers: [createSerializer()],
 });
diff --git a/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
index 1e5a124ab61..9a9a0acf432 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
@@ -2,663 +2,103 @@
 
 exports[`Storyshots Addons|Actions All types 1`] = `
 Array [
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
@@ -666,216 +106,48 @@ Array [
 `;
 
 exports[`Storyshots Addons|Actions Basic example 1`] = `
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 
 `;
 
 exports[`Storyshots Addons|Actions Circular Payload 1`] = `
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 
 `;
 
 exports[`Storyshots Addons|Actions Decorated action + config 1`] = `
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 
 `;
 
 exports[`Storyshots Addons|Actions Decorated action 1`] = `
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 
 `;
 
 exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 
 `;
 
 exports[`Storyshots Addons|Actions Decorated actions 1`] = `
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 
@@ -883,69 +155,13 @@ exports[`Storyshots Addons|Actions Decorated actions 1`] = `
 
 exports[`Storyshots Addons|Actions Limit Action Output 1`] = `
 Array [
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
-  .emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
-,
@@ -953,144 +169,32 @@ Array [
 `;
 
 exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 
 `;
 
 exports[`Storyshots Addons|Actions Multiple actions 1`] = `
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 
 `;
 
 exports[`Storyshots Addons|Actions Multiple actions as object 1`] = `
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 
 `;
 
 exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
-.emotion-0 {
-  padding: 0 10px;
-  color: #444;
-  background: rgba(0,0,0,0.1);
-  border-radius: 4px;
-  -webkit-transition: border-bottom-color .3s linear;
-  transition: border-bottom-color .3s linear;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-  position: relative;
-  display: inline;
-  text-align: left;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  min-height: 32px;
-  box-sizing: border-box;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #9fdaff;
-}
-
 
@@ -1101,36 +205,8 @@ Array [
   

Moving away from this story will persist the action logger

, - .emotion-0 { - padding: 0 10px; - color: #444; - background: rgba(0,0,0,0.1); - border-radius: 4px; - -webkit-transition: border-bottom-color .3s linear; - transition: border-bottom-color .3s linear; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - box-sizing: border-box; - position: relative; - display: inline; - text-align: left; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - min-height: 32px; - box-sizing: border-box; -} - -.emotion-0:focus { - outline: 0 none; - border-bottom-color: #9fdaff; -} - -, @@ -1138,108 +214,24 @@ Array [ `; exports[`Storyshots Addons|Actions Reserved keyword as name 1`] = ` -.emotion-0 { - padding: 0 10px; - color: #444; - background: rgba(0,0,0,0.1); - border-radius: 4px; - -webkit-transition: border-bottom-color .3s linear; - transition: border-bottom-color .3s linear; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - box-sizing: border-box; - position: relative; - display: inline; - text-align: left; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - min-height: 32px; - box-sizing: border-box; -} - -.emotion-0:focus { - outline: 0 none; - border-bottom-color: #9fdaff; -} - `; exports[`Storyshots Addons|Actions configureActionsDepth 1`] = ` -.emotion-0 { - padding: 0 10px; - color: #444; - background: rgba(0,0,0,0.1); - border-radius: 4px; - -webkit-transition: border-bottom-color .3s linear; - transition: border-bottom-color .3s linear; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - box-sizing: border-box; - position: relative; - display: inline; - text-align: left; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - min-height: 32px; - box-sizing: border-box; -} - -.emotion-0:focus { - outline: 0 none; - border-bottom-color: #9fdaff; -} - `; exports[`Storyshots Addons|Actions.deprecated Decorated Action 1`] = ` -.emotion-0 { - padding: 0 10px; - color: #444; - background: rgba(0,0,0,0.1); - border-radius: 4px; - -webkit-transition: border-bottom-color .3s linear; - transition: border-bottom-color .3s linear; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - box-sizing: border-box; - position: relative; - display: inline; - text-align: left; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - min-height: 32px; - box-sizing: border-box; -} - -.emotion-0:focus { - outline: 0 none; - border-bottom-color: #9fdaff; -} - diff --git a/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot index eb2b3abf049..2d1c3b89623 100644 --- a/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot @@ -1,19 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Addons|Events Logger 1`] = ` -.emotion-2 { - padding: 20px; -} - -.emotion-0 { - margin: 0; -} -

Logger

@@ -22,19 +14,11 @@ exports[`Storyshots Addons|Events Logger 1`] = ` `; exports[`Storyshots Addons|Events.deprecated Logger 1`] = ` -.emotion-2 { - padding: 20px; -} - -.emotion-0 { - margin: 0; -} -

Logger

diff --git a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot index 4135c0fa3d5..e5f8156ece4 100644 --- a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot @@ -1,254 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Addons|Info/Decorator Use Info as story decorator 1`] = ` -.emotion-6 { - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: relative; - overflow: auto; -} - -.emotion-4 code { - padding-right: 10px; - opacity: 0.7; -} - -.emotion-4 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-4 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.string { - color: #A31515; -} - -.emotion-4 * .token.punctuation { - color: #393A34; -} - -.emotion-4 * .token.operator { - color: #393A34; -} - -.emotion-4 * .token.url { - color: #36acaa; -} - -.emotion-4 * .token.symbol { - color: #36acaa; -} - -.emotion-4 * .token.number { - color: #36acaa; -} - -.emotion-4 * .token.boolean { - color: #36acaa; -} - -.emotion-4 * .token.variable { - color: #36acaa; -} - -.emotion-4 * .token.constant { - color: #36acaa; -} - -.emotion-4 * .token.inserted { - color: #36acaa; -} - -.emotion-4 * .token.atrule { - color: #0000ff; -} - -.emotion-4 * .token.keyword { - color: #0000ff; -} - -.emotion-4 * .token.attr-value { - color: #0000ff; -} - -.emotion-4 * .token.function { - color: #393A34; -} - -.emotion-4 * .token.deleted { - color: #9a050f; -} - -.emotion-4 * .token.important { - font-weight: bold; -} - -.emotion-4 * .token.bold { - font-weight: bold; -} - -.emotion-4 * .token.italic { - font-style: italic; -} - -.emotion-4 * .token.class-name { - color: #2B91AF; -} - -.emotion-4 * .token.tag { - color: #800000; -} - -.emotion-4 * .token.selector { - color: #800000; -} - -.emotion-4 * .token.attr-name { - color: #ff0000; -} - -.emotion-4 * .token.property { - color: #ff0000; -} - -.emotion-4 * .token.regex { - color: #ff0000; -} - -.emotion-4 * .token.entity { - color: #ff0000; -} - -.emotion-4 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-4 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-4 * .language-json .token.number { - color: #0000ff; -} - -.emotion-4 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-4 * .namespace { - opacity: 0.7; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-70 { - border-collapse: collapse; - margin-top: 16px; - width: auto; - table-layout: auto; -} - -.emotion-18 { - border-bottom: 1px solid rgba(0,0,0,0.1); -} - -.emotion-8 { - padding: 2px 6px; - line-height: 18px; - vertical-align: middle; - padding: 8px 16px; -} - -.emotion-68 { - font-size: 14px; -} - -.emotion-30 { - border-bottom: 1px solid #eee; -} - -.emotion-20 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #774dd7; -} - -.emotion-22 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #1ea7fd; -} - -.emotion-22 button { - color: #37d5d3; -} - -.emotion-22 span { - white-space: pre; -} - -.emotion-24 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; -} - -.emotion-28 { - padding: 2px 6px; - text-align: left; - padding: 8px 16px; -} -
                 
                   
             
Property Type Required Default Description
children node yes -
isAmazing bool - false
age other - { @@ -478,38 +377,38 @@ exports[`Storyshots Button with new info 1`] = `
title string - the best container ever
@@ -557,254 +309,6 @@ exports[`Storyshots Addons|Info/Decorator Use Info as story decorator 1`] = ` `; exports[`Storyshots Addons|Info/ForwardRef Displays forwarded ref components correctly 1`] = ` -.emotion-6 { - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: relative; - overflow: auto; -} - -.emotion-4 code { - padding-right: 10px; - opacity: 0.7; -} - -.emotion-4 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-4 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.string { - color: #A31515; -} - -.emotion-4 * .token.punctuation { - color: #393A34; -} - -.emotion-4 * .token.operator { - color: #393A34; -} - -.emotion-4 * .token.url { - color: #36acaa; -} - -.emotion-4 * .token.symbol { - color: #36acaa; -} - -.emotion-4 * .token.number { - color: #36acaa; -} - -.emotion-4 * .token.boolean { - color: #36acaa; -} - -.emotion-4 * .token.variable { - color: #36acaa; -} - -.emotion-4 * .token.constant { - color: #36acaa; -} - -.emotion-4 * .token.inserted { - color: #36acaa; -} - -.emotion-4 * .token.atrule { - color: #0000ff; -} - -.emotion-4 * .token.keyword { - color: #0000ff; -} - -.emotion-4 * .token.attr-value { - color: #0000ff; -} - -.emotion-4 * .token.function { - color: #393A34; -} - -.emotion-4 * .token.deleted { - color: #9a050f; -} - -.emotion-4 * .token.important { - font-weight: bold; -} - -.emotion-4 * .token.bold { - font-weight: bold; -} - -.emotion-4 * .token.italic { - font-style: italic; -} - -.emotion-4 * .token.class-name { - color: #2B91AF; -} - -.emotion-4 * .token.tag { - color: #800000; -} - -.emotion-4 * .token.selector { - color: #800000; -} - -.emotion-4 * .token.attr-name { - color: #ff0000; -} - -.emotion-4 * .token.property { - color: #ff0000; -} - -.emotion-4 * .token.regex { - color: #ff0000; -} - -.emotion-4 * .token.entity { - color: #ff0000; -} - -.emotion-4 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-4 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-4 * .language-json .token.number { - color: #0000ff; -} - -.emotion-4 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-4 * .namespace { - opacity: 0.7; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-70 { - border-collapse: collapse; - margin-top: 16px; - width: auto; - table-layout: auto; -} - -.emotion-18 { - border-bottom: 1px solid rgba(0,0,0,0.1); -} - -.emotion-8 { - padding: 2px 6px; - line-height: 18px; - vertical-align: middle; - padding: 8px 16px; -} - -.emotion-68 { - font-size: 14px; -} - -.emotion-30 { - border-bottom: 1px solid #eee; -} - -.emotion-20 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #774dd7; -} - -.emotion-22 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #1ea7fd; -} - -.emotion-22 button { - color: #37d5d3; -} - -.emotion-22 span { - white-space: pre; -} - -.emotion-24 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; -} - -.emotion-28 { - padding: 2px 6px; - text-align: left; - padding: 8px 16px; -} -
                 
                   
             
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -1099,188 +603,6 @@ exports[`Storyshots Addons|Info/ForwardRef Displays forwarded ref components cor `; exports[`Storyshots Addons|Info/GitHub issues #1814 1`] = ` -.emotion-6 { - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: relative; - overflow: auto; -} - -.emotion-4 code { - padding-right: 10px; - opacity: 0.7; -} - -.emotion-4 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-4 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.string { - color: #A31515; -} - -.emotion-4 * .token.punctuation { - color: #393A34; -} - -.emotion-4 * .token.operator { - color: #393A34; -} - -.emotion-4 * .token.url { - color: #36acaa; -} - -.emotion-4 * .token.symbol { - color: #36acaa; -} - -.emotion-4 * .token.number { - color: #36acaa; -} - -.emotion-4 * .token.boolean { - color: #36acaa; -} - -.emotion-4 * .token.variable { - color: #36acaa; -} - -.emotion-4 * .token.constant { - color: #36acaa; -} - -.emotion-4 * .token.inserted { - color: #36acaa; -} - -.emotion-4 * .token.atrule { - color: #0000ff; -} - -.emotion-4 * .token.keyword { - color: #0000ff; -} - -.emotion-4 * .token.attr-value { - color: #0000ff; -} - -.emotion-4 * .token.function { - color: #393A34; -} - -.emotion-4 * .token.deleted { - color: #9a050f; -} - -.emotion-4 * .token.important { - font-weight: bold; -} - -.emotion-4 * .token.bold { - font-weight: bold; -} - -.emotion-4 * .token.italic { - font-style: italic; -} - -.emotion-4 * .token.class-name { - color: #2B91AF; -} - -.emotion-4 * .token.tag { - color: #800000; -} - -.emotion-4 * .token.selector { - color: #800000; -} - -.emotion-4 * .token.attr-name { - color: #ff0000; -} - -.emotion-4 * .token.property { - color: #ff0000; -} - -.emotion-4 * .token.regex { - color: #ff0000; -} - -.emotion-4 * .token.entity { - color: #ff0000; -} - -.emotion-4 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-4 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-4 * .language-json .token.number { - color: #0000ff; -} - -.emotion-4 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-4 * .namespace { - opacity: 0.7; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} -
                 
                   
   
                 
                   
             
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -2117,254 +1191,6 @@ exports[`Storyshots Addons|Info/JSX Displays JSX in description 1`] = ` `; exports[`Storyshots Addons|Info/Markdown Displays Markdown in description 1`] = ` -.emotion-6 { - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: relative; - overflow: auto; -} - -.emotion-4 code { - padding-right: 10px; - opacity: 0.7; -} - -.emotion-4 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-4 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.string { - color: #A31515; -} - -.emotion-4 * .token.punctuation { - color: #393A34; -} - -.emotion-4 * .token.operator { - color: #393A34; -} - -.emotion-4 * .token.url { - color: #36acaa; -} - -.emotion-4 * .token.symbol { - color: #36acaa; -} - -.emotion-4 * .token.number { - color: #36acaa; -} - -.emotion-4 * .token.boolean { - color: #36acaa; -} - -.emotion-4 * .token.variable { - color: #36acaa; -} - -.emotion-4 * .token.constant { - color: #36acaa; -} - -.emotion-4 * .token.inserted { - color: #36acaa; -} - -.emotion-4 * .token.atrule { - color: #0000ff; -} - -.emotion-4 * .token.keyword { - color: #0000ff; -} - -.emotion-4 * .token.attr-value { - color: #0000ff; -} - -.emotion-4 * .token.function { - color: #393A34; -} - -.emotion-4 * .token.deleted { - color: #9a050f; -} - -.emotion-4 * .token.important { - font-weight: bold; -} - -.emotion-4 * .token.bold { - font-weight: bold; -} - -.emotion-4 * .token.italic { - font-style: italic; -} - -.emotion-4 * .token.class-name { - color: #2B91AF; -} - -.emotion-4 * .token.tag { - color: #800000; -} - -.emotion-4 * .token.selector { - color: #800000; -} - -.emotion-4 * .token.attr-name { - color: #ff0000; -} - -.emotion-4 * .token.property { - color: #ff0000; -} - -.emotion-4 * .token.regex { - color: #ff0000; -} - -.emotion-4 * .token.entity { - color: #ff0000; -} - -.emotion-4 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-4 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-4 * .language-json .token.number { - color: #0000ff; -} - -.emotion-4 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-4 * .namespace { - opacity: 0.7; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-70 { - border-collapse: collapse; - margin-top: 16px; - width: auto; - table-layout: auto; -} - -.emotion-18 { - border-bottom: 1px solid rgba(0,0,0,0.1); -} - -.emotion-8 { - padding: 2px 6px; - line-height: 18px; - vertical-align: middle; - padding: 8px 16px; -} - -.emotion-68 { - font-size: 14px; -} - -.emotion-30 { - border-bottom: 1px solid #eee; -} - -.emotion-20 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #774dd7; -} - -.emotion-22 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #1ea7fd; -} - -.emotion-22 button { - color: #37d5d3; -} - -.emotion-22 span { - white-space: pre; -} - -.emotion-24 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; -} - -.emotion-28 { - padding: 2px 6px; - text-align: left; - padding: 8px 16px; -} -
                 
                   
             
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -2753,254 +1579,6 @@ exports[`Storyshots Addons|Info/Markdown Displays Markdown in description 1`] = `; exports[`Storyshots Addons|Info/Markdown From external Markdown file 1`] = ` -.emotion-6 { - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: relative; - overflow: auto; -} - -.emotion-4 code { - padding-right: 10px; - opacity: 0.7; -} - -.emotion-4 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-4 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.string { - color: #A31515; -} - -.emotion-4 * .token.punctuation { - color: #393A34; -} - -.emotion-4 * .token.operator { - color: #393A34; -} - -.emotion-4 * .token.url { - color: #36acaa; -} - -.emotion-4 * .token.symbol { - color: #36acaa; -} - -.emotion-4 * .token.number { - color: #36acaa; -} - -.emotion-4 * .token.boolean { - color: #36acaa; -} - -.emotion-4 * .token.variable { - color: #36acaa; -} - -.emotion-4 * .token.constant { - color: #36acaa; -} - -.emotion-4 * .token.inserted { - color: #36acaa; -} - -.emotion-4 * .token.atrule { - color: #0000ff; -} - -.emotion-4 * .token.keyword { - color: #0000ff; -} - -.emotion-4 * .token.attr-value { - color: #0000ff; -} - -.emotion-4 * .token.function { - color: #393A34; -} - -.emotion-4 * .token.deleted { - color: #9a050f; -} - -.emotion-4 * .token.important { - font-weight: bold; -} - -.emotion-4 * .token.bold { - font-weight: bold; -} - -.emotion-4 * .token.italic { - font-style: italic; -} - -.emotion-4 * .token.class-name { - color: #2B91AF; -} - -.emotion-4 * .token.tag { - color: #800000; -} - -.emotion-4 * .token.selector { - color: #800000; -} - -.emotion-4 * .token.attr-name { - color: #ff0000; -} - -.emotion-4 * .token.property { - color: #ff0000; -} - -.emotion-4 * .token.regex { - color: #ff0000; -} - -.emotion-4 * .token.entity { - color: #ff0000; -} - -.emotion-4 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-4 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-4 * .language-json .token.number { - color: #0000ff; -} - -.emotion-4 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-4 * .namespace { - opacity: 0.7; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-70 { - border-collapse: collapse; - margin-top: 16px; - width: auto; - table-layout: auto; -} - -.emotion-18 { - border-bottom: 1px solid rgba(0,0,0,0.1); -} - -.emotion-8 { - padding: 2px 6px; - line-height: 18px; - vertical-align: middle; - padding: 8px 16px; -} - -.emotion-68 { - font-size: 14px; -} - -.emotion-30 { - border-bottom: 1px solid #eee; -} - -.emotion-20 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #774dd7; -} - -.emotion-22 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #1ea7fd; -} - -.emotion-22 button { - color: #37d5d3; -} - -.emotion-22 span { - white-space: pre; -} - -.emotion-24 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; -} - -.emotion-28 { - padding: 2px 6px; - text-align: left; - padding: 8px 16px; -} -
                 
                   
             
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -3369,254 +1947,6 @@ exports[`Storyshots Addons|Info/Markdown From external Markdown file 1`] = ` `; exports[`Storyshots Addons|Info/Markdown From internal Markdown file 1`] = ` -.emotion-6 { - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: relative; - overflow: auto; -} - -.emotion-4 code { - padding-right: 10px; - opacity: 0.7; -} - -.emotion-4 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-4 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.string { - color: #A31515; -} - -.emotion-4 * .token.punctuation { - color: #393A34; -} - -.emotion-4 * .token.operator { - color: #393A34; -} - -.emotion-4 * .token.url { - color: #36acaa; -} - -.emotion-4 * .token.symbol { - color: #36acaa; -} - -.emotion-4 * .token.number { - color: #36acaa; -} - -.emotion-4 * .token.boolean { - color: #36acaa; -} - -.emotion-4 * .token.variable { - color: #36acaa; -} - -.emotion-4 * .token.constant { - color: #36acaa; -} - -.emotion-4 * .token.inserted { - color: #36acaa; -} - -.emotion-4 * .token.atrule { - color: #0000ff; -} - -.emotion-4 * .token.keyword { - color: #0000ff; -} - -.emotion-4 * .token.attr-value { - color: #0000ff; -} - -.emotion-4 * .token.function { - color: #393A34; -} - -.emotion-4 * .token.deleted { - color: #9a050f; -} - -.emotion-4 * .token.important { - font-weight: bold; -} - -.emotion-4 * .token.bold { - font-weight: bold; -} - -.emotion-4 * .token.italic { - font-style: italic; -} - -.emotion-4 * .token.class-name { - color: #2B91AF; -} - -.emotion-4 * .token.tag { - color: #800000; -} - -.emotion-4 * .token.selector { - color: #800000; -} - -.emotion-4 * .token.attr-name { - color: #ff0000; -} - -.emotion-4 * .token.property { - color: #ff0000; -} - -.emotion-4 * .token.regex { - color: #ff0000; -} - -.emotion-4 * .token.entity { - color: #ff0000; -} - -.emotion-4 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-4 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-4 * .language-json .token.number { - color: #0000ff; -} - -.emotion-4 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-4 * .namespace { - opacity: 0.7; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-70 { - border-collapse: collapse; - margin-top: 16px; - width: auto; - table-layout: auto; -} - -.emotion-18 { - border-bottom: 1px solid rgba(0,0,0,0.1); -} - -.emotion-8 { - padding: 2px 6px; - line-height: 18px; - vertical-align: middle; - padding: 8px 16px; -} - -.emotion-68 { - font-size: 14px; -} - -.emotion-30 { - border-bottom: 1px solid #eee; -} - -.emotion-20 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #774dd7; -} - -.emotion-22 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #1ea7fd; -} - -.emotion-22 button { - color: #37d5d3; -} - -.emotion-22 span { - white-space: pre; -} - -.emotion-24 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; -} - -.emotion-28 { - padding: 2px 6px; - text-align: left; - padding: 8px 16px; -} -
                 
                   
             
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -3997,188 +2327,6 @@ exports[`Storyshots Addons|Info/Markdown From internal Markdown file 1`] = ` `; exports[`Storyshots Addons|Info/Options.TableComponent Use a custom component for the table 1`] = ` -.emotion-6 { - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: relative; - overflow: auto; -} - -.emotion-4 code { - padding-right: 10px; - opacity: 0.7; -} - -.emotion-4 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-4 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.string { - color: #A31515; -} - -.emotion-4 * .token.punctuation { - color: #393A34; -} - -.emotion-4 * .token.operator { - color: #393A34; -} - -.emotion-4 * .token.url { - color: #36acaa; -} - -.emotion-4 * .token.symbol { - color: #36acaa; -} - -.emotion-4 * .token.number { - color: #36acaa; -} - -.emotion-4 * .token.boolean { - color: #36acaa; -} - -.emotion-4 * .token.variable { - color: #36acaa; -} - -.emotion-4 * .token.constant { - color: #36acaa; -} - -.emotion-4 * .token.inserted { - color: #36acaa; -} - -.emotion-4 * .token.atrule { - color: #0000ff; -} - -.emotion-4 * .token.keyword { - color: #0000ff; -} - -.emotion-4 * .token.attr-value { - color: #0000ff; -} - -.emotion-4 * .token.function { - color: #393A34; -} - -.emotion-4 * .token.deleted { - color: #9a050f; -} - -.emotion-4 * .token.important { - font-weight: bold; -} - -.emotion-4 * .token.bold { - font-weight: bold; -} - -.emotion-4 * .token.italic { - font-style: italic; -} - -.emotion-4 * .token.class-name { - color: #2B91AF; -} - -.emotion-4 * .token.tag { - color: #800000; -} - -.emotion-4 * .token.selector { - color: #800000; -} - -.emotion-4 * .token.attr-name { - color: #ff0000; -} - -.emotion-4 * .token.property { - color: #ff0000; -} - -.emotion-4 * .token.regex { - color: #ff0000; -} - -.emotion-4 * .token.entity { - color: #ff0000; -} - -.emotion-4 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-4 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-4 * .language-json .token.number { - color: #0000ff; -} - -.emotion-4 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-4 * .namespace { - opacity: 0.7; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} -
                 
                   
   
                 
                   
             
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -4905,254 +2805,6 @@ exports[`Storyshots Addons|Info/Options.excludedPropTypes Excludes propTypes tha `; exports[`Storyshots Addons|Info/Options.header Shows or hides Info Addon header 1`] = ` -.emotion-6 { - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: relative; - overflow: auto; -} - -.emotion-4 code { - padding-right: 10px; - opacity: 0.7; -} - -.emotion-4 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-4 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.string { - color: #A31515; -} - -.emotion-4 * .token.punctuation { - color: #393A34; -} - -.emotion-4 * .token.operator { - color: #393A34; -} - -.emotion-4 * .token.url { - color: #36acaa; -} - -.emotion-4 * .token.symbol { - color: #36acaa; -} - -.emotion-4 * .token.number { - color: #36acaa; -} - -.emotion-4 * .token.boolean { - color: #36acaa; -} - -.emotion-4 * .token.variable { - color: #36acaa; -} - -.emotion-4 * .token.constant { - color: #36acaa; -} - -.emotion-4 * .token.inserted { - color: #36acaa; -} - -.emotion-4 * .token.atrule { - color: #0000ff; -} - -.emotion-4 * .token.keyword { - color: #0000ff; -} - -.emotion-4 * .token.attr-value { - color: #0000ff; -} - -.emotion-4 * .token.function { - color: #393A34; -} - -.emotion-4 * .token.deleted { - color: #9a050f; -} - -.emotion-4 * .token.important { - font-weight: bold; -} - -.emotion-4 * .token.bold { - font-weight: bold; -} - -.emotion-4 * .token.italic { - font-style: italic; -} - -.emotion-4 * .token.class-name { - color: #2B91AF; -} - -.emotion-4 * .token.tag { - color: #800000; -} - -.emotion-4 * .token.selector { - color: #800000; -} - -.emotion-4 * .token.attr-name { - color: #ff0000; -} - -.emotion-4 * .token.property { - color: #ff0000; -} - -.emotion-4 * .token.regex { - color: #ff0000; -} - -.emotion-4 * .token.entity { - color: #ff0000; -} - -.emotion-4 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-4 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-4 * .language-json .token.number { - color: #0000ff; -} - -.emotion-4 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-4 * .namespace { - opacity: 0.7; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-70 { - border-collapse: collapse; - margin-top: 16px; - width: auto; - table-layout: auto; -} - -.emotion-18 { - border-bottom: 1px solid rgba(0,0,0,0.1); -} - -.emotion-8 { - padding: 2px 6px; - line-height: 18px; - vertical-align: middle; - padding: 8px 16px; -} - -.emotion-68 { - font-size: 14px; -} - -.emotion-30 { - border-bottom: 1px solid #eee; -} - -.emotion-20 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #774dd7; -} - -.emotion-22 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #1ea7fd; -} - -.emotion-22 button { - color: #37d5d3; -} - -.emotion-22 span { - white-space: pre; -} - -.emotion-24 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; -} - -.emotion-28 { - padding: 2px 6px; - text-align: left; - padding: 8px 16px; -} -
                 
                   
             
Property Type Required Default Description
disabled bool - false
onClick func - onClick
style other - {}
@@ -5447,254 +3099,6 @@ exports[`Storyshots Addons|Info/Options.header Shows or hides Info Addon header `; exports[`Storyshots Addons|Info/Options.inline Inlines component inside story 1`] = ` -.emotion-6 { - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: relative; - overflow: auto; -} - -.emotion-4 code { - padding-right: 10px; - opacity: 0.7; -} - -.emotion-4 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-4 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.string { - color: #A31515; -} - -.emotion-4 * .token.punctuation { - color: #393A34; -} - -.emotion-4 * .token.operator { - color: #393A34; -} - -.emotion-4 * .token.url { - color: #36acaa; -} - -.emotion-4 * .token.symbol { - color: #36acaa; -} - -.emotion-4 * .token.number { - color: #36acaa; -} - -.emotion-4 * .token.boolean { - color: #36acaa; -} - -.emotion-4 * .token.variable { - color: #36acaa; -} - -.emotion-4 * .token.constant { - color: #36acaa; -} - -.emotion-4 * .token.inserted { - color: #36acaa; -} - -.emotion-4 * .token.atrule { - color: #0000ff; -} - -.emotion-4 * .token.keyword { - color: #0000ff; -} - -.emotion-4 * .token.attr-value { - color: #0000ff; -} - -.emotion-4 * .token.function { - color: #393A34; -} - -.emotion-4 * .token.deleted { - color: #9a050f; -} - -.emotion-4 * .token.important { - font-weight: bold; -} - -.emotion-4 * .token.bold { - font-weight: bold; -} - -.emotion-4 * .token.italic { - font-style: italic; -} - -.emotion-4 * .token.class-name { - color: #2B91AF; -} - -.emotion-4 * .token.tag { - color: #800000; -} - -.emotion-4 * .token.selector { - color: #800000; -} - -.emotion-4 * .token.attr-name { - color: #ff0000; -} - -.emotion-4 * .token.property { - color: #ff0000; -} - -.emotion-4 * .token.regex { - color: #ff0000; -} - -.emotion-4 * .token.entity { - color: #ff0000; -} - -.emotion-4 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-4 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-4 * .language-json .token.number { - color: #0000ff; -} - -.emotion-4 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-4 * .namespace { - opacity: 0.7; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-70 { - border-collapse: collapse; - margin-top: 16px; - width: auto; - table-layout: auto; -} - -.emotion-18 { - border-bottom: 1px solid rgba(0,0,0,0.1); -} - -.emotion-8 { - padding: 2px 6px; - line-height: 18px; - vertical-align: middle; - padding: 8px 16px; -} - -.emotion-68 { - font-size: 14px; -} - -.emotion-30 { - border-bottom: 1px solid #eee; -} - -.emotion-20 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #774dd7; -} - -.emotion-22 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #1ea7fd; -} - -.emotion-22 button { - color: #37d5d3; -} - -.emotion-22 span { - white-space: pre; -} - -.emotion-24 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; -} - -.emotion-28 { - padding: 2px 6px; - text-align: left; - padding: 8px 16px; -} -
               
                 
           
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -5990,254 +3394,6 @@ exports[`Storyshots Addons|Info/Options.inline Inlines component inside story 1` `; exports[`Storyshots Addons|Info/Options.propTables Shows additional component prop tables 1`] = ` -.emotion-6 { - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: relative; - overflow: auto; -} - -.emotion-4 code { - padding-right: 10px; - opacity: 0.7; -} - -.emotion-4 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-4 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.string { - color: #A31515; -} - -.emotion-4 * .token.punctuation { - color: #393A34; -} - -.emotion-4 * .token.operator { - color: #393A34; -} - -.emotion-4 * .token.url { - color: #36acaa; -} - -.emotion-4 * .token.symbol { - color: #36acaa; -} - -.emotion-4 * .token.number { - color: #36acaa; -} - -.emotion-4 * .token.boolean { - color: #36acaa; -} - -.emotion-4 * .token.variable { - color: #36acaa; -} - -.emotion-4 * .token.constant { - color: #36acaa; -} - -.emotion-4 * .token.inserted { - color: #36acaa; -} - -.emotion-4 * .token.atrule { - color: #0000ff; -} - -.emotion-4 * .token.keyword { - color: #0000ff; -} - -.emotion-4 * .token.attr-value { - color: #0000ff; -} - -.emotion-4 * .token.function { - color: #393A34; -} - -.emotion-4 * .token.deleted { - color: #9a050f; -} - -.emotion-4 * .token.important { - font-weight: bold; -} - -.emotion-4 * .token.bold { - font-weight: bold; -} - -.emotion-4 * .token.italic { - font-style: italic; -} - -.emotion-4 * .token.class-name { - color: #2B91AF; -} - -.emotion-4 * .token.tag { - color: #800000; -} - -.emotion-4 * .token.selector { - color: #800000; -} - -.emotion-4 * .token.attr-name { - color: #ff0000; -} - -.emotion-4 * .token.property { - color: #ff0000; -} - -.emotion-4 * .token.regex { - color: #ff0000; -} - -.emotion-4 * .token.entity { - color: #ff0000; -} - -.emotion-4 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-4 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-4 * .language-json .token.number { - color: #0000ff; -} - -.emotion-4 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-4 * .namespace { - opacity: 0.7; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-70 { - border-collapse: collapse; - margin-top: 16px; - width: auto; - table-layout: auto; -} - -.emotion-18 { - border-bottom: 1px solid rgba(0,0,0,0.1); -} - -.emotion-8 { - padding: 2px 6px; - line-height: 18px; - vertical-align: middle; - padding: 8px 16px; -} - -.emotion-68 { - font-size: 14px; -} - -.emotion-30 { - border-bottom: 1px solid #eee; -} - -.emotion-20 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #774dd7; -} - -.emotion-22 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #1ea7fd; -} - -.emotion-22 button { - color: #37d5d3; -} - -.emotion-22 span { - white-space: pre; -} - -.emotion-24 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; -} - -.emotion-28 { - padding: 2px 6px; - text-align: left; - padding: 8px 16px; -} -
                 
                   
             
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -6545,102 +3701,102 @@ exports[`Storyshots Addons|Info/Options.propTables Shows additional component pr "FlowTypeButton" Component
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -6654,72 +3810,6 @@ exports[`Storyshots Addons|Info/Options.propTables Shows additional component pr `; exports[`Storyshots Addons|Info/Options.source Shows or hides Info Addon source 1`] = ` -.emotion-62 { - border-collapse: collapse; - margin-top: 16px; - width: auto; - table-layout: auto; -} - -.emotion-10 { - border-bottom: 1px solid rgba(0,0,0,0.1); -} - -.emotion-0 { - padding: 2px 6px; - line-height: 18px; - vertical-align: middle; - padding: 8px 16px; -} - -.emotion-60 { - font-size: 14px; -} - -.emotion-22 { - border-bottom: 1px solid #eee; -} - -.emotion-12 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #774dd7; -} - -.emotion-14 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #1ea7fd; -} - -.emotion-14 button { - color: #37d5d3; -} - -.emotion-14 span { - white-space: pre; -} - -.emotion-16 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; -} - -.emotion-20 { - padding: 2px 6px; - text-align: left; - padding: 8px 16px; -} -
Property Type Required Default Description
disabled unknown - false
onClick unknown - onClick
@@ -6957,254 +4047,6 @@ exports[`Storyshots Addons|Info/Options.source Shows or hides Info Addon source `; exports[`Storyshots Addons|Info/Options.styles Extend info styles with an object 1`] = ` -.emotion-6 { - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: relative; - overflow: auto; -} - -.emotion-4 code { - padding-right: 10px; - opacity: 0.7; -} - -.emotion-4 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-4 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.string { - color: #A31515; -} - -.emotion-4 * .token.punctuation { - color: #393A34; -} - -.emotion-4 * .token.operator { - color: #393A34; -} - -.emotion-4 * .token.url { - color: #36acaa; -} - -.emotion-4 * .token.symbol { - color: #36acaa; -} - -.emotion-4 * .token.number { - color: #36acaa; -} - -.emotion-4 * .token.boolean { - color: #36acaa; -} - -.emotion-4 * .token.variable { - color: #36acaa; -} - -.emotion-4 * .token.constant { - color: #36acaa; -} - -.emotion-4 * .token.inserted { - color: #36acaa; -} - -.emotion-4 * .token.atrule { - color: #0000ff; -} - -.emotion-4 * .token.keyword { - color: #0000ff; -} - -.emotion-4 * .token.attr-value { - color: #0000ff; -} - -.emotion-4 * .token.function { - color: #393A34; -} - -.emotion-4 * .token.deleted { - color: #9a050f; -} - -.emotion-4 * .token.important { - font-weight: bold; -} - -.emotion-4 * .token.bold { - font-weight: bold; -} - -.emotion-4 * .token.italic { - font-style: italic; -} - -.emotion-4 * .token.class-name { - color: #2B91AF; -} - -.emotion-4 * .token.tag { - color: #800000; -} - -.emotion-4 * .token.selector { - color: #800000; -} - -.emotion-4 * .token.attr-name { - color: #ff0000; -} - -.emotion-4 * .token.property { - color: #ff0000; -} - -.emotion-4 * .token.regex { - color: #ff0000; -} - -.emotion-4 * .token.entity { - color: #ff0000; -} - -.emotion-4 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-4 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-4 * .language-json .token.number { - color: #0000ff; -} - -.emotion-4 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-4 * .namespace { - opacity: 0.7; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-70 { - border-collapse: collapse; - margin-top: 16px; - width: auto; - table-layout: auto; -} - -.emotion-18 { - border-bottom: 1px solid rgba(0,0,0,0.1); -} - -.emotion-8 { - padding: 2px 6px; - line-height: 18px; - vertical-align: middle; - padding: 8px 16px; -} - -.emotion-68 { - font-size: 14px; -} - -.emotion-30 { - border-bottom: 1px solid #eee; -} - -.emotion-20 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #774dd7; -} - -.emotion-22 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #1ea7fd; -} - -.emotion-22 button { - color: #37d5d3; -} - -.emotion-22 span { - white-space: pre; -} - -.emotion-24 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; -} - -.emotion-28 { - padding: 2px 6px; - text-align: left; - padding: 8px 16px; -} -
                 
                   
             
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -7504,254 +4346,6 @@ exports[`Storyshots Addons|Info/Options.styles Extend info styles with an object `; exports[`Storyshots Addons|Info/Options.styles Full control over styles using a function 1`] = ` -.emotion-6 { - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: relative; - overflow: auto; -} - -.emotion-4 code { - padding-right: 10px; - opacity: 0.7; -} - -.emotion-4 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-4 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.string { - color: #A31515; -} - -.emotion-4 * .token.punctuation { - color: #393A34; -} - -.emotion-4 * .token.operator { - color: #393A34; -} - -.emotion-4 * .token.url { - color: #36acaa; -} - -.emotion-4 * .token.symbol { - color: #36acaa; -} - -.emotion-4 * .token.number { - color: #36acaa; -} - -.emotion-4 * .token.boolean { - color: #36acaa; -} - -.emotion-4 * .token.variable { - color: #36acaa; -} - -.emotion-4 * .token.constant { - color: #36acaa; -} - -.emotion-4 * .token.inserted { - color: #36acaa; -} - -.emotion-4 * .token.atrule { - color: #0000ff; -} - -.emotion-4 * .token.keyword { - color: #0000ff; -} - -.emotion-4 * .token.attr-value { - color: #0000ff; -} - -.emotion-4 * .token.function { - color: #393A34; -} - -.emotion-4 * .token.deleted { - color: #9a050f; -} - -.emotion-4 * .token.important { - font-weight: bold; -} - -.emotion-4 * .token.bold { - font-weight: bold; -} - -.emotion-4 * .token.italic { - font-style: italic; -} - -.emotion-4 * .token.class-name { - color: #2B91AF; -} - -.emotion-4 * .token.tag { - color: #800000; -} - -.emotion-4 * .token.selector { - color: #800000; -} - -.emotion-4 * .token.attr-name { - color: #ff0000; -} - -.emotion-4 * .token.property { - color: #ff0000; -} - -.emotion-4 * .token.regex { - color: #ff0000; -} - -.emotion-4 * .token.entity { - color: #ff0000; -} - -.emotion-4 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-4 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-4 * .language-json .token.number { - color: #0000ff; -} - -.emotion-4 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-4 * .namespace { - opacity: 0.7; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-70 { - border-collapse: collapse; - margin-top: 16px; - width: auto; - table-layout: auto; -} - -.emotion-18 { - border-bottom: 1px solid rgba(0,0,0,0.1); -} - -.emotion-8 { - padding: 2px 6px; - line-height: 18px; - vertical-align: middle; - padding: 8px 16px; -} - -.emotion-68 { - font-size: 14px; -} - -.emotion-30 { - border-bottom: 1px solid #eee; -} - -.emotion-20 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #774dd7; -} - -.emotion-22 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #1ea7fd; -} - -.emotion-22 button { - color: #37d5d3; -} - -.emotion-22 span { - white-space: pre; -} - -.emotion-24 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; -} - -.emotion-28 { - padding: 2px 6px; - text-align: left; - padding: 8px 16px; -} -
                 
                   
             
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -8059,254 +4653,6 @@ exports[`Storyshots Addons|Info/Parameters Disable the addon entirely 1`] = ` `; exports[`Storyshots Addons|Info/Parameters Overwrite the parameters with markdown variable 1`] = ` -.emotion-6 { - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: relative; - overflow: auto; -} - -.emotion-4 code { - padding-right: 10px; - opacity: 0.7; -} - -.emotion-4 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-4 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.string { - color: #A31515; -} - -.emotion-4 * .token.punctuation { - color: #393A34; -} - -.emotion-4 * .token.operator { - color: #393A34; -} - -.emotion-4 * .token.url { - color: #36acaa; -} - -.emotion-4 * .token.symbol { - color: #36acaa; -} - -.emotion-4 * .token.number { - color: #36acaa; -} - -.emotion-4 * .token.boolean { - color: #36acaa; -} - -.emotion-4 * .token.variable { - color: #36acaa; -} - -.emotion-4 * .token.constant { - color: #36acaa; -} - -.emotion-4 * .token.inserted { - color: #36acaa; -} - -.emotion-4 * .token.atrule { - color: #0000ff; -} - -.emotion-4 * .token.keyword { - color: #0000ff; -} - -.emotion-4 * .token.attr-value { - color: #0000ff; -} - -.emotion-4 * .token.function { - color: #393A34; -} - -.emotion-4 * .token.deleted { - color: #9a050f; -} - -.emotion-4 * .token.important { - font-weight: bold; -} - -.emotion-4 * .token.bold { - font-weight: bold; -} - -.emotion-4 * .token.italic { - font-style: italic; -} - -.emotion-4 * .token.class-name { - color: #2B91AF; -} - -.emotion-4 * .token.tag { - color: #800000; -} - -.emotion-4 * .token.selector { - color: #800000; -} - -.emotion-4 * .token.attr-name { - color: #ff0000; -} - -.emotion-4 * .token.property { - color: #ff0000; -} - -.emotion-4 * .token.regex { - color: #ff0000; -} - -.emotion-4 * .token.entity { - color: #ff0000; -} - -.emotion-4 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-4 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-4 * .language-json .token.number { - color: #0000ff; -} - -.emotion-4 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-4 * .namespace { - opacity: 0.7; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-70 { - border-collapse: collapse; - margin-top: 16px; - width: auto; - table-layout: auto; -} - -.emotion-18 { - border-bottom: 1px solid rgba(0,0,0,0.1); -} - -.emotion-8 { - padding: 2px 6px; - line-height: 18px; - vertical-align: middle; - padding: 8px 16px; -} - -.emotion-68 { - font-size: 14px; -} - -.emotion-30 { - border-bottom: 1px solid #eee; -} - -.emotion-20 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #774dd7; -} - -.emotion-22 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #1ea7fd; -} - -.emotion-22 button { - color: #37d5d3; -} - -.emotion-22 span { - white-space: pre; -} - -.emotion-24 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; -} - -.emotion-28 { - padding: 2px 6px; - text-align: left; - padding: 8px 16px; -} -
                 
                   
             
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -8695,254 +5041,6 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the parameters with markdow `; exports[`Storyshots Addons|Info/Parameters Overwrite the text parameter with markdown inline 1`] = ` -.emotion-6 { - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: relative; - overflow: auto; -} - -.emotion-4 code { - padding-right: 10px; - opacity: 0.7; -} - -.emotion-4 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-4 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.string { - color: #A31515; -} - -.emotion-4 * .token.punctuation { - color: #393A34; -} - -.emotion-4 * .token.operator { - color: #393A34; -} - -.emotion-4 * .token.url { - color: #36acaa; -} - -.emotion-4 * .token.symbol { - color: #36acaa; -} - -.emotion-4 * .token.number { - color: #36acaa; -} - -.emotion-4 * .token.boolean { - color: #36acaa; -} - -.emotion-4 * .token.variable { - color: #36acaa; -} - -.emotion-4 * .token.constant { - color: #36acaa; -} - -.emotion-4 * .token.inserted { - color: #36acaa; -} - -.emotion-4 * .token.atrule { - color: #0000ff; -} - -.emotion-4 * .token.keyword { - color: #0000ff; -} - -.emotion-4 * .token.attr-value { - color: #0000ff; -} - -.emotion-4 * .token.function { - color: #393A34; -} - -.emotion-4 * .token.deleted { - color: #9a050f; -} - -.emotion-4 * .token.important { - font-weight: bold; -} - -.emotion-4 * .token.bold { - font-weight: bold; -} - -.emotion-4 * .token.italic { - font-style: italic; -} - -.emotion-4 * .token.class-name { - color: #2B91AF; -} - -.emotion-4 * .token.tag { - color: #800000; -} - -.emotion-4 * .token.selector { - color: #800000; -} - -.emotion-4 * .token.attr-name { - color: #ff0000; -} - -.emotion-4 * .token.property { - color: #ff0000; -} - -.emotion-4 * .token.regex { - color: #ff0000; -} - -.emotion-4 * .token.entity { - color: #ff0000; -} - -.emotion-4 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-4 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-4 * .language-json .token.number { - color: #0000ff; -} - -.emotion-4 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-4 * .namespace { - opacity: 0.7; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-58 { - border-collapse: collapse; - margin-top: 16px; - width: auto; - table-layout: auto; -} - -.emotion-18 { - border-bottom: 1px solid rgba(0,0,0,0.1); -} - -.emotion-8 { - padding: 2px 6px; - line-height: 18px; - vertical-align: middle; - padding: 8px 16px; -} - -.emotion-56 { - font-size: 14px; -} - -.emotion-30 { - border-bottom: 1px solid #eee; -} - -.emotion-20 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #774dd7; -} - -.emotion-22 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #1ea7fd; -} - -.emotion-22 button { - color: #37d5d3; -} - -.emotion-22 span { - white-space: pre; -} - -.emotion-24 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; -} - -.emotion-28 { - padding: 2px 6px; - text-align: left; - padding: 8px 16px; -} -
               
                 
           
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -9269,254 +5367,6 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the text parameter with mar `; exports[`Storyshots Addons|Info/Parameters Overwriting and extending the parameters and options set stories-wise 1`] = ` -.emotion-6 { - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: relative; - overflow: auto; -} - -.emotion-4 code { - padding-right: 10px; - opacity: 0.7; -} - -.emotion-4 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-4 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.string { - color: #A31515; -} - -.emotion-4 * .token.punctuation { - color: #393A34; -} - -.emotion-4 * .token.operator { - color: #393A34; -} - -.emotion-4 * .token.url { - color: #36acaa; -} - -.emotion-4 * .token.symbol { - color: #36acaa; -} - -.emotion-4 * .token.number { - color: #36acaa; -} - -.emotion-4 * .token.boolean { - color: #36acaa; -} - -.emotion-4 * .token.variable { - color: #36acaa; -} - -.emotion-4 * .token.constant { - color: #36acaa; -} - -.emotion-4 * .token.inserted { - color: #36acaa; -} - -.emotion-4 * .token.atrule { - color: #0000ff; -} - -.emotion-4 * .token.keyword { - color: #0000ff; -} - -.emotion-4 * .token.attr-value { - color: #0000ff; -} - -.emotion-4 * .token.function { - color: #393A34; -} - -.emotion-4 * .token.deleted { - color: #9a050f; -} - -.emotion-4 * .token.important { - font-weight: bold; -} - -.emotion-4 * .token.bold { - font-weight: bold; -} - -.emotion-4 * .token.italic { - font-style: italic; -} - -.emotion-4 * .token.class-name { - color: #2B91AF; -} - -.emotion-4 * .token.tag { - color: #800000; -} - -.emotion-4 * .token.selector { - color: #800000; -} - -.emotion-4 * .token.attr-name { - color: #ff0000; -} - -.emotion-4 * .token.property { - color: #ff0000; -} - -.emotion-4 * .token.regex { - color: #ff0000; -} - -.emotion-4 * .token.entity { - color: #ff0000; -} - -.emotion-4 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-4 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-4 * .language-json .token.number { - color: #0000ff; -} - -.emotion-4 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-4 * .namespace { - opacity: 0.7; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-58 { - border-collapse: collapse; - margin-top: 16px; - width: auto; - table-layout: auto; -} - -.emotion-18 { - border-bottom: 1px solid rgba(0,0,0,0.1); -} - -.emotion-8 { - padding: 2px 6px; - line-height: 18px; - vertical-align: middle; - padding: 8px 16px; -} - -.emotion-56 { - font-size: 14px; -} - -.emotion-30 { - border-bottom: 1px solid #eee; -} - -.emotion-20 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #774dd7; -} - -.emotion-22 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #1ea7fd; -} - -.emotion-22 button { - color: #37d5d3; -} - -.emotion-22 span { - white-space: pre; -} - -.emotion-24 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; -} - -.emotion-28 { - padding: 2px 6px; - text-align: left; - padding: 8px 16px; -} -
               
                 
           
Property Type Required Default Description
disabled bool - false
onClick func - onClick
style other - {}
@@ -9783,254 +5633,6 @@ exports[`Storyshots Addons|Info/Parameters Overwriting and extending the paramet `; exports[`Storyshots Addons|Info/Parameters Using paramaters across all stories 1`] = ` -.emotion-6 { - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: relative; - overflow: auto; -} - -.emotion-4 code { - padding-right: 10px; - opacity: 0.7; -} - -.emotion-4 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-4 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.string { - color: #A31515; -} - -.emotion-4 * .token.punctuation { - color: #393A34; -} - -.emotion-4 * .token.operator { - color: #393A34; -} - -.emotion-4 * .token.url { - color: #36acaa; -} - -.emotion-4 * .token.symbol { - color: #36acaa; -} - -.emotion-4 * .token.number { - color: #36acaa; -} - -.emotion-4 * .token.boolean { - color: #36acaa; -} - -.emotion-4 * .token.variable { - color: #36acaa; -} - -.emotion-4 * .token.constant { - color: #36acaa; -} - -.emotion-4 * .token.inserted { - color: #36acaa; -} - -.emotion-4 * .token.atrule { - color: #0000ff; -} - -.emotion-4 * .token.keyword { - color: #0000ff; -} - -.emotion-4 * .token.attr-value { - color: #0000ff; -} - -.emotion-4 * .token.function { - color: #393A34; -} - -.emotion-4 * .token.deleted { - color: #9a050f; -} - -.emotion-4 * .token.important { - font-weight: bold; -} - -.emotion-4 * .token.bold { - font-weight: bold; -} - -.emotion-4 * .token.italic { - font-style: italic; -} - -.emotion-4 * .token.class-name { - color: #2B91AF; -} - -.emotion-4 * .token.tag { - color: #800000; -} - -.emotion-4 * .token.selector { - color: #800000; -} - -.emotion-4 * .token.attr-name { - color: #ff0000; -} - -.emotion-4 * .token.property { - color: #ff0000; -} - -.emotion-4 * .token.regex { - color: #ff0000; -} - -.emotion-4 * .token.entity { - color: #ff0000; -} - -.emotion-4 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-4 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-4 * .language-json .token.number { - color: #0000ff; -} - -.emotion-4 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-4 * .namespace { - opacity: 0.7; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-70 { - border-collapse: collapse; - margin-top: 16px; - width: auto; - table-layout: auto; -} - -.emotion-18 { - border-bottom: 1px solid rgba(0,0,0,0.1); -} - -.emotion-8 { - padding: 2px 6px; - line-height: 18px; - vertical-align: middle; - padding: 8px 16px; -} - -.emotion-68 { - font-size: 14px; -} - -.emotion-30 { - border-bottom: 1px solid #eee; -} - -.emotion-20 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #774dd7; -} - -.emotion-22 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #1ea7fd; -} - -.emotion-22 button { - color: #37d5d3; -} - -.emotion-22 span { - white-space: pre; -} - -.emotion-24 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; -} - -.emotion-28 { - padding: 2px 6px; - text-align: left; - padding: 8px 16px; -} -
               
                 
           
Property Type Required Default Description
disabled bool - false
onClick func - onClick
style other - {}
@@ -10326,254 +5928,6 @@ exports[`Storyshots Addons|Info/Parameters Using paramaters across all stories 1 `; exports[`Storyshots Addons|Info/React Docgen Comments from Flow declarations 1`] = ` -.emotion-6 { - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: relative; - overflow: auto; -} - -.emotion-4 code { - padding-right: 10px; - opacity: 0.7; -} - -.emotion-4 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-4 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.string { - color: #A31515; -} - -.emotion-4 * .token.punctuation { - color: #393A34; -} - -.emotion-4 * .token.operator { - color: #393A34; -} - -.emotion-4 * .token.url { - color: #36acaa; -} - -.emotion-4 * .token.symbol { - color: #36acaa; -} - -.emotion-4 * .token.number { - color: #36acaa; -} - -.emotion-4 * .token.boolean { - color: #36acaa; -} - -.emotion-4 * .token.variable { - color: #36acaa; -} - -.emotion-4 * .token.constant { - color: #36acaa; -} - -.emotion-4 * .token.inserted { - color: #36acaa; -} - -.emotion-4 * .token.atrule { - color: #0000ff; -} - -.emotion-4 * .token.keyword { - color: #0000ff; -} - -.emotion-4 * .token.attr-value { - color: #0000ff; -} - -.emotion-4 * .token.function { - color: #393A34; -} - -.emotion-4 * .token.deleted { - color: #9a050f; -} - -.emotion-4 * .token.important { - font-weight: bold; -} - -.emotion-4 * .token.bold { - font-weight: bold; -} - -.emotion-4 * .token.italic { - font-style: italic; -} - -.emotion-4 * .token.class-name { - color: #2B91AF; -} - -.emotion-4 * .token.tag { - color: #800000; -} - -.emotion-4 * .token.selector { - color: #800000; -} - -.emotion-4 * .token.attr-name { - color: #ff0000; -} - -.emotion-4 * .token.property { - color: #ff0000; -} - -.emotion-4 * .token.regex { - color: #ff0000; -} - -.emotion-4 * .token.entity { - color: #ff0000; -} - -.emotion-4 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-4 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-4 * .language-json .token.number { - color: #0000ff; -} - -.emotion-4 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-4 * .namespace { - opacity: 0.7; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-46 { - border-collapse: collapse; - margin-top: 16px; - width: auto; - table-layout: auto; -} - -.emotion-18 { - border-bottom: 1px solid rgba(0,0,0,0.1); -} - -.emotion-8 { - padding: 2px 6px; - line-height: 18px; - vertical-align: middle; - padding: 8px 16px; -} - -.emotion-44 { - font-size: 14px; -} - -.emotion-30 { - border-bottom: 1px solid #eee; -} - -.emotion-20 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #774dd7; -} - -.emotion-22 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #1ea7fd; -} - -.emotion-22 button { - color: #37d5d3; -} - -.emotion-22 span { - white-space: pre; -} - -.emotion-24 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; -} - -.emotion-28 { - padding: 2px 6px; - text-align: left; - padding: 8px 16px; -} -
                 
                   
             
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -10882,254 +6236,6 @@ exports[`Storyshots Addons|Info/React Docgen Comments from Flow declarations 1`] `; exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations 1`] = ` -.emotion-6 { - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: relative; - overflow: auto; -} - -.emotion-4 code { - padding-right: 10px; - opacity: 0.7; -} - -.emotion-4 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-4 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.string { - color: #A31515; -} - -.emotion-4 * .token.punctuation { - color: #393A34; -} - -.emotion-4 * .token.operator { - color: #393A34; -} - -.emotion-4 * .token.url { - color: #36acaa; -} - -.emotion-4 * .token.symbol { - color: #36acaa; -} - -.emotion-4 * .token.number { - color: #36acaa; -} - -.emotion-4 * .token.boolean { - color: #36acaa; -} - -.emotion-4 * .token.variable { - color: #36acaa; -} - -.emotion-4 * .token.constant { - color: #36acaa; -} - -.emotion-4 * .token.inserted { - color: #36acaa; -} - -.emotion-4 * .token.atrule { - color: #0000ff; -} - -.emotion-4 * .token.keyword { - color: #0000ff; -} - -.emotion-4 * .token.attr-value { - color: #0000ff; -} - -.emotion-4 * .token.function { - color: #393A34; -} - -.emotion-4 * .token.deleted { - color: #9a050f; -} - -.emotion-4 * .token.important { - font-weight: bold; -} - -.emotion-4 * .token.bold { - font-weight: bold; -} - -.emotion-4 * .token.italic { - font-style: italic; -} - -.emotion-4 * .token.class-name { - color: #2B91AF; -} - -.emotion-4 * .token.tag { - color: #800000; -} - -.emotion-4 * .token.selector { - color: #800000; -} - -.emotion-4 * .token.attr-name { - color: #ff0000; -} - -.emotion-4 * .token.property { - color: #ff0000; -} - -.emotion-4 * .token.regex { - color: #ff0000; -} - -.emotion-4 * .token.entity { - color: #ff0000; -} - -.emotion-4 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-4 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-4 * .language-json .token.number { - color: #0000ff; -} - -.emotion-4 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-4 * .namespace { - opacity: 0.7; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-178 { - border-collapse: collapse; - margin-top: 16px; - width: auto; - table-layout: auto; -} - -.emotion-18 { - border-bottom: 1px solid rgba(0,0,0,0.1); -} - -.emotion-8 { - padding: 2px 6px; - line-height: 18px; - vertical-align: middle; - padding: 8px 16px; -} - -.emotion-176 { - font-size: 14px; -} - -.emotion-30 { - border-bottom: 1px solid #eee; -} - -.emotion-20 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #774dd7; -} - -.emotion-22 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #1ea7fd; -} - -.emotion-22 button { - color: #37d5d3; -} - -.emotion-22 span { - white-space: pre; -} - -.emotion-24 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; -} - -.emotion-28 { - padding: 2px 6px; - text-align: left; - padding: 8px 16px; -} -
                 
                   
             
Property Type Required Default Description
disabled unknown - false
onClick unknown - onClick
@@ -12151,254 +7257,6 @@ exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations `; exports[`Storyshots Addons|Info/React Docgen Comments from component declaration 1`] = ` -.emotion-6 { - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: relative; - overflow: auto; -} - -.emotion-4 code { - padding-right: 10px; - opacity: 0.7; -} - -.emotion-4 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-4 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.string { - color: #A31515; -} - -.emotion-4 * .token.punctuation { - color: #393A34; -} - -.emotion-4 * .token.operator { - color: #393A34; -} - -.emotion-4 * .token.url { - color: #36acaa; -} - -.emotion-4 * .token.symbol { - color: #36acaa; -} - -.emotion-4 * .token.number { - color: #36acaa; -} - -.emotion-4 * .token.boolean { - color: #36acaa; -} - -.emotion-4 * .token.variable { - color: #36acaa; -} - -.emotion-4 * .token.constant { - color: #36acaa; -} - -.emotion-4 * .token.inserted { - color: #36acaa; -} - -.emotion-4 * .token.atrule { - color: #0000ff; -} - -.emotion-4 * .token.keyword { - color: #0000ff; -} - -.emotion-4 * .token.attr-value { - color: #0000ff; -} - -.emotion-4 * .token.function { - color: #393A34; -} - -.emotion-4 * .token.deleted { - color: #9a050f; -} - -.emotion-4 * .token.important { - font-weight: bold; -} - -.emotion-4 * .token.bold { - font-weight: bold; -} - -.emotion-4 * .token.italic { - font-style: italic; -} - -.emotion-4 * .token.class-name { - color: #2B91AF; -} - -.emotion-4 * .token.tag { - color: #800000; -} - -.emotion-4 * .token.selector { - color: #800000; -} - -.emotion-4 * .token.attr-name { - color: #ff0000; -} - -.emotion-4 * .token.property { - color: #ff0000; -} - -.emotion-4 * .token.regex { - color: #ff0000; -} - -.emotion-4 * .token.entity { - color: #ff0000; -} - -.emotion-4 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-4 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-4 * .language-json .token.number { - color: #0000ff; -} - -.emotion-4 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-4 * .namespace { - opacity: 0.7; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-70 { - border-collapse: collapse; - margin-top: 16px; - width: auto; - table-layout: auto; -} - -.emotion-18 { - border-bottom: 1px solid rgba(0,0,0,0.1); -} - -.emotion-8 { - padding: 2px 6px; - line-height: 18px; - vertical-align: middle; - padding: 8px 16px; -} - -.emotion-68 { - font-size: 14px; -} - -.emotion-30 { - border-bottom: 1px solid #eee; -} - -.emotion-20 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #774dd7; -} - -.emotion-22 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #1ea7fd; -} - -.emotion-22 button { - color: #37d5d3; -} - -.emotion-22 span { - white-space: pre; -} - -.emotion-24 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; -} - -.emotion-28 { - padding: 2px 6px; - text-align: left; - padding: 8px 16px; -} -
                 
                   
             
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
one other - { @@ -11736,31 +6842,31 @@ exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations
two other - { @@ -11807,31 +6913,31 @@ exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations
obj object - { @@ -11848,31 +6954,31 @@ exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations
shape other - { @@ -11933,31 +7039,31 @@ exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations
arrayOf other - [ @@ -11982,162 +7088,162 @@ exports[`Storyshots Addons|Info/React Docgen Comments from PropType declarations
msg other - {}
enm other - News
enmEval other - Photos
union other - hello
optionalString string - Default String
@@ -12767,254 +7625,6 @@ exports[`Storyshots Addons|Info/React Docgen Comments from component declaration `; exports[`Storyshots Addons|Info/React Docgen Comments from named export component declaration 1`] = ` -.emotion-6 { - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: relative; - overflow: auto; -} - -.emotion-4 code { - padding-right: 10px; - opacity: 0.7; -} - -.emotion-4 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-4 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.string { - color: #A31515; -} - -.emotion-4 * .token.punctuation { - color: #393A34; -} - -.emotion-4 * .token.operator { - color: #393A34; -} - -.emotion-4 * .token.url { - color: #36acaa; -} - -.emotion-4 * .token.symbol { - color: #36acaa; -} - -.emotion-4 * .token.number { - color: #36acaa; -} - -.emotion-4 * .token.boolean { - color: #36acaa; -} - -.emotion-4 * .token.variable { - color: #36acaa; -} - -.emotion-4 * .token.constant { - color: #36acaa; -} - -.emotion-4 * .token.inserted { - color: #36acaa; -} - -.emotion-4 * .token.atrule { - color: #0000ff; -} - -.emotion-4 * .token.keyword { - color: #0000ff; -} - -.emotion-4 * .token.attr-value { - color: #0000ff; -} - -.emotion-4 * .token.function { - color: #393A34; -} - -.emotion-4 * .token.deleted { - color: #9a050f; -} - -.emotion-4 * .token.important { - font-weight: bold; -} - -.emotion-4 * .token.bold { - font-weight: bold; -} - -.emotion-4 * .token.italic { - font-style: italic; -} - -.emotion-4 * .token.class-name { - color: #2B91AF; -} - -.emotion-4 * .token.tag { - color: #800000; -} - -.emotion-4 * .token.selector { - color: #800000; -} - -.emotion-4 * .token.attr-name { - color: #ff0000; -} - -.emotion-4 * .token.property { - color: #ff0000; -} - -.emotion-4 * .token.regex { - color: #ff0000; -} - -.emotion-4 * .token.entity { - color: #ff0000; -} - -.emotion-4 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-4 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-4 * .language-json .token.number { - color: #0000ff; -} - -.emotion-4 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-4 * .namespace { - opacity: 0.7; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-70 { - border-collapse: collapse; - margin-top: 16px; - width: auto; - table-layout: auto; -} - -.emotion-18 { - border-bottom: 1px solid rgba(0,0,0,0.1); -} - -.emotion-8 { - padding: 2px 6px; - line-height: 18px; - vertical-align: middle; - padding: 8px 16px; -} - -.emotion-68 { - font-size: 14px; -} - -.emotion-30 { - border-bottom: 1px solid #eee; -} - -.emotion-20 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #774dd7; -} - -.emotion-22 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #1ea7fd; -} - -.emotion-22 button { - color: #37d5d3; -} - -.emotion-22 span { - white-space: pre; -} - -.emotion-24 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; -} - -.emotion-28 { - padding: 2px 6px; - text-align: left; - padding: 8px 16px; -} -
                 
                   
             
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -13383,254 +7993,6 @@ exports[`Storyshots Addons|Info/React Docgen Comments from named export componen `; exports[`Storyshots Addons|Info/Story Source Array prop 1`] = ` -.emotion-6 { - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: relative; - overflow: auto; -} - -.emotion-4 code { - padding-right: 10px; - opacity: 0.7; -} - -.emotion-4 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-4 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.string { - color: #A31515; -} - -.emotion-4 * .token.punctuation { - color: #393A34; -} - -.emotion-4 * .token.operator { - color: #393A34; -} - -.emotion-4 * .token.url { - color: #36acaa; -} - -.emotion-4 * .token.symbol { - color: #36acaa; -} - -.emotion-4 * .token.number { - color: #36acaa; -} - -.emotion-4 * .token.boolean { - color: #36acaa; -} - -.emotion-4 * .token.variable { - color: #36acaa; -} - -.emotion-4 * .token.constant { - color: #36acaa; -} - -.emotion-4 * .token.inserted { - color: #36acaa; -} - -.emotion-4 * .token.atrule { - color: #0000ff; -} - -.emotion-4 * .token.keyword { - color: #0000ff; -} - -.emotion-4 * .token.attr-value { - color: #0000ff; -} - -.emotion-4 * .token.function { - color: #393A34; -} - -.emotion-4 * .token.deleted { - color: #9a050f; -} - -.emotion-4 * .token.important { - font-weight: bold; -} - -.emotion-4 * .token.bold { - font-weight: bold; -} - -.emotion-4 * .token.italic { - font-style: italic; -} - -.emotion-4 * .token.class-name { - color: #2B91AF; -} - -.emotion-4 * .token.tag { - color: #800000; -} - -.emotion-4 * .token.selector { - color: #800000; -} - -.emotion-4 * .token.attr-name { - color: #ff0000; -} - -.emotion-4 * .token.property { - color: #ff0000; -} - -.emotion-4 * .token.regex { - color: #ff0000; -} - -.emotion-4 * .token.entity { - color: #ff0000; -} - -.emotion-4 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-4 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-4 * .language-json .token.number { - color: #0000ff; -} - -.emotion-4 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-4 * .namespace { - opacity: 0.7; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-34 { - border-collapse: collapse; - margin-top: 16px; - width: auto; - table-layout: auto; -} - -.emotion-18 { - border-bottom: 1px solid rgba(0,0,0,0.1); -} - -.emotion-8 { - padding: 2px 6px; - line-height: 18px; - vertical-align: middle; - padding: 8px 16px; -} - -.emotion-32 { - font-size: 14px; -} - -.emotion-30 { - border-bottom: 1px solid #eee; -} - -.emotion-20 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #774dd7; -} - -.emotion-22 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #1ea7fd; -} - -.emotion-22 button { - color: #37d5d3; -} - -.emotion-22 span { - white-space: pre; -} - -.emotion-24 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; -} - -.emotion-28 { - padding: 2px 6px; - text-align: left; - padding: 8px 16px; -} -
                 
                   
             
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -14414,254 +8776,6 @@ exports[`Storyshots Addons|Info/Story Source Array prop 1`] = ` `; exports[`Storyshots Addons|Info/Story Source Children 1`] = ` -.emotion-6 { - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: relative; - overflow: auto; -} - -.emotion-4 code { - padding-right: 10px; - opacity: 0.7; -} - -.emotion-4 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-4 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.string { - color: #A31515; -} - -.emotion-4 * .token.punctuation { - color: #393A34; -} - -.emotion-4 * .token.operator { - color: #393A34; -} - -.emotion-4 * .token.url { - color: #36acaa; -} - -.emotion-4 * .token.symbol { - color: #36acaa; -} - -.emotion-4 * .token.number { - color: #36acaa; -} - -.emotion-4 * .token.boolean { - color: #36acaa; -} - -.emotion-4 * .token.variable { - color: #36acaa; -} - -.emotion-4 * .token.constant { - color: #36acaa; -} - -.emotion-4 * .token.inserted { - color: #36acaa; -} - -.emotion-4 * .token.atrule { - color: #0000ff; -} - -.emotion-4 * .token.keyword { - color: #0000ff; -} - -.emotion-4 * .token.attr-value { - color: #0000ff; -} - -.emotion-4 * .token.function { - color: #393A34; -} - -.emotion-4 * .token.deleted { - color: #9a050f; -} - -.emotion-4 * .token.important { - font-weight: bold; -} - -.emotion-4 * .token.bold { - font-weight: bold; -} - -.emotion-4 * .token.italic { - font-style: italic; -} - -.emotion-4 * .token.class-name { - color: #2B91AF; -} - -.emotion-4 * .token.tag { - color: #800000; -} - -.emotion-4 * .token.selector { - color: #800000; -} - -.emotion-4 * .token.attr-name { - color: #ff0000; -} - -.emotion-4 * .token.property { - color: #ff0000; -} - -.emotion-4 * .token.regex { - color: #ff0000; -} - -.emotion-4 * .token.entity { - color: #ff0000; -} - -.emotion-4 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-4 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-4 * .language-json .token.number { - color: #0000ff; -} - -.emotion-4 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-4 * .namespace { - opacity: 0.7; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-70 { - border-collapse: collapse; - margin-top: 16px; - width: auto; - table-layout: auto; -} - -.emotion-18 { - border-bottom: 1px solid rgba(0,0,0,0.1); -} - -.emotion-8 { - padding: 2px 6px; - line-height: 18px; - vertical-align: middle; - padding: 8px 16px; -} - -.emotion-68 { - font-size: 14px; -} - -.emotion-30 { - border-bottom: 1px solid #eee; -} - -.emotion-20 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #774dd7; -} - -.emotion-22 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #1ea7fd; -} - -.emotion-22 button { - color: #37d5d3; -} - -.emotion-22 span { - white-space: pre; -} - -.emotion-24 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; -} - -.emotion-28 { - padding: 2px 6px; - text-align: left; - padding: 8px 16px; -} -
                 
                   
             
Property Type Required Default Description
propDefinitions other - []
@@ -15089,254 +9203,6 @@ onClick `; exports[`Storyshots Addons|Info/Story Source Many props 1`] = ` -.emotion-6 { - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: relative; - overflow: auto; -} - -.emotion-4 code { - padding-right: 10px; - opacity: 0.7; -} - -.emotion-4 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-4 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.string { - color: #A31515; -} - -.emotion-4 * .token.punctuation { - color: #393A34; -} - -.emotion-4 * .token.operator { - color: #393A34; -} - -.emotion-4 * .token.url { - color: #36acaa; -} - -.emotion-4 * .token.symbol { - color: #36acaa; -} - -.emotion-4 * .token.number { - color: #36acaa; -} - -.emotion-4 * .token.boolean { - color: #36acaa; -} - -.emotion-4 * .token.variable { - color: #36acaa; -} - -.emotion-4 * .token.constant { - color: #36acaa; -} - -.emotion-4 * .token.inserted { - color: #36acaa; -} - -.emotion-4 * .token.atrule { - color: #0000ff; -} - -.emotion-4 * .token.keyword { - color: #0000ff; -} - -.emotion-4 * .token.attr-value { - color: #0000ff; -} - -.emotion-4 * .token.function { - color: #393A34; -} - -.emotion-4 * .token.deleted { - color: #9a050f; -} - -.emotion-4 * .token.important { - font-weight: bold; -} - -.emotion-4 * .token.bold { - font-weight: bold; -} - -.emotion-4 * .token.italic { - font-style: italic; -} - -.emotion-4 * .token.class-name { - color: #2B91AF; -} - -.emotion-4 * .token.tag { - color: #800000; -} - -.emotion-4 * .token.selector { - color: #800000; -} - -.emotion-4 * .token.attr-name { - color: #ff0000; -} - -.emotion-4 * .token.property { - color: #ff0000; -} - -.emotion-4 * .token.regex { - color: #ff0000; -} - -.emotion-4 * .token.entity { - color: #ff0000; -} - -.emotion-4 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-4 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-4 * .language-json .token.number { - color: #0000ff; -} - -.emotion-4 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-4 * .namespace { - opacity: 0.7; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-70 { - border-collapse: collapse; - margin-top: 16px; - width: auto; - table-layout: auto; -} - -.emotion-18 { - border-bottom: 1px solid rgba(0,0,0,0.1); -} - -.emotion-8 { - padding: 2px 6px; - line-height: 18px; - vertical-align: middle; - padding: 8px 16px; -} - -.emotion-68 { - font-size: 14px; -} - -.emotion-30 { - border-bottom: 1px solid #eee; -} - -.emotion-20 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #774dd7; -} - -.emotion-22 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #1ea7fd; -} - -.emotion-22 button { - color: #37d5d3; -} - -.emotion-22 span { - white-space: pre; -} - -.emotion-24 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; -} - -.emotion-28 { - padding: 2px 6px; - text-align: left; - padding: 8px 16px; -} -
                 
                   
             
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -15704,254 +9570,6 @@ exports[`Storyshots Addons|Info/Story Source Many props 1`] = ` `; exports[`Storyshots Addons|Info/Story Source Object prop 1`] = ` -.emotion-6 { - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: relative; - overflow: auto; -} - -.emotion-4 code { - padding-right: 10px; - opacity: 0.7; -} - -.emotion-4 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-4 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.string { - color: #A31515; -} - -.emotion-4 * .token.punctuation { - color: #393A34; -} - -.emotion-4 * .token.operator { - color: #393A34; -} - -.emotion-4 * .token.url { - color: #36acaa; -} - -.emotion-4 * .token.symbol { - color: #36acaa; -} - -.emotion-4 * .token.number { - color: #36acaa; -} - -.emotion-4 * .token.boolean { - color: #36acaa; -} - -.emotion-4 * .token.variable { - color: #36acaa; -} - -.emotion-4 * .token.constant { - color: #36acaa; -} - -.emotion-4 * .token.inserted { - color: #36acaa; -} - -.emotion-4 * .token.atrule { - color: #0000ff; -} - -.emotion-4 * .token.keyword { - color: #0000ff; -} - -.emotion-4 * .token.attr-value { - color: #0000ff; -} - -.emotion-4 * .token.function { - color: #393A34; -} - -.emotion-4 * .token.deleted { - color: #9a050f; -} - -.emotion-4 * .token.important { - font-weight: bold; -} - -.emotion-4 * .token.bold { - font-weight: bold; -} - -.emotion-4 * .token.italic { - font-style: italic; -} - -.emotion-4 * .token.class-name { - color: #2B91AF; -} - -.emotion-4 * .token.tag { - color: #800000; -} - -.emotion-4 * .token.selector { - color: #800000; -} - -.emotion-4 * .token.attr-name { - color: #ff0000; -} - -.emotion-4 * .token.property { - color: #ff0000; -} - -.emotion-4 * .token.regex { - color: #ff0000; -} - -.emotion-4 * .token.entity { - color: #ff0000; -} - -.emotion-4 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-4 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-4 * .language-json .token.number { - color: #0000ff; -} - -.emotion-4 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-4 * .namespace { - opacity: 0.7; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-70 { - border-collapse: collapse; - margin-top: 16px; - width: auto; - table-layout: auto; -} - -.emotion-18 { - border-bottom: 1px solid rgba(0,0,0,0.1); -} - -.emotion-8 { - padding: 2px 6px; - line-height: 18px; - vertical-align: middle; - padding: 8px 16px; -} - -.emotion-68 { - font-size: 14px; -} - -.emotion-30 { - border-bottom: 1px solid #eee; -} - -.emotion-20 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #774dd7; -} - -.emotion-22 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #1ea7fd; -} - -.emotion-22 button { - color: #37d5d3; -} - -.emotion-22 span { - white-space: pre; -} - -.emotion-24 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; -} - -.emotion-28 { - padding: 2px 6px; - text-align: left; - padding: 8px 16px; -} -
                 
                   
             
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -16395,254 +10013,6 @@ exports[`Storyshots Addons|Info/Story Source Object prop 1`] = ` `; exports[`Storyshots Addons|Info/Story Source One prop 1`] = ` -.emotion-6 { - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: relative; - overflow: auto; -} - -.emotion-4 code { - padding-right: 10px; - opacity: 0.7; -} - -.emotion-4 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-4 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.string { - color: #A31515; -} - -.emotion-4 * .token.punctuation { - color: #393A34; -} - -.emotion-4 * .token.operator { - color: #393A34; -} - -.emotion-4 * .token.url { - color: #36acaa; -} - -.emotion-4 * .token.symbol { - color: #36acaa; -} - -.emotion-4 * .token.number { - color: #36acaa; -} - -.emotion-4 * .token.boolean { - color: #36acaa; -} - -.emotion-4 * .token.variable { - color: #36acaa; -} - -.emotion-4 * .token.constant { - color: #36acaa; -} - -.emotion-4 * .token.inserted { - color: #36acaa; -} - -.emotion-4 * .token.atrule { - color: #0000ff; -} - -.emotion-4 * .token.keyword { - color: #0000ff; -} - -.emotion-4 * .token.attr-value { - color: #0000ff; -} - -.emotion-4 * .token.function { - color: #393A34; -} - -.emotion-4 * .token.deleted { - color: #9a050f; -} - -.emotion-4 * .token.important { - font-weight: bold; -} - -.emotion-4 * .token.bold { - font-weight: bold; -} - -.emotion-4 * .token.italic { - font-style: italic; -} - -.emotion-4 * .token.class-name { - color: #2B91AF; -} - -.emotion-4 * .token.tag { - color: #800000; -} - -.emotion-4 * .token.selector { - color: #800000; -} - -.emotion-4 * .token.attr-name { - color: #ff0000; -} - -.emotion-4 * .token.property { - color: #ff0000; -} - -.emotion-4 * .token.regex { - color: #ff0000; -} - -.emotion-4 * .token.entity { - color: #ff0000; -} - -.emotion-4 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-4 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-4 * .language-json .token.number { - color: #0000ff; -} - -.emotion-4 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-4 * .namespace { - opacity: 0.7; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-70 { - border-collapse: collapse; - margin-top: 16px; - width: auto; - table-layout: auto; -} - -.emotion-18 { - border-bottom: 1px solid rgba(0,0,0,0.1); -} - -.emotion-8 { - padding: 2px 6px; - line-height: 18px; - vertical-align: middle; - padding: 8px 16px; -} - -.emotion-68 { - font-size: 14px; -} - -.emotion-30 { - border-bottom: 1px solid #eee; -} - -.emotion-20 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #774dd7; -} - -.emotion-22 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #1ea7fd; -} - -.emotion-22 button { - color: #37d5d3; -} - -.emotion-22 span { - white-space: pre; -} - -.emotion-24 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; -} - -.emotion-28 { - padding: 2px 6px; - text-align: left; - padding: 8px 16px; -} -
                 
                   
             
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
@@ -16942,254 +10312,6 @@ exports[`Storyshots Addons|Info/Story Source One prop 1`] = ` `; exports[`Storyshots Addons|Info/deprecated Displays Markdown in description 1`] = ` -.emotion-6 { - position: relative; - overflow: hidden; -} - -.emotion-4 { - position: relative; - overflow: auto; -} - -.emotion-4 code { - padding-right: 10px; - opacity: 0.7; -} - -.emotion-4 * .token { - font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace; - -webkit-font-smoothing: antialiased; -} - -.emotion-4 * .token.comment { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.prolog { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.doctype { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.cdata { - color: #008000; - font-style: italic; -} - -.emotion-4 * .token.string { - color: #A31515; -} - -.emotion-4 * .token.punctuation { - color: #393A34; -} - -.emotion-4 * .token.operator { - color: #393A34; -} - -.emotion-4 * .token.url { - color: #36acaa; -} - -.emotion-4 * .token.symbol { - color: #36acaa; -} - -.emotion-4 * .token.number { - color: #36acaa; -} - -.emotion-4 * .token.boolean { - color: #36acaa; -} - -.emotion-4 * .token.variable { - color: #36acaa; -} - -.emotion-4 * .token.constant { - color: #36acaa; -} - -.emotion-4 * .token.inserted { - color: #36acaa; -} - -.emotion-4 * .token.atrule { - color: #0000ff; -} - -.emotion-4 * .token.keyword { - color: #0000ff; -} - -.emotion-4 * .token.attr-value { - color: #0000ff; -} - -.emotion-4 * .token.function { - color: #393A34; -} - -.emotion-4 * .token.deleted { - color: #9a050f; -} - -.emotion-4 * .token.important { - font-weight: bold; -} - -.emotion-4 * .token.bold { - font-weight: bold; -} - -.emotion-4 * .token.italic { - font-style: italic; -} - -.emotion-4 * .token.class-name { - color: #2B91AF; -} - -.emotion-4 * .token.tag { - color: #800000; -} - -.emotion-4 * .token.selector { - color: #800000; -} - -.emotion-4 * .token.attr-name { - color: #ff0000; -} - -.emotion-4 * .token.property { - color: #ff0000; -} - -.emotion-4 * .token.regex { - color: #ff0000; -} - -.emotion-4 * .token.entity { - color: #ff0000; -} - -.emotion-4 * .token.directive.tag .tag { - background: #ffff00; - color: #393A34; -} - -.emotion-4 * .language-json .token.boolean { - color: #0000ff; -} - -.emotion-4 * .language-json .token.number { - color: #0000ff; -} - -.emotion-4 * .language-json .token.property { - color: #2B91AF; -} - -.emotion-4 * .namespace { - opacity: 0.7; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - margin: 0; - padding: 0; -} - -.emotion-0 { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - padding-right: 0; - opacity: 1; -} - -.emotion-70 { - border-collapse: collapse; - margin-top: 16px; - width: auto; - table-layout: auto; -} - -.emotion-18 { - border-bottom: 1px solid rgba(0,0,0,0.1); -} - -.emotion-8 { - padding: 2px 6px; - line-height: 18px; - vertical-align: middle; - padding: 8px 16px; -} - -.emotion-68 { - font-size: 14px; -} - -.emotion-30 { - border-bottom: 1px solid #eee; -} - -.emotion-20 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #774dd7; -} - -.emotion-22 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; - color: #1ea7fd; -} - -.emotion-22 button { - color: #37d5d3; -} - -.emotion-22 span { - white-space: pre; -} - -.emotion-24 { - padding: 2px 6px; - white-space: nowrap; - font-family: Monaco,Consolas,"Courier New",monospace; - text-align: left; - padding: 8px 16px; -} - -.emotion-28 { - padding: 2px 6px; - text-align: left; - padding: 8px 16px; -} -
                 
                   
             
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}
diff --git a/examples/official-storybook/stories/__snapshots__/addon-links.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-links.stories.storyshot index 5ad349309e8..1b8f3818d40 100644 --- a/examples/official-storybook/stories/__snapshots__/addon-links.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/addon-links.stories.storyshot @@ -23,12 +23,8 @@ exports[`Storyshots Addons|Links.Href log 1`] = ` `; exports[`Storyshots Addons|Links.Link First 1`] = ` -.emotion-0 { - color: inherit; -} - Go to Second @@ -36,12 +32,8 @@ exports[`Storyshots Addons|Links.Link First 1`] = ` `; exports[`Storyshots Addons|Links.Link Second 1`] = ` -.emotion-0 { - color: inherit; -} - Go to First @@ -55,12 +47,8 @@ Array [ > Scroll down to see the link , - .emotion-0 { - color: inherit; -} - - Go to Second @@ -75,12 +63,8 @@ Array [ > Scroll down to see the link , - .emotion-0 { - color: inherit; -} - - Go to First @@ -89,12 +73,8 @@ Array [ `; exports[`Storyshots Addons|Links.Select First 1`] = ` -.emotion-0 { - color: inherit; -} - Go back @@ -121,12 +101,8 @@ exports[`Storyshots Addons|Links.Select Index 1`] = ` `; exports[`Storyshots Addons|Links.Select Second 1`] = ` -.emotion-0 { - color: inherit; -} - Go back @@ -134,12 +110,8 @@ exports[`Storyshots Addons|Links.Select Second 1`] = ` `; exports[`Storyshots Addons|Links.Select Third 1`] = ` -.emotion-0 { - color: inherit; -} - Go back diff --git a/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot index 856f526a52f..46c2fc8a91b 100644 --- a/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot @@ -2,7 +2,7 @@ exports[`Storyshots Addons|Viewport default 1`] = `
I don't have problems being rendered using the default viewport.
@@ -10,7 +10,7 @@ exports[`Storyshots Addons|Viewport default 1`] = ` exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Inherited 1`] = `
I've inherited @@ -22,7 +22,7 @@ exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Inherited 1`] exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden via "withViewport" parameterized decorator 1`] = `
I respect my parents but I should be looking good on diff --git a/examples/official-storybook/stories/__snapshots__/core.stories.storyshot b/examples/official-storybook/stories/__snapshots__/core.stories.storyshot index e082d1369a5..7dd56096035 100644 --- a/examples/official-storybook/stories/__snapshots__/core.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/core.stories.storyshot @@ -1,36 +1,8 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Core|Events Force re-render 1`] = ` -.emotion-0 { - padding: 0 10px; - color: #444; - background: rgba(0,0,0,0.1); - border-radius: 4px; - -webkit-transition: border-bottom-color .3s linear; - transition: border-bottom-color .3s linear; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - box-sizing: border-box; - position: relative; - display: inline; - text-align: left; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - min-height: 32px; - box-sizing: border-box; -} - -.emotion-0:focus { - outline: 0 none; - border-bottom-color: #9fdaff; -} - diff --git a/examples/official-storybook/tests/storyshots.test.js b/examples/official-storybook/tests/storyshots.test.js index b12e7214965..256d81f7c02 100644 --- a/examples/official-storybook/tests/storyshots.test.js +++ b/examples/official-storybook/tests/storyshots.test.js @@ -1,5 +1,4 @@ import path from 'path'; -import { createSerializer as emotionCreateSerializer } from 'jest-emotion'; import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots'; import { render as renderer } from 'enzyme'; import { createSerializer } from 'enzyme-to-json'; @@ -12,5 +11,5 @@ initStoryshots({ test: multiSnapshotWithOptions({ renderer, }), - snapshotSerializers: [createSerializer(), emotionCreateSerializer()], + snapshotSerializers: [createSerializer()], }); diff --git a/jest.config.js b/jest.config.js index 763c9f19c40..33e04c4c7f7 100644 --- a/jest.config.js +++ b/jest.config.js @@ -23,7 +23,6 @@ module.exports = { '/lib', '/examples/official-storybook', ], - snapshotSerializers: ['jest-emotion'], transform: { '^.+\\.jsx?$': '/scripts/babel-jest.js', '^.+\\.tsx?$': '/node_modules/ts-jest', diff --git a/lib/components/src/form/__snapshots__/form.stories.storyshot b/lib/components/src/form/__snapshots__/form.stories.storyshot index cad94608d23..ff1e1c598eb 100644 --- a/lib/components/src/form/__snapshots__/form.stories.storyshot +++ b/lib/components/src/form/__snapshots__/form.stories.storyshot @@ -1,131 +1,32 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Components|Form/Button alignment 1`] = ` -.emotion-12 > * { - margin-top: 10px; -} - -.emotion-12 > *:nth-child(0) { - margin-top: 0; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.emotion-8 { - padding: 0 10px; - color: #444; - background: rgba(0,0,0,0.1); - border-radius: 4px; - -webkit-transition: border-bottom-color .3s linear; - transition: border-bottom-color .3s linear; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - box-sizing: border-box; - position: relative; - width: 100%; - text-align: left; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - min-height: 32px; - box-sizing: border-box; -} - -.emotion-8:focus { - outline: 0 none; - border-bottom-color: #9fdaff; -} - -.emotion-0 { - padding: 0 10px; - color: #444; - background: rgba(0,0,0,0.1); - border-radius: 4px; - -webkit-transition: border-bottom-color .3s linear; - transition: border-bottom-color .3s linear; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - box-sizing: border-box; - position: relative; - width: 100%; - text-align: right; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - min-height: 32px; - box-sizing: border-box; -} - -.emotion-0:focus { - outline: 0 none; - border-bottom-color: #9fdaff; -} - -.emotion-4 { - padding: 0 10px; - color: #444; - background: rgba(0,0,0,0.1); - border-radius: 4px; - -webkit-transition: border-bottom-color .3s linear; - transition: border-bottom-color .3s linear; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - box-sizing: border-box; - position: relative; - width: 100%; - text-align: center; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - min-height: 32px; - box-sizing: border-box; -} - -.emotion-4:focus { - outline: 0 none; - border-bottom-color: #9fdaff; -} -
@@ -134,133 +35,32 @@ exports[`Storyshots Components|Form/Button alignment 1`] = ` `; exports[`Storyshots Components|Form/Button sizes 1`] = ` -.emotion-12 > * { - margin-top: 10px; -} - -.emotion-12 > *:nth-child(0) { - margin-top: 0; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.emotion-0 { - padding: 0 10px; - color: #444; - background: rgba(0,0,0,0.1); - border-radius: 4px; - -webkit-transition: border-bottom-color .3s linear; - transition: border-bottom-color .3s linear; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - box-sizing: border-box; - position: relative; - display: inline; - text-align: left; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - min-height: 32px; - box-sizing: border-box; -} - -.emotion-0:focus { - outline: 0 none; - border-bottom-color: #9fdaff; -} - -.emotion-4 { - padding: 0 10px; - color: #444; - background: rgba(0,0,0,0.1); - border-radius: 4px; - -webkit-transition: border-bottom-color .3s linear; - transition: border-bottom-color .3s linear; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - box-sizing: border-box; - position: relative; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - text-align: left; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - min-height: 32px; - box-sizing: border-box; -} - -.emotion-4:focus { - outline: 0 none; - border-bottom-color: #9fdaff; -} - -.emotion-8 { - padding: 0 10px; - color: #444; - background: rgba(0,0,0,0.1); - border-radius: 4px; - -webkit-transition: border-bottom-color .3s linear; - transition: border-bottom-color .3s linear; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - box-sizing: border-box; - position: relative; - width: 100%; - text-align: left; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - min-height: 32px; - box-sizing: border-box; -} - -.emotion-8:focus { - outline: 0 none; - border-bottom-color: #9fdaff; -} -
@@ -269,171 +69,41 @@ exports[`Storyshots Components|Form/Button sizes 1`] = ` `; exports[`Storyshots Components|Form/Button validations 1`] = ` -.emotion-16 > * { - margin-top: 10px; -} - -.emotion-16 > *:nth-child(0) { - margin-top: 0; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.emotion-12 { - padding: 0 10px; - color: #444; - background: rgba(0,0,0,0.1); - border-radius: 4px; - -webkit-transition: border-bottom-color .3s linear; - transition: border-bottom-color .3s linear; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - box-sizing: border-box; - position: relative; - width: 100%; - text-align: left; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - min-height: 32px; - box-sizing: border-box; -} - -.emotion-12:focus { - outline: 0 none; - border-bottom-color: #9fdaff; -} - -.emotion-0 { - padding: 0 10px; - color: #444; - background: rgba(0,0,0,0.1); - border-radius: 4px; - -webkit-transition: border-bottom-color .3s linear; - transition: border-bottom-color .3s linear; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - box-sizing: border-box; - position: relative; - width: 100%; - text-align: left; - border-bottom-color: #d53535; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - min-height: 32px; - box-sizing: border-box; -} - -.emotion-0:focus { - outline: 0 none; - border-bottom-color: #9fdaff; -} - -.emotion-4 { - padding: 0 10px; - color: #444; - background: rgba(0,0,0,0.1); - border-radius: 4px; - -webkit-transition: border-bottom-color .3s linear; - transition: border-bottom-color .3s linear; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - box-sizing: border-box; - position: relative; - width: 100%; - text-align: left; - border-bottom-color: orange; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - min-height: 32px; - box-sizing: border-box; -} - -.emotion-4:focus { - outline: 0 none; - border-bottom-color: #9fdaff; -} - -.emotion-8 { - padding: 0 10px; - color: #444; - background: rgba(0,0,0,0.1); - border-radius: 4px; - -webkit-transition: border-bottom-color .3s linear; - transition: border-bottom-color .3s linear; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - box-sizing: border-box; - position: relative; - width: 100%; - text-align: left; - border-bottom-color: #09833a; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - min-height: 32px; - box-sizing: border-box; -} - -.emotion-8:focus { - outline: 0 none; - border-bottom-color: #9fdaff; -} -
@@ -442,148 +112,22 @@ exports[`Storyshots Components|Form/Button validations 1`] = ` `; exports[`Storyshots Components|Form/Button with knobs 1`] = ` -.emotion-0 { - padding: 0 10px; - color: #444; - background: rgba(0,0,0,0.1); - border-radius: 4px; - -webkit-transition: border-bottom-color .3s linear; - transition: border-bottom-color .3s linear; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - box-sizing: border-box; - position: relative; - display: inline; - text-align: left; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - min-height: 32px; - box-sizing: border-box; -} - -.emotion-0:focus { - outline: 0 none; - border-bottom-color: #9fdaff; -} - `; exports[`Storyshots Components|Form/Select sizes 1`] = ` -.emotion-12 > * { - margin-top: 10px; -} - -.emotion-12 > *:nth-child(0) { - margin-top: 0; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.emotion-0 { - padding: 0 10px; - color: #444; - background: rgba(0,0,0,0.1); - border-radius: 4px; - -webkit-transition: border-bottom-color .3s linear; - transition: border-bottom-color .3s linear; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - box-sizing: border-box; - position: relative; - display: inline; - text-align: left; - height: 32px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - padding-right: 20px; -} - -.emotion-0:focus { - outline: 0 none; - border-bottom-color: #9fdaff; -} - -.emotion-4 { - padding: 0 10px; - color: #444; - background: rgba(0,0,0,0.1); - border-radius: 4px; - -webkit-transition: border-bottom-color .3s linear; - transition: border-bottom-color .3s linear; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - box-sizing: border-box; - position: relative; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - text-align: left; - height: 32px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - padding-right: 20px; -} - -.emotion-4:focus { - outline: 0 none; - border-bottom-color: #9fdaff; -} - -.emotion-8 { - padding: 0 10px; - color: #444; - background: rgba(0,0,0,0.1); - border-radius: 4px; - -webkit-transition: border-bottom-color .3s linear; - transition: border-bottom-color .3s linear; - border: 0 solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - box-sizing: border-box; - position: relative; - width: 100%; - text-align: left; - height: 32px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - padding-right: 20px; -} - -.emotion-8:focus { - outline: 0 none; - border-bottom-color: #9fdaff; -} -
Property Type Required Default Description
disabled bool - false
label string yes -
onClick func - onClick
style other - {}