From 93011e5f28f12ec60c602f5260aa0a23069966ba Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Sat, 17 Aug 2019 20:24:41 +0800
Subject: [PATCH 1/3] Revert "Addon-docs: Fix snapshots & chromatic"

This reverts commit 8e853799ea6394a444d4e3fbbd94b34714f00f17.
---
 .../__snapshots__/A11YPanel.test.js.snap      |  7 +++--
 .../info/src/__snapshots__/index.test.js.snap | 26 +++++++++----------
 .../src/blocks/ColorPalette.stories.tsx       |  2 --
 .../src/blocks/Description.stories.tsx        |  2 --
 .../src/blocks/EmptyBlock.stories.tsx         |  2 --
 .../src/blocks/IconGallery.stories.tsx        |  2 --
 lib/components/src/blocks/Preview.stories.tsx |  5 ++--
 .../src/blocks/PropsTable/PropRow.stories.tsx |  6 ++---
 .../blocks/PropsTable/PropsTable.stories.tsx  |  2 --
 lib/components/src/blocks/Source.stories.tsx  |  2 --
 lib/components/src/blocks/Story.stories.tsx   |  2 --
 lib/components/src/blocks/Typeset.stories.tsx |  2 --
 .../typography/DocumentWrapper.stories.tsx    |  5 ++--
 13 files changed, 23 insertions(+), 42 deletions(-)

