diff --git a/addons/a11y/package.json b/addons/a11y/package.json
index 64da24efde99..89639f6d4e76 100644
--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@@ -40,6 +40,7 @@
     "memoizerific": "^1.11.3",
     "react": "^16.8.4",
     "react-redux": "^7.0.2",
+    "react-sizeme": "^2.5.2",
     "redux": "^4.0.1",
     "util-deprecate": "^1.0.2"
   },
diff --git a/addons/a11y/src/components/A11YPanel.tsx b/addons/a11y/src/components/A11YPanel.tsx
index 81532df57ff1..5ca6069ce9f7 100644
--- a/addons/a11y/src/components/A11YPanel.tsx
+++ b/addons/a11y/src/components/A11YPanel.tsx
@@ -175,10 +175,9 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
                     label: <Violations>{violations.length} Violations</Violations>,
                     panel: (
                       <Report
-                        passes={false}
                         items={violations}
                         type={RuleType.VIOLATION}
-                        empty="No a11y violations found."
+                        empty="No accessibility violations found."
                       />
                     ),
                     items: violations,
@@ -188,10 +187,9 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
                     label: <Passes>{passes.length} Passes</Passes>,
                     panel: (
                       <Report
-                        passes
                         items={passes}
                         type={RuleType.PASS}
-                        empty="No a11y check passed."
+                        empty="No accessibility checks passed."
                       />
                     ),
                     items: passes,
@@ -201,10 +199,9 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
                     label: <Incomplete>{incomplete.length} Incomplete</Incomplete>,
                     panel: (
                       <Report
-                        passes={false}
                         items={incomplete}
                         type={RuleType.INCOMPLETION}
-                        empty="No a11y incomplete found."
+                        empty="No accessibility checks incomplete."
                       />
                     ),
                     items: incomplete,