diff --git a/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap b/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap
index ecdb07f6dbde..c5ef61d72531 100644
--- a/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap
+++ b/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap
@@ -139,7 +139,6 @@ exports[`A11YPanel should render report 1`] = `
   background: #FFFFFF;
   font-size: 12px;
   line-height: 16px;
-  font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
   font-weight: 700;
   border-top: 1px solid rgba(0,0,0,.1);
   border-left: 1px solid rgba(0,0,0,.1);
@@ -216,13 +215,13 @@ exports[`A11YPanel should render report 1`] = `
               "insert": [Function],
               "inserted": Object {
                 "0": true,
+                "110qmus": true,
                 "11xgcgt": true,
                 "1551xjo": true,
                 "15paq49": true,
                 "1977chw": true,
                 "19mcg9j": true,
                 "1ez3l8h": true,
-                "1imo1gr": true,
                 "1kbt4a0": true,
                 "1l7fvsg": true,
                 "1vwgrhn": true,
@@ -498,7 +497,7 @@ exports[`A11YPanel should render report 1`] = `
                     data-emotion="css"
                   >
                     
-                    .emotion-3{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
+                    .emotion-3{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                   </style>
                   <style
                     data-emotion="css"
@@ -724,7 +723,7 @@ exports[`A11YPanel should render report 1`] = `
                     data-emotion="css"
                   >
                     
-                    .emotion-3{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
+                    .emotion-3{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                   </style>,
                   <style
                     data-emotion="css"
diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap
index fd4237d6057c..3d423cfb256d 100644
--- a/addons/info/src/__snapshots__/index.test.js.snap
+++ b/addons/info/src/__snapshots__/index.test.js.snap
@@ -769,7 +769,6 @@ exports[`addon Info should render component description if story kind matches co
   background: #FFFFFF;
   font-size: 12px;
   line-height: 16px;
-  font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
   font-weight: 700;
   border-top: 1px solid rgba(0,0,0,.1);
   border-left: 1px solid rgba(0,0,0,.1);
@@ -1361,8 +1360,8 @@ exports[`addon Info should render component description if story kind matches co
                               Object {
                                 "insert": [Function],
                                 "inserted": Object {
+                                  "110qmus": true,
                                   "11xgcgt": true,
-                                  "1imo1gr": true,
                                   "1maezg8": true,
                                   "1si67pu": true,
                                   "4zr3vl": true,
@@ -2078,7 +2077,7 @@ exports[`addon Info should render component description if story kind matches co
                                       data-emotion="css"
                                     >
                                       
-                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
+                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                                     </style>
                                     <style
                                       data-emotion="css"
@@ -2576,7 +2575,7 @@ exports[`addon Info should render component description if story kind matches co
                                       data-emotion="css"
                                     >
                                       
-                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
+                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                                     </style>,
                                     <style
                                       data-emotion="css"
@@ -3145,8 +3144,8 @@ exports[`addon Info should render component description if story kind matches co
                               Object {
                                 "insert": [Function],
                                 "inserted": Object {
+                                  "110qmus": true,
                                   "11xgcgt": true,
-                                  "1imo1gr": true,
                                   "1maezg8": true,
                                   "1si67pu": true,
                                   "4zr3vl": true,
@@ -3862,7 +3861,7 @@ exports[`addon Info should render component description if story kind matches co
                                       data-emotion="css"
                                     >
                                       
-                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
+                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                                     </style>
                                     <style
                                       data-emotion="css"
@@ -4360,7 +4359,7 @@ exports[`addon Info should render component description if story kind matches co
                                       data-emotion="css"
                                     >
                                       
-                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
+                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                                     </style>,
                                     <style
                                       data-emotion="css"
@@ -5327,7 +5326,6 @@ exports[`addon Info should render component description if story name matches co
   background: #FFFFFF;
   font-size: 12px;
   line-height: 16px;
-  font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
   font-weight: 700;
   border-top: 1px solid rgba(0,0,0,.1);
   border-left: 1px solid rgba(0,0,0,.1);
@@ -5919,8 +5917,8 @@ exports[`addon Info should render component description if story name matches co
                               Object {
                                 "insert": [Function],
                                 "inserted": Object {
+                                  "110qmus": true,
                                   "11xgcgt": true,
-                                  "1imo1gr": true,
                                   "1maezg8": true,
                                   "1si67pu": true,
                                   "4zr3vl": true,
@@ -6864,7 +6862,7 @@ exports[`addon Info should render component description if story name matches co
                                       data-emotion="css"
                                     >
                                       
-                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
+                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                                     </style>
                                     <style
                                       data-emotion="css"
@@ -7362,7 +7360,7 @@ exports[`addon Info should render component description if story name matches co
                                       data-emotion="css"
                                     >
                                       
-                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
+                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                                     </style>,
                                     <style
                                       data-emotion="css"
@@ -7931,8 +7929,8 @@ exports[`addon Info should render component description if story name matches co
                               Object {
                                 "insert": [Function],
                                 "inserted": Object {
+                                  "110qmus": true,
                                   "11xgcgt": true,
-                                  "1imo1gr": true,
                                   "1maezg8": true,
                                   "1si67pu": true,
                                   "4zr3vl": true,
@@ -8876,7 +8874,7 @@ exports[`addon Info should render component description if story name matches co
                                       data-emotion="css"
                                     >
                                       
-                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
+                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                                     </style>
                                     <style
                                       data-emotion="css"
@@ -9374,7 +9372,7 @@ exports[`addon Info should render component description if story name matches co
                                       data-emotion="css"
                                     >
                                       
-                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
+                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                                     </style>,
                                     <style
                                       data-emotion="css"
diff --git a/lib/components/src/blocks/ColorPalette.stories.tsx b/lib/components/src/blocks/ColorPalette.stories.tsx
index 2da6acebf00e..876f48f94772 100644
--- a/lib/components/src/blocks/ColorPalette.stories.tsx
+++ b/lib/components/src/blocks/ColorPalette.stories.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
 import { ColorItem, ColorPalette } from './ColorPalette';
-import { DocsPageWrapper } from './DocsPage';
 
 export default {
   title: 'Docs|ColorPalette',
   component: ColorPalette,
-  decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
 };
 
 export const defaultStyle = () => (
diff --git a/lib/components/src/blocks/Description.stories.tsx b/lib/components/src/blocks/Description.stories.tsx
index 7f45da999b81..60eafb77a72d 100644
--- a/lib/components/src/blocks/Description.stories.tsx
+++ b/lib/components/src/blocks/Description.stories.tsx
@@ -1,13 +1,11 @@
 import React from 'react';
 import { Description } from './Description';
 
-import { DocsPageWrapper } from './DocsPage';
 import markdownCaption from './DocsPageExampleCaption.md';
 
 export default {
   title: 'Docs|Description',
   component: Description,
-  decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
 };
 
 const textCaption = `That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the amplified breathing of the room where Case waited. The semiotics of the bright void beyond the chain link. The tug Marcus Garvey, a steel drum nine meters long and two in diameter, creaked and shuddered as Maelcum punched for a California gambling cartel, then as a paid killer in the dark, curled in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. Still it was a handgun and nine rounds of ammunition, and as he made his way down Shiga from the missionaries, the train reached Case’s station. Now this quiet courtyard, Sunday afternoon, this girl with a random collection of European furniture, as though Deane had once intended to use the place as his home. Case felt the edge of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses. They were dropping, losing altitude in a canyon of rainbow foliage, a lurid communal mural that completely covered the hull of the console in faded pinks and yellows.`;
diff --git a/lib/components/src/blocks/EmptyBlock.stories.tsx b/lib/components/src/blocks/EmptyBlock.stories.tsx
index 721448f07ead..8af0ad71c122 100644
--- a/lib/components/src/blocks/EmptyBlock.stories.tsx
+++ b/lib/components/src/blocks/EmptyBlock.stories.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
 import { EmptyBlock } from './EmptyBlock';
-import { DocsPageWrapper } from './DocsPage';
 
 export default {
   title: 'Docs|EmptyBlock',
   component: EmptyBlock,
-  decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
 };
 
 export const error = () => <EmptyBlock>Generic error message</EmptyBlock>;
diff --git a/lib/components/src/blocks/IconGallery.stories.tsx b/lib/components/src/blocks/IconGallery.stories.tsx
index 079608472642..4758be855985 100644
--- a/lib/components/src/blocks/IconGallery.stories.tsx
+++ b/lib/components/src/blocks/IconGallery.stories.tsx
@@ -1,13 +1,11 @@
 import React from 'react';
 import { IconItem, IconGallery } from './IconGallery';
 
-import { DocsPageWrapper } from './DocsPage';
 import { Icons as ExampleIcon } from '../icon/icon';
 
 export default {
   title: 'Docs|IconGallery',
   component: IconGallery,
-  decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
 };
 
 export const defaultStyle = () => (
diff --git a/lib/components/src/blocks/Preview.stories.tsx b/lib/components/src/blocks/Preview.stories.tsx
index a52376e62647..e3f921d9d78f 100644
--- a/lib/components/src/blocks/Preview.stories.tsx
+++ b/lib/components/src/blocks/Preview.stories.tsx
@@ -1,16 +1,15 @@
 import React from 'react';
+import { action } from '@storybook/addon-actions';
+
 import { Preview } from './Preview';
 
 import { Story } from './Story';
 import { Button } from '../Button/Button';
-
-import { DocsPageWrapper } from './DocsPage';
 import * as sourceStories from './Source.stories';
 
 export default {
   title: 'Docs|Preview',
   component: Preview,
-  decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
 };
 
 export const codeCollapsed = () => (
diff --git a/lib/components/src/blocks/PropsTable/PropRow.stories.tsx b/lib/components/src/blocks/PropsTable/PropRow.stories.tsx
index 2bc08bfd3703..04b0e6f98b57 100644
--- a/lib/components/src/blocks/PropsTable/PropRow.stories.tsx
+++ b/lib/components/src/blocks/PropsTable/PropRow.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { PropRow } from './PropRow';
 import { Table } from './PropsTable';
-import { DocsPageWrapper } from '../DocsPage';
+import { ResetWrapper } from '../../typography/DocumentFormatting';
 
 export default {
   component: PropRow,
@@ -9,11 +9,11 @@ export default {
   excludeStories: /.*Def$/,
   decorators: [
     getStory => (
-      <DocsPageWrapper>
+      <ResetWrapper>
         <Table>
           <tbody>{getStory()}</tbody>
         </Table>
-      </DocsPageWrapper>
+      </ResetWrapper>
     ),
   ],
 };
diff --git a/lib/components/src/blocks/PropsTable/PropsTable.stories.tsx b/lib/components/src/blocks/PropsTable/PropsTable.stories.tsx
index 0ea60a60218d..3a43436ae02b 100644
--- a/lib/components/src/blocks/PropsTable/PropsTable.stories.tsx
+++ b/lib/components/src/blocks/PropsTable/PropsTable.stories.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
 import { PropsTable, PropsTableError } from './PropsTable';
 import { stringDef, numberDef } from './PropRow.stories';
-import { DocsPageWrapper } from '../DocsPage';
 
 export default {
   component: PropsTable,
   title: 'Docs|PropTable',
-  decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
 };
 
 export const normal = () => <PropsTable rows={[stringDef, numberDef]} />;
diff --git a/lib/components/src/blocks/Source.stories.tsx b/lib/components/src/blocks/Source.stories.tsx
index f66500f2d3d6..7024c3b21e7e 100644
--- a/lib/components/src/blocks/Source.stories.tsx
+++ b/lib/components/src/blocks/Source.stories.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
 import { Source, SourceError } from './Source';
-import { DocsPageWrapper } from './DocsPage';
 
 export default {
   title: 'Docs|Source',
   component: Source,
-  decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
 };
 
 const jsxCode = `
diff --git a/lib/components/src/blocks/Story.stories.tsx b/lib/components/src/blocks/Story.stories.tsx
index 70de729877ce..285c811839f9 100644
--- a/lib/components/src/blocks/Story.stories.tsx
+++ b/lib/components/src/blocks/Story.stories.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
 import { Story, StoryError } from './Story';
 import { Button } from '../Button/Button';
-import { DocsPageWrapper } from './DocsPage';
 
 export default {
   title: 'Docs|Story',
   component: Story,
-  decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
 };
 
 const buttonFn = () => <Button secondary>Inline story</Button>;
diff --git a/lib/components/src/blocks/Typeset.stories.tsx b/lib/components/src/blocks/Typeset.stories.tsx
index 74f91467acb6..31c480230443 100644
--- a/lib/components/src/blocks/Typeset.stories.tsx
+++ b/lib/components/src/blocks/Typeset.stories.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
 import { Typeset } from './Typeset';
-import { DocsPageWrapper } from './DocsPage';
 
 export default {
   title: 'Docs|Typeset',
   component: Typeset,
-  decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
 };
 
 const fontSizes = [12, 14, 16, 20, 24, 32, 40, 48];
diff --git a/lib/components/src/typography/DocumentWrapper.stories.tsx b/lib/components/src/typography/DocumentWrapper.stories.tsx
index fc44d5984abf..a72da904c480 100644
--- a/lib/components/src/typography/DocumentWrapper.stories.tsx
+++ b/lib/components/src/typography/DocumentWrapper.stories.tsx
@@ -174,8 +174,9 @@ export const withDOM = () => (
       </a>
     </p>
     <p>
-      Autoconverted link <a href="https://github.com/nodeca/pica">https://github.com/nodeca/pica</a>{' '}
-      (enable linkify to see)
+      Autoconverted link{' '}
+      <a href="https://github.com/nodeca/pica">https:// github.com/nodeca/pica</a> (enable linkify
+      to see)
     </p>
     <h2>Images</h2>
     <p>

From da31f927ede6b1013a9f9e09920f848a79d9550e Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Sat, 17 Aug 2019 20:28:50 +0800
Subject: [PATCH 2/3] Story tweaks

---
 lib/components/src/blocks/Preview.stories.tsx             | 1 -
 lib/components/src/typography/DocumentWrapper.stories.tsx | 5 ++---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/lib/components/src/blocks/Preview.stories.tsx b/lib/components/src/blocks/Preview.stories.tsx
index e3f921d9d78f..2b89cf16186c 100644
--- a/lib/components/src/blocks/Preview.stories.tsx
+++ b/lib/components/src/blocks/Preview.stories.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
 
 import { Preview } from './Preview';
 
diff --git a/lib/components/src/typography/DocumentWrapper.stories.tsx b/lib/components/src/typography/DocumentWrapper.stories.tsx
index a72da904c480..fc44d5984abf 100644
--- a/lib/components/src/typography/DocumentWrapper.stories.tsx
+++ b/lib/components/src/typography/DocumentWrapper.stories.tsx
@@ -174,9 +174,8 @@ export const withDOM = () => (
       </a>
     </p>
     <p>
-      Autoconverted link{' '}
-      <a href="https://github.com/nodeca/pica">https:// github.com/nodeca/pica</a> (enable linkify
-      to see)
+      Autoconverted link <a href="https://github.com/nodeca/pica">https://github.com/nodeca/pica</a>{' '}
+      (enable linkify to see)
     </p>
     <h2>Images</h2>
     <p>

From 4b753acfe4734d13b8c4dd0894e44f597c37ec0c Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Sat, 17 Aug 2019 20:51:17 +0800
Subject: [PATCH 3/3] Update snapshots

---
 .../__snapshots__/A11YPanel.test.js.snap      |  7 ++---
 .../info/src/__snapshots__/index.test.js.snap | 26 ++++++++++---------
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap b/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap
index c5ef61d72531..ecdb07f6dbde 100644
--- a/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap
+++ b/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap
@@ -139,6 +139,7 @@ exports[`A11YPanel should render report 1`] = `
   background: #FFFFFF;
   font-size: 12px;
   line-height: 16px;
+  font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
   font-weight: 700;
   border-top: 1px solid rgba(0,0,0,.1);
   border-left: 1px solid rgba(0,0,0,.1);
@@ -215,13 +216,13 @@ exports[`A11YPanel should render report 1`] = `
               "insert": [Function],
               "inserted": Object {
                 "0": true,
-                "110qmus": true,
                 "11xgcgt": true,
                 "1551xjo": true,
                 "15paq49": true,
                 "1977chw": true,
                 "19mcg9j": true,
                 "1ez3l8h": true,
+                "1imo1gr": true,
                 "1kbt4a0": true,
                 "1l7fvsg": true,
                 "1vwgrhn": true,
@@ -497,7 +498,7 @@ exports[`A11YPanel should render report 1`] = `
                     data-emotion="css"
                   >
                     
-                    .emotion-3{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
+                    .emotion-3{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                   </style>
                   <style
                     data-emotion="css"
@@ -723,7 +724,7 @@ exports[`A11YPanel should render report 1`] = `
                     data-emotion="css"
                   >
                     
-                    .emotion-3{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
+                    .emotion-3{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                   </style>,
                   <style
                     data-emotion="css"
diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap
index 3d423cfb256d..fd4237d6057c 100644
--- a/addons/info/src/__snapshots__/index.test.js.snap
+++ b/addons/info/src/__snapshots__/index.test.js.snap
@@ -769,6 +769,7 @@ exports[`addon Info should render component description if story kind matches co
   background: #FFFFFF;
   font-size: 12px;
   line-height: 16px;
+  font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
   font-weight: 700;
   border-top: 1px solid rgba(0,0,0,.1);
   border-left: 1px solid rgba(0,0,0,.1);
@@ -1360,8 +1361,8 @@ exports[`addon Info should render component description if story kind matches co
                               Object {
                                 "insert": [Function],
                                 "inserted": Object {
-                                  "110qmus": true,
                                   "11xgcgt": true,
+                                  "1imo1gr": true,
                                   "1maezg8": true,
                                   "1si67pu": true,
                                   "4zr3vl": true,
@@ -2077,7 +2078,7 @@ exports[`addon Info should render component description if story kind matches co
                                       data-emotion="css"
                                     >
                                       
-                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
+                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                                     </style>
                                     <style
                                       data-emotion="css"
@@ -2575,7 +2576,7 @@ exports[`addon Info should render component description if story kind matches co
                                       data-emotion="css"
                                     >
                                       
-                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
+                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                                     </style>,
                                     <style
                                       data-emotion="css"
@@ -3144,8 +3145,8 @@ exports[`addon Info should render component description if story kind matches co
                               Object {
                                 "insert": [Function],
                                 "inserted": Object {
-                                  "110qmus": true,
                                   "11xgcgt": true,
+                                  "1imo1gr": true,
                                   "1maezg8": true,
                                   "1si67pu": true,
                                   "4zr3vl": true,
@@ -3861,7 +3862,7 @@ exports[`addon Info should render component description if story kind matches co
                                       data-emotion="css"
                                     >
                                       
-                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
+                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                                     </style>
                                     <style
                                       data-emotion="css"
@@ -4359,7 +4360,7 @@ exports[`addon Info should render component description if story kind matches co
                                       data-emotion="css"
                                     >
                                       
-                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
+                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                                     </style>,
                                     <style
                                       data-emotion="css"
@@ -5326,6 +5327,7 @@ exports[`addon Info should render component description if story name matches co
   background: #FFFFFF;
   font-size: 12px;
   line-height: 16px;
+  font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
   font-weight: 700;
   border-top: 1px solid rgba(0,0,0,.1);
   border-left: 1px solid rgba(0,0,0,.1);
@@ -5917,8 +5919,8 @@ exports[`addon Info should render component description if story name matches co
                               Object {
                                 "insert": [Function],
                                 "inserted": Object {
-                                  "110qmus": true,
                                   "11xgcgt": true,
+                                  "1imo1gr": true,
                                   "1maezg8": true,
                                   "1si67pu": true,
                                   "4zr3vl": true,
@@ -6862,7 +6864,7 @@ exports[`addon Info should render component description if story name matches co
                                       data-emotion="css"
                                     >
                                       
-                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
+                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                                     </style>
                                     <style
                                       data-emotion="css"
@@ -7360,7 +7362,7 @@ exports[`addon Info should render component description if story name matches co
                                       data-emotion="css"
                                     >
                                       
-                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
+                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                                     </style>,
                                     <style
                                       data-emotion="css"
@@ -7929,8 +7931,8 @@ exports[`addon Info should render component description if story name matches co
                               Object {
                                 "insert": [Function],
                                 "inserted": Object {
-                                  "110qmus": true,
                                   "11xgcgt": true,
+                                  "1imo1gr": true,
                                   "1maezg8": true,
                                   "1si67pu": true,
                                   "4zr3vl": true,
@@ -8874,7 +8876,7 @@ exports[`addon Info should render component description if story name matches co
                                       data-emotion="css"
                                     >
                                       
-                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
+                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                                     </style>
                                     <style
                                       data-emotion="css"
@@ -9372,7 +9374,7 @@ exports[`addon Info should render component description if story name matches co
                                       data-emotion="css"
                                     >
                                       
-                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
+                                      .emotion-8{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                                     </style>,
                                     <style
                                       data-emotion="css"