diff --git a/addons/a11y/src/components/ColorBlindness.tsx b/addons/a11y/src/components/ColorBlindness.tsx
index c353e3dc334e..fa168ee5b12e 100644
--- a/addons/a11y/src/components/ColorBlindness.tsx
+++ b/addons/a11y/src/components/ColorBlindness.tsx
@@ -83,7 +83,7 @@ export class ColorBlindness extends Component<ColorBlindnessProps, ColorBlindnes
       'mono',
     ].map(i => ({
       id: i,
-      title: i,
+      title: i.charAt(0).toUpperCase() + i.slice(1),
       onClick: () => {
         this.setFilter(i);
       },
diff --git a/addons/a11y/src/components/Report/Elements.tsx b/addons/a11y/src/components/Report/Elements.tsx
index 3dc1d345df10..89b94f3f9cea 100644
--- a/addons/a11y/src/components/Report/Elements.tsx
+++ b/addons/a11y/src/components/Report/Elements.tsx
@@ -14,25 +14,25 @@ const Item = styled.li({
 const ItemTitle = styled.span(({ theme }) => ({
   borderBottom: `1px solid ${theme.appBorderColor}`,
   width: '100%',
-  display: 'inline-block',
+  display: 'flex',
   paddingBottom: '6px',
   marginBottom: '6px',
+  justifyContent: 'space-between',
 }));
 
 const HighlightToggleElement = styled.span({
   fontWeight: 'normal',
-  float: 'right',
+  alignSelf: 'center',
   paddingRight: '15px',
   input: { margin: 0 },
 });
 
 interface ElementProps {
   element: NodeResult;
-  passes: boolean;
   type: RuleType;
 }
 
-const Element: FunctionComponent<ElementProps> = ({ element, passes, type }) => {
+const Element: FunctionComponent<ElementProps> = ({ element, type }) => {
   const { any, all, none } = element;
   const rules = [...any, ...all, ...none];
   const highlightToggleId = `${type}-${element.target[0]}`;
@@ -51,21 +51,20 @@ const Element: FunctionComponent<ElementProps> = ({ element, passes, type }) =>
           />
         </HighlightToggleElement>
       </ItemTitle>
-      <Rules rules={rules} passes={passes} />
+      <Rules rules={rules} />
     </Item>
   );
 };
 
 interface ElementsProps {
   elements: NodeResult[];
-  passes: boolean;
   type: RuleType;
 }
 
-export const Elements: FunctionComponent<ElementsProps> = ({ elements, passes, type }) => (
+export const Elements: FunctionComponent<ElementsProps> = ({ elements, type }) => (
   <ol>
     {elements.map((element, index) => (
-      <Element passes={passes} element={element} key={index} type={type} />
+      <Element element={element} key={index} type={type} />
     ))}
   </ol>
 );
diff --git a/addons/a11y/src/components/Report/Item.tsx b/addons/a11y/src/components/Report/Item.tsx
index 29e35499f9a3..d1303153439f 100644
--- a/addons/a11y/src/components/Report/Item.tsx
+++ b/addons/a11y/src/components/Report/Item.tsx
@@ -12,6 +12,7 @@ import HighlightToggle from './HighlightToggle';
 
 const Wrapper = styled.div(({ theme }) => ({
   display: 'flex',
+  width: '100%',
   borderBottom: `1px solid ${theme.appBorderColor}`,
   '&:hover': {
     background: theme.background.hoverable,
@@ -49,14 +50,12 @@ const HighlightToggleElement = styled.span({
   fontWeight: 'normal',
   float: 'right',
   marginRight: '15px',
-  marginTop: '10px',
-
+  alignSelf: 'center',
   input: { margin: 0 },
 });
 
 interface ItemProps {
   item: Result;
-  passes: boolean;
   type: RuleType;
 }
 
@@ -75,7 +74,7 @@ export class Item extends Component<ItemProps, ItemState> {
     }));
 
   render() {
-    const { item, passes, type } = this.props;
+    const { item, type } = this.props;
     const { open } = this.state;
     const highlightToggleId = `${type}-${item.id}`;
 
@@ -104,7 +103,7 @@ export class Item extends Component<ItemProps, ItemState> {
         {open ? (
           <Fragment>
             <Info item={item} key="info" />
-            <Elements elements={item.nodes} passes={passes} type={type} key="elements" />
+            <Elements elements={item.nodes} type={type} key="elements" />
             <Tags tags={item.tags} key="tags" />
           </Fragment>
         ) : null}
diff --git a/addons/a11y/src/components/Report/Rules.tsx b/addons/a11y/src/components/Report/Rules.tsx
index 91fb964536e6..c2e180a018ba 100644
--- a/addons/a11y/src/components/Report/Rules.tsx
+++ b/addons/a11y/src/components/Report/Rules.tsx
@@ -1,8 +1,9 @@
 import React, { FunctionComponent } from 'react';
 import { styled } from '@storybook/theming';
-
-import { Icons } from '@storybook/components';
+import { Badge, Icons } from '@storybook/components';
 import { CheckResult } from 'axe-core';
+import { RuleType } from '../A11YPanel';
+import { SizeMe } from 'react-sizeme';
 
 const impactColors = {
   minor: '#f1c40f',
@@ -15,18 +16,33 @@ const impactColors = {
 const List = styled.div({
   display: 'flex',
   flexDirection: 'column',
-  padding: '4px',
+  paddingBottom: '4px',
+  paddingRight: '4px',
+  paddingTop: '4px',
   fontWeight: '400',
 } as any);
 
-const Item = styled.div({
-  display: 'flex',
-  flexDirection: 'row',
-  marginBottom: '6px',
+const Item = styled.div(({ elementWidth }: { elementWidth: number }) => {
+  const maxWidthBeforeBreak = 407;
+  return {
+    flexDirection: elementWidth > maxWidthBeforeBreak ? 'row' : 'inherit',
+    marginBottom: elementWidth > maxWidthBeforeBreak ? '6px' : '12px',
+    display: elementWidth > maxWidthBeforeBreak ? 'flex' : 'block',
+  };
 });
 
+const StyledBadge = styled(Badge)(({ status }: { status: string }) => ({
+  padding: '2px 8px',
+  marginBottom: '3px',
+  minWidth: '65px',
+  maxWidth: 'fit-content',
+  width: '100%',
+  textAlign: 'center',
+}));
+
 const Message = styled.div({
   paddingLeft: '6px',
+  paddingRight: '23px',
 });
 
 const Status = styled.div(({ passes, impact }: { passes: boolean; impact: string }) => ({
@@ -40,30 +56,63 @@ const Status = styled.div(({ passes, impact }: { passes: boolean; impact: string
   },
 }));
 
+export enum ImpactValue {
+  MINOR = 'minor',
+  MODERATE = 'moderate',
+  SERIOUS = 'serious',
+  CRITICAL = 'critical',
+}
+
 interface RuleProps {
   rule: CheckResult;
-  passes: boolean;
 }
 
-const Rule: FunctionComponent<RuleProps> = ({ rule, passes }) => (
-  <Item>
-    <Status passes={passes || undefined} impact={rule.impact}>
-      {passes ? <Icons icon="check" /> : <Icons icon="cross" />}
-    </Status>
-    <Message>{rule.message}</Message>
-  </Item>
-);
+const formatSeverityText = (severity: string) => {
+  return severity
+    .charAt(0)
+    .toUpperCase()
+    .concat(severity.slice(1));
+};
+
+const Rule: FunctionComponent<RuleProps> = ({ rule }) => {
+  let badgeType: any = null;
+  switch (rule.impact) {
+    case ImpactValue.CRITICAL:
+      badgeType = 'critical';
+      break;
+    case ImpactValue.SERIOUS:
+      badgeType = 'negative';
+      break;
+    case ImpactValue.MODERATE:
+      badgeType = 'warning';
+      break;
+    case ImpactValue.MINOR:
+      badgeType = 'neutral';
+      break;
+    default:
+      break;
+  }
+  return (
+    <SizeMe refreshMode="debounce">
+      {({ size }: { size: any }) => (
+        <Item elementWidth={size.width}>
+          <StyledBadge status={badgeType}>{formatSeverityText(rule.impact)}</StyledBadge>
+          <Message>{rule.message}</Message>
+        </Item>
+      )}
+    </SizeMe>
+  );
+};
 
 interface RulesProps {
   rules: CheckResult[];
-  passes: boolean;
 }
 
-export const Rules: FunctionComponent<RulesProps> = ({ rules, passes }) => {
+export const Rules: FunctionComponent<RulesProps> = ({ rules }) => {
   return (
     <List>
       {rules.map((rule, index) => (
-        <Rule passes={passes} rule={rule} key={index} />
+        <Rule rule={rule} key={index} />
       ))}
     </List>
   );
diff --git a/addons/a11y/src/components/Report/__snapshots__/HighlightToggle.test.js.snap b/addons/a11y/src/components/Report/__snapshots__/HighlightToggle.test.js.snap
index 1aea8f83cef1..b7fd858fa08c 100644
--- a/addons/a11y/src/components/Report/__snapshots__/HighlightToggle.test.js.snap
+++ b/addons/a11y/src/components/Report/__snapshots__/HighlightToggle.test.js.snap
@@ -125,6 +125,7 @@ exports[`HighlightToggle component should match snapshot 1`] = `
             "app": "#F6F9FC",
             "bar": "#FFFFFF",
             "content": "#FFFFFF",
+            "critical": "#FF4400",
             "gridCellSize": 10,
             "hoverable": "rgba(0,0,0,.05)",
             "negative": "#FEDED2",
@@ -256,6 +257,7 @@ exports[`HighlightToggle component should match snapshot 1`] = `
           "color": Object {
             "ancillary": "#22a699",
             "border": "rgba(0,0,0,.1)",
+            "critical": "#FFFFFF",
             "dark": "#666666",
             "darker": "#444444",
             "darkest": "#333333",
diff --git a/addons/a11y/src/components/Report/index.tsx b/addons/a11y/src/components/Report/index.tsx
index 2388438ed033..62f080337eb3 100644
--- a/addons/a11y/src/components/Report/index.tsx
+++ b/addons/a11y/src/components/Report/index.tsx
@@ -7,14 +7,13 @@ import { RuleType } from '../A11YPanel';
 export interface ReportProps {
   items: Result[];
   empty: string;
-  passes: boolean;
   type: RuleType;
 }
 
-export const Report: FunctionComponent<ReportProps> = ({ items, empty, type, passes }) => (
+export const Report: FunctionComponent<ReportProps> = ({ items, empty, type }) => (
   <Fragment>
     {items && items.length ? (
-      items.map(item => <Item passes={passes} item={item} key={`${type}:${item.id}`} type={type} />)
+      items.map(item => <Item item={item} key={`${type}:${item.id}`} type={type} />)
     ) : (
       <Placeholder key="placeholder">{empty}</Placeholder>
     )}
diff --git a/addons/a11y/src/components/Tabs.tsx b/addons/a11y/src/components/Tabs.tsx
index 297c4ba893c8..2d546245b58a 100644
--- a/addons/a11y/src/components/Tabs.tsx
+++ b/addons/a11y/src/components/Tabs.tsx
@@ -1,13 +1,13 @@
 import React, { Component, SyntheticEvent } from 'react';
 
-import { styled } from '@storybook/theming';
+import { styled, themes } from '@storybook/theming';
 import store, { clearElements } from '../redux-config';
 import HighlightToggle from './Report/HighlightToggle';
 import { NodeResult, Result } from 'axe-core';
 import { RuleType } from './A11YPanel';
+import { SizeMe } from 'react-sizeme';
 
-// TODO: reuse the Tabs component from @storybook/theming instead
-// of re-building identical functionality
+// TODO: reuse the Tabs component from @storybook/theming instead of re-building identical functionality
 
 const Container = styled.div({
   width: '100%',
@@ -18,26 +18,34 @@ const Container = styled.div({
 const HighlightToggleLabel = styled.label(({ theme }) => ({
   cursor: 'pointer',
   userSelect: 'none',
+  marginBottom: '3px',
+  marginRight: '3px',
   color: theme.color.dark,
 }));
 
-const GlobalToggleWrapper = styled.div(({ theme }) => ({
-  padding: '10px 15px 10px 0',
-  cursor: 'pointer',
-  fontSize: theme.typography.size.s2 - 1,
-  height: 40,
-  border: 'none',
-
-  display: 'flex',
-  alignItems: 'center',
-
-  input: {
-    marginLeft: 10,
-    marginRight: 0,
-    marginTop: 0,
-    marginBottom: 0,
-  },
-}));
+const GlobalToggle = styled.div(({ elementWidth }: { elementWidth: number }) => {
+  const maxWidthBeforeBreak = 450;
+  return {
+    cursor: 'pointer',
+    fontSize: '14px',
+    padding: elementWidth > maxWidthBeforeBreak ? '12px 15px 10px 0' : '12px 0px 3px 12px',
+    height: '40px',
+    border: 'none',
+    marginTop: elementWidth > maxWidthBeforeBreak ? '-40px' : '0px',
+    float: elementWidth > maxWidthBeforeBreak ? 'right' : 'left',
+    display: elementWidth > maxWidthBeforeBreak ? 'flex' : 'block',
+    alignItems: 'center',
+    width: elementWidth > maxWidthBeforeBreak ? 'auto' : '100%',
+    borderBottom: elementWidth > maxWidthBeforeBreak ? 'none' : '1px solid rgba(0,0,0,.1)',
+
+    input: {
+      marginLeft: '10',
+      marginRight: '0',
+      marginTop: '0',
+      marginBottom: '0',
+    },
+  };
+});
 
 const Item = styled.button(
   ({ theme }) => ({
@@ -113,34 +121,40 @@ export class Tabs extends Component<TabsProps, TabsState> {
     const highlightToggleId = `${tabs[active].type}-global-checkbox`;
     const highlightLabel = `Highlight results`;
     return (
-      <Container>
-        <List>
-          <TabsWrapper>
-            {tabs.map((tab, index) => (
-              <Item
-                key={index}
-                data-index={index}
-                active={active === index}
-                onClick={this.onToggle}
-              >
-                {tab.label}
-              </Item>
-            ))}
-          </TabsWrapper>
-          <GlobalToggleWrapper>
-            <HighlightToggleLabel htmlFor={highlightToggleId}>
-              {highlightLabel}
-            </HighlightToggleLabel>
-            <HighlightToggle
-              toggleId={highlightToggleId}
-              type={tabs[active].type}
-              elementsToHighlight={retrieveAllNodesFromResults(tabs[active].items)}
-              label={highlightLabel}
-            />
-          </GlobalToggleWrapper>
-        </List>
-        {tabs[active].panel}
-      </Container>
+      <SizeMe refreshMode="debounce">
+        {({ size }: { size: any }) => (
+          <Container>
+            <List>
+              <TabsWrapper>
+                {tabs.map((tab, index) => (
+                  <Item
+                    key={index}
+                    data-index={index}
+                    active={active === index}
+                    onClick={this.onToggle}
+                  >
+                    {tab.label}
+                  </Item>
+                ))}
+              </TabsWrapper>
+            </List>
+            {tabs[active].items.length > 0 ? (
+              <GlobalToggle elementWidth={size.width}>
+                <HighlightToggleLabel htmlFor={highlightToggleId}>
+                  {highlightLabel}
+                </HighlightToggleLabel>
+                <HighlightToggle
+                  toggleId={highlightToggleId}
+                  type={tabs[active].type}
+                  elementsToHighlight={retrieveAllNodesFromResults(tabs[active].items)}
+                  label={highlightLabel}
+                />
+              </GlobalToggle>
+            ) : null}
+            {tabs[active].panel}
+          </Container>
+        )}
+      </SizeMe>
     );
   }
 }
diff --git a/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap b/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap
index 274e9cf544d2..d550f4963147 100644
--- a/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap
+++ b/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap
@@ -103,133 +103,12 @@ exports[`A11YPanel should render loader when it's running 1`] = `
 `;
 
 exports[`A11YPanel should render report 1`] = `
-.emotion-14 {
+.emotion-0 {
   overflow-y: auto;
   overflow-x: auto;
 }
 
-.emotion-13 {
-  width: 100%;
-  position: relative;
-  min-height: 100%;
-}
-
-.emotion-10 {
-  box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset;
-  background: rgba(0,0,0,.05);
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  white-space: nowrap;
-}
-
-.emotion-1 {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 10px 15px;
-  cursor: pointer;
-  font-weight: 700;
-  font-size: 13px;
-  line-height: 1;
-  height: 40px;
-  border: none;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  background: transparent;
-  opacity: 1;
-  border-bottom: 3px solid #1EA7FD;
-}
-
-.emotion-1:focus {
-  outline: 0 none;
-  border-bottom: 3px solid #1EA7FD;
-}
-
-.emotion-0 {
-  color: #FF4400;
-}
-
-.emotion-3 {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 10px 15px;
-  cursor: pointer;
-  font-weight: 700;
-  font-size: 13px;
-  line-height: 1;
-  height: 40px;
-  border: none;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  background: transparent;
-}
-
-.emotion-3:focus {
-  outline: 0 none;
-  border-bottom: 3px solid #1EA7FD;
-}
-
-.emotion-2 {
-  color: #66BF3C;
-}
-
 .emotion-4 {
-  color: #E69D00;
-}
-
-.emotion-9 {
-  padding: 10px 15px 10px 0;
-  cursor: pointer;
-  font-size: 13px;
-  height: 40px;
-  border: none;
-  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;
-}
-
-.emotion-9 input {
-  margin-left: 10px;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.emotion-7 {
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  color: #666666;
-}
-
-.emotion-8 {
-  cursor: not-allowed;
-}
-
-.emotion-12 {
-  padding: 30px;
-  text-align: center;
-  color: #333333;
-  font-size: 13px;
-}
-
-.emotion-11 {
-  font-weight: 700;
-}
-
-.emotion-18 {
   position: absolute;
   bottom: 0;
   right: 0;
@@ -241,7 +120,7 @@ exports[`A11YPanel should render report 1`] = `
   background: #FFFFFF;
 }
 
-.emotion-17 {
+.emotion-3 {
   border: 0 none;
   padding: 4px 10px;
   cursor: pointer;
@@ -264,16 +143,16 @@ exports[`A11YPanel should render report 1`] = `
   border-radius: 4px 0 0 0;
 }
 
-.emotion-17:not(:last-child) {
+.emotion-3:not(:last-child) {
   border-right: 1px solid rgba(0,0,0,.1);
 }
 
-.emotion-17 + * {
+.emotion-3 + * {
   border-left: 1px solid rgba(0,0,0,.1);
   border-radius: 0;
 }
 
-.emotion-17:focus {
+.emotion-3:focus {
   box-shadow: #1EA7FD 0 -3px 0 0 inset;
   outline: 0 none;
 }
@@ -334,27 +213,25 @@ exports[`A11YPanel should render report 1`] = `
               "inserted": Object {
                 "0": true,
                 "110qmus": true,
-                "152wg9i": true,
                 "1551xjo": true,
                 "15paq49": true,
                 "176o2y5": true,
                 "1977chw": true,
-                "1cwfnw4": true,
-                "1fp6daz": true,
+                "19mcg9j": true,
+                "1ez3l8h": true,
+                "1kbt4a0": true,
                 "1l7fvsg": true,
                 "1myfomu": true,
-                "1s6ajii": true,
                 "1vwgrhn": true,
                 "4ryd4s": true,
                 "6hqipu": true,
                 "animation-u07e3c": true,
+                "aq4p19": true,
                 "fg630j": true,
-                "g90fw7": true,
                 "iau1th": true,
                 "jb2puo": true,
                 "kqzqgg": true,
                 "l0u0ek": true,
-                "nuzmgr": true,
                 "qacwg0": true,
                 "qb28": true,
                 "snh8f7": true,
@@ -364,7 +241,7 @@ exports[`A11YPanel should render report 1`] = `
               "key": "css",
               "nonce": undefined,
               "registered": Object {
-                "emotion-14": "overflow-y:auto;overflow-x:auto;",
+                "emotion-0": "overflow-y:auto;overflow-x:auto;",
                 "css-1977chw": "height:10px;width:10px;min-width:10px;color:#999999;margin-right:10px;transition:transform 0.1s ease-in-out;align-self:center;display:inline-flex;",
                 "css-1l7fvsg": "height:12px;width:12px;margin-right:4px;",
                 "css-jb2puo": "height:12px;width:12px;margin-right:4px;animation:animation-u07e3c 1s linear infinite;;",
@@ -605,175 +482,163 @@ exports[`A11YPanel should render report 1`] = `
                     data-emotion="css"
                   >
                     
-                    .emotion-14{overflow-y:auto;overflow-x:auto;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .emotion-13{width:100%;position:relative;min-height:100%;}
-                  </style>
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .emotion-10{box-shadow:rgba(0,0,0,.1) 0 -1px 0 0 inset;background:rgba(0,0,0,.05);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;white-space:nowrap;}
+                    .emotion-0{overflow-y:auto;overflow-x:auto;}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-1{-webkit-text-decoration:none;text-decoration:none;padding:10px 15px;cursor:pointer;font-weight:700;font-size:13px;line-height:1;height:40px;border:none;border-top:3px solid transparent;border-bottom:3px solid transparent;background:transparent;opacity:1;border-bottom:3px solid #1EA7FD;}
+                    .emotion-4{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-1:focus{outline:0 none;border-bottom:3px solid #1EA7FD;}
+                    .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"
                   >
                     
-                    .emotion-0{color:#FF4400;}
+                    .emotion-3:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-3{-webkit-text-decoration:none;text-decoration:none;padding:10px 15px;cursor:pointer;font-weight:700;font-size:13px;line-height:1;height:40px;border:none;border-top:3px solid transparent;border-bottom:3px solid transparent;background:transparent;}
+                    .emotion-3 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-3:focus{outline:0 none;border-bottom:3px solid #1EA7FD;}
+                    .emotion-3:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-2{color:#66BF3C;}
+                    .css-tkevr6{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;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:100%;}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-4{color:#E69D00;}
+                    .css-jb2puo{height:12px;width:12px;margin-right:4px;-webkit-animation:animation-u07e3c 1s linear infinite;animation:animation-u07e3c 1s linear infinite;}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-9{padding:10px 15px 10px 0;cursor:pointer;font-size:13px;height:40px;border:none;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;}
+                    @-webkit-keyframes animation-u07e3c{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-9 input{margin-left:10px;margin-right:0;margin-top:0;margin-bottom:0;}
+                    @keyframes animation-u07e3c{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-7{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#666666;}
+                    .css-l0u0ek{shape-rendering:inherit;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);display:inline-block;height:12px;width:12px;margin-right:4px;-webkit-animation:animation-u07e3c 1s linear infinite;animation:animation-u07e3c 1s linear infinite;}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-8{cursor:not-allowed;}
+                    .css-kqzqgg{fill:currentColor;}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-12{padding:30px;text-align:center;color:#333333;font-size:13px;}
+                    .css-snh8f7{width:100%;position:relative;min-height:100%;}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-11{font-weight:700;}
+                    .css-15paq49{box-shadow:rgba(0,0,0,.1) 0 -1px 0 0 inset;background:rgba(0,0,0,.05);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;white-space:nowrap;}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-18{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;}
+                    .css-1551xjo{-webkit-text-decoration:none;text-decoration:none;padding:10px 15px;cursor:pointer;font-weight:700;font-size:13px;line-height:1;height:40px;border:none;border-top:3px solid transparent;border-bottom:3px solid transparent;background:transparent;opacity:1;border-bottom:3px solid #1EA7FD;}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-17{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;}
+                    .css-1551xjo:focus{outline:0 none;border-bottom:3px solid #1EA7FD;}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-17:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
+                    .css-qacwg0{color:#FF4400;}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-17 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
+                    .css-qb28{-webkit-text-decoration:none;text-decoration:none;padding:10px 15px;cursor:pointer;font-weight:700;font-size:13px;line-height:1;height:40px;border:none;border-top:3px solid transparent;border-bottom:3px solid transparent;background:transparent;}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-17:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
+                    .css-qb28:focus{outline:0 none;border-bottom:3px solid #1EA7FD;}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .css-tkevr6{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;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:100%;}
+                    .css-fg630j{color:#66BF3C;}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .css-jb2puo{height:12px;width:12px;margin-right:4px;-webkit-animation:animation-u07e3c 1s linear infinite;animation:animation-u07e3c 1s linear infinite;}
+                    .css-iau1th{color:#E69D00;}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    @-webkit-keyframes animation-u07e3c{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
+                    .css-1ez3l8h{cursor:pointer;font-size:14px;padding:12px 0px 3px 12px;height:40px;border:none;margin-top:0px;float:left;display:block;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;border-bottom:1px solid rgba(0,0,0,.1);}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    @keyframes animation-u07e3c{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
+                    .css-1ez3l8h input{margin-left:10;margin-right:0;margin-top:0;margin-bottom:0;}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .css-l0u0ek{shape-rendering:inherit;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);display:inline-block;height:12px;width:12px;margin-right:4px;-webkit-animation:animation-u07e3c 1s linear infinite;animation:animation-u07e3c 1s linear infinite;}
+                    .css-1kbt4a0{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-bottom:3px;margin-right:3px;color:#666666;}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .css-kqzqgg{fill:currentColor;}
+                    .css-vdhlfv{cursor:not-allowed;}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .css-nuzmgr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-bottom:1px solid rgba(0,0,0,.1);}
+                    .css-aq4p19{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;border-bottom:1px solid rgba(0,0,0,.1);}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .css-nuzmgr:hover{background:rgba(0,0,0,.05);}
+                    .css-aq4p19:hover{background:rgba(0,0,0,.05);}
                   </style>
                   <style
                     data-emotion="css"
@@ -803,13 +668,13 @@ exports[`A11YPanel should render report 1`] = `
                     data-emotion="css"
                   >
                     
-                    .css-1fp6daz{font-weight:normal;float:right;margin-right:15px;margin-top:10px;}
+                    .css-19mcg9j{font-weight:normal;float:right;margin-right:15px;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .css-1fp6daz input{margin:0;}
+                    .css-19mcg9j input{margin:0;}
                   </style>
                   <style
                     data-emotion="css"
@@ -823,8 +688,18 @@ exports[`A11YPanel should render report 1`] = `
                     
                     .css-6hqipu{shape-rendering:inherit;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);display:inline-block;height:12px;width:12px;margin-right:4px;}
                   </style>
+                  <style
+                    id="erd_scroll_detection_scrollbar_style"
+                  >
+                    /* Created by the element-resize-detector library. */
+.erd_scroll_detection_container &gt; div::-webkit-scrollbar { display: none; }
+
+.erd_scroll_detection_container_animation_active { -webkit-animation-duration: 0.1s; animation-duration: 0.1s; -webkit-animation-name: erd_scroll_detection_container_animation; animation-name: erd_scroll_detection_container_animation; }
+@-webkit-keyframes erd_scroll_detection_container_animation { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
+@keyframes erd_scroll_detection_container_animation { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
+                  </style>
                 </head>,
-                "ctr": 37,
+                "ctr": 35,
                 "isSpeedy": false,
                 "key": "css",
                 "nonce": undefined,
@@ -833,175 +708,163 @@ exports[`A11YPanel should render report 1`] = `
                     data-emotion="css"
                   >
                     
-                    .emotion-14{overflow-y:auto;overflow-x:auto;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .emotion-13{width:100%;position:relative;min-height:100%;}
+                    .emotion-0{overflow-y:auto;overflow-x:auto;}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-10{box-shadow:rgba(0,0,0,.1) 0 -1px 0 0 inset;background:rgba(0,0,0,.05);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;white-space:nowrap;}
+                    .emotion-4{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-1{-webkit-text-decoration:none;text-decoration:none;padding:10px 15px;cursor:pointer;font-weight:700;font-size:13px;line-height:1;height:40px;border:none;border-top:3px solid transparent;border-bottom:3px solid transparent;background:transparent;opacity:1;border-bottom:3px solid #1EA7FD;}
+                    .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"
                   >
                     
-                    .emotion-1:focus{outline:0 none;border-bottom:3px solid #1EA7FD;}
+                    .emotion-3:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-0{color:#FF4400;}
+                    .emotion-3 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-3{-webkit-text-decoration:none;text-decoration:none;padding:10px 15px;cursor:pointer;font-weight:700;font-size:13px;line-height:1;height:40px;border:none;border-top:3px solid transparent;border-bottom:3px solid transparent;background:transparent;}
+                    .emotion-3:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-3:focus{outline:0 none;border-bottom:3px solid #1EA7FD;}
-                  </style>,
-                  <style
-                    data-emotion="css"
-                  >
-                    
-                    .emotion-2{color:#66BF3C;}
+                    .css-tkevr6{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;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:100%;}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-4{color:#E69D00;}
+                    .css-jb2puo{height:12px;width:12px;margin-right:4px;-webkit-animation:animation-u07e3c 1s linear infinite;animation:animation-u07e3c 1s linear infinite;}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-9{padding:10px 15px 10px 0;cursor:pointer;font-size:13px;height:40px;border:none;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;}
+                    @-webkit-keyframes animation-u07e3c{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-9 input{margin-left:10px;margin-right:0;margin-top:0;margin-bottom:0;}
+                    @keyframes animation-u07e3c{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-7{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#666666;}
+                    .css-l0u0ek{shape-rendering:inherit;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);display:inline-block;height:12px;width:12px;margin-right:4px;-webkit-animation:animation-u07e3c 1s linear infinite;animation:animation-u07e3c 1s linear infinite;}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-8{cursor:not-allowed;}
+                    .css-kqzqgg{fill:currentColor;}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-12{padding:30px;text-align:center;color:#333333;font-size:13px;}
+                    .css-snh8f7{width:100%;position:relative;min-height:100%;}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-11{font-weight:700;}
+                    .css-15paq49{box-shadow:rgba(0,0,0,.1) 0 -1px 0 0 inset;background:rgba(0,0,0,.05);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;white-space:nowrap;}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-18{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;}
+                    .css-1551xjo{-webkit-text-decoration:none;text-decoration:none;padding:10px 15px;cursor:pointer;font-weight:700;font-size:13px;line-height:1;height:40px;border:none;border-top:3px solid transparent;border-bottom:3px solid transparent;background:transparent;opacity:1;border-bottom:3px solid #1EA7FD;}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-17{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;}
+                    .css-1551xjo:focus{outline:0 none;border-bottom:3px solid #1EA7FD;}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-17:not(:last-child){border-right:1px solid rgba(0,0,0,.1);}
+                    .css-qacwg0{color:#FF4400;}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-17 + *{border-left:1px solid rgba(0,0,0,.1);border-radius:0;}
+                    .css-qb28{-webkit-text-decoration:none;text-decoration:none;padding:10px 15px;cursor:pointer;font-weight:700;font-size:13px;line-height:1;height:40px;border:none;border-top:3px solid transparent;border-bottom:3px solid transparent;background:transparent;}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-17:focus{box-shadow:#1EA7FD 0 -3px 0 0 inset;outline:0 none;}
+                    .css-qb28:focus{outline:0 none;border-bottom:3px solid #1EA7FD;}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .css-tkevr6{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;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:100%;}
+                    .css-fg630j{color:#66BF3C;}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .css-jb2puo{height:12px;width:12px;margin-right:4px;-webkit-animation:animation-u07e3c 1s linear infinite;animation:animation-u07e3c 1s linear infinite;}
+                    .css-iau1th{color:#E69D00;}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    @-webkit-keyframes animation-u07e3c{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
+                    .css-1ez3l8h{cursor:pointer;font-size:14px;padding:12px 0px 3px 12px;height:40px;border:none;margin-top:0px;float:left;display:block;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;border-bottom:1px solid rgba(0,0,0,.1);}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    @keyframes animation-u07e3c{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
+                    .css-1ez3l8h input{margin-left:10;margin-right:0;margin-top:0;margin-bottom:0;}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .css-l0u0ek{shape-rendering:inherit;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);display:inline-block;height:12px;width:12px;margin-right:4px;-webkit-animation:animation-u07e3c 1s linear infinite;animation:animation-u07e3c 1s linear infinite;}
+                    .css-1kbt4a0{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-bottom:3px;margin-right:3px;color:#666666;}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .css-kqzqgg{fill:currentColor;}
+                    .css-vdhlfv{cursor:not-allowed;}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .css-nuzmgr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-bottom:1px solid rgba(0,0,0,.1);}
+                    .css-aq4p19{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;border-bottom:1px solid rgba(0,0,0,.1);}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .css-nuzmgr:hover{background:rgba(0,0,0,.05);}
+                    .css-aq4p19:hover{background:rgba(0,0,0,.05);}
                   </style>,
                   <style
                     data-emotion="css"
@@ -1031,13 +894,13 @@ exports[`A11YPanel should render report 1`] = `
                     data-emotion="css"
                   >
                     
-                    .css-1fp6daz{font-weight:normal;float:right;margin-right:15px;margin-top:10px;}
+                    .css-19mcg9j{font-weight:normal;float:right;margin-right:15px;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .css-1fp6daz input{margin:0;}
+                    .css-19mcg9j input{margin:0;}
                   </style>,
                   <style
                     data-emotion="css"
@@ -1070,15 +933,15 @@ exports[`A11YPanel should render report 1`] = `
         vertical={true}
       >
         <Component
-          className="emotion-14"
+          className="emotion-0"
           horizontal={true}
           vertical={true}
         >
           <l
-            className="emotion-14"
+            className="emotion-0"
           >
             <div
-              className="emotion-14"
+              className="emotion-0"
               data-simplebar={true}
             >
               <div
@@ -1111,9 +974,8 @@ exports[`A11YPanel should render report 1`] = `
                                  Violations
                               </ForwardRef(render)>,
                               "panel": <Report
-                                empty="No a11y violations found."
+                                empty="No accessibility violations found."
                                 items={Array []}
-                                passes={false}
                                 type={0}
                               />,
                               "type": 0,
@@ -1125,9 +987,8 @@ exports[`A11YPanel should render report 1`] = `
                                  Passes
                               </ForwardRef(render)>,
                               "panel": <Report
-                                empty="No a11y check passed."
+                                empty="No accessibility checks passed."
                                 items={Array []}
-                                passes={true}
                                 type={1}
                               />,
                               "type": 1,
@@ -1139,9 +1000,8 @@ exports[`A11YPanel should render report 1`] = `
                                  Incomplete
                               </ForwardRef(render)>,
                               "panel": <Report
-                                empty="No a11y incomplete found."
+                                empty="No accessibility checks incomplete."
                                 items={Array []}
-                                passes={false}
                                 type={2}
                               />,
                               "type": 2,
@@ -1149,163 +1009,39 @@ exports[`A11YPanel should render report 1`] = `
                           ]
                         }
                       >
-                        <Styled(div)>
-                          <div
-                            className="emotion-13"
+                        <SizeMe
+                          refreshMode="debounce"
+                        >
+                          <SizeMe(Component)
+                            onSize={[Function]}
                           >
-                            <Styled(div)>
-                              <div
-                                className="emotion-10"
-                              >
-                                <Styled(div)>
-                                  <div
-                                    className="emotion-6"
-                                  >
-                                    <Styled(button)
-                                      active={true}
-                                      data-index={0}
-                                      key="0"
-                                      onClick={[Function]}
-                                    >
-                                      <button
-                                        className="emotion-1"
-                                        data-index={0}
-                                        onClick={[Function]}
-                                      >
-                                        <Styled(span)>
-                                          <span
-                                            className="emotion-0"
-                                          >
-                                            0
-                                             Violations
-                                          </span>
-                                        </Styled(span)>
-                                      </button>
-                                    </Styled(button)>
-                                    <Styled(button)
-                                      active={false}
-                                      data-index={1}
-                                      key="1"
-                                      onClick={[Function]}
-                                    >
-                                      <button
-                                        className="emotion-3"
-                                        data-index={1}
-                                        onClick={[Function]}
-                                      >
-                                        <Styled(span)>
-                                          <span
-                                            className="emotion-2"
-                                          >
-                                            0
-                                             Passes
-                                          </span>
-                                        </Styled(span)>
-                                      </button>
-                                    </Styled(button)>
-                                    <Styled(button)
-                                      active={false}
-                                      data-index={2}
-                                      key="2"
-                                      onClick={[Function]}
-                                    >
-                                      <button
-                                        className="emotion-3"
-                                        data-index={2}
-                                        onClick={[Function]}
-                                      >
-                                        <Styled(span)>
-                                          <span
-                                            className="emotion-4"
-                                          >
-                                            0
-                                             Incomplete
-                                          </span>
-                                        </Styled(span)>
-                                      </button>
-                                    </Styled(button)>
-                                  </div>
-                                </Styled(div)>
-                                <Styled(div)>
-                                  <div
-                                    className="emotion-9"
-                                  >
-                                    <Styled(label)
-                                      htmlFor="0-global-checkbox"
-                                    >
-                                      <label
-                                        className="emotion-7"
-                                        htmlFor="0-global-checkbox"
-                                      >
-                                        Highlight results
-                                      </label>
-                                    </Styled(label)>
-                                    <ConnectFunction
-                                      elementsToHighlight={Array []}
-                                      label="Highlight results"
-                                      toggleId="0-global-checkbox"
-                                      type={0}
-                                    >
-                                      <HighlightToggle
-                                        addElement={[Function]}
-                                        elementsToHighlight={Array []}
-                                        highlightedElementsMap={Map {}}
-                                        indeterminate={false}
-                                        isToggledOn={false}
-                                        label="Highlight results"
-                                        toggleId="0-global-checkbox"
-                                        type={0}
-                                      >
-                                        <Styled(input)
-                                          aria-label="Highlight result"
-                                          checked={false}
-                                          disabled={true}
-                                          id="0-global-checkbox"
-                                          onChange={[Function]}
-                                          type="checkbox"
-                                        >
-                                          <input
-                                            aria-label="Highlight result"
-                                            checked={false}
-                                            className="emotion-8"
-                                            disabled={true}
-                                            id="0-global-checkbox"
-                                            onChange={[Function]}
-                                            type="checkbox"
-                                          />
-                                        </Styled(input)>
-                                      </HighlightToggle>
-                                    </ConnectFunction>
-                                  </div>
-                                </Styled(div)>
-                              </div>
-                            </Styled(div)>
-                            <Report
-                              empty="No a11y violations found."
-                              items={Array []}
-                              passes={false}
-                              type={0}
+                            <SizeMeRenderer(Component)
+                              disablePlaceholder={false}
+                              explicitRef={[Function]}
+                              onSize={[Function]}
+                              size={
+                                Object {
+                                  "height": undefined,
+                                  "position": undefined,
+                                  "width": undefined,
+                                }
+                              }
                             >
-                              <Placeholder
-                                key="placeholder"
-                              >
-                                <Styled(div)>
+                              <SizeMeReferenceWrapper>
+                                <SizeMePlaceholder>
                                   <div
-                                    className="emotion-12"
-                                  >
-                                    <Styled(div)>
-                                      <div
-                                        className="emotion-11"
-                                      >
-                                        No a11y violations found.
-                                      </div>
-                                    </Styled(div)>
-                                  </div>
-                                </Styled(div)>
-                              </Placeholder>
-                            </Report>
-                          </div>
-                        </Styled(div)>
+                                    style={
+                                      Object {
+                                        "height": "100%",
+                                        "width": "100%",
+                                      }
+                                    }
+                                  />
+                                </SizeMePlaceholder>
+                              </SizeMeReferenceWrapper>
+                            </SizeMeRenderer(Component)>
+                          </SizeMe(Component)>
+                        </SizeMe>
                       </Tabs>
                     </div>
                   </div>
@@ -1346,14 +1082,14 @@ exports[`A11YPanel should render report 1`] = `
     >
       <Styled(div)>
         <div
-          className="emotion-18"
+          className="emotion-4"
         >
           <ActionButton
             key="0"
             onClick={[Function]}
           >
             <button
-              className="emotion-17"
+              className="emotion-3"
               onClick={[Function]}
             >
               Rerun tests
diff --git a/addons/a11y/src/typings.d.ts b/addons/a11y/src/typings.d.ts
index 2f4eb9cf4fd9..e2d982c525cd 100644
--- a/addons/a11y/src/typings.d.ts
+++ b/addons/a11y/src/typings.d.ts
@@ -1 +1,2 @@
 declare module 'global';
+declare module 'react-sizeme';
diff --git a/addons/info/src/components/types/ArrayOf.js b/addons/info/src/components/types/ArrayOf.js
index 81834331cedb..28f1dffe8156 100644
--- a/addons/info/src/components/types/ArrayOf.js
+++ b/addons/info/src/components/types/ArrayOf.js
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-cycle */
 import React from 'react';
 
 import PrettyPropType from './PrettyPropType';
diff --git a/addons/info/src/components/types/ObjectOf.js b/addons/info/src/components/types/ObjectOf.js
index e27908d814a2..48a56d91026f 100644
--- a/addons/info/src/components/types/ObjectOf.js
+++ b/addons/info/src/components/types/ObjectOf.js
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-cycle */
 import React from 'react';
 
 import PrettyPropType from './PrettyPropType';
diff --git a/addons/info/src/components/types/OneOfType.js b/addons/info/src/components/types/OneOfType.js
index 8b04c5fb4849..2b269d0dad68 100644
--- a/addons/info/src/components/types/OneOfType.js
+++ b/addons/info/src/components/types/OneOfType.js
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-cycle */
 import React from 'react';
 
 import PrettyPropType from './PrettyPropType';
diff --git a/addons/info/src/components/types/PrettyPropType.js b/addons/info/src/components/types/PrettyPropType.js
index 63b17234b875..ff7ea413614b 100644
--- a/addons/info/src/components/types/PrettyPropType.js
+++ b/addons/info/src/components/types/PrettyPropType.js
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-cycle */
 import PropTypes from 'prop-types';
 import React from 'react';
 
diff --git a/addons/info/src/components/types/Shape.js b/addons/info/src/components/types/Shape.js
index 2b8e1cc0d56f..a9f1b6c5affc 100644
--- a/addons/info/src/components/types/Shape.js
+++ b/addons/info/src/components/types/Shape.js
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-cycle */
 import PropTypes from 'prop-types';
 import React from 'react';
 
diff --git a/docs/src/new-components/basics/shared/styles.js b/docs/src/new-components/basics/shared/styles.js
index 0b37b0043dc3..676852f32967 100644
--- a/docs/src/new-components/basics/shared/styles.js
+++ b/docs/src/new-components/basics/shared/styles.js
@@ -7,6 +7,7 @@ export const background = {
   positive: '#E1FFD4',
   negative: '#FEDED2',
   warning: '#FFF5CF',
+  critical: '#FF4400',
 };
 
 export const color = {
@@ -38,6 +39,7 @@ export const color = {
   // Status
   positive: '#66BF3C',
   negative: '#FF4400',
+  critical: '#FFFFFF',
 };
 
 export const spacing = {
diff --git a/lib/components/src/Badge/Badge.tsx b/lib/components/src/Badge/Badge.tsx
index 93b89a9b0b9d..fd0576ab6985 100644
--- a/lib/components/src/Badge/Badge.tsx
+++ b/lib/components/src/Badge/Badge.tsx
@@ -5,9 +5,9 @@ type BadgeWrapperProps = BadgeProps;
 
 const BadgeWrapper = styled.div<BadgeWrapperProps>`
   display: inline-block;
-  vertical-align: top;
   font-size: 11px;
   line-height: 12px;
+  align-self: center;
   padding: 4px 12px;
   border-radius: 3em;
   font-weight: ${props => props.theme.typography.weight.bold};
@@ -24,10 +24,10 @@ const BadgeWrapper = styled.div<BadgeWrapperProps>`
   }
 
   ${props =>
-    props.status === 'positive' &&
+    props.status === 'critical' &&
     css`
-      color: ${props.theme.color.positive};
-      background: ${props.theme.background.positive};
+      color: ${props.theme.color.critical};
+      background: ${props.theme.background.critical};
     `};
 
   ${props =>
@@ -37,16 +37,30 @@ const BadgeWrapper = styled.div<BadgeWrapperProps>`
       background: ${props.theme.background.negative};
     `};
 
+  ${props =>
+    props.status === 'warning' &&
+    css`
+      color: ${props.theme.color.warning};
+      background: ${props.theme.background.warning};
+    `};
+
   ${props =>
     props.status === 'neutral' &&
     css`
       color: ${props.theme.color.dark};
       background: ${props.theme.color.mediumlight};
     `};
+
+  ${props =>
+    props.status === 'positive' &&
+    css`
+      color: ${props.theme.color.positive};
+      background: ${props.theme.background.positive};
+    `};
 `;
 
 export interface BadgeProps {
-  status: 'positive' | 'negative' | 'neutral';
+  status: 'positive' | 'negative' | 'neutral' | 'warning' | 'critical';
 }
 
 export const Badge: FunctionComponent<BadgeProps> = ({ ...props }) => {
diff --git a/lib/components/src/Badge/__snapshots__/Badge.stories.storyshot b/lib/components/src/Badge/__snapshots__/Badge.stories.storyshot
index 92620058705a..47f8c347e83c 100644
--- a/lib/components/src/Badge/__snapshots__/Badge.stories.storyshot
+++ b/lib/components/src/Badge/__snapshots__/Badge.stories.storyshot
@@ -3,9 +3,11 @@
 exports[`Storyshots Basics|Badge all badges 1`] = `
 .emotion-0 {
   display: inline-block;
-  vertical-align: top;
   font-size: 11px;
   line-height: 12px;
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
   padding: 4px 12px;
   border-radius: 3em;
   font-weight: 700;
@@ -26,9 +28,11 @@ exports[`Storyshots Basics|Badge all badges 1`] = `
 
 .emotion-1 {
   display: inline-block;
-  vertical-align: top;
   font-size: 11px;
   line-height: 12px;
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
   padding: 4px 12px;
   border-radius: 3em;
   font-weight: 700;
@@ -49,9 +53,11 @@ exports[`Storyshots Basics|Badge all badges 1`] = `
 
 .emotion-2 {
   display: inline-block;
-  vertical-align: top;
   font-size: 11px;
   line-height: 12px;
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
   padding: 4px 12px;
   border-radius: 3em;
   font-weight: 700;
diff --git a/lib/theming/src/base.ts b/lib/theming/src/base.ts
index ed6364116bb5..83b4d2f081f8 100644
--- a/lib/theming/src/base.ts
+++ b/lib/theming/src/base.ts
@@ -33,6 +33,7 @@ export const color = {
   positive: '#66BF3C',
   negative: '#FF4400',
   warning: '#E69D00',
+  critical: '#FFFFFF',
 
   defaultText: '#333333',
   inverseText: '#FFFFFF',
@@ -49,6 +50,7 @@ export const background = {
   positive: '#E1FFD4',
   negative: '#FEDED2',
   warning: '#FFF5CF',
+  critical: '#FF4400',
 };
 
 export const typography = {
diff --git a/lib/theming/src/create.ts b/lib/theming/src/create.ts
index 5330faf60d23..662d85a0a062 100644
--- a/lib/theming/src/create.ts
+++ b/lib/theming/src/create.ts
@@ -51,6 +51,7 @@ const createColors = (vars: ThemeVars): Color => ({
   positive: color.positive,
   negative: color.negative,
   warning: color.warning,
+  critical: color.critical,
 
   defaultText: vars.textColor || color.darkest,
   inverseText: vars.textInverseColor || color.lightest,
@@ -139,6 +140,7 @@ export const convert = (inherit: ThemeVars = lightThemeVars): Theme => {
       positive: background.positive,
       negative: background.negative,
       warning: background.warning,
+      critical: background.critical,
     },
     typography: {
       fonts: {
diff --git a/yarn.lock b/yarn.lock
index e9221d5099bb..e2f3b0c7b7e4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5780,6 +5780,11 @@ basic-auth@~2.0.0:
   dependencies:
     safe-buffer "5.1.2"
 
+batch-processor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
+  integrity sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=
+
 batch@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
@@ -9419,6 +9424,13 @@ elegant-spinner@^1.0.1:
   resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
   integrity sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=
 
+element-resize-detector@^1.1.12:
+  version "1.1.15"
+  resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.1.15.tgz#48eba1a2eaa26969a4c998d972171128c971d8d2"
+  integrity sha512-16/5avDegXlUxytGgaumhjyQoM6hpp5j3+L79sYq5hlXfTNRy5WMMuTVWkZU3egp/CokCmTmvf18P3KeB57Iog==
+  dependencies:
+    batch-processor "^1.0.0"
+
 elliptic@^6.0.0:
   version "6.4.1"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.1.tgz#c2d0b7776911b86722c632c3c06c60f2f819939a"
@@ -21941,6 +21953,17 @@ react-select@^2.2.0:
     react-input-autosize "^2.2.1"
     react-transition-group "^2.2.1"
 
+react-sizeme@^2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-2.5.2.tgz#e7041390cfb895ed15d896aa91d76e147e3b70b5"
+  integrity sha512-hYvcncV1FxVzPm2EhVwlOLf7Tk+k/ttO6rI7bfKUL/aL1gYzrY3DXJsdZ6nFaFgGSU/i8KC6gCoptOhBbRJpXQ==
+  dependencies:
+    element-resize-detector "^1.1.12"
+    invariant "^2.2.2"
+    lodash.debounce "^4.0.8"
+    lodash.throttle "^4.1.1"
+    shallowequal "^1.0.2"
+
 react-syntax-highlighter@^8.0.1:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-8.1.0.tgz#59103ff17a828a27ed7c8f035ae2558f09b6b78c"