From 757ce6dcfc3b452db7a793f9a53aec10da0f6ec4 Mon Sep 17 00:00:00 2001
From: Milan Turon <mituron@microsoft.com>
Date: Mon, 27 Jan 2020 16:23:09 +0100
Subject: [PATCH 01/17] fixes for carousel with pagination

---
 .../Carousel/carouselItemBehavior.ts          | 11 +++++--
 .../src/components/Carousel/Carousel.tsx      | 32 ++++++++-----------
 2 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/packages/accessibility/src/behaviors/Carousel/carouselItemBehavior.ts b/packages/accessibility/src/behaviors/Carousel/carouselItemBehavior.ts
index c848de36c2..fdf470dfd8 100644
--- a/packages/accessibility/src/behaviors/Carousel/carouselItemBehavior.ts
+++ b/packages/accessibility/src/behaviors/Carousel/carouselItemBehavior.ts
@@ -1,4 +1,5 @@
 import { Accessibility } from '../../types'
+import * as keyboardKey from 'keyboard-key'
 
 /**
  * @specification
@@ -11,13 +12,17 @@ const carouselItemBehavior: Accessibility<CarouselItemProps> = props => ({
     root: {
       role: props.navigation ? 'tabpanel' : 'group',
       'aria-hidden': props.active ? 'false' : 'true',
-      tabIndex: props.active ? 0 : -1,
+      tabIndex: props.navigation ? props.active ? 0 : -1 : -1,
     },
   },
 
   keyActions: {
-    root: {},
-  },
+    root: {
+      stopPropagation: {
+        keyCombinations: [{ keyCode: keyboardKey.ArrowRight }, { keyCode: keyboardKey.ArrowLeft }]
+      },
+    },
+  }
 })
 
 export default carouselItemBehavior
diff --git a/packages/react/src/components/Carousel/Carousel.tsx b/packages/react/src/components/Carousel/Carousel.tsx
index e1838f85dd..87b2cde70b 100644
--- a/packages/react/src/components/Carousel/Carousel.tsx
+++ b/packages/react/src/components/Carousel/Carousel.tsx
@@ -184,28 +184,12 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
       this.showPreviousSlide(e, true)
     },
     showNextSlideByPaddlePress: e => {
-      e.preventDefault()
-      const { activeIndex } = this.state
-      const { circular, items, navigation } = this.props
-
-      this.showNextSlide(e, false)
-
-      // if 'next' paddle will disappear, will focus 'previous' one.
-      if (!navigation && activeIndex >= items.length - 2 && !circular) {
-        this.paddlePreviousRef.current.focus()
-      }
+      e.preventDefault()      
+      this.showNextSlide(e, false)      
     },
     showPreviousSlideByPaddlePress: e => {
       e.preventDefault()
-      const { activeIndex } = this.state
-      const { circular, navigation } = this.props
-
       this.showPreviousSlide(e, false)
-
-      // if 'previous' paddle will disappear, will focus 'next' one.
-      if (!navigation && activeIndex <= 1 && !circular) {
-        this.paddleNextRef.current.focus()
-      }
     },
   }
 
@@ -260,7 +244,8 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
       <div style={styles.itemsContainerWrapper} {...accessibility.attributes.itemsContainerWrapper}>
         <div
           className={Carousel.slotClassNames.itemsContainer}
-          aria-roledescription={ariaRoleDescription}
+          aria-roledescription={ariaRoleDescription}          
+          aria-label="Portrait collection"
           style={styles.itemsContainer}
           {...accessibility.attributes.itemsContainer}
           {...applyAccessibilityKeyHandlers(
@@ -294,10 +279,18 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
 
   showPreviousSlide = (e: React.SyntheticEvent, focusItem: boolean) => {
     this.setActiveIndex(e, this.state.activeIndex - 1, focusItem)
+       // if 'previous' paddle will disappear, will focus 'next' one.
+       if (!this.props.navigation && this.state.activeIndex <= 1 && !this.props.circular) {
+        this.paddleNextRef.current.focus()
+      }
   }
 
   showNextSlide = (e: React.SyntheticEvent, focusItem: boolean) => {
     this.setActiveIndex(e, this.state.activeIndex + 1, focusItem)
+    // if 'next' paddle will disappear, will focus 'previous' one.
+    if (!this.props.navigation && this.state.activeIndex >= this.props.items.length - 2 && !this.props.circular) {
+      this.paddlePreviousRef.current.focus()
+    }
   }
 
   handlePaddleOverrides = (predefinedProps: ButtonProps, paddleName: string) => ({
@@ -390,6 +383,7 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
       })
     ) : (
       <Text
+        aria-hidden="true"
         className={Carousel.slotClassNames.pagination}
         content={getItemPositionText(activeIndex, items.length)}
       />

From c979062a2d30487fbb8650debeee0063fcb03c31 Mon Sep 17 00:00:00 2001
From: Milan Turon <mituron@microsoft.com>
Date: Tue, 28 Jan 2020 16:54:15 +0100
Subject: [PATCH 02/17] adding tests for carousel item behavior

---
 .../Carousel/carouselItemBehavior.ts          |  4 +++-
 .../behaviors/caroseltemBehavior-test.tsx     | 23 +++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 packages/accessibility/test/behaviors/caroseltemBehavior-test.tsx

diff --git a/packages/accessibility/src/behaviors/Carousel/carouselItemBehavior.ts b/packages/accessibility/src/behaviors/Carousel/carouselItemBehavior.ts
index fdf470dfd8..6e34311162 100644
--- a/packages/accessibility/src/behaviors/Carousel/carouselItemBehavior.ts
+++ b/packages/accessibility/src/behaviors/Carousel/carouselItemBehavior.ts
@@ -2,10 +2,12 @@ import { Accessibility } from '../../types'
 import * as keyboardKey from 'keyboard-key'
 
 /**
+ * @description
+ * Adds attribute 'tabIndex=0' to 'root' slot if 'active' property and 'navigation' property is true. Sets the attribute to '-1' otherwise.
+ *
  * @specification
  * Adds attribute 'role=tabpanel' to 'root' slot if 'navigation' property is true. Sets the attribute to 'group' otherwise.
  * Adds attribute 'aria-hidden=false' to 'root' slot if 'active' property is true. Sets the attribute to 'true' otherwise.
- * Adds attribute 'tabIndex=0' to 'root' slot if 'active' property is true. Sets the attribute to '-1' otherwise.
  */
 const carouselItemBehavior: Accessibility<CarouselItemProps> = props => ({
   attributes: {
diff --git a/packages/accessibility/test/behaviors/caroseltemBehavior-test.tsx b/packages/accessibility/test/behaviors/caroseltemBehavior-test.tsx
new file mode 100644
index 0000000000..094b0137df
--- /dev/null
+++ b/packages/accessibility/test/behaviors/caroseltemBehavior-test.tsx
@@ -0,0 +1,23 @@
+import { carouselItemBehavior } from '@fluentui/accessibility'
+
+describe('carouselItemBehavior.ts', () => {
+  test('set tabIndex="0" when carousel has navigation and item is visible ', () => {
+    const expectedResult = carouselItemBehavior({ navigation: true, active: true })
+    expect(expectedResult.attributes.root.tabIndex).toEqual(0)
+  })
+
+  test('set tabIndex="-1" when carousel has navigation and item is NOT visible ', () => {
+    const expectedResult = carouselItemBehavior({ navigation: true, active: false })
+    expect(expectedResult.attributes.root.tabIndex).toEqual(-1)
+  })
+
+  test('set tabIndex="-1" when carousel has NO navigation and item is visible', () => {
+    const expectedResult = carouselItemBehavior({ navigation: false, active: true })
+    expect(expectedResult.attributes.root.tabIndex).toEqual(-1)
+  })
+
+  test('set tabIndex="-1" when carousel has NO navigation and item is NOT visible', () => {
+    const expectedResult = carouselItemBehavior({ navigation: false, active: false })
+    expect(expectedResult.attributes.root.tabIndex).toEqual(-1)
+  })
+})

From 1cb3a01c835cac69bdcfbd2e3d9bc1e4f7e83c32 Mon Sep 17 00:00:00 2001
From: Milan Turon <mituron@microsoft.com>
Date: Wed, 29 Jan 2020 14:33:55 +0100
Subject: [PATCH 03/17] fix some lint issue

---
 .../src/behaviors/Carousel/carouselItemBehavior.ts            | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/accessibility/src/behaviors/Carousel/carouselItemBehavior.ts b/packages/accessibility/src/behaviors/Carousel/carouselItemBehavior.ts
index 6e34311162..7d8d935ce3 100644
--- a/packages/accessibility/src/behaviors/Carousel/carouselItemBehavior.ts
+++ b/packages/accessibility/src/behaviors/Carousel/carouselItemBehavior.ts
@@ -21,10 +21,10 @@ const carouselItemBehavior: Accessibility<CarouselItemProps> = props => ({
   keyActions: {
     root: {
       stopPropagation: {
-        keyCombinations: [{ keyCode: keyboardKey.ArrowRight }, { keyCode: keyboardKey.ArrowLeft }]
+        keyCombinations: [{ keyCode: keyboardKey.ArrowRight }, { keyCode: keyboardKey.ArrowLeft }],
       },
     },
-  }
+  },
 })
 
 export default carouselItemBehavior

From 0104d59931d53143650d00920db40f68b334dee3 Mon Sep 17 00:00:00 2001
From: Milan Turon <mituron@microsoft.com>
Date: Wed, 29 Jan 2020 15:19:28 +0100
Subject: [PATCH 04/17] prettier

---
 .../Carousel/carouselItemBehavior.ts          |  2 +-
 .../src/components/Carousel/Carousel.tsx      | 20 +++++++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/accessibility/src/behaviors/Carousel/carouselItemBehavior.ts b/packages/accessibility/src/behaviors/Carousel/carouselItemBehavior.ts
index 7d8d935ce3..0997e4a4cc 100644
--- a/packages/accessibility/src/behaviors/Carousel/carouselItemBehavior.ts
+++ b/packages/accessibility/src/behaviors/Carousel/carouselItemBehavior.ts
@@ -14,7 +14,7 @@ const carouselItemBehavior: Accessibility<CarouselItemProps> = props => ({
     root: {
       role: props.navigation ? 'tabpanel' : 'group',
       'aria-hidden': props.active ? 'false' : 'true',
-      tabIndex: props.navigation ? props.active ? 0 : -1 : -1,
+      tabIndex: props.navigation ? (props.active ? 0 : -1) : -1,
     },
   },
 
diff --git a/packages/react/src/components/Carousel/Carousel.tsx b/packages/react/src/components/Carousel/Carousel.tsx
index 87b2cde70b..c0c39bc364 100644
--- a/packages/react/src/components/Carousel/Carousel.tsx
+++ b/packages/react/src/components/Carousel/Carousel.tsx
@@ -184,8 +184,8 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
       this.showPreviousSlide(e, true)
     },
     showNextSlideByPaddlePress: e => {
-      e.preventDefault()      
-      this.showNextSlide(e, false)      
+      e.preventDefault()
+      this.showNextSlide(e, false)
     },
     showPreviousSlideByPaddlePress: e => {
       e.preventDefault()
@@ -244,7 +244,7 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
       <div style={styles.itemsContainerWrapper} {...accessibility.attributes.itemsContainerWrapper}>
         <div
           className={Carousel.slotClassNames.itemsContainer}
-          aria-roledescription={ariaRoleDescription}          
+          aria-roledescription={ariaRoleDescription}
           aria-label="Portrait collection"
           style={styles.itemsContainer}
           {...accessibility.attributes.itemsContainer}
@@ -279,16 +279,20 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
 
   showPreviousSlide = (e: React.SyntheticEvent, focusItem: boolean) => {
     this.setActiveIndex(e, this.state.activeIndex - 1, focusItem)
-       // if 'previous' paddle will disappear, will focus 'next' one.
-       if (!this.props.navigation && this.state.activeIndex <= 1 && !this.props.circular) {
-        this.paddleNextRef.current.focus()
-      }
+    // if 'previous' paddle will disappear, will focus 'next' one.
+    if (!this.props.navigation && this.state.activeIndex <= 1 && !this.props.circular) {
+      this.paddleNextRef.current.focus()
+    }
   }
 
   showNextSlide = (e: React.SyntheticEvent, focusItem: boolean) => {
     this.setActiveIndex(e, this.state.activeIndex + 1, focusItem)
     // if 'next' paddle will disappear, will focus 'previous' one.
-    if (!this.props.navigation && this.state.activeIndex >= this.props.items.length - 2 && !this.props.circular) {
+    if (
+      !this.props.navigation &&
+      this.state.activeIndex >= this.props.items.length - 2 &&
+      !this.props.circular
+    ) {
       this.paddlePreviousRef.current.focus()
     }
   }

From 3639ce790db37fa7cc599cb33d956c43e18518f1 Mon Sep 17 00:00:00 2001
From: Milan Turon <mituron@microsoft.com>
Date: Wed, 29 Jan 2020 16:42:15 +0100
Subject: [PATCH 05/17] adding aria label as prop

---
 .../components/Carousel/Types/CarouselExample.tsx      |  1 +
 .../Carousel/Types/CarouselPaginationExample.tsx       |  1 +
 .../Carousel/Variations/CarouselCircularExample.tsx    |  1 +
 packages/react/src/components/Carousel/Carousel.tsx    | 10 ++++++++--
 4 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/docs/src/examples/components/Carousel/Types/CarouselExample.tsx b/docs/src/examples/components/Carousel/Types/CarouselExample.tsx
index 27fd0c1b25..07b09efb90 100644
--- a/docs/src/examples/components/Carousel/Types/CarouselExample.tsx
+++ b/docs/src/examples/components/Carousel/Types/CarouselExample.tsx
@@ -37,6 +37,7 @@ const carouselItems = [
 const CarouselExample = () => (
   <Carousel
     ariaRoleDescription="carousel"
+    ariaLabel="Portrait collection"
     navigation={{
       'aria-label': 'people portraits',
       items: carouselItems.map((item, index) => ({
diff --git a/docs/src/examples/components/Carousel/Types/CarouselPaginationExample.tsx b/docs/src/examples/components/Carousel/Types/CarouselPaginationExample.tsx
index 7f47b9e54e..5d49c5ff76 100644
--- a/docs/src/examples/components/Carousel/Types/CarouselPaginationExample.tsx
+++ b/docs/src/examples/components/Carousel/Types/CarouselPaginationExample.tsx
@@ -23,6 +23,7 @@ const carouselItems = [
 const CarouselExample = () => (
   <Carousel
     ariaRoleDescription="carousel"
+    ariaLabel="Portrait collection"
     items={carouselItems}
     paddleNext={{ 'aria-label': 'go to next slide' }}
     paddlePrevious={{ 'aria-label': 'go to previous slide' }}
diff --git a/docs/src/examples/components/Carousel/Variations/CarouselCircularExample.tsx b/docs/src/examples/components/Carousel/Variations/CarouselCircularExample.tsx
index 1650089492..298559f6ba 100644
--- a/docs/src/examples/components/Carousel/Variations/CarouselCircularExample.tsx
+++ b/docs/src/examples/components/Carousel/Variations/CarouselCircularExample.tsx
@@ -34,6 +34,7 @@ const CarouselExample = () => (
   <Carousel
     circular
     ariaRoleDescription="carousel"
+    ariaLabel="Portrait collection"
     navigation={{
       'aria-label': 'people portraits',
       items: carouselItems.map((item, index) => ({
diff --git a/packages/react/src/components/Carousel/Carousel.tsx b/packages/react/src/components/Carousel/Carousel.tsx
index c0c39bc364..fd53f6022b 100644
--- a/packages/react/src/components/Carousel/Carousel.tsx
+++ b/packages/react/src/components/Carousel/Carousel.tsx
@@ -52,6 +52,11 @@ export interface CarouselProps extends UIComponentProps, ChildrenComponentProps
    */
   ariaRoleDescription?: string
 
+  /**
+   * Sets the aria-label attribute for carousel.
+   */
+  ariaLabel?: string
+
   /** Specifies if the process of switching slides is circular. */
   circular?: boolean
 
@@ -128,6 +133,7 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
     }),
     activeIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ariaRoleDescription: PropTypes.string,
+    ariaLabel: PropTypes.string,
     circular: PropTypes.bool,
     defaultActiveIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     getItemPositionText: PropTypes.func,
@@ -235,7 +241,7 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
   }
 
   renderContent = (accessibility, styles, unhandledProps) => {
-    const { ariaRoleDescription, getItemPositionText, items } = this.props
+    const { ariaRoleDescription, ariaLabel, getItemPositionText, items } = this.props
     const { activeIndex, itemIds } = this.state
 
     this.itemRefs = []
@@ -245,7 +251,7 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
         <div
           className={Carousel.slotClassNames.itemsContainer}
           aria-roledescription={ariaRoleDescription}
-          aria-label="Portrait collection"
+          aria-label={ariaLabel}
           style={styles.itemsContainer}
           {...accessibility.attributes.itemsContainer}
           {...applyAccessibilityKeyHandlers(

From 9ea3d70f7dadd88f021f344bbfd91c69f7aee678 Mon Sep 17 00:00:00 2001
From: Milan Turon <mituron@microsoft.com>
Date: Thu, 6 Feb 2020 19:43:54 +0100
Subject: [PATCH 06/17] adding logic for adding region/group differently based
 on carousel type

---
 .../behaviors/Carousel/carouselBehavior.ts    | 23 ++++++-
 .../test/behaviors/caroselBehavior-test.tsx   | 68 +++++++++++++++++++
 .../src/components/Carousel/Carousel.tsx      |  4 +-
 3 files changed, 90 insertions(+), 5 deletions(-)
 create mode 100644 packages/accessibility/test/behaviors/caroselBehavior-test.tsx

diff --git a/packages/accessibility/src/behaviors/Carousel/carouselBehavior.ts b/packages/accessibility/src/behaviors/Carousel/carouselBehavior.ts
index c0b80ca258..d58f6ba737 100644
--- a/packages/accessibility/src/behaviors/Carousel/carouselBehavior.ts
+++ b/packages/accessibility/src/behaviors/Carousel/carouselBehavior.ts
@@ -1,7 +1,15 @@
 import { Accessibility } from '../../types'
 import * as keyboardKey from 'keyboard-key'
 
+
 /**
+ * @description
+ * Adds attribute 'role=region' to 'root' slot if 'navigation' property is false. Does not set the attribute otherwise.
+ * Adds attribute 'aria-roledescription' to 'root' slot if 'navigation' property is false. Does not set the attribute otherwise.
+ * Adds attribute 'aria-label' to 'root' slot if 'navigation' property is false. Does not set the attribute otherwise.
+ * Adds attribute 'aria-roledescription' to 'itemsContainer' slot if 'navigation' property is true. Does not set the attribute otherwise.
+ * Adds attribute 'aria-label' to 'itemsContainer' slot if 'navigation' property is true. Does not set the attribute otherwise.
+ * 
  * @specification
  * Adds attribute 'role=region' to 'root' slot.
  * Adds attribute 'aria-live=polite' to 'itemsContainerWrapper' slot if 'ariaLiveOn' property is true. Sets the attribute to 'off' otherwise.
@@ -9,6 +17,7 @@ import * as keyboardKey from 'keyboard-key'
  * Adds attribute 'aria-hidden=true' to 'paddlePrevious' slot if 'navigation' property is true. Does not set the attribute otherwise.
  * Adds attribute 'tabIndex=-1' to 'paddlePrevious' slot if 'navigation' property is true. Does not set the attribute otherwise.
  * Adds attribute 'tabIndex=-1' to 'paddlePrevious' slot if 'navigation' property is true. Does not set the attribute otherwise.
+ * Adds attribute 'role=group' to 'itemsContainer' slot if 'navigation' property is true. Does not set the attribute otherwise.
  * Triggers 'showNextSlideByKeyboardNavigation' action with 'ArrowRight' on 'itemsContainer'.
  * Triggers 'showPreviousSlideByKeyboardNavigation' action with 'ArrowLeft' on 'itemsContainer'.
  * Triggers 'showNextSlideByPaddlePress' action with 'Enter' or 'Spacebar' on 'paddleNext'.
@@ -17,11 +26,18 @@ import * as keyboardKey from 'keyboard-key'
 const carouselBehavior: Accessibility<CarouselBehaviorProps> = props => ({
   attributes: {
     root: {
-      role: 'region',
+      role: props.navigation ? undefined :  'region',
+      'aria-roledescription': props.navigation ? undefined : props.ariaRoleDescription,
+      'aria-label': props.navigation ? undefined : props.ariaLabel
     },
     itemsContainerWrapper: {
       'aria-live': props.ariaLiveOn ? 'polite' : 'off',
     },
+    itemsContainer: {
+      role: props.navigation ? 'group' : undefined,
+      'aria-roledescription': props.navigation ? props.ariaRoleDescription : undefined,
+      'aria-label': props.navigation ? props.ariaLabel : undefined
+    },
 
     paddleNext: {
       ...(props.navigation && {
@@ -62,7 +78,10 @@ const carouselBehavior: Accessibility<CarouselBehaviorProps> = props => ({
 export type CarouselBehaviorProps = {
   /** Element type. */
   navigation: Object | Object[]
-  ariaLiveOn: boolean
+  ariaLiveOn: boolean    
+  ariaRoleDescription?: string
+  ariaLabel?: string
+
 }
 
 export default carouselBehavior
diff --git a/packages/accessibility/test/behaviors/caroselBehavior-test.tsx b/packages/accessibility/test/behaviors/caroselBehavior-test.tsx
new file mode 100644
index 0000000000..e41a3b0ee4
--- /dev/null
+++ b/packages/accessibility/test/behaviors/caroselBehavior-test.tsx
@@ -0,0 +1,68 @@
+import { carouselBehavior as carouselBehavior } from '@fluentui/accessibility'
+
+const roleDescription = "carousel"
+const label = "portrait collection"
+
+describe('carouselBehavior.ts', () => {
+
+  describe('root', () => {
+    test(`set "role=region" when carousel has NO navigation`, () => {
+      const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false })
+      expect(expectedResult.attributes.root.role).toEqual('region')
+    })
+
+    test('set "aria-roledescription" when carousel has NO navigation', () => {
+      const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false, ariaRoleDescription: roleDescription })
+      expect(expectedResult.attributes.root['aria-roledescription']).toEqual(roleDescription)
+    })
+
+    test('set "aria-label" when carousel has NO navigation', () => {
+      const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false, ariaLabel: label })
+      expect(expectedResult.attributes.root['aria-label']).toEqual(label)
+    })
+
+    test('do NOT set "aria-roledescription" when carousel has navigation', () => {
+      const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: true, ariaRoleDescription: roleDescription })
+      expect(expectedResult.attributes.root['aria-roledescription']).toBeUndefined()
+    })
+
+    test('do NOT set "aria-label" when carousel has navigation', () => {
+      const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: true, ariaLabel: label })
+      expect(expectedResult.attributes.root['aria-label']).toBeUndefined()
+    })
+
+    test(`do NOT set "role=region" when carousel has navigation`, () => {
+      const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: true })
+      expect(expectedResult.attributes.root.role).toBeUndefined()
+    })
+  })
+
+  describe('itemsContainer', () => {
+    test('set "aria-roledescription" when carousel has navigation', () => {
+      const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: true, ariaRoleDescription: roleDescription })
+      expect(expectedResult.attributes.itemsContainer['aria-roledescription']).toEqual(roleDescription)
+    })
+
+    test('set "aria-label" when carousel has navigation', () => {
+      const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: true, ariaLabel: label })
+      expect(expectedResult.attributes.itemsContainer['aria-label']).toEqual(label)
+    })
+
+    test('do NOT set "aria-roledescription" when carousel has NO navigation', () => {
+      const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false, ariaRoleDescription: roleDescription })
+      expect(expectedResult.attributes.itemsContainer['aria-roledescription']).toBeUndefined()
+    })
+
+    test('do NOT set "aria-label" when carousel has NO navigation', () => {
+      const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false, ariaLabel: label })
+      expect(expectedResult.attributes.itemsContainer['aria-label']).toBeUndefined()
+    })
+
+    test(`do NOT set "role=group" when carousel has NO navigation`, () => {
+      const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false })
+      expect(expectedResult.attributes.itemsContainer.role).toBeUndefined()
+    })
+  })
+
+
+})
diff --git a/packages/react/src/components/Carousel/Carousel.tsx b/packages/react/src/components/Carousel/Carousel.tsx
index fd53f6022b..8fce78bbf6 100644
--- a/packages/react/src/components/Carousel/Carousel.tsx
+++ b/packages/react/src/components/Carousel/Carousel.tsx
@@ -241,7 +241,7 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
   }
 
   renderContent = (accessibility, styles, unhandledProps) => {
-    const { ariaRoleDescription, ariaLabel, getItemPositionText, items } = this.props
+    const {getItemPositionText, items} = this.props
     const { activeIndex, itemIds } = this.state
 
     this.itemRefs = []
@@ -250,8 +250,6 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
       <div style={styles.itemsContainerWrapper} {...accessibility.attributes.itemsContainerWrapper}>
         <div
           className={Carousel.slotClassNames.itemsContainer}
-          aria-roledescription={ariaRoleDescription}
-          aria-label={ariaLabel}
           style={styles.itemsContainer}
           {...accessibility.attributes.itemsContainer}
           {...applyAccessibilityKeyHandlers(

From d25bbca1873e639278ce9fffb0fd572e3b43c8bc Mon Sep 17 00:00:00 2001
From: Milan Turon <mituron@microsoft.com>
Date: Fri, 7 Feb 2020 11:26:21 +0100
Subject: [PATCH 07/17] improving documentation

---
 .../Carousel/BestPractices/CarouselBestPractices.tsx   | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/docs/src/examples/components/Carousel/BestPractices/CarouselBestPractices.tsx b/docs/src/examples/components/Carousel/BestPractices/CarouselBestPractices.tsx
index 1ed03d861c..f7e4e3b2f2 100644
--- a/docs/src/examples/components/Carousel/BestPractices/CarouselBestPractices.tsx
+++ b/docs/src/examples/components/Carousel/BestPractices/CarouselBestPractices.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { Text } from '@fluentui/react'
+import { Box } from '@fluentui/react'
 import { link } from '../../../../utils/helpers'
 
 import ComponentBestPractices from 'docs/src/components/ComponentBestPractices'
@@ -10,6 +11,15 @@ const doList = [
     {link('reported issue', 'https://bugs.chromium.org/p/chromium/issues/detail?id=1040924')} for
     details).
   </Text>,
+  'Provide  localized string of the "carousel" using `ariaRoleDescription` prop.',
+  'Provide label to the carousel using `ariaLabel` prop.',
+  <Box>
+    If carousel contains `navigation`: 
+    <ul>
+      <li> provide label to `navigation` and to navigation item using `aria-label` attribute</li> 
+      <li> add `aria-controls` attribute to navigation item referencing by `carouselItem` id </li>
+    </ul>
+  </Box>,
 ]
 
 const CarouselBestPractices: React.FunctionComponent<{}> = () => {

From 0d8fe8d86c1569570d25b69bf5197ea8c0b2b8ac Mon Sep 17 00:00:00 2001
From: Milan Turon <mituron@microsoft.com>
Date: Fri, 7 Feb 2020 11:31:13 +0100
Subject: [PATCH 08/17] adresing changes from review

---
 .../test/behaviors/caroselBehavior-test.tsx            | 10 +++++-----
 .../test/behaviors/caroseltemBehavior-test.tsx         |  8 ++++----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/accessibility/test/behaviors/caroselBehavior-test.tsx b/packages/accessibility/test/behaviors/caroselBehavior-test.tsx
index e41a3b0ee4..7887da10eb 100644
--- a/packages/accessibility/test/behaviors/caroselBehavior-test.tsx
+++ b/packages/accessibility/test/behaviors/caroselBehavior-test.tsx
@@ -6,17 +6,17 @@ const label = "portrait collection"
 describe('carouselBehavior.ts', () => {
 
   describe('root', () => {
-    test(`set "role=region" when carousel has NO navigation`, () => {
+    test(`sets "role=region" when carousel has NO navigation`, () => {
       const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false })
       expect(expectedResult.attributes.root.role).toEqual('region')
     })
 
-    test('set "aria-roledescription" when carousel has NO navigation', () => {
+    test('sets "aria-roledescription" when carousel has NO navigation', () => {
       const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false, ariaRoleDescription: roleDescription })
       expect(expectedResult.attributes.root['aria-roledescription']).toEqual(roleDescription)
     })
 
-    test('set "aria-label" when carousel has NO navigation', () => {
+    test('sets "aria-label" when carousel has NO navigation', () => {
       const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false, ariaLabel: label })
       expect(expectedResult.attributes.root['aria-label']).toEqual(label)
     })
@@ -38,12 +38,12 @@ describe('carouselBehavior.ts', () => {
   })
 
   describe('itemsContainer', () => {
-    test('set "aria-roledescription" when carousel has navigation', () => {
+    test('sets "aria-roledescription" when carousel has navigation', () => {
       const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: true, ariaRoleDescription: roleDescription })
       expect(expectedResult.attributes.itemsContainer['aria-roledescription']).toEqual(roleDescription)
     })
 
-    test('set "aria-label" when carousel has navigation', () => {
+    test('sets "aria-label" when carousel has navigation', () => {
       const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: true, ariaLabel: label })
       expect(expectedResult.attributes.itemsContainer['aria-label']).toEqual(label)
     })
diff --git a/packages/accessibility/test/behaviors/caroseltemBehavior-test.tsx b/packages/accessibility/test/behaviors/caroseltemBehavior-test.tsx
index 094b0137df..623b1d6528 100644
--- a/packages/accessibility/test/behaviors/caroseltemBehavior-test.tsx
+++ b/packages/accessibility/test/behaviors/caroseltemBehavior-test.tsx
@@ -1,22 +1,22 @@
 import { carouselItemBehavior } from '@fluentui/accessibility'
 
 describe('carouselItemBehavior.ts', () => {
-  test('set tabIndex="0" when carousel has navigation and item is visible ', () => {
+  test('sets tabIndex="0" on root when carousel has navigation and item is visible ', () => {
     const expectedResult = carouselItemBehavior({ navigation: true, active: true })
     expect(expectedResult.attributes.root.tabIndex).toEqual(0)
   })
 
-  test('set tabIndex="-1" when carousel has navigation and item is NOT visible ', () => {
+  test('sets tabIndex="-1" on root when carousel has navigation and item is NOT visible ', () => {
     const expectedResult = carouselItemBehavior({ navigation: true, active: false })
     expect(expectedResult.attributes.root.tabIndex).toEqual(-1)
   })
 
-  test('set tabIndex="-1" when carousel has NO navigation and item is visible', () => {
+  test('sets tabIndex="-1" on root when carousel has NO navigation and item is visible', () => {
     const expectedResult = carouselItemBehavior({ navigation: false, active: true })
     expect(expectedResult.attributes.root.tabIndex).toEqual(-1)
   })
 
-  test('set tabIndex="-1" when carousel has NO navigation and item is NOT visible', () => {
+  test('sets tabIndex="-1" on root when carousel has NO navigation and item is NOT visible', () => {
     const expectedResult = carouselItemBehavior({ navigation: false, active: false })
     expect(expectedResult.attributes.root.tabIndex).toEqual(-1)
   })

From 4c8063efaa7465244544e5cf6ab1168e83404fc5 Mon Sep 17 00:00:00 2001
From: Milan Turon <mituron@microsoft.com>
Date: Fri, 7 Feb 2020 12:01:53 +0100
Subject: [PATCH 09/17] change of do description

---
 .../components/Carousel/BestPractices/CarouselBestPractices.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/examples/components/Carousel/BestPractices/CarouselBestPractices.tsx b/docs/src/examples/components/Carousel/BestPractices/CarouselBestPractices.tsx
index f7e4e3b2f2..ff41c43527 100644
--- a/docs/src/examples/components/Carousel/BestPractices/CarouselBestPractices.tsx
+++ b/docs/src/examples/components/Carousel/BestPractices/CarouselBestPractices.tsx
@@ -17,7 +17,7 @@ const doList = [
     If carousel contains `navigation`: 
     <ul>
       <li> provide label to `navigation` and to navigation item using `aria-label` attribute</li> 
-      <li> add `aria-controls` attribute to navigation item referencing by `carouselItem` id </li>
+      <li> add `aria-controls` attribute to navigation item referencing to `carouselItem` id </li>
     </ul>
   </Box>,
 ]

From 6993079e95e31b3bf31db506ffb344a56a3900fd Mon Sep 17 00:00:00 2001
From: Milan Turon <mituron@microsoft.com>
Date: Mon, 10 Feb 2020 10:24:22 +0100
Subject: [PATCH 10/17] fix lint issues

---
 .../Carousel/BestPractices/CarouselBestPractices.tsx           | 3 +--
 packages/accessibility/test/behaviors/caroselBehavior-test.tsx | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/docs/src/examples/components/Carousel/BestPractices/CarouselBestPractices.tsx b/docs/src/examples/components/Carousel/BestPractices/CarouselBestPractices.tsx
index ff41c43527..07c7d5fc9a 100644
--- a/docs/src/examples/components/Carousel/BestPractices/CarouselBestPractices.tsx
+++ b/docs/src/examples/components/Carousel/BestPractices/CarouselBestPractices.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react'
-import { Text } from '@fluentui/react'
-import { Box } from '@fluentui/react'
+import { Text, Box } from '@fluentui/react'
 import { link } from '../../../../utils/helpers'
 
 import ComponentBestPractices from 'docs/src/components/ComponentBestPractices'
diff --git a/packages/accessibility/test/behaviors/caroselBehavior-test.tsx b/packages/accessibility/test/behaviors/caroselBehavior-test.tsx
index 7887da10eb..2a92613d87 100644
--- a/packages/accessibility/test/behaviors/caroselBehavior-test.tsx
+++ b/packages/accessibility/test/behaviors/caroselBehavior-test.tsx
@@ -1,4 +1,4 @@
-import { carouselBehavior as carouselBehavior } from '@fluentui/accessibility'
+import { carouselBehavior } from '@fluentui/accessibility'
 
 const roleDescription = "carousel"
 const label = "portrait collection"

From 14730c8d223622815917b3cd0a96bc62cb39b219 Mon Sep 17 00:00:00 2001
From: Milan Turon <mituron@microsoft.com>
Date: Mon, 10 Feb 2020 10:29:42 +0100
Subject: [PATCH 11/17] another lint fix

---
 .../accessibility/src/behaviors/Carousel/carouselBehavior.ts  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/accessibility/src/behaviors/Carousel/carouselBehavior.ts b/packages/accessibility/src/behaviors/Carousel/carouselBehavior.ts
index d58f6ba737..c86cd7b711 100644
--- a/packages/accessibility/src/behaviors/Carousel/carouselBehavior.ts
+++ b/packages/accessibility/src/behaviors/Carousel/carouselBehavior.ts
@@ -28,7 +28,7 @@ const carouselBehavior: Accessibility<CarouselBehaviorProps> = props => ({
     root: {
       role: props.navigation ? undefined :  'region',
       'aria-roledescription': props.navigation ? undefined : props.ariaRoleDescription,
-      'aria-label': props.navigation ? undefined : props.ariaLabel
+      'aria-label': props.navigation ? undefined : props.ariaLabel,
     },
     itemsContainerWrapper: {
       'aria-live': props.ariaLiveOn ? 'polite' : 'off',
@@ -36,7 +36,7 @@ const carouselBehavior: Accessibility<CarouselBehaviorProps> = props => ({
     itemsContainer: {
       role: props.navigation ? 'group' : undefined,
       'aria-roledescription': props.navigation ? props.ariaRoleDescription : undefined,
-      'aria-label': props.navigation ? props.ariaLabel : undefined
+      'aria-label': props.navigation ? props.ariaLabel : undefined,
     },
 
     paddleNext: {

From 12b94e5976668465876efa7790ca49e1cdcd6ab3 Mon Sep 17 00:00:00 2001
From: Milan Turon <mituron@microsoft.com>
Date: Mon, 10 Feb 2020 10:42:51 +0100
Subject: [PATCH 12/17] apply prettier

---
 .../BestPractices/CarouselBestPractices.tsx   |  4 +-
 .../behaviors/Carousel/carouselBehavior.ts    |  8 +--
 .../test/behaviors/caroselBehavior-test.tsx   | 59 ++++++++++++++-----
 .../src/components/Carousel/Carousel.tsx      |  2 +-
 4 files changed, 51 insertions(+), 22 deletions(-)

diff --git a/docs/src/examples/components/Carousel/BestPractices/CarouselBestPractices.tsx b/docs/src/examples/components/Carousel/BestPractices/CarouselBestPractices.tsx
index 07c7d5fc9a..bff5993ed9 100644
--- a/docs/src/examples/components/Carousel/BestPractices/CarouselBestPractices.tsx
+++ b/docs/src/examples/components/Carousel/BestPractices/CarouselBestPractices.tsx
@@ -13,9 +13,9 @@ const doList = [
   'Provide  localized string of the "carousel" using `ariaRoleDescription` prop.',
   'Provide label to the carousel using `ariaLabel` prop.',
   <Box>
-    If carousel contains `navigation`: 
+    If carousel contains `navigation`:
     <ul>
-      <li> provide label to `navigation` and to navigation item using `aria-label` attribute</li> 
+      <li> provide label to `navigation` and to navigation item using `aria-label` attribute</li>
       <li> add `aria-controls` attribute to navigation item referencing to `carouselItem` id </li>
     </ul>
   </Box>,
diff --git a/packages/accessibility/src/behaviors/Carousel/carouselBehavior.ts b/packages/accessibility/src/behaviors/Carousel/carouselBehavior.ts
index c86cd7b711..19352a832f 100644
--- a/packages/accessibility/src/behaviors/Carousel/carouselBehavior.ts
+++ b/packages/accessibility/src/behaviors/Carousel/carouselBehavior.ts
@@ -1,7 +1,6 @@
 import { Accessibility } from '../../types'
 import * as keyboardKey from 'keyboard-key'
 
-
 /**
  * @description
  * Adds attribute 'role=region' to 'root' slot if 'navigation' property is false. Does not set the attribute otherwise.
@@ -9,7 +8,7 @@ import * as keyboardKey from 'keyboard-key'
  * Adds attribute 'aria-label' to 'root' slot if 'navigation' property is false. Does not set the attribute otherwise.
  * Adds attribute 'aria-roledescription' to 'itemsContainer' slot if 'navigation' property is true. Does not set the attribute otherwise.
  * Adds attribute 'aria-label' to 'itemsContainer' slot if 'navigation' property is true. Does not set the attribute otherwise.
- * 
+ *
  * @specification
  * Adds attribute 'role=region' to 'root' slot.
  * Adds attribute 'aria-live=polite' to 'itemsContainerWrapper' slot if 'ariaLiveOn' property is true. Sets the attribute to 'off' otherwise.
@@ -26,7 +25,7 @@ import * as keyboardKey from 'keyboard-key'
 const carouselBehavior: Accessibility<CarouselBehaviorProps> = props => ({
   attributes: {
     root: {
-      role: props.navigation ? undefined :  'region',
+      role: props.navigation ? undefined : 'region',
       'aria-roledescription': props.navigation ? undefined : props.ariaRoleDescription,
       'aria-label': props.navigation ? undefined : props.ariaLabel,
     },
@@ -78,10 +77,9 @@ const carouselBehavior: Accessibility<CarouselBehaviorProps> = props => ({
 export type CarouselBehaviorProps = {
   /** Element type. */
   navigation: Object | Object[]
-  ariaLiveOn: boolean    
+  ariaLiveOn: boolean
   ariaRoleDescription?: string
   ariaLabel?: string
-
 }
 
 export default carouselBehavior
diff --git a/packages/accessibility/test/behaviors/caroselBehavior-test.tsx b/packages/accessibility/test/behaviors/caroselBehavior-test.tsx
index 2a92613d87..a7e8e94c93 100644
--- a/packages/accessibility/test/behaviors/caroselBehavior-test.tsx
+++ b/packages/accessibility/test/behaviors/caroselBehavior-test.tsx
@@ -1,10 +1,9 @@
 import { carouselBehavior } from '@fluentui/accessibility'
 
-const roleDescription = "carousel"
-const label = "portrait collection"
+const roleDescription = 'carousel'
+const label = 'portrait collection'
 
 describe('carouselBehavior.ts', () => {
-
   describe('root', () => {
     test(`sets "role=region" when carousel has NO navigation`, () => {
       const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false })
@@ -12,22 +11,38 @@ describe('carouselBehavior.ts', () => {
     })
 
     test('sets "aria-roledescription" when carousel has NO navigation', () => {
-      const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false, ariaRoleDescription: roleDescription })
+      const expectedResult = carouselBehavior({
+        ariaLiveOn: false,
+        navigation: false,
+        ariaRoleDescription: roleDescription,
+      })
       expect(expectedResult.attributes.root['aria-roledescription']).toEqual(roleDescription)
     })
 
     test('sets "aria-label" when carousel has NO navigation', () => {
-      const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false, ariaLabel: label })
+      const expectedResult = carouselBehavior({
+        ariaLiveOn: false,
+        navigation: false,
+        ariaLabel: label,
+      })
       expect(expectedResult.attributes.root['aria-label']).toEqual(label)
     })
 
     test('do NOT set "aria-roledescription" when carousel has navigation', () => {
-      const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: true, ariaRoleDescription: roleDescription })
+      const expectedResult = carouselBehavior({
+        ariaLiveOn: false,
+        navigation: true,
+        ariaRoleDescription: roleDescription,
+      })
       expect(expectedResult.attributes.root['aria-roledescription']).toBeUndefined()
     })
 
     test('do NOT set "aria-label" when carousel has navigation', () => {
-      const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: true, ariaLabel: label })
+      const expectedResult = carouselBehavior({
+        ariaLiveOn: false,
+        navigation: true,
+        ariaLabel: label,
+      })
       expect(expectedResult.attributes.root['aria-label']).toBeUndefined()
     })
 
@@ -39,22 +54,40 @@ describe('carouselBehavior.ts', () => {
 
   describe('itemsContainer', () => {
     test('sets "aria-roledescription" when carousel has navigation', () => {
-      const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: true, ariaRoleDescription: roleDescription })
-      expect(expectedResult.attributes.itemsContainer['aria-roledescription']).toEqual(roleDescription)
+      const expectedResult = carouselBehavior({
+        ariaLiveOn: false,
+        navigation: true,
+        ariaRoleDescription: roleDescription,
+      })
+      expect(expectedResult.attributes.itemsContainer['aria-roledescription']).toEqual(
+        roleDescription,
+      )
     })
 
     test('sets "aria-label" when carousel has navigation', () => {
-      const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: true, ariaLabel: label })
+      const expectedResult = carouselBehavior({
+        ariaLiveOn: false,
+        navigation: true,
+        ariaLabel: label,
+      })
       expect(expectedResult.attributes.itemsContainer['aria-label']).toEqual(label)
     })
 
     test('do NOT set "aria-roledescription" when carousel has NO navigation', () => {
-      const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false, ariaRoleDescription: roleDescription })
+      const expectedResult = carouselBehavior({
+        ariaLiveOn: false,
+        navigation: false,
+        ariaRoleDescription: roleDescription,
+      })
       expect(expectedResult.attributes.itemsContainer['aria-roledescription']).toBeUndefined()
     })
 
     test('do NOT set "aria-label" when carousel has NO navigation', () => {
-      const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false, ariaLabel: label })
+      const expectedResult = carouselBehavior({
+        ariaLiveOn: false,
+        navigation: false,
+        ariaLabel: label,
+      })
       expect(expectedResult.attributes.itemsContainer['aria-label']).toBeUndefined()
     })
 
@@ -63,6 +96,4 @@ describe('carouselBehavior.ts', () => {
       expect(expectedResult.attributes.itemsContainer.role).toBeUndefined()
     })
   })
-
-
 })
diff --git a/packages/react/src/components/Carousel/Carousel.tsx b/packages/react/src/components/Carousel/Carousel.tsx
index 8fce78bbf6..acf5e858ba 100644
--- a/packages/react/src/components/Carousel/Carousel.tsx
+++ b/packages/react/src/components/Carousel/Carousel.tsx
@@ -241,7 +241,7 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
   }
 
   renderContent = (accessibility, styles, unhandledProps) => {
-    const {getItemPositionText, items} = this.props
+    const { getItemPositionText, items } = this.props
     const { activeIndex, itemIds } = this.state
 
     this.itemRefs = []

From fc6abdaab08f0d1ba039f84d199e1c589992d2fc Mon Sep 17 00:00:00 2001
From: Milan Turon <mituron@microsoft.com>
Date: Tue, 18 Feb 2020 18:50:46 +0100
Subject: [PATCH 13/17] merging with latest master

---
 .circleci/config.yml                          |    7 +-
 CHANGELOG.md                                  |   69 +-
 build/babel/index.js                          |    2 +
 build/dangerjs/checkPerfRegressions.ts        |   89 +-
 build/gulp/tasks/bundle.ts                    |    5 +
 build/gulp/tasks/test-projects.ts             |   30 +
 .../gulp/tasks/test-projects/nextjs/index.js  |   11 +
 .../tasks/test-projects/typings/tsconfig.json |    3 +-
 build/package.json                            |   33 +-
 build/webpack.config.ts                       |    2 +-
 dangerfile.ts                                 |    4 +-
 docs/package.json                             |    4 +-
 .../ComponentExample/ComponentExample.tsx     |    2 +-
 .../ComponentPerfChart.tsx                    |    2 +-
 .../src/components/Playground/renderConfig.ts |    3 +-
 docs/src/components/Sidebar/Sidebar.tsx       |   22 +
 .../AnimationExampleVisible.shorthand.tsx     |    8 -
 .../CarouselExampleWithFocusableElements.tsx  |    2 +-
 .../ChatExampleActions.shorthand.steps.ts     |   16 +
 .../ChatExampleInScrollable.shorthand.tsx     |   18 +-
 .../DialogExampleScroll.shorthand.steps.ts    |    8 +
 .../DialogExampleScroll.shorthand.tsx         |   32 +
 docs/src/examples/components/Dialog/index.tsx |    6 +
 .../List/Content/ListExampleContent.tsx       |   12 +-
 .../List/Content/ListExampleContentMedia.tsx  |    3 +
 .../List/Content/ListExampleEndMedia.tsx      |    3 +
 .../List/Content/ListExampleHeader.tsx        |    6 +-
 .../List/Content/ListExampleHeaderContent.tsx |    3 +
 .../List/Content/ListExampleHeaderMedia.tsx   |    6 +-
 .../List/Content/ListExampleMedia.tsx         |    3 +
 .../List/Performance/ListNested.perf.tsx      |  865 +++++++++
 .../Performance/ListWith60ListItems.perf.tsx  |   35 +
 .../components/List/Performance/index.tsx     |   10 +
 .../components/List/Types/ListExample.tsx     |    3 +
 .../List/Types/ListExampleNavigable.tsx       |    3 +
 .../List/Types/ListExampleSelectable.tsx      |    6 +-
 .../components/List/Usage/ListExampleMemo.tsx |   59 +
 .../examples/components/List/Usage/index.tsx  |   19 +
 .../List/Variations/ListExampleTruncate.tsx   |    3 +
 docs/src/examples/components/List/index.tsx   |    2 +
 .../BestPractices/LoaderBestPractices.tsx     |   14 +
 ...opupCustomTargetExample.shorthand.steps.ts |    7 +
 .../PopupCustomTargetExample.shorthand.tsx    |   52 +-
 .../Popup/Types/PopupCustomTargetExample.tsx  |   52 +-
 .../Types/PopupExamplePointerOffset.steps.ts  |    7 +
 .../Popup/Types/PopupExamplePointerOffset.tsx |   23 +
 .../examples/components/Popup/Types/index.tsx |    5 +
 .../Provider/Types/ProviderExampleStyles.tsx  |   31 +
 .../components/Provider/Types/index.tsx       |    3 +-
 .../TooltipExamplePointing.shorthand.steps.ts |   15 +
 .../Performance/TreeWith60ListItems.perf.tsx  |   76 +
 .../components/Tree/Performance/index.tsx     |   16 +
 docs/src/examples/components/Tree/index.tsx   |    2 +
 docs/src/pages/ComponentArchitecture.mdx      |   47 +
 docs/src/pages/ThemingSpecification.mdx       |  282 +++
 .../EditorToolbar/EditorToolbar.tsx           |    5 +-
 .../ChatWithPopover.tsx                       |   10 +-
 .../ChatMessageWithPopover/ReactionPopup.tsx  |   19 +-
 .../controlMessagesGroupBehavior.ts           |    4 +-
 .../ThreadedMessages/threadChatBehavior.ts    |    4 +-
 .../threadedMessageBehavior.ts                |    9 +-
 docs/src/routes.tsx                           |    8 +
 e2e/package.json                              |    6 +-
 lerna.json                                    |    2 +-
 package.json                                  |    3 +-
 packages/ability-attributes/package.json      |    2 +-
 packages/accessibility/package.json           |    6 +-
 .../Accordion/accordionTitleBehavior.ts       |    7 +-
 .../src/behaviors/Alert/alertBaseBehavior.ts  |   17 +
 .../src/behaviors/Alert/alertBehavior.ts      |    3 +-
 .../src/behaviors/Chat/chatBehavior.ts        |    4 +-
 .../src/behaviors/Chat/chatMessageBehavior.ts |    4 +-
 .../behaviors/Checkbox/checkboxBehavior.ts    |    4 +-
 .../src/behaviors/Icon/iconBehavior.ts        |    3 +-
 .../src/behaviors/Loader/loaderBehavior.ts    |   32 +-
 .../src/behaviors/Slider/sliderBehavior.ts    |    2 +-
 .../Tooltip/tooltipAsDescriptionBehavior.ts   |    4 +-
 packages/accessibility/src/behaviors/index.ts |    7 +
 .../test/behaviors/alertBehavior-test.tsx     |   10 +
 .../test/behaviors/behavior-test.tsx          |    2 +
 .../test/behaviors/loaderBehavior-test.tsx    |   33 +
 .../test/behaviors/testHelper.tsx             |    1 +
 packages/code-sandbox/package.json            |    6 +-
 packages/digest/package.json                  |    2 +-
 packages/docs-components/package.json         |    4 +-
 .../docs-components/src/knobs/KnobContexts.ts |    8 +-
 .../src/knobs/KnobProvider.tsx                |   17 +-
 .../src/knobs/LogInspector.tsx                |    6 +-
 packages/docs-components/src/knobs/types.ts   |    6 +-
 .../docs-components/src/knobs/useLogKnob.ts   |   11 +-
 packages/eslint-plugin/package.json           |    2 +-
 packages/local-sandbox/.browserslistrc        |    1 +
 packages/local-sandbox/README.md              |   16 +
 packages/local-sandbox/babel.config.js        |    1 +
 packages/local-sandbox/package.json           |   32 +
 packages/local-sandbox/public/index.html      |    6 +
 packages/local-sandbox/server.js              |   16 +
 packages/local-sandbox/src/index.tsx          |   12 +
 packages/local-sandbox/tsconfig.json          |   18 +
 packages/local-sandbox/webpack.config.ts      |   73 +
 packages/perf-test/just.config.ts             |    5 +-
 packages/perf-test/package.json               |   10 +-
 packages/perf-test/tasks/perf-test.ts         |   31 +-
 packages/playground/package.json              |    6 +-
 packages/react-bindings/README.md             |   39 +-
 packages/react-bindings/package.json          |   12 +-
 .../src/FocusZone/FocusZone.tsx               |    3 +
 .../src/hooks/useAutoControlled.ts            |   27 +
 .../src/hooks/useIsomorphicLayoutEffect.ts    |    8 +
 .../src/hooks/useStateManager.ts              |   24 +-
 .../react-bindings/src/hooks/useStyles.ts     |   18 +-
 packages/react-bindings/src/index.ts          |    5 +-
 .../src/styles/calculateAnimationTimeout.ts   |   10 +
 .../src/styles/convertCssTimeToNumber.ts      |   20 +
 .../react-bindings/src/styles/getStyles.ts    |  125 +-
 .../src/styles/resolveStyles.ts               |  227 +++
 .../src/styles/resolveStylesAndClasses.tsx    |   82 -
 .../src/styles/resolveVariables.ts            |   54 +
 packages/react-bindings/src/styles/types.ts   |   27 +-
 .../test/hooks/useAutoControlled-test.tsx     |  110 ++
 .../test/hooks/useStateManager-test.tsx       |   45 +-
 .../test/hooks/useStyles-test.tsx             |    1 -
 .../styles/convertCssTimeToNumber-test.ts     |   25 +
 .../test/styles/resolveStyles-test.ts         |  269 +++
 .../styles/resolveStylesAndClasses-test.ts    |   68 -
 .../test/styles/resolveVariables-test.ts      |   86 +
 .../package.json                              |    6 +-
 .../src/EventListener.ts                      |    5 +-
 .../src/types.ts                              |    8 +-
 .../src/useEventListener.ts                   |   41 +-
 .../test/EventListener-test.tsx               |   83 +
 .../package.json                              |    6 +-
 packages/react-component-ref/package.json     |    6 +-
 .../react-component-ref/src/RefFindNode.tsx   |    2 +
 packages/react-component-ref/src/index.ts     |    1 -
 .../react-component-ref/src/toRefObject.ts    |   25 -
 .../test/toRefObject-test.ts                  |   19 -
 packages/react-context-selector/.gulp.js      |    1 +
 packages/react-context-selector/README.md     |   41 +
 .../react-context-selector/babel.config.js    |    1 +
 packages/react-context-selector/gulpfile.ts   |    1 +
 .../react-context-selector/jest.config.js     |    5 +
 packages/react-context-selector/package.json  |   40 +
 .../src/createContext.ts                      |   78 +
 packages/react-context-selector/src/index.ts  |    4 +
 packages/react-context-selector/src/types.ts  |   19 +
 .../src/useContextSelector.ts                 |   63 +
 .../src/useContextSelectors.ts                |   82 +
 packages/react-context-selector/src/utils.ts  |    6 +
 .../test/createContext-test.tsx               |   73 +
 .../test/useContextSelector-test.tsx          |   88 +
 .../test/useContextSelectors-test.tsx         |   87 +
 packages/react-context-selector/tsconfig.json |   14 +
 packages/react-proptypes/package.json         |    6 +-
 packages/react-proptypes/src/index.ts         |   14 +-
 packages/react-theming/package.json           |    4 +-
 packages/react/package.json                   |   21 +-
 .../components/Accordion/AccordionTitle.tsx   |    8 +-
 .../src/components/Animation/Animation.tsx    |  257 ++-
 .../src/components/Carousel/Carousel.tsx      |  104 +-
 packages/react/src/components/Chat/Chat.tsx   |  140 +-
 .../react/src/components/Chat/ChatItem.tsx    |  209 ++-
 .../react/src/components/Chat/ChatMessage.tsx |  391 ++--
 .../src/components/Checkbox/Checkbox.tsx      |  239 ++-
 packages/react/src/components/Debug/Debug.tsx |   11 +-
 .../react/src/components/Dialog/Dialog.tsx    |    9 +-
 .../src/components/Dropdown/Dropdown.tsx      |    7 +-
 .../react/src/components/Flex/FlexItem.tsx    |   11 +-
 packages/react/src/components/Icon/Icon.tsx   |  166 +-
 packages/react/src/components/Label/Label.tsx |  242 ++-
 packages/react/src/components/List/List.tsx   |   79 +-
 .../react/src/components/List/ListItem.tsx    |   30 +-
 .../react/src/components/List/listContext.ts  |   43 +
 .../react/src/components/Loader/Loader.tsx    |   17 +-
 .../react/src/components/Menu/MenuItem.tsx    |    9 +-
 packages/react/src/components/Popup/Popup.tsx |   48 +-
 .../react/src/components/Portal/Portal.tsx    |    9 +-
 .../src/components/Portal/PortalInner.tsx     |   11 +-
 .../src/components/Provider/Provider.tsx      |  370 ++--
 .../src/components/Provider/ProviderBox.tsx   |   45 -
 .../src/components/Provider/usePortalBox.ts   |   48 +
 .../react/src/components/Slider/Slider.tsx    |  299 +--
 .../react/src/components/Status/Status.tsx    |  123 +-
 packages/react/src/components/Text/Text.tsx   |  156 +-
 .../react/src/components/Toolbar/Toolbar.tsx  |   10 +-
 .../src/components/Toolbar/ToolbarItem.tsx    |    5 +-
 .../components/Toolbar/ToolbarMenuItem.tsx    |    6 +-
 .../react/src/components/Tooltip/Tooltip.tsx  |  421 +++--
 .../src/components/Tooltip/TooltipContent.tsx |  145 +-
 .../react/src/themes/teams-dark/colors.ts     |    1 +
 .../themes/teams-dark/componentVariables.ts   |    2 +-
 .../Provider/providerBoxVariables.ts          |    6 -
 .../components/Provider/providerVariables.ts  |    6 +
 .../src/themes/teams-high-contrast/colors.ts  |    1 +
 .../teams-high-contrast/componentVariables.ts |    2 +-
 .../Provider/providerBoxVariables.ts          |    6 -
 .../components/Provider/providerVariables.ts  |    6 +
 .../src/themes/teams/animations/index.ts      |   10 +-
 .../src/themes/teams/animations/slide.ts      |    2 +-
 packages/react/src/themes/teams/colors.ts     |    3 +
 .../react/src/themes/teams/componentStyles.ts |    6 +-
 .../src/themes/teams/componentVariables.ts    |    6 +-
 .../Accordion/accordionTitleStyles.ts         |    4 +-
 .../components/Animation/animationStyles.ts   |   22 -
 .../Animation/animationVariables.ts           |    1 -
 .../components/Attachment/attachmentStyles.ts |    2 +-
 .../components/Carousel/carouselItemStyles.ts |    3 +
 .../components/Carousel/carouselStyles.ts     |   13 +-
 .../components/Carousel/carouselVariables.ts  |    4 +
 .../teams/components/Chat/chatItemStyles.ts   |    4 +-
 .../components/Chat/chatMessageStyles.ts      |   18 +-
 .../components/Chat/chatMessageVariables.ts   |    4 +
 .../teams/components/Chat/chatStyles.ts       |    4 +-
 .../components/Checkbox/checkboxStyles.ts     |   12 +-
 .../components/Dialog/dialogVariables.ts      |    2 +-
 .../components/Dropdown/dropdownStyles.ts     |    2 +-
 .../components/Dropdown/dropdownVariables.ts  |    2 +
 .../teams/components/Embed/embedStyles.ts     |    2 +-
 .../teams/components/Embed/embedVariables.ts  |    2 +
 .../teams/components/Flex/flexItemStyles.ts   |    2 +-
 .../teams/components/Icon/iconStyles.ts       |   18 +-
 .../components/Icon/svg/icons/collapse.tsx    |   41 +
 .../components/Icon/svg/icons/companion.tsx   |   20 +
 .../components/Icon/svg/icons/expand.tsx      |   42 +
 .../teams/components/Icon/svg/icons/index.ts  |   58 +-
 .../Icon/svg/icons/settingsAudio.tsx          |   20 +
 .../components/Icon/svg/icons/shareTo.tsx     |   20 +
 .../teams/components/Input/inputStyles.ts     |    2 +
 .../teams/components/Input/inputVariables.ts  |    6 +-
 .../teams/components/Label/labelStyles.ts     |   13 +-
 .../teams/components/List/listItemStyles.ts   |    2 +-
 .../components/List/listItemVariables.ts      |    2 +
 .../teams/components/Menu/menuItemStyles.ts   |    6 +-
 .../teams/components/Menu/menuVariables.ts    |    5 +
 .../components/Popup/popupContentStyles.ts    |   11 +-
 .../components/Popup/popupContentVariables.ts |    8 +
 .../teams/components/Popup/popupStyles.ts     |   24 -
 .../teams/components/Popup/popupVariables.ts  |   11 -
 ...providerBoxStyles.ts => providerStyles.ts} |    4 +-
 ...erBoxVariables.ts => providerVariables.ts} |    4 +-
 .../teams/components/Slider/sliderStyles.ts   |    6 +-
 .../teams/components/Status/statusStyles.ts   |    4 +-
 .../teams/components/Text/textStyles.ts       |   83 +-
 .../Toolbar/toolbarMenuItemStyles.ts          |    1 +
 .../components/Toolbar/toolbarMenuStyles.ts   |    2 +-
 .../components/Toolbar/toolbarVariables.ts    |    4 +
 .../Tooltip/tooltipContentStyles.ts           |   15 +-
 .../Tooltip/tooltipContentVariables.ts        |    4 +
 .../teams/components/Tooltip/tooltipStyles.ts |   18 -
 .../components/Tooltip/tooltipVariables.ts    |    7 -
 .../src/themes/teams/getBorderFocusStyles.ts  |    4 +-
 .../react/src/themes/teams/siteVariables.ts   |   12 +
 packages/react/src/themes/teams/types.ts      |   40 +-
 packages/react/src/types.ts                   |   18 +-
 packages/react/src/utils/UIComponent.tsx      |    2 +
 .../utils/applyAccessibilityKeyHandlers.ts    |    5 +-
 packages/react/src/utils/createComponent.tsx  |    4 +-
 .../react/src/utils/mergeProviderContexts.ts  |   27 +-
 .../react/src/utils/positioner/Popper.tsx     |  165 +-
 .../src/utils/positioner/initialStyles.ts     |   13 +
 packages/react/src/utils/positioner/types.ts  |    4 +-
 packages/react/src/utils/renderComponent.tsx  |   11 +-
 packages/react/src/utils/whatInput.ts         |    6 +-
 .../commonTests/handlesAccessibility.tsx      |    7 +-
 .../test/specs/commonTests/isConformant.tsx   |    7 +-
 .../Accordion/AccordionTitle-test.tsx         |   45 +
 .../components/Animation/Animation-test.tsx   |   10 +
 .../components/Carousel/Carousel-test.tsx     |    3 +-
 .../test/specs/components/Chat/Chat-test.ts   |    4 +-
 .../specs/components/Chat/ChatItem-test.tsx   |    4 +-
 .../components/Chat/ChatMessage-test.tsx      |   17 +-
 .../components/Checkbox/Checkbox-test.tsx     |    2 +-
 .../test/specs/components/Icon/Icon-test.tsx  |    2 +-
 .../specs/components/Label/Label-test.tsx     |    2 +-
 .../test/specs/components/List/List-test.tsx  |   48 +-
 .../components/Provider/Provider-test.tsx     |   51 +-
 .../specs/components/Slider/Slider-test.tsx   |    1 +
 .../specs/components/Status/Status-test.tsx   |    2 +-
 .../test/specs/components/Text/Text-test.tsx  |    2 +-
 .../components/Tooltip/TooltipContent-test.ts |    4 +-
 .../__snapshots__/felaRenderer-test.tsx.snap  |   10 +-
 .../test/specs/utils/felaRenderer-test.tsx    |   28 -
 packages/react/test/utils/withProvider.tsx    |    2 +-
 packages/react/tsconfig.json                  |    1 +
 packages/state/package.json                   |    6 +-
 packages/state/src/index.ts                   |    3 +-
 .../state/src/managers/checkboxManager.ts     |   27 +
 packages/state/src/managers/listManager.ts    |   26 -
 packages/state/src/managers/sliderManager.ts  |   27 +
 packages/styles/package.json                  |   10 +-
 packages/styles/src/types.ts                  |    2 +
 perf/package.json                             |    6 +-
 scripts/package.json                          |    4 +-
 yarn.lock                                     | 1617 ++++++++++++-----
 294 files changed, 8358 insertions(+), 2908 deletions(-)
 create mode 100644 build/gulp/tasks/test-projects/nextjs/index.js
 create mode 100644 docs/src/examples/components/Chat/Content/ChatExampleActions.shorthand.steps.ts
 create mode 100644 docs/src/examples/components/Dialog/Variations/DialogExampleScroll.shorthand.steps.ts
 create mode 100644 docs/src/examples/components/Dialog/Variations/DialogExampleScroll.shorthand.tsx
 create mode 100644 docs/src/examples/components/List/Performance/ListNested.perf.tsx
 create mode 100644 docs/src/examples/components/List/Performance/ListWith60ListItems.perf.tsx
 create mode 100644 docs/src/examples/components/List/Usage/ListExampleMemo.tsx
 create mode 100644 docs/src/examples/components/List/Usage/index.tsx
 create mode 100644 docs/src/examples/components/Loader/BestPractices/LoaderBestPractices.tsx
 create mode 100644 docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.steps.ts
 create mode 100644 docs/src/examples/components/Popup/Types/PopupExamplePointerOffset.steps.ts
 create mode 100644 docs/src/examples/components/Popup/Types/PopupExamplePointerOffset.tsx
 create mode 100644 docs/src/examples/components/Provider/Types/ProviderExampleStyles.tsx
 create mode 100644 docs/src/examples/components/Tooltip/Types/TooltipExamplePointing.shorthand.steps.ts
 create mode 100644 docs/src/examples/components/Tree/Performance/TreeWith60ListItems.perf.tsx
 create mode 100644 docs/src/examples/components/Tree/Performance/index.tsx
 create mode 100644 docs/src/pages/ComponentArchitecture.mdx
 create mode 100644 docs/src/pages/ThemingSpecification.mdx
 create mode 100644 packages/accessibility/src/behaviors/Alert/alertBaseBehavior.ts
 create mode 100644 packages/accessibility/test/behaviors/loaderBehavior-test.tsx
 create mode 100644 packages/local-sandbox/.browserslistrc
 create mode 100644 packages/local-sandbox/README.md
 create mode 100644 packages/local-sandbox/babel.config.js
 create mode 100644 packages/local-sandbox/package.json
 create mode 100644 packages/local-sandbox/public/index.html
 create mode 100644 packages/local-sandbox/server.js
 create mode 100644 packages/local-sandbox/src/index.tsx
 create mode 100644 packages/local-sandbox/tsconfig.json
 create mode 100644 packages/local-sandbox/webpack.config.ts
 create mode 100644 packages/react-bindings/src/hooks/useAutoControlled.ts
 create mode 100644 packages/react-bindings/src/hooks/useIsomorphicLayoutEffect.ts
 create mode 100644 packages/react-bindings/src/styles/calculateAnimationTimeout.ts
 create mode 100644 packages/react-bindings/src/styles/convertCssTimeToNumber.ts
 create mode 100644 packages/react-bindings/src/styles/resolveStyles.ts
 delete mode 100644 packages/react-bindings/src/styles/resolveStylesAndClasses.tsx
 create mode 100644 packages/react-bindings/src/styles/resolveVariables.ts
 create mode 100644 packages/react-bindings/test/hooks/useAutoControlled-test.tsx
 create mode 100644 packages/react-bindings/test/styles/convertCssTimeToNumber-test.ts
 create mode 100644 packages/react-bindings/test/styles/resolveStyles-test.ts
 delete mode 100644 packages/react-bindings/test/styles/resolveStylesAndClasses-test.ts
 create mode 100644 packages/react-bindings/test/styles/resolveVariables-test.ts
 delete mode 100644 packages/react-component-ref/src/toRefObject.ts
 delete mode 100644 packages/react-component-ref/test/toRefObject-test.ts
 create mode 100644 packages/react-context-selector/.gulp.js
 create mode 100644 packages/react-context-selector/README.md
 create mode 100644 packages/react-context-selector/babel.config.js
 create mode 100644 packages/react-context-selector/gulpfile.ts
 create mode 100644 packages/react-context-selector/jest.config.js
 create mode 100644 packages/react-context-selector/package.json
 create mode 100644 packages/react-context-selector/src/createContext.ts
 create mode 100644 packages/react-context-selector/src/index.ts
 create mode 100644 packages/react-context-selector/src/types.ts
 create mode 100644 packages/react-context-selector/src/useContextSelector.ts
 create mode 100644 packages/react-context-selector/src/useContextSelectors.ts
 create mode 100644 packages/react-context-selector/src/utils.ts
 create mode 100644 packages/react-context-selector/test/createContext-test.tsx
 create mode 100644 packages/react-context-selector/test/useContextSelector-test.tsx
 create mode 100644 packages/react-context-selector/test/useContextSelectors-test.tsx
 create mode 100644 packages/react-context-selector/tsconfig.json
 create mode 100644 packages/react/src/components/List/listContext.ts
 delete mode 100644 packages/react/src/components/Provider/ProviderBox.tsx
 create mode 100644 packages/react/src/components/Provider/usePortalBox.ts
 delete mode 100644 packages/react/src/themes/teams-dark/components/Provider/providerBoxVariables.ts
 create mode 100644 packages/react/src/themes/teams-dark/components/Provider/providerVariables.ts
 delete mode 100644 packages/react/src/themes/teams-high-contrast/components/Provider/providerBoxVariables.ts
 create mode 100644 packages/react/src/themes/teams-high-contrast/components/Provider/providerVariables.ts
 delete mode 100644 packages/react/src/themes/teams/components/Animation/animationStyles.ts
 delete mode 100644 packages/react/src/themes/teams/components/Animation/animationVariables.ts
 create mode 100644 packages/react/src/themes/teams/components/Icon/svg/icons/collapse.tsx
 create mode 100644 packages/react/src/themes/teams/components/Icon/svg/icons/companion.tsx
 create mode 100644 packages/react/src/themes/teams/components/Icon/svg/icons/expand.tsx
 create mode 100644 packages/react/src/themes/teams/components/Icon/svg/icons/settingsAudio.tsx
 create mode 100644 packages/react/src/themes/teams/components/Icon/svg/icons/shareTo.tsx
 delete mode 100644 packages/react/src/themes/teams/components/Popup/popupStyles.ts
 delete mode 100644 packages/react/src/themes/teams/components/Popup/popupVariables.ts
 rename packages/react/src/themes/teams/components/Provider/{providerBoxStyles.ts => providerStyles.ts} (85%)
 rename packages/react/src/themes/teams/components/Provider/{providerBoxVariables.ts => providerVariables.ts} (87%)
 delete mode 100644 packages/react/src/themes/teams/components/Tooltip/tooltipStyles.ts
 delete mode 100644 packages/react/src/themes/teams/components/Tooltip/tooltipVariables.ts
 create mode 100644 packages/react/src/utils/positioner/initialStyles.ts
 create mode 100644 packages/state/src/managers/checkboxManager.ts
 delete mode 100644 packages/state/src/managers/listManager.ts
 create mode 100644 packages/state/src/managers/sliderManager.ts

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 48794f1c58..16330ee4e5 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -77,7 +77,12 @@ jobs:
           command: yarn test:circulars
       - run:
           name: Flamegrill
-          command: yarn perf:test
+          command: |
+            if [ $CIRCLE_BRANCH == 'master' ]; then
+              yarn perf:test:base
+            else
+              yarn perf:test
+            fi
       - run:
           name: Bundle Statistics (master only)
           command: |
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7232676b20..f42474fe2a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,44 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### BREAKING CHANGES
+- Restricted prop sets in the `Checkbox`, `Icon`, `Label`, `Slider`, `Status`, `Text` components which are passed to styles functions @layershifter ([#2307](https://github.com/microsoft/fluent-ui-react/pull/2307))
+- Styles caching when no inline overrides are defined is enabled by default; use the `performance` prop on the `Provider` to opt out of this if needed @mnajdova ([#2309](https://github.com/microsoft/fluent-ui-react/pull/2309))
+- Styles for the `Animation` component are removed from Teams theme @layershifter ([#2258](https://github.com/microsoft/fluent-ui-react/pull/2258))
+- Styles from `Popup` were moved `PopupContent` component @layershifter ([#2333](https://github.com/microsoft/fluent-ui-react/pull/2333))
+- Styles from `Tooltip` were moved `TooltipContent` component @layershifter ([#2333](https://github.com/microsoft/fluent-ui-react/pull/2333))
+- `ProviderBox` component was removed @layershifter ([#2192](https://github.com/microsoft/fluent-ui-react/pull/2192))
+- Styles and variables from `ProviderBox` are moved to `Provider` @layershifter ([#2192](https://github.com/microsoft/fluent-ui-react/pull/2192))
+- Fix an issue with `offset` and `pointing` in `Popup` @layershifter ([#2361](https://github.com/microsoft/fluent-ui-react/pull/2361))
+- Restricted prop set in the `TooltipContent` component which is passed to styles functions @layershifter ([#2357](https://github.com/microsoft/fluent-ui-react/pull/2357))
+- Restricted prop sets in the `Chat`, `ChatItem`, `ChatMessage` components which are passed to styles functions @layershifter ([#2366](https://github.com/microsoft/fluent-ui-react/pull/2366))
+
+### Fixes
+- Remove dependency on Lodash in TypeScript typings @layershifter ([#2323](https://github.com/microsoft/fluent-ui-react/pull/2323))
+- Fix missing aria-describedby in AlertBehavior @delprzemo ([#2208](https://github.com/microsoft/fluent-ui-react/pull/2208))
+- Fix page crash when `Tooltip` content is null @delprzemo ([#2332](https://github.com/microsoft/fluent-ui-react/pull/2332))
+- Fix `document` usage in `mergeProviderContexts` to get SSR working @layershifter ([#2330](https://github.com/microsoft/fluent-ui-react/pull/2330))
+- Fix `input` descenders being cropped in the Teams theme @bcalvery ([#2335](https://github.com/microsoft/fluent-ui-react/pull/2335))
+- Use referentially equal objects for `actions` in `useStateManager` @layershifter ([#2347](https://github.com/microsoft/fluent-ui-react/pull/2347))
+- Fix `Animation` component not to throw when `children` is not provided @mnajdova ([#2345](https://github.com/microsoft/fluent-ui-react/pull/2345))
+- Fix `loader` - adding labeling when loader get focus @kolaps33 ([#2352](https://github.com/microsoft/fluent-ui-react/pull/2352))
+- `setWhatInputSource()` changes DOM attribute in `whatInput` @layershifter ([#2359](https://github.com/microsoft/fluent-ui-react/pull/2359))
+- Styles from `Provider` are applied to components that rendered out of it in DOM @layershifter ([#2192](https://github.com/microsoft/fluent-ui-react/pull/2192))
+- Fix `Carousel` remove `CarouselItem` elements which are not visible @mnajdova ([#2356](https://github.com/microsoft/fluent-ui-react/pull/2356))
+
+### Features
+- Added sourcemaps to the dist output to simplify debugging @miroslavstastny ([#2329](https://github.com/microsoft/fluent-ui-react/pull/2329))
+- Adding 'expand', 'collapse', 'companion', 'share-to' and 'settings-audio' icons @TanelVari ([#2343](https://github.com/microsoft/fluent-ui-react/pull/2343))
+- Add support for Children API in `List` component @layershifter ([#2207](https://github.com/microsoft/fluent-ui-react/pull/2207))
+
+### Performance
+- Add styles caching when there aren't inline overrides defined @mnajdova ([#2309](https://github.com/microsoft/fluent-ui-react/pull/2309))
+- Styles for `Animation` component are computed again only on prop changes @layershifter ([#2258](https://github.com/microsoft/fluent-ui-react/pull/2258))
+
+<!--------------------------------[ v0.44.0 ]------------------------------- -->
+## [v0.44.0](https://github.com/microsoft/fluent-ui-react/tree/v0.44.0) (2020-02-05)
+[Compare changes](https://github.com/microsoft/fluent-ui-react/compare/v0.43.2..v0.44.0)
+
 ### BREAKING CHANGES
 - Add `@fluentui/styles` package for all styles' related utilities and TS types @layershifter, @mnajdova ([#2222](https://github.com/microsoft/fluent-ui-react/pull/2222))
 - Remove `animation` prop from all components @joschect ([#2239](https://github.com/microsoft/fluent-ui-react/pull/2239))
@@ -27,14 +65,13 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Restricted prop set in the `Button`, `Avatar`, `Box` and `Image` styles; changed `avatarBorderWidth` and `statusBorderWidth` avatar variables types from number to string and updated styles in Teams theme @mnajdova ([#2238](https://github.com/microsoft/fluent-ui-react/pull/2238))
 - Restricted prop set in the `List` & `ListItem` @layershifter ([#2238](https://github.com/microsoft/fluent-ui-react/pull/2238))
 - Remove `mountDocument` prop in `Popup` & `MenuButton` components @layershifter ([#2286](https://github.com/microsoft/fluent-ui-react/pull/2286))
+- Add typing `ComponentSlotStylesResolved`, that replaces the incorrect `ComponentSlotStylesPrepared` in the return value of `useStyles`, `renderComponent`, `createComponent` @mnajdova ([#2312](https://github.com/microsoft/fluent-ui-react/pull/2312))
 
 ### Fixes
-- Fix event listener leak in `FocusZone` @miroslavstastny ([#2227](https://github.com/microsoft/fluent-ui-react/pull/2227))
 - Fix styleParam to always be required in the styles functions @layershifter, @mnajdova ([#2235](https://github.com/microsoft/fluent-ui-react/pull/2235))
 - Check input and button refs exist before focus in `Dropdown` @silviuavram ([#2248](https://github.com/microsoft/fluent-ui-react/pull/2248))
 - Update iconOnly button hover, focus styles and add new `background5` and `backgroundHover2` design tokens in Teams theme @codepretty ([#2211](https://github.com/microsoft/fluent-ui-react/pull/2211))
 - Fix `forceUpdate` to get synced updates in React's Concurrent mode @layershifter ([#2268](https://github.com/microsoft/fluent-ui-react/pull/2268))
-- Fix element reference memory leaks @jurokapsiar ([#2270](https://github.com/microsoft/fluent-ui-react/pull/2270))
 - Adding actionable items into `Carousel` @kolaps33 ([#2271](https://github.com/microsoft/fluent-ui-react/pull/2271))
 
 ### Features
@@ -42,10 +79,38 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `useStyles()` hook to use theming capabilities in custom components @layershifter, @mnajdova ([#2217](https://github.com/microsoft/fluent-ui-react/pull/2217))
 - Add optional wrapper function to `List` which can be used to inject custom scrollbars to `Dropdown` @jurokapsiar ([#2092](https://github.com/microsoft/fluent-ui-react/pull/2092))
 - Add `useTelemetry()` hook for adding telemetry information for the Fluent components and improve return types for the `useStyles` and `useStateManager` hooks @mnajdova ([#2257](https://github.com/microsoft/fluent-ui-react/pull/2257))
+- Add new `backgroundHover1` Red design tokens in Teams theme @codepretty ([#2297](https://github.com/microsoft/fluent-ui-react/pull/2297))
+- Add `target` prop to `EventListener` component and `useEventListener()` hook @layershifter ([#2287](https://github.com/microsoft/fluent-ui-react/pull/2287))
+- Add `disabled` prop accordion title @jurokapsiar ([#2290](https://github.com/microsoft/fluent-ui-react/pull/2290))
+- Allow custom values for `size` in `FlexItem` @silviuavram ([#2313](https://github.com/microsoft/fluent-ui-react/pull/2313))
+- Move `zIndex` values from default variable values and styles to siteVariables object in Teams theme @pompomon ([#2311](https://github.com/microsoft/fluent-ui-react/pull/2311)) 
 
 ### Documentation
 - Add per-component performance charts @miroslavstastny ([#2240](https://github.com/microsoft/fluent-ui-react/pull/2240))
 
+<!--------------------------------[ v0.43.2 ]------------------------------- -->
+## [v0.43.2](https://github.com/microsoft/fluent-ui-react/tree/v0.43.2) (2020-02-05)
+[Compare changes](https://github.com/microsoft/fluent-ui-react/compare/v0.43.1..v0.43.2)
+
+### BREAKING CHANGES
+- Remove `toRefObject` function @layershifter ([#2287](https://github.com/microsoft/fluent-ui-react/pull/2287))
+
+### Fixes
+- Fix positioning fixes for `actions` in `ChatMessage` @layershifter ([#2300](https://github.com/microsoft/fluent-ui-react/pull/2300))
+- `FocusZone`: Cleanup DOM element references when the component is unmounted @johannao76 ([#2306](https://github.com/microsoft/fluent-ui-react/pull/2306))
+
+### Documentation
+- Fix dependencies in project exported to codesandbox @miroslavstastny ([#2314](https://github.com/microsoft/fluent-ui-react/pull/2314))
+
+<!--------------------------------[ v0.43.1 ]------------------------------- -->
+## [v0.43.1](https://github.com/microsoft/fluent-ui-react/tree/v0.43.1) (2020-01-30)
+[Compare changes](https://github.com/microsoft/fluent-ui-react/compare/v0.43.0..v0.43.1)
+
+### Fixes
+- Fix event listener leak in `FocusZone` @miroslavstastny ([#2227](https://github.com/microsoft/fluent-ui-react/pull/2227))
+- Fix element reference memory leaks @jurokapsiar ([#2270](https://github.com/microsoft/fluent-ui-react/pull/2270))
+- Fix element leak in `refFindNode` @miroslavstastny ([#2288](https://github.com/microsoft/fluent-ui-react/pull/2288))
+
 <!--------------------------------[ v0.43.0 ]------------------------------- -->
 ## [v0.43.0](https://github.com/microsoft/fluent-ui-react/tree/v0.43.0) (2020-01-08)
 [Compare changes](https://github.com/microsoft/fluent-ui-react/compare/v0.42.0..v0.43.0)
diff --git a/build/babel/index.js b/build/babel/index.js
index 3948f5bf8b..54bff2b3c9 100644
--- a/build/babel/index.js
+++ b/build/babel/index.js
@@ -31,7 +31,9 @@ module.exports = api => {
   ]
   const plugins = [
     '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-proposal-nullish-coalescing-operator',
     ['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }],
+    '@babel/plugin-proposal-optional-chaining',
     '@babel/plugin-syntax-dynamic-import',
     ['@babel/plugin-transform-runtime', { useESModules }],
 
diff --git a/build/dangerjs/checkPerfRegressions.ts b/build/dangerjs/checkPerfRegressions.ts
index a21a4488d2..5ca679efd5 100644
--- a/build/dangerjs/checkPerfRegressions.ts
+++ b/build/dangerjs/checkPerfRegressions.ts
@@ -18,14 +18,7 @@ function linkToFlamegraph(value, filename) {
   )})`
 }
 
-function fluentFabricComparision(danger, markdown, warn) {
-  let perfCounts
-  try {
-    perfCounts = require(config.paths.packageDist('perf-test', 'perfCounts.json'))
-  } catch {
-    warn('No perf measurements available')
-    return
-  }
+function fluentFabricComparison(perfCounts, danger, markdown, warn) {
   const results = _.mapValues(
     _.pickBy(perfCounts, (value, key) => key.endsWith('.Fluent')),
     stats => {
@@ -66,7 +59,85 @@ function fluentFabricComparision(danger, markdown, warn) {
     ].join('\n'),
   )
 }
+function currentToMasterComparison(perfCounts, danger, markdown, warn) {
+  const results = _.map(
+    _.pickBy(perfCounts, value => _.has(value, 'analysis.regression')),
+    (stats, name) => {
+      const currentTicks = _.get(stats, 'analysis.numTicks')
+      const baselineTicks = _.get(stats, 'analysis.baseline.numTicks')
+
+      return {
+        name,
+        numTicks: currentTicks,
+        flamegraphFile: _.get(stats, 'processed.output.flamegraphFile'),
+        baseline: {
+          numTicks: baselineTicks,
+          flamegraphFile: _.get(stats, 'processed.baseline.output.flamegraphFile'),
+        },
+        isRegression: _.get(stats, 'analysis.regression.isRegression'),
+        currentToBaseline: Math.round((currentTicks / baselineTicks) * 100) / 100,
+      }
+    },
+  )
+
+  const regressions = _.sortBy(
+    _.filter(results, 'isRegression'),
+    stats => stats.currentToBaseline * -1,
+  )
+
+  if (regressions.length > 0) {
+    warn(`${regressions.length} perf regressions detected`)
+    markdown(
+      [
+        '## Potential regressions comparing to master',
+        '',
+        'Scenario | Current PR Ticks | Baseline Ticks | Ratio',
+        ':--- | ---:| ---:| ---:',
+        ..._.map(regressions, (value, key) =>
+          [
+            value.name,
+            linkToFlamegraph(value.numTicks, value.flamegraphFile),
+            linkToFlamegraph(value.baseline.numTicks, value.baseline.flamegraphFile),
+            `${value.currentToBaseline}:1`,
+          ].join(' | '),
+        ),
+      ].join('\n'),
+    )
+  }
+
+  const noRegressions = _.sortBy(
+    _.filter(results, stats => !stats.isRegression),
+    stats => stats.currentToBaseline * -1,
+  )
+  markdown(
+    [
+      '<details><summary>Perf tests with no regressions</summary>',
+      '',
+      'Scenario | Current PR Ticks | Baseline Ticks | Ratio',
+      ':--- | ---:| ---:| ---:',
+      ..._.map(noRegressions, (value, key) =>
+        [
+          value.name,
+          linkToFlamegraph(value.numTicks, value.flamegraphFile),
+          linkToFlamegraph(value.baseline.numTicks, value.baseline.flamegraphFile),
+          `${value.currentToBaseline}:1`,
+        ].join(' | '),
+      ),
+      '',
+      '</details>',
+    ].join('\n'),
+  )
+}
 
 export default ({ danger, markdown, warn }: DangerJS) => {
-  fluentFabricComparision(danger, markdown, warn)
+  let perfCounts
+  try {
+    perfCounts = require(config.paths.packageDist('perf-test', 'perfCounts.json'))
+  } catch {
+    warn('No perf measurements available')
+    return
+  }
+
+  fluentFabricComparison(perfCounts, danger, markdown, warn)
+  currentToMasterComparison(perfCounts, danger, markdown, warn)
 }
diff --git a/build/gulp/tasks/bundle.ts b/build/gulp/tasks/bundle.ts
index fcd9fd2049..cbdf189db2 100644
--- a/build/gulp/tasks/bundle.ts
+++ b/build/gulp/tasks/bundle.ts
@@ -1,5 +1,6 @@
 import { task, series, parallel, src, dest } from 'gulp'
 import babel from 'gulp-babel'
+import sourcemaps from 'gulp-sourcemaps'
 import { log, PluginError } from 'gulp-util'
 import del from 'del'
 import webpack from 'webpack'
@@ -34,13 +35,17 @@ const componentsSrc = [
 
 task('bundle:package:commonjs', () =>
   src(componentsSrc)
+    .pipe(sourcemaps.init())
     .pipe(babel())
+    .pipe(sourcemaps.write('.'))
     .pipe(dest(paths.packageDist(packageName, 'commonjs'))),
 )
 
 task('bundle:package:es', () =>
   src(componentsSrc)
+    .pipe(sourcemaps.init())
     .pipe(babel({ caller: { useESModules: true } } as any))
+    .pipe(sourcemaps.write('.'))
     .pipe(dest(paths.packageDist(packageName, 'es'))),
 )
 
diff --git a/build/gulp/tasks/test-projects.ts b/build/gulp/tasks/test-projects.ts
index db86817347..8cc74d1a1b 100644
--- a/build/gulp/tasks/test-projects.ts
+++ b/build/gulp/tasks/test-projects.ts
@@ -205,6 +205,35 @@ task('test:projects:rollup', async () => {
   logger(`✔️Browser test was passed`)
 })
 
+task('test:projects:nextjs', async () => {
+  const logger = log('test:projects:nextjs')
+
+  const scaffoldPath = paths.base.bind(null, 'build/gulp/tasks/test-projects/nextjs')
+  const tmpDirectory = tmp.dirSync({ prefix: 'project-' }).name
+
+  logger(`✔️Temporary directory was created: ${tmpDirectory}`)
+
+  const dependencies = ['next', 'react', 'react-dom'].join(' ')
+  await runIn(tmpDirectory)(`yarn add ${dependencies}`)
+  logger(`✔️Dependencies were installed`)
+
+  const packedPackages = await packProjectPackages(logger)
+  await addResolutionPathsForProjectPackages(tmpDirectory, packedPackages)
+  await runIn(tmpDirectory)(`yarn add ${packedPackages['@fluentui/react']}`)
+  logger(`✔️Fluent UI packages were added to dependencies`)
+
+  fs.mkdirSync(path.resolve(tmpDirectory, 'pages'))
+  fs.copyFileSync(scaffoldPath('index.js'), path.resolve(tmpDirectory, 'pages', 'index.js'))
+  logger(`✔️Source and bundler's config were created`)
+
+  await runIn(tmpDirectory)(`yarn next build`)
+  await runIn(tmpDirectory)(`yarn next export`)
+  logger(`✔️Example project was successfully built: ${tmpDirectory}`)
+
+  await performBrowserTest(path.resolve(tmpDirectory, 'out'), await portfinder.getPortPromise())
+  logger(`✔️Browser test was passed`)
+})
+
 task('test:projects:typings', async () => {
   const logger = log('test:projects:typings')
 
@@ -242,6 +271,7 @@ task(
   series(
     'bundle:all-packages',
     'test:projects:cra-ts',
+    'test:projects:nextjs',
     'test:projects:rollup',
     'test:projects:typings',
   ),
diff --git a/build/gulp/tasks/test-projects/nextjs/index.js b/build/gulp/tasks/test-projects/nextjs/index.js
new file mode 100644
index 0000000000..38bf6638cb
--- /dev/null
+++ b/build/gulp/tasks/test-projects/nextjs/index.js
@@ -0,0 +1,11 @@
+import { Button, Dropdown, Provider, themes } from '@fluentui/react'
+import React from 'react'
+
+const Page = () => (
+  <Provider theme={themes.teams}>
+    <Dropdown items={['Foo', 'Bar', 'Baz', 'Qux']} />
+    <Button>Welcome to Next.js!</Button>
+  </Provider>
+)
+
+export default Page
diff --git a/build/gulp/tasks/test-projects/typings/tsconfig.json b/build/gulp/tasks/test-projects/typings/tsconfig.json
index 44589f338f..91273a3039 100644
--- a/build/gulp/tasks/test-projects/typings/tsconfig.json
+++ b/build/gulp/tasks/test-projects/typings/tsconfig.json
@@ -2,7 +2,8 @@
   "compilerOptions": {
     "jsx": "react",
     "lib": ["dom", "dom.iterable", "esnext"],
-    "target": "es5"
+    "target": "es5",
+    "strict": true
   },
   "include": ["src"]
 }
diff --git a/build/package.json b/build/package.json
index 467bf9ab93..de1940f5af 100644
--- a/build/package.json
+++ b/build/package.json
@@ -1,29 +1,31 @@
 {
   "name": "@fluentui/internal-tooling",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "@babel/core": "^7.6.4",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/plugin-transform-runtime": "^7.6.2",
-    "@babel/preset-env": "^7.6.3",
-    "@babel/preset-react": "^7.6.3",
-    "@babel/preset-typescript": "^7.6.0",
-    "@babel/register": "^7.4.4",
-    "@babel/standalone": "^7.3.2",
-    "@fluentui/eslint-plugin": "^0.43.0",
+    "@babel/core": "^7.7.7",
+    "@babel/plugin-proposal-class-properties": "^7.7.4",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.7.4",
+    "@babel/plugin-proposal-optional-chaining": "^7.7.5",
+    "@babel/plugin-syntax-dynamic-import": "^7.7.4",
+    "@babel/plugin-transform-runtime": "^7.7.6",
+    "@babel/preset-env": "^7.7.6",
+    "@babel/preset-react": "^7.7.4",
+    "@babel/preset-typescript": "^7.7.7",
+    "@babel/register": "^7.7.7",
+    "@babel/standalone": "^7.7.7",
+    "@fluentui/eslint-plugin": "^0.44.0",
     "@mdx-js/loader": "^1.0.21",
     "@types/babel__traverse": "^7.0.4",
     "@types/express": "^4.16.1",
     "@types/gulp": "^4.0.6",
     "@types/gulp-babel": "6.1.29",
     "@types/gulp-cache": "^0.4.4",
-    "@types/gulp-util": "^3.0.34",
     "@types/gulp-remember": "^0.0.31",
-    "@types/jest-axe": "^3.2.1",
+    "@types/gulp-util": "^3.0.34",
     "@types/jest": "^24.0.19",
+    "@types/jest-axe": "^3.2.1",
     "@types/lerna-alias": "^3.0.0",
     "@types/node": "^10.3.2",
     "@types/puppeteer": "^1.11.1",
@@ -47,8 +49,8 @@
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jest": "^22.4.1",
     "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-react-hooks": "^2.1.2",
     "eslint-plugin-react": "^7.16.0",
+    "eslint-plugin-react-hooks": "^2.1.2",
     "express": "^4.15.4",
     "extract-comments": "^1.0.0",
     "fork-ts-checker-webpack-plugin": "^1.3.3",
@@ -57,6 +59,7 @@
     "gulp-babel": "^8.0.0",
     "gulp-cache": "^1.0.2",
     "gulp-remember": "^1.0.1",
+    "gulp-sourcemaps": "^2.6.5",
     "gulp-util": "^3.0.8",
     "html-webpack-plugin": "^4.0.0-beta.5",
     "jest": "^24.9.0",
@@ -78,7 +81,7 @@
     "tmp": "^0.0.33",
     "tsconfig-paths": "^3.7.0",
     "webpack": "^4.35.0",
-    "webpack-bundle-analyzer": "^3.3.2",
+    "webpack-bundle-analyzer": "^3.6.0",
     "webpack-dev-middleware": "^3.6.2",
     "webpack-hot-middleware": "^2.24.3"
   },
diff --git a/build/webpack.config.ts b/build/webpack.config.ts
index 8c3932eaaa..7d9b6bcb7f 100644
--- a/build/webpack.config.ts
+++ b/build/webpack.config.ts
@@ -141,7 +141,7 @@ const webpackConfig: webpack.Configuration = {
 // Environment Configuration
 // ------------------------------------
 if (__DEV__) {
-  const webpackHotPath = `${config.compiler_public_path}__compiler_hmr`
+  const webpackHotPath = `${config.compiler_public_path}__webpack_hmr`
   const webpackHotMiddlewareEntry = `webpack-hot-middleware/client?${_.map(
     {
       path: webpackHotPath, // The path which the middleware is serving the event stream on
diff --git a/dangerfile.ts b/dangerfile.ts
index 9e70c5c2ec..e15ce53a37 100644
--- a/dangerfile.ts
+++ b/dangerfile.ts
@@ -1,4 +1,4 @@
-import { danger, fail, warn, markdown } from 'danger'
+import { danger, fail, warn, markdown, message } from 'danger'
 import checkChangelog from './build/dangerjs/checkChangelog'
 import detectChangedDependencies from './build/dangerjs/detectChangedDependencies'
 import detectNonApprovedDependencies from './build/dangerjs/detectNonApprovedDependencies'
@@ -8,7 +8,7 @@ import checkPerfRegressions from './build/dangerjs/checkPerfRegressions'
  * This trick (of explicitly passing Danger JS utils as function arg, instead of importing them at places where needed)
  * is necessary due to the magic DangerJS is doing with imports: https://spectrum.chat/danger/javascript/danger-js-actually-runs-your-imports-as-globals~0a005b56-31ec-4919-9a28-ced623949d4d
  */
-const dangerJS = { danger, fail, warn, markdown }
+const dangerJS = { danger, fail, warn, markdown, message }
 
 export default async () => {
   await checkChangelog(dangerJS)
diff --git a/docs/package.json b/docs/package.json
index 753a95976b..60c39bdf94 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/docs",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "private": true,
   "license": "MIT",
   "dependencies": {
@@ -21,7 +21,7 @@
     "react-vis": "^1.11.6"
   },
   "devDependencies": {
-    "@fluentui/internal-tooling": "^0.43.0",
+    "@fluentui/internal-tooling": "^0.44.0",
     "@types/color": "^3.0.0",
     "@types/faker": "^4.1.3",
     "@types/gulp": "^4.0.6",
diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
index 40de177c14..0c340ce3ce 100644
--- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
+++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
@@ -461,7 +461,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
     const newTheme: ThemeInput = {
       componentVariables: {
         ...componentVariables,
-        ProviderBox: { background: showTransparent ? 'initial' : undefined },
+        Provider: { background: showTransparent ? 'initial' : undefined },
       },
     }
     const exampleStyles = {
diff --git a/docs/src/components/ComponentDoc/ComponentPerfExample/ComponentPerfChart.tsx b/docs/src/components/ComponentDoc/ComponentPerfExample/ComponentPerfChart.tsx
index a2b84d1935..3e2012c9b5 100644
--- a/docs/src/components/ComponentDoc/ComponentPerfExample/ComponentPerfChart.tsx
+++ b/docs/src/components/ComponentDoc/ComponentPerfExample/ComponentPerfChart.tsx
@@ -27,7 +27,7 @@ export const ComponentPerfChart = ({ perfTestName }) => {
     case FILTER_BY.RELEASE:
       filteredData = data.filter(entry => entry.tag)
 
-      if (!data[0].tag) {
+      if (!data[0]?.tag) {
         const unreleased = { ...data[0], tag: 'UNRELEASED' }
         filteredData.unshift(unreleased)
       }
diff --git a/docs/src/components/Playground/renderConfig.ts b/docs/src/components/Playground/renderConfig.ts
index 34ba8d3029..1eec4462e6 100644
--- a/docs/src/components/Playground/renderConfig.ts
+++ b/docs/src/components/Playground/renderConfig.ts
@@ -8,6 +8,7 @@ import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import * as Classnames from 'classnames'
 
+const accessibilityPackageJson = require('@fluentui/accessibility/package.json')
 const docsComponentsPackageJson = require('@fluentui/docs-components/package.json')
 const projectPackageJson = require('@fluentui/react/package.json')
 
@@ -23,7 +24,7 @@ export const babelConfig = {
 
 export const imports: Record<string, { version: string; module: any }> = {
   '@fluentui/accessibility': {
-    version: projectPackageJson.version,
+    version: accessibilityPackageJson.version,
     module: Accessibility,
   },
 
diff --git a/docs/src/components/Sidebar/Sidebar.tsx b/docs/src/components/Sidebar/Sidebar.tsx
index cd98f45bee..a034b6e1cc 100644
--- a/docs/src/components/Sidebar/Sidebar.tsx
+++ b/docs/src/components/Sidebar/Sidebar.tsx
@@ -164,6 +164,28 @@ class Sidebar extends React.Component<any, any> {
               to: '/shorthand-props',
             },
           },
+          {
+            key: 'component-architecture',
+            title: {
+              as: NavLink,
+              content: 'Component Architecture',
+              activeClassName: 'active',
+              to: '/component-architecture',
+            },
+          },
+          ...(process.env.NODE_ENV !== 'production'
+            ? [
+                {
+                  key: 'theming-specification',
+                  title: {
+                    as: NavLink,
+                    content: 'Theming Specification',
+                    activeClassName: 'active',
+                    to: '/theming-specification',
+                  },
+                },
+              ]
+            : []),
         ],
       },
       {
diff --git a/docs/src/examples/components/Animation/Usage/AnimationExampleVisible.shorthand.tsx b/docs/src/examples/components/Animation/Usage/AnimationExampleVisible.shorthand.tsx
index 8df9128842..1bbecbc0e0 100644
--- a/docs/src/examples/components/Animation/Usage/AnimationExampleVisible.shorthand.tsx
+++ b/docs/src/examples/components/Animation/Usage/AnimationExampleVisible.shorthand.tsx
@@ -42,10 +42,6 @@ const AnimationExampleVisible = () => {
       {/* Children as function */}
       <Animation
         visible={visible}
-        timeout={{
-          enter: 1000,
-          exit: 2000,
-        }}
         onEnter={onEnter}
         onEntering={onEntering}
         onEntered={onEntered}
@@ -61,10 +57,6 @@ const AnimationExampleVisible = () => {
       {/* Children as element */}
       <Animation
         visible={visible}
-        timeout={{
-          enter: 1000,
-          exit: 2000,
-        }}
         onEnter={onEnter}
         onEntering={onEntering}
         onEntered={onEntered}
diff --git a/docs/src/examples/components/Carousel/Variations/CarouselExampleWithFocusableElements.tsx b/docs/src/examples/components/Carousel/Variations/CarouselExampleWithFocusableElements.tsx
index 046d5d6fc4..0114a21a0e 100644
--- a/docs/src/examples/components/Carousel/Variations/CarouselExampleWithFocusableElements.tsx
+++ b/docs/src/examples/components/Carousel/Variations/CarouselExampleWithFocusableElements.tsx
@@ -23,7 +23,7 @@ const carouselTextContent = (
   </Text>
 )
 
-const buttonStyles = { margin: '40px 0px 10px 10px' }
+const buttonStyles = { margin: '40px 0px 0px 10px' }
 const imageStyles = { maxWidth: '70px', maxHeight: '70px', margin: '15px 0px 0px 5px' }
 
 const carouselToolbarContent = (
diff --git a/docs/src/examples/components/Chat/Content/ChatExampleActions.shorthand.steps.ts b/docs/src/examples/components/Chat/Content/ChatExampleActions.shorthand.steps.ts
new file mode 100644
index 0000000000..bbd5b7798f
--- /dev/null
+++ b/docs/src/examples/components/Chat/Content/ChatExampleActions.shorthand.steps.ts
@@ -0,0 +1,16 @@
+import { ChatMessage } from '@fluentui/react'
+
+const selectors = {
+  message: `.${ChatMessage.className}`,
+}
+
+const config: ScreenerTestsConfig = {
+  themes: ['teams', 'teamsDark', 'teamsHighContrast'],
+  steps: [
+    builder => builder.hover(selectors.message).snapshot('Hovers the first message'),
+    builder => builder.click(selectors.message).snapshot('Focus the first message via mouse click'),
+    (builder, keys) => builder.keys('body', keys.tab).snapshot('Focuses a message via keyboard'),
+  ],
+}
+
+export default config
diff --git a/docs/src/examples/components/Chat/Usage/ChatExampleInScrollable.shorthand.tsx b/docs/src/examples/components/Chat/Usage/ChatExampleInScrollable.shorthand.tsx
index 768fb9df11..006939644a 100644
--- a/docs/src/examples/components/Chat/Usage/ChatExampleInScrollable.shorthand.tsx
+++ b/docs/src/examples/components/Chat/Usage/ChatExampleInScrollable.shorthand.tsx
@@ -27,7 +27,7 @@ const ChatExampleInScrollableShorthand = () => {
   })
   const [width] = useRangeKnob({
     name: 'width',
-    initialValue: '400px',
+    initialValue: '500px',
     min: '100px',
     max: '500px',
     step: 10,
@@ -81,6 +81,22 @@ const ChatExampleInScrollableShorthand = () => {
       ),
       key: 'message-3',
     },
+    {
+      message: (
+        <Chat.Message actionMenu={actionMenu} content="How are you?" unstable_overflow={overflow} />
+      ),
+      key: 'message-4',
+    },
+    {
+      message: (
+        <Chat.Message
+          actionMenu={actionMenu}
+          content="Do you want something?"
+          unstable_overflow={overflow}
+        />
+      ),
+      key: 'message-5',
+    },
   ]
 
   return (
diff --git a/docs/src/examples/components/Dialog/Variations/DialogExampleScroll.shorthand.steps.ts b/docs/src/examples/components/Dialog/Variations/DialogExampleScroll.shorthand.steps.ts
new file mode 100644
index 0000000000..5262188359
--- /dev/null
+++ b/docs/src/examples/components/Dialog/Variations/DialogExampleScroll.shorthand.steps.ts
@@ -0,0 +1,8 @@
+import getScreenerSteps from '../commonScreenerSteps'
+
+const config: ScreenerTestsConfig = {
+  themes: ['teams', 'teamsDark', 'teamsHighContrast'],
+  steps: getScreenerSteps(),
+}
+
+export default config
diff --git a/docs/src/examples/components/Dialog/Variations/DialogExampleScroll.shorthand.tsx b/docs/src/examples/components/Dialog/Variations/DialogExampleScroll.shorthand.tsx
new file mode 100644
index 0000000000..004ef5c384
--- /dev/null
+++ b/docs/src/examples/components/Dialog/Variations/DialogExampleScroll.shorthand.tsx
@@ -0,0 +1,32 @@
+import { Button, Dialog } from '@fluentui/react'
+import * as React from 'react'
+import * as _ from 'lodash'
+
+const DialogExampleScroll = () => (
+  <Dialog
+    content={{
+      content: (
+        <>
+          {_.times(10, i => (
+            <p key={i}>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare, neque eget
+              egestas fermentum, massa risus mollis orci, et ullamcorper purus turpis at risus.
+              Fusce pharetra mollis sapien nec commodo. Quisque ut congue sem, vel aliquam augue.
+              Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
+              Curae; Duis porttitor, nunc quis dapibus imperdiet, ligula sem egestas orci, sed
+              volutpat ipsum felis vitae velit. Sed maximus egestas dui elementum aliquam. In hac
+              habitasse platea dictumst. Proin maximus nibh velit, ut ornare dui mollis viverra.
+            </p>
+          ))}
+        </>
+      ),
+      styles: {
+        height: '500px',
+        overflow: 'scroll',
+      },
+    }}
+    trigger={<Button content="Open a dialog" />}
+  />
+)
+
+export default DialogExampleScroll
diff --git a/docs/src/examples/components/Dialog/index.tsx b/docs/src/examples/components/Dialog/index.tsx
index 4e8c1eb86f..e088897d13 100644
--- a/docs/src/examples/components/Dialog/index.tsx
+++ b/docs/src/examples/components/Dialog/index.tsx
@@ -6,6 +6,9 @@ import Rtl from './Rtl'
 import Variations from './Variations'
 import Usage from './Usage'
 
+import NonPublicSection from 'docs/src/components/ComponentDoc/NonPublicSection'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample/ComponentExample'
+
 const DialogExamples = () => (
   <>
     <Types />
@@ -13,6 +16,9 @@ const DialogExamples = () => (
     <Content />
     <Usage />
     <Rtl />
+    <NonPublicSection title="Visual tests">
+      <ComponentExample examplePath="components/Dialog/Variations/DialogExampleScroll" />
+    </NonPublicSection>
   </>
 )
 
diff --git a/docs/src/examples/components/List/Content/ListExampleContent.tsx b/docs/src/examples/components/List/Content/ListExampleContent.tsx
index d1287a2b6e..0af74a9f5b 100644
--- a/docs/src/examples/components/List/Content/ListExampleContent.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleContent.tsx
@@ -3,9 +3,15 @@ import { List } from '@fluentui/react'
 
 const ListExample = () => (
   <List>
-    <List.Item header="Program the sensor to the SAS alarm through the haptic SQL card!" />
-    <List.Item header="Use the online FTP application to input the multi-byte application!" />
-    <List.Item header="The GB pixel is down, navigate the virtual interface!" />
+    <List.Item
+      header="Program the sensor to the SAS alarm through the haptic SQL card!"
+      index={0}
+    />
+    <List.Item
+      header="Use the online FTP application to input the multi-byte application!"
+      index={1}
+    />
+    <List.Item header="The GB pixel is down, navigate the virtual interface!" index={2} />
   </List>
 )
 
diff --git a/docs/src/examples/components/List/Content/ListExampleContentMedia.tsx b/docs/src/examples/components/List/Content/ListExampleContentMedia.tsx
index b7b58bf498..777b5c0131 100644
--- a/docs/src/examples/components/List/Content/ListExampleContentMedia.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleContentMedia.tsx
@@ -6,14 +6,17 @@ const ListExample = () => (
     <List.Item
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
       contentMedia="7:26:56 AM"
+      index={0}
     />
     <List.Item
       content="Use the online FTP application to input the multi-byte application!"
       contentMedia="11:30:17 PM"
+      index={1}
     />
     <List.Item
       content="The GB pixel is down, navigate the virtual interface!"
       contentMedia="5:22:40 PM"
+      index={2}
     />
   </List>
 )
diff --git a/docs/src/examples/components/List/Content/ListExampleEndMedia.tsx b/docs/src/examples/components/List/Content/ListExampleEndMedia.tsx
index 2aa902d2ce..e0b855c182 100644
--- a/docs/src/examples/components/List/Content/ListExampleEndMedia.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleEndMedia.tsx
@@ -9,16 +9,19 @@ const ListExample = () => (
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
       endMedia={ellipsis}
       selectable
+      index={0}
     />
     <List.Item
       content="Use the online FTP application to input the multi-byte application!"
       endMedia={ellipsis}
       selectable
+      index={1}
     />
     <List.Item
       content="The GB pixel is down, navigate the virtual interface!"
       endMedia={ellipsis}
       selectable
+      index={2}
     />
   </List>
 )
diff --git a/docs/src/examples/components/List/Content/ListExampleHeader.tsx b/docs/src/examples/components/List/Content/ListExampleHeader.tsx
index 0839a297d1..54d707793b 100644
--- a/docs/src/examples/components/List/Content/ListExampleHeader.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleHeader.tsx
@@ -3,9 +3,9 @@ import { List } from '@fluentui/react'
 
 const ListExample = () => (
   <List>
-    <List.Item header="Irving Kuhic" />
-    <List.Item header="Skyler Parks" />
-    <List.Item header="Dante Schneider" />
+    <List.Item header="Irving Kuhic" index={0} />
+    <List.Item header="Skyler Parks" index={1} />
+    <List.Item header="Dante Schneider" index={2} />
   </List>
 )
 
diff --git a/docs/src/examples/components/List/Content/ListExampleHeaderContent.tsx b/docs/src/examples/components/List/Content/ListExampleHeaderContent.tsx
index b1822eb1fe..a9bbceea56 100644
--- a/docs/src/examples/components/List/Content/ListExampleHeaderContent.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleHeaderContent.tsx
@@ -6,14 +6,17 @@ const ListExample = () => (
     <List.Item
       header="Irving Kuhic"
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
+      index={0}
     />
     <List.Item
       header="Skyler Parks"
       content="Use the online FTP application to input the multi-byte application!"
+      index={1}
     />
     <List.Item
       header="Dante Schneider"
       content="The GB pixel is down, navigate the virtual interface!"
+      index={2}
     />
   </List>
 )
diff --git a/docs/src/examples/components/List/Content/ListExampleHeaderMedia.tsx b/docs/src/examples/components/List/Content/ListExampleHeaderMedia.tsx
index 91b19c8d95..971cd68712 100644
--- a/docs/src/examples/components/List/Content/ListExampleHeaderMedia.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleHeaderMedia.tsx
@@ -3,9 +3,9 @@ import { List } from '@fluentui/react'
 
 const ListExample = () => (
   <List>
-    <List.Item header="Irving Kuhic" headerMedia="7:26:56 AM" />
-    <List.Item header="Skyler Parks" headerMedia="11:30:17 PM" />
-    <List.Item header="Dante Schneider" headerMedia="5:22:40 PM" />
+    <List.Item header="Irving Kuhic" headerMedia="7:26:56 AM" index={0} />
+    <List.Item header="Skyler Parks" headerMedia="11:30:17 PM" index={1} />
+    <List.Item header="Dante Schneider" headerMedia="5:22:40 PM" index={2} />
   </List>
 )
 
diff --git a/docs/src/examples/components/List/Content/ListExampleMedia.tsx b/docs/src/examples/components/List/Content/ListExampleMedia.tsx
index 6028eef957..3da3a4c7d9 100644
--- a/docs/src/examples/components/List/Content/ListExampleMedia.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleMedia.tsx
@@ -8,18 +8,21 @@ const ListExampleMedia = () => (
       header="Irving Kuhic"
       headerMedia="7:26:56 AM"
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
+      index={0}
     />
     <List.Item
       media={<Image src="public/images/avatar/small/steve.jpg" avatar />}
       header="Skyler Parks"
       headerMedia="11:30:17 PM"
       content="Use the online FTP application to input the multi-byte application!"
+      index={1}
     />
     <List.Item
       media={<Image src="public/images/avatar/small/nom.jpg" avatar />}
       header="Dante Schneider"
       headerMedia="5:22:40 PM"
       content="The GB pixel is down, navigate the virtual interface!"
+      index={2}
     />
   </List>
 )
diff --git a/docs/src/examples/components/List/Performance/ListNested.perf.tsx b/docs/src/examples/components/List/Performance/ListNested.perf.tsx
new file mode 100644
index 0000000000..22497bc11c
--- /dev/null
+++ b/docs/src/examples/components/List/Performance/ListNested.perf.tsx
@@ -0,0 +1,865 @@
+import { List } from '@fluentui/react'
+import * as React from 'react'
+
+const items = [
+  {
+    key: 'item-0',
+    media: 'ecd4:f115:0db5:e490:4680:e0bb:ed31:ef38',
+    header: 'Golden19',
+    headerMedia: '2/11/2019',
+    content: 'Veritatis labore tenetur eius similique voluptatem qui labore consequuntur eaque.',
+    contentMedia: 'Molestiae modi qui ipsam odio unde praesentium.',
+  },
+  {
+    key: 'item-1',
+    media: '812d:173e:02c2:3c33:d0a8:d86c:327b:4356',
+    header: 'Christine.Feeney',
+    headerMedia: '3/8/2019',
+    content: 'Sequi voluptas corporis vel deleniti exercitationem ipsam rem hic.',
+    contentMedia: 'Nulla quae minima.',
+  },
+  {
+    key: 'item-2',
+    media: '2f5e:5dab:e88c:b583:b512:b2c3:ecf6:f860',
+    header: 'Amaya.Ritchie',
+    headerMedia: '6/22/2019',
+    content: 'Neque nobis totam rerum.',
+    contentMedia: 'Aut tempora eaque rem blanditiis.',
+  },
+  {
+    key: 'item-3',
+    media: 'b072:ad2d:9ee1:f790:5e46:7b8c:75d1:4140',
+    header: 'Cora.Rippin22',
+    headerMedia: '7/13/2019',
+    content: 'Alias error tempore dolorem laudantium sapiente.',
+    contentMedia: 'Quis ducimus explicabo quia quia rerum dolor deserunt unde.',
+  },
+  {
+    key: 'item-4',
+    media: '9fbb:5c11:582f:e8dd:4e79:f56a:0acb:6bf9',
+    header: 'Melyssa_Walker3',
+    headerMedia: '9/26/2019',
+    content: 'Eum quo non eum repellendus facere sint.',
+    contentMedia: 'Fuga explicabo et ad labore voluptas voluptatibus et perspiciatis.',
+  },
+  {
+    key: 'item-5',
+    media: 'a6ba:8322:b8e2:98ad:f86d:9e87:6322:4058',
+    header: 'Martina.Cronin',
+    headerMedia: '11/27/2019',
+    content: 'Dolorem eveniet dolores repellat officia temporibus sequi.',
+    contentMedia: 'Odio commodi laborum nobis quia.',
+  },
+  {
+    key: 'item-6',
+    media: '5fcd:fa53:c6f1:3bc0:9add:2fd4:d01d:4bf7',
+    header: 'Trinity16',
+    headerMedia: '1/16/2020',
+    content: 'Debitis culpa sit consequatur corrupti.',
+    contentMedia: 'Vero placeat id.',
+  },
+  {
+    key: 'item-7',
+    media: 'f5fe:4259:50e5:72cd:67b3:650b:27c8:5ebc',
+    header: 'Emmet14',
+    headerMedia: '5/10/2019',
+    content: 'Ratione omnis nesciunt repellendus voluptatem aut sint amet voluptatem.',
+    contentMedia: 'Enim aliquam error quaerat.',
+  },
+  {
+    key: 'item-8',
+    media: 'fd29:194a:d44c:dfc0:fce1:bc6c:a75c:c873',
+    header: 'Chet87',
+    headerMedia: '7/30/2019',
+    content: 'Dolor dolor inventore illum eum nulla.',
+    contentMedia: 'Ut debitis aut.',
+  },
+  {
+    key: 'item-9',
+    media: '3f6c:62fe:deea:e526:e242:4e79:0883:8eb3',
+    header: 'Horacio39',
+    headerMedia: '5/6/2019',
+    content: 'Laborum fugit ut debitis voluptatum enim ea voluptas quas fugiat.',
+    contentMedia: 'Sint minus ut.',
+  },
+  {
+    key: 'item-10',
+    media: '5b44:9c9d:bb62:50a9:77b0:3a61:a133:818c',
+    header: 'Aletha.Heaney28',
+    headerMedia: '7/12/2019',
+    content: 'Magnam velit et quo.',
+    contentMedia: 'Distinctio delectus modi et.',
+  },
+  {
+    key: 'item-11',
+    media: '922b:68b1:432b:1c11:6734:e7de:baf6:d202',
+    header: 'Lempi85',
+    headerMedia: '6/3/2019',
+    content: 'Consequatur pariatur vel.',
+    contentMedia: 'Quis quibusdam at repellendus vero fuga accusamus atque provident aperiam.',
+  },
+  {
+    key: 'item-12',
+    media: '9c88:6bcf:1534:d98b:9dfa:170e:0fe4:6f99',
+    header: 'Dayton19',
+    headerMedia: '9/9/2019',
+    content: 'Tempora sint corrupti.',
+    contentMedia: 'Ea est id aut facilis ex possimus.',
+  },
+  {
+    key: 'item-13',
+    media: '931c:709c:7c0c:4142:8cb5:1e7d:a205:5ce5',
+    header: 'Jerel_Dooley95',
+    headerMedia: '4/7/2019',
+    content: 'Ullam nostrum est et necessitatibus possimus distinctio dolorum impedit dolor.',
+    contentMedia: 'Vitae tempore minima dolores tempora ea.',
+  },
+  {
+    key: 'item-14',
+    media: '6309:59b2:6fed:d765:077b:94fa:e22d:2a6a',
+    header: 'Tate.Kuhic',
+    headerMedia: '8/8/2019',
+    content: 'In rerum molestiae.',
+    contentMedia: 'Omnis voluptate nesciunt voluptatem.',
+  },
+  {
+    key: 'item-15',
+    media: 'a1b3:9bf4:3b64:4e8f:6a21:16c3:d208:551d',
+    header: 'Rosalee56',
+    headerMedia: '11/19/2019',
+    content: 'Mollitia quia saepe ut nihil et iure expedita repellendus.',
+    contentMedia: 'Consequuntur ea quia recusandae ratione.',
+  },
+  {
+    key: 'item-16',
+    media: '50d1:2a0c:5997:506a:e748:02f4:c9d2:0e45',
+    header: 'Dorothy_Osinski96',
+    headerMedia: '6/28/2019',
+    content: 'Eum temporibus dicta impedit quas.',
+    contentMedia: 'Consequatur autem minus ut eveniet quo suscipit illo.',
+  },
+  {
+    key: 'item-17',
+    media: '97e3:a2a2:8287:63a5:d1f6:5672:d711:7e8e',
+    header: 'Connie65',
+    headerMedia: '4/1/2019',
+    content: 'In ad beatae debitis.',
+    contentMedia: 'Quia quaerat ut aut in aspernatur et.',
+  },
+  {
+    key: 'item-18',
+    media: '05ce:4ecf:1041:8415:b358:be0e:a65c:c275',
+    header: 'Raphael44',
+    headerMedia: '3/6/2019',
+    content: 'Perferendis soluta hic sint eum.',
+    contentMedia: 'Ut voluptas et consectetur est.',
+  },
+  {
+    key: 'item-19',
+    media: 'cc8d:f10c:cf4f:82fa:64a2:1a36:2461:3434',
+    header: 'Roberta36',
+    headerMedia: '5/5/2019',
+    content: 'Molestiae nihil laborum hic pariatur deserunt ullam similique quibusdam quia.',
+    contentMedia: 'Qui qui id aut deserunt quidem temporibus voluptas.',
+  },
+  {
+    key: 'item-20',
+    media: '63ac:0869:ef30:fd2e:e7ce:71d0:2519:20c1',
+    header: 'Amara45',
+    headerMedia: '5/13/2019',
+    content: 'Placeat a sed quam vel ipsa et quisquam aspernatur.',
+    contentMedia: 'Aut vero accusamus veritatis atque laboriosam harum ab fugit aut.',
+  },
+  {
+    key: 'item-21',
+    media: '7f85:444a:43b9:c878:c5f8:02ac:796d:1006',
+    header: 'Cassandra86',
+    headerMedia: '1/21/2020',
+    content: 'Ut eaque id deserunt consequatur cupiditate.',
+    contentMedia: 'Ducimus aliquam voluptatem sed dolores reiciendis.',
+  },
+  {
+    key: 'item-22',
+    media: '1c44:7233:decf:3ba9:fc2f:6c14:3358:10eb',
+    header: 'Kasandra.Jacobson',
+    headerMedia: '6/4/2019',
+    content: 'Ut culpa nobis enim.',
+    contentMedia: 'Repellat ut nesciunt quis consequuntur ea.',
+  },
+  {
+    key: 'item-23',
+    media: '45da:675d:839f:4aad:c839:f771:16a3:433c',
+    header: 'Orrin65',
+    headerMedia: '1/9/2020',
+    content: 'Sit facilis nihil enim sint.',
+    contentMedia: 'Atque quia dolorem porro delectus libero optio ea ut.',
+  },
+  {
+    key: 'item-24',
+    media: 'f5bd:fd04:d136:e7cb:dfb6:3f0f:418b:fc51',
+    header: 'Imelda79',
+    headerMedia: '1/28/2019',
+    content: 'Aliquam odio repudiandae quia qui tenetur accusantium officia.',
+    contentMedia: 'Ullam accusamus facere sed iure omnis fuga.',
+  },
+  {
+    key: 'item-25',
+    media: '0ed1:d677:780f:1af8:689b:a134:f0b3:a715',
+    header: 'Gerson81',
+    headerMedia: '4/29/2019',
+    content: 'Quo quam dolores consequuntur autem nisi unde placeat eum.',
+    contentMedia: 'Harum eos repellat nihil.',
+  },
+  {
+    key: 'item-26',
+    media: 'd473:7c5c:e688:d3e9:d168:34e3:68ab:cb34',
+    header: 'Ladarius7',
+    headerMedia: '12/9/2019',
+    content: 'Doloremque corporis vero explicabo est similique in.',
+    contentMedia: 'Voluptas consequatur voluptates.',
+  },
+  {
+    key: 'item-27',
+    media: '4a2d:dc17:5ef1:d813:f1d7:73a9:d3ae:3b4f',
+    header: 'Dedric68',
+    headerMedia: '2/4/2019',
+    content: 'Pariatur ab aspernatur minus.',
+    contentMedia: 'Asperiores vel aliquam doloribus quam maxime cumque nisi distinctio autem.',
+  },
+  {
+    key: 'item-28',
+    media: '094c:8254:1146:55d1:6d90:b41d:270a:c993',
+    header: 'Noemie_Nicolas50',
+    headerMedia: '12/24/2019',
+    content: 'Ipsam inventore est omnis eveniet.',
+    contentMedia: 'Animi tempore consequatur voluptatem eaque rerum sit ut et.',
+  },
+  {
+    key: 'item-29',
+    media: 'a903:400f:c7ab:8547:4cf4:0cea:ad85:2f84',
+    header: 'Natalie_Kessler12',
+    headerMedia: '9/13/2019',
+    content: 'Officiis aperiam sed et beatae animi.',
+    contentMedia: 'Et impedit numquam.',
+  },
+  {
+    key: 'item-30',
+    media: '14a0:7da0:6561:bf6e:7b72:6afe:175d:6725',
+    header: 'Liza.Tromp92',
+    headerMedia: '2/25/2019',
+    content: 'Occaecati a exercitationem dolor.',
+    contentMedia: 'Tempora eaque quo consectetur.',
+  },
+  {
+    key: 'item-31',
+    media: '3d66:0500:1c4a:b289:eab9:a3d8:fc1d:8036',
+    header: 'Corrine.Ondricka',
+    headerMedia: '9/17/2019',
+    content: 'Quia sint omnis saepe exercitationem et necessitatibus minima.',
+    contentMedia: 'Necessitatibus eum neque totam accusamus iste.',
+  },
+  {
+    key: 'item-32',
+    media: '3ef6:2e67:4d8a:e0fb:c614:0b87:b046:ee02',
+    header: 'Xzavier.Torphy',
+    headerMedia: '8/15/2019',
+    content: 'Sed saepe et.',
+    contentMedia: 'Nihil similique sunt ducimus.',
+  },
+  {
+    key: 'item-33',
+    media: '8d1b:6a57:b845:deeb:41bd:1f88:6f7b:804f',
+    header: 'Odell89',
+    headerMedia: '2/10/2019',
+    content: 'Ut in voluptatem laudantium adipisci deleniti fugiat nam natus.',
+    contentMedia: 'Molestiae id dolorem sit.',
+  },
+  {
+    key: 'item-34',
+    media: 'f48c:d246:d89a:213b:a252:03a3:7b23:c5e1',
+    header: 'Shakira.Wuckert51',
+    headerMedia: '1/19/2020',
+    content: 'Recusandae maiores laborum voluptas excepturi numquam.',
+    contentMedia: 'Alias et earum exercitationem rerum sed.',
+  },
+  {
+    key: 'item-35',
+    media: 'fd13:2bf9:b739:5216:5a5a:1697:ec14:f388',
+    header: 'Stephan30',
+    headerMedia: '8/8/2019',
+    content: 'Laborum numquam dolores deserunt incidunt accusamus ipsam.',
+    contentMedia: 'Iusto voluptas nobis.',
+  },
+  {
+    key: 'item-36',
+    media: '4df1:1c3e:3519:e661:570a:95e4:7d42:2a9f',
+    header: 'Kenton_Vandervort68',
+    headerMedia: '11/19/2019',
+    content: 'Blanditiis nemo possimus autem et sunt exercitationem inventore dolorum.',
+    contentMedia: 'Odio aspernatur at sapiente voluptatem qui reiciendis suscipit non aut.',
+  },
+  {
+    key: 'item-37',
+    media: 'b0fd:820f:8349:bbe6:709d:bb31:dbcd:04e8',
+    header: 'Milton39',
+    headerMedia: '4/16/2019',
+    content: 'Ratione nihil omnis enim aut rerum molestias nulla sit rem.',
+    contentMedia: 'Rem dolorem ab cupiditate consequatur cum incidunt et vero eveniet.',
+  },
+  {
+    key: 'item-38',
+    media: '2e80:c46e:0b5e:e390:0f07:75a7:ef51:f03a',
+    header: 'Domenic.Bernier63',
+    headerMedia: '7/20/2019',
+    content: 'Amet et soluta rerum vero totam non consequatur sit dolorum.',
+    contentMedia: 'Explicabo in voluptas esse et sint.',
+  },
+  {
+    key: 'item-39',
+    media: '7bed:44f3:d339:6da5:17bb:ac34:9d31:3ef5',
+    header: 'Deshawn68',
+    headerMedia: '9/20/2019',
+    content: 'Mollitia ut sapiente ex eaque ducimus sit culpa et corrupti.',
+    contentMedia: 'Amet voluptatem vero et est dicta est.',
+  },
+  {
+    key: 'item-40',
+    media: '5c39:27f2:3d18:a5ed:805d:98c0:eca1:441d',
+    header: 'Eda_Willms',
+    headerMedia: '6/19/2019',
+    content: 'Nihil quasi et voluptatem dolore et.',
+    contentMedia: 'Rerum dolores reiciendis asperiores fuga nostrum vitae et.',
+  },
+  {
+    key: 'item-41',
+    media: 'ae15:839e:803b:0e90:0382:1502:254c:ff49',
+    header: 'Eliza44',
+    headerMedia: '10/18/2019',
+    content: 'Veniam ab ducimus ut repellat.',
+    contentMedia: 'Et voluptatibus error nihil numquam similique.',
+  },
+  {
+    key: 'item-42',
+    media: 'cd53:e6ce:1aff:8b32:3786:fefa:c00e:a801',
+    header: 'Garry.Connelly',
+    headerMedia: '9/25/2019',
+    content: 'Accusamus esse impedit ratione id sit vero veniam odit nemo.',
+    contentMedia: 'Eveniet vel dolor dolores quam animi rerum temporibus.',
+  },
+  {
+    key: 'item-43',
+    media: 'bb43:d3e5:2f02:e726:0edb:5029:9c59:40b0',
+    header: 'Sigrid4',
+    headerMedia: '10/4/2019',
+    content: 'Quis ut est sunt sit sed facilis rerum debitis iusto.',
+    contentMedia: 'Quos assumenda quam ab sed ea assumenda explicabo suscipit vero.',
+  },
+  {
+    key: 'item-44',
+    media: '63c0:e35e:8a1a:a3b2:90ae:bda1:4466:aac7',
+    header: 'Armando.Durgan',
+    headerMedia: '5/12/2019',
+    content: 'Et numquam non hic et occaecati suscipit.',
+    contentMedia: 'Fugiat voluptatum quia amet aut ut ea nam.',
+  },
+  {
+    key: 'item-45',
+    media: '6d4a:3868:1ac0:7edc:3461:fe0e:df54:0d0d',
+    header: 'Theresia.Thiel',
+    headerMedia: '12/30/2019',
+    content: 'Enim animi sit beatae nisi rerum vitae velit maiores quia.',
+    contentMedia: 'Ut quisquam est doloremque voluptatem iure similique ab sit.',
+  },
+  {
+    key: 'item-46',
+    media: 'e494:2079:8bac:cafb:b075:4718:3791:065a',
+    header: 'Yazmin_Kertzmann',
+    headerMedia: '10/27/2019',
+    content: 'Deleniti iste ab est ut nihil soluta aut rem ex.',
+    contentMedia: 'Distinctio fugit fugiat commodi consequatur laudantium aut quod.',
+  },
+  {
+    key: 'item-47',
+    media: 'e8e8:d347:be4c:90ac:aabf:8fc4:fac2:0c75',
+    header: 'Terry.Schuppe42',
+    headerMedia: '8/1/2019',
+    content: 'Repellendus necessitatibus minima fugit autem odio vel accusantium accusamus quas.',
+    contentMedia: 'Nihil aliquam tenetur veritatis atque.',
+  },
+  {
+    key: 'item-48',
+    media: '9b6f:cc70:91dd:2fae:cab3:892f:b12e:84b4',
+    header: 'Gilda_Kuhlman41',
+    headerMedia: '5/22/2019',
+    content: 'Eum aut assumenda quia aperiam culpa aliquid pariatur qui sit.',
+    contentMedia: 'Voluptatem delectus odit.',
+  },
+  {
+    key: 'item-49',
+    media: 'a479:0ac9:94bd:eda7:2105:9b91:003e:ff0f',
+    header: 'Mathew_Bashirian',
+    headerMedia: '11/27/2019',
+    content: 'Iusto rerum voluptas.',
+    contentMedia: 'Ea molestiae quos cupiditate laborum.',
+  },
+  {
+    key: 'item-50',
+    media: '86e6:9dab:6835:7cb3:39aa:009b:e1ee:3d3f',
+    header: 'Roma84',
+    headerMedia: '7/6/2019',
+    content: 'Deleniti sunt doloremque perferendis quod assumenda ipsa.',
+    contentMedia: 'Est commodi illo incidunt provident alias ab aut ut placeat.',
+  },
+  {
+    key: 'item-51',
+    media: 'c9c0:e84c:b2e7:9687:9089:f2d3:3c24:ee17',
+    header: 'Hans_Hayes',
+    headerMedia: '4/29/2019',
+    content: 'Dolores quibusdam nihil et modi earum officia earum incidunt et.',
+    contentMedia: 'Et officiis ea velit tempore enim at commodi dolores.',
+  },
+  {
+    key: 'item-52',
+    media: '8738:61a1:bc19:1958:c7cb:f878:1ddc:a847',
+    header: 'Sam80',
+    headerMedia: '11/14/2019',
+    content: 'Eaque quam distinctio.',
+    contentMedia: 'Vel numquam asperiores ut assumenda veniam est dolorum officiis.',
+  },
+  {
+    key: 'item-53',
+    media: '5295:1bbf:5778:011e:207a:d67b:517a:a02e',
+    header: 'Madaline53',
+    headerMedia: '5/6/2019',
+    content: 'Et error rerum odio ex molestiae.',
+    contentMedia: 'In quidem numquam omnis voluptas nam et ratione.',
+  },
+  {
+    key: 'item-54',
+    media: 'dc6b:7b5a:739b:9ce7:3bf0:0801:f19f:e5ca',
+    header: 'Ardith46',
+    headerMedia: '7/18/2019',
+    content: 'Qui possimus quae hic ea ex voluptatum culpa.',
+    contentMedia: 'Cupiditate sequi vel.',
+  },
+  {
+    key: 'item-55',
+    media: 'da52:440c:e8ce:65aa:2492:6bb7:f34c:fe8d',
+    header: 'Linnea22',
+    headerMedia: '2/22/2019',
+    content: 'Rerum quis in ad ad maiores possimus error optio.',
+    contentMedia: 'Eaque quo explicabo sunt et rerum.',
+  },
+  {
+    key: 'item-56',
+    media: '0a4f:bfa5:8c03:e5f8:75b3:0751:6763:912b',
+    header: 'Mervin.Hickle85',
+    headerMedia: '10/6/2019',
+    content: 'Quo nesciunt culpa aliquam consequuntur.',
+    contentMedia: 'Iure eos perferendis.',
+  },
+  {
+    key: 'item-57',
+    media: 'ae6a:016b:11ca:4c9e:203e:045d:b0e4:12cf',
+    header: 'Abel78',
+    headerMedia: '8/22/2019',
+    content: 'Voluptatem saepe est sit illo nihil enim iure ut quia.',
+    contentMedia: 'Rerum officia ut eveniet aut consequatur.',
+  },
+  {
+    key: 'item-58',
+    media: 'ebcd:0202:ef1b:94f7:7003:dbae:53cb:e035',
+    header: 'Lexi.Pacocha18',
+    headerMedia: '7/11/2019',
+    content: 'Autem qui voluptatem.',
+    contentMedia: 'Quis nostrum repellat maxime.',
+  },
+  {
+    key: 'item-59',
+    media: '0ea2:847a:c88b:a67b:a525:b0d1:5801:3383',
+    header: 'Braeden44',
+    headerMedia: '9/29/2019',
+    content: 'Quae consequatur pariatur et ea.',
+    contentMedia: 'Quisquam odit ipsa quo.',
+  },
+  {
+    key: 'item-60',
+    media: '39d9:38bc:a073:8df5:e24c:8061:a0b2:5797',
+    header: 'Dena44',
+    headerMedia: '11/4/2019',
+    content: 'Odio enim corrupti doloribus neque velit eum quaerat modi.',
+    contentMedia: 'Quo totam dolorum officia nihil corporis earum doloremque voluptas quod.',
+  },
+  {
+    key: 'item-61',
+    media: 'd2d8:af56:3f45:fd15:befb:e30b:73df:c011',
+    header: 'Donato12',
+    headerMedia: '9/7/2019',
+    content: 'Et expedita vero recusandae soluta autem assumenda.',
+    contentMedia: 'Ullam fuga minima laboriosam facilis velit.',
+  },
+  {
+    key: 'item-62',
+    media: 'f6c3:9c9f:9c45:7439:c286:e8ac:91b2:f3b0',
+    header: 'Walker.Heidenreich5',
+    headerMedia: '11/30/2019',
+    content: 'Beatae dolorem eveniet.',
+    contentMedia: 'Et voluptas ullam beatae corporis quaerat et sint quasi.',
+  },
+  {
+    key: 'item-63',
+    media: '3df8:81ab:9f29:d0a1:4360:0b1c:c4ac:9ef6',
+    header: 'Rosalinda_Kuphal75',
+    headerMedia: '5/27/2019',
+    content: 'Atque animi consectetur laborum.',
+    contentMedia: 'Aut quisquam rem.',
+  },
+  {
+    key: 'item-64',
+    media: 'c249:12c6:642c:49be:4a08:d66a:8d0d:1a98',
+    header: 'Bella_Becker46',
+    headerMedia: '12/6/2019',
+    content: 'Similique placeat et possimus voluptates quia non non.',
+    contentMedia: 'Sit et reiciendis ad unde est porro quibusdam.',
+  },
+  {
+    key: 'item-65',
+    media: '6b01:d676:8c9a:7559:5639:493e:d3f8:e529',
+    header: 'Zechariah.Zulauf75',
+    headerMedia: '12/9/2019',
+    content: 'Optio dolorem aut.',
+    contentMedia: 'Blanditiis voluptas quia corrupti laborum.',
+  },
+  {
+    key: 'item-66',
+    media: '61a1:e08f:3b2c:6775:a768:79ef:fbc5:1d2b',
+    header: 'Amina_Reilly',
+    headerMedia: '4/2/2019',
+    content: 'Sed earum fuga pariatur ipsam officia amet.',
+    contentMedia: 'Minus facilis quam.',
+  },
+  {
+    key: 'item-67',
+    media: '32d8:895f:7f5f:f3f8:3f71:ddee:0e80:6da8',
+    header: 'Jackson.Bauch17',
+    headerMedia: '12/31/2019',
+    content: 'Non corrupti quisquam et.',
+    contentMedia: 'Nulla soluta explicabo esse ea in nemo id reiciendis.',
+  },
+  {
+    key: 'item-68',
+    media: 'e51d:a9e9:c018:ab6b:78aa:ce10:d01e:ba61',
+    header: 'Marcelo99',
+    headerMedia: '9/19/2019',
+    content: 'Odit nobis dicta vero impedit expedita voluptates aliquid.',
+    contentMedia: 'Ipsum consequatur accusantium.',
+  },
+  {
+    key: 'item-69',
+    media: 'bca7:7384:2454:e457:f029:5f2b:23b6:e8e9',
+    header: 'Leonora_Wolf35',
+    headerMedia: '10/17/2019',
+    content: 'Beatae ut cum et occaecati excepturi molestiae sequi aut esse.',
+    contentMedia: 'Ipsa laboriosam rerum.',
+  },
+  {
+    key: 'item-70',
+    media: '01a2:9bbd:3a4f:1c02:c4f8:f232:dfa7:452d',
+    header: 'Haleigh.Williamson',
+    headerMedia: '9/23/2019',
+    content: 'Animi fuga in omnis.',
+    contentMedia: 'Eos reiciendis quidem nam corrupti vero atque dolores ut.',
+  },
+  {
+    key: 'item-71',
+    media: '1642:ec3a:415b:a5a6:4873:853f:6052:f601',
+    header: 'Elian_Lang',
+    headerMedia: '11/12/2019',
+    content: 'Autem nesciunt quia magnam qui.',
+    contentMedia: 'Repudiandae atque ipsum perspiciatis possimus tempora deleniti a.',
+  },
+  {
+    key: 'item-72',
+    media: 'c135:5daa:737b:aba0:2241:c19f:42ce:8a91',
+    header: 'Filiberto_Runolfsdottir',
+    headerMedia: '6/16/2019',
+    content: 'Itaque nesciunt sit ducimus error adipisci et est vitae.',
+    contentMedia: 'Doloribus praesentium ut ut qui sint mollitia quasi rem non.',
+  },
+  {
+    key: 'item-73',
+    media: '4e2d:cda6:9c1e:f561:a416:ce2d:4ed4:1807',
+    header: 'Darwin_Price',
+    headerMedia: '1/18/2020',
+    content: 'Sit delectus corrupti omnis et alias reprehenderit praesentium nihil.',
+    contentMedia: 'Aut minus sunt ut.',
+  },
+  {
+    key: 'item-74',
+    media: 'a8db:749a:e801:5d86:929a:f04f:0fe0:7f3c',
+    header: 'River.Shields',
+    headerMedia: '4/12/2019',
+    content: 'Nobis voluptatem ipsum.',
+    contentMedia: 'Deserunt non ex eos deserunt.',
+  },
+  {
+    key: 'item-75',
+    media: '65ca:2e7d:5a73:ab88:3d47:6e95:8ce0:c0be',
+    header: 'Marcelina97',
+    headerMedia: '11/12/2019',
+    content: 'Dolores ex aut.',
+    contentMedia: 'Ad dolorem ullam libero ipsam vel eum id molestiae qui.',
+  },
+  {
+    key: 'item-76',
+    media: '28b5:6f91:ba1a:a099:bd84:1805:3c4e:6d3a',
+    header: 'Hector_Jacobs',
+    headerMedia: '6/19/2019',
+    content: 'Assumenda nostrum aut eum.',
+    contentMedia: 'Accusamus quae rerum molestias reprehenderit ducimus in.',
+  },
+  {
+    key: 'item-77',
+    media: '5a9b:2b1c:0c64:978e:d0d8:a205:f1ba:d022',
+    header: 'Hank.Gutkowski',
+    headerMedia: '11/28/2019',
+    content: 'Nam itaque et.',
+    contentMedia: 'Esse aut ducimus illo sint error doloremque consequatur sunt assumenda.',
+  },
+  {
+    key: 'item-78',
+    media: '22e4:aa44:2ca1:3505:06a8:6eb8:fbfd:738c',
+    header: 'Bianka_Bode',
+    headerMedia: '10/14/2019',
+    content: 'Hic incidunt officia.',
+    contentMedia: 'Vitae sunt nostrum nobis occaecati sed molestiae est impedit.',
+  },
+  {
+    key: 'item-79',
+    media: 'fbee:c95c:d813:44ac:3925:7642:8e1c:7e16',
+    header: 'Neil81',
+    headerMedia: '2/23/2019',
+    content: 'Excepturi et corporis sed autem unde qui doloribus.',
+    contentMedia: 'Distinctio consequatur dignissimos enim.',
+  },
+  {
+    key: 'item-80',
+    media: 'a3f7:3619:438a:b723:1666:403f:864d:e8f1',
+    header: 'Finn.Abshire29',
+    headerMedia: '2/20/2019',
+    content: 'Explicabo magni omnis eum consequatur numquam tenetur.',
+    contentMedia: 'Quas exercitationem delectus quasi sequi ut repellat maiores recusandae aut.',
+  },
+  {
+    key: 'item-81',
+    media: '3a7a:9528:8159:40aa:4e91:1a05:886d:59e6',
+    header: 'Bartholome_Bartoletti44',
+    headerMedia: '8/11/2019',
+    content: 'Adipisci et ducimus et pariatur consequatur quibusdam.',
+    contentMedia: 'Omnis architecto odit illo enim.',
+  },
+  {
+    key: 'item-82',
+    media: 'e5fe:d840:e9ee:467f:a631:a5ee:26ea:f5e4',
+    header: 'Amanda_Eichmann',
+    headerMedia: '10/6/2019',
+    content: 'Libero vitae laborum omnis consectetur beatae aut quas architecto quis.',
+    contentMedia: 'Est iusto tempore quaerat.',
+  },
+  {
+    key: 'item-83',
+    media: '4398:93a6:1de1:94f3:903e:954c:77cd:d013',
+    header: 'Izaiah30',
+    headerMedia: '5/5/2019',
+    content: 'Voluptate provident omnis sequi enim dolorem quod.',
+    contentMedia: 'Assumenda aut officia deleniti velit corporis.',
+  },
+  {
+    key: 'item-84',
+    media: 'defd:93e0:086c:c54c:91f8:3cd3:f906:2399',
+    header: 'Emmanuelle_Hodkiewicz',
+    headerMedia: '10/20/2019',
+    content: 'Quis quasi reiciendis cupiditate necessitatibus deleniti.',
+    contentMedia: 'Nam debitis voluptate labore ea non vel eveniet sint consequuntur.',
+  },
+  {
+    key: 'item-85',
+    media: '5500:c4a6:1062:fb2b:1ec0:7a2f:2ff6:00a6',
+    header: 'Bailee_Metz4',
+    headerMedia: '9/11/2019',
+    content: 'Cumque ut et ut voluptates aliquam dolore occaecati quisquam rem.',
+    contentMedia: 'Consequatur deleniti sed illum cupiditate aliquam.',
+  },
+  {
+    key: 'item-86',
+    media: '28ff:bcb7:ba28:6f30:9193:8d67:fd3a:a95f',
+    header: 'Roel14',
+    headerMedia: '1/9/2020',
+    content: 'Facere omnis itaque facere eligendi iusto corporis.',
+    contentMedia: 'Et autem pariatur iste magnam esse ab.',
+  },
+  {
+    key: 'item-87',
+    media: '793d:32e6:3b90:1e5c:2974:4a05:9d15:a687',
+    header: 'Liliane.Welch',
+    headerMedia: '4/7/2019',
+    content: 'Aut unde nostrum quis corrupti placeat quibusdam.',
+    contentMedia: 'Saepe sit quis ullam.',
+  },
+  {
+    key: 'item-88',
+    media: 'ab9f:016b:aabe:45cd:6457:a5be:1449:9ac3',
+    header: 'Emmet_Fritsch58',
+    headerMedia: '11/5/2019',
+    content: 'Sint culpa et corporis consequatur doloremque placeat fugiat nemo rerum.',
+    contentMedia: 'Deserunt deleniti et consequuntur consequuntur nemo molestias excepturi rerum.',
+  },
+  {
+    key: 'item-89',
+    media: '5426:e139:7c43:360c:e540:305d:0dd3:c3d4',
+    header: 'Alba9',
+    headerMedia: '10/17/2019',
+    content: 'Expedita commodi qui.',
+    contentMedia: 'Quasi non sunt suscipit nesciunt enim ipsam quaerat.',
+  },
+  {
+    key: 'item-90',
+    media: '64fc:571b:ad34:65cb:deab:4ce8:220b:8e67',
+    header: 'Colton_Stroman9',
+    headerMedia: '11/6/2019',
+    content: 'Impedit dolorum ut facilis neque qui.',
+    contentMedia: 'At amet hic.',
+  },
+  {
+    key: 'item-91',
+    media: '7788:9eec:848d:468b:0264:2c4b:dd36:cec7',
+    header: 'Baylee.Leffler9',
+    headerMedia: '7/14/2019',
+    content: 'Aut dolores aperiam.',
+    contentMedia: 'Voluptatem aut aut molestias labore optio deserunt harum quos reprehenderit.',
+  },
+  {
+    key: 'item-92',
+    media: 'b4f5:008d:9fe0:cef5:e1a0:f291:8a2e:50c8',
+    header: 'Emmanuel.Crona',
+    headerMedia: '2/6/2019',
+    content: 'Facere repudiandae rem voluptatem saepe rerum est velit porro.',
+    contentMedia: 'Molestiae aut eum reiciendis et voluptatibus quasi ut quasi consectetur.',
+  },
+  {
+    key: 'item-93',
+    media: '77e2:f427:7f58:5e7e:7e70:c3b0:80cd:4495',
+    header: 'Aurelia.Olson4',
+    headerMedia: '10/17/2019',
+    content: 'Tempore aut facilis laboriosam minus.',
+    contentMedia: 'Id omnis est voluptatem sit non quo quaerat.',
+  },
+  {
+    key: 'item-94',
+    media: '0079:dea3:8261:4801:d2d5:7dea:0dc2:4c2c',
+    header: 'Morris_Morar',
+    headerMedia: '10/27/2019',
+    content: 'Qui explicabo non.',
+    contentMedia: 'Dolore consequatur totam modi et.',
+  },
+  {
+    key: 'item-95',
+    media: '6f85:fda7:38b4:e019:606d:6ed6:56c4:a4bf',
+    header: 'Ray.Berge',
+    headerMedia: '8/8/2019',
+    content: 'Et amet ut rerum debitis consequatur.',
+    contentMedia: 'Omnis voluptatum ut quisquam ut quidem.',
+  },
+  {
+    key: 'item-96',
+    media: 'f498:acb8:7241:3d26:3fa3:a63f:3fd9:da18',
+    header: 'Freida.Keeling99',
+    headerMedia: '7/7/2019',
+    content: 'Et eveniet quae sapiente.',
+    contentMedia: 'Ea optio voluptatem maxime sunt aliquam nesciunt quia dicta sint.',
+  },
+  {
+    key: 'item-97',
+    media: 'ca0a:c574:e92f:fc64:679b:27f6:930e:9379',
+    header: 'Frederic_Schuppe',
+    headerMedia: '2/10/2019',
+    content: 'Aliquam incidunt est aut sit esse.',
+    contentMedia: 'Non voluptatem quae adipisci et voluptatem voluptas velit ut.',
+  },
+  {
+    key: 'item-98',
+    media: 'd909:4f8a:12bc:921d:b8f2:b9d5:b036:e5f9',
+    header: 'Selena.Schultz16',
+    headerMedia: '5/21/2019',
+    content: 'Quam dolorem rerum quo nulla.',
+    contentMedia: 'Laudantium ut quia iusto.',
+  },
+  {
+    key: 'item-99',
+    media: 'd049:44b4:1d31:c7d1:62fd:db1c:2d79:b4c9',
+    header: 'Chloe_Shields0',
+    headerMedia: '2/10/2019',
+    content: 'Optio quas culpa eum unde debitis laudantium et excepturi.',
+    contentMedia: 'Molestias officia est delectus harum inventore dolor.',
+  },
+]
+
+const ListNestedPerf = () => (
+  <List
+    selectable
+    items={[
+      ...items,
+      {
+        key: 'list-1',
+        content: (
+          <List
+            selectable
+            items={[
+              ...items,
+              {
+                key: 'list-1',
+                content: <List items={items} style={{ backgroundColor: 'green' }} />,
+              },
+              {
+                key: 'list-2',
+                content: <List items={items} style={{ backgroundColor: 'yellow' }} />,
+              },
+              {
+                key: 'list-3',
+                content: <List items={items} style={{ backgroundColor: 'red' }} />,
+              },
+            ]}
+          />
+        ),
+      },
+      {
+        key: 'list-2',
+        content: (
+          <List
+            selectable
+            items={[
+              ...items,
+              {
+                key: 'list-1',
+                content: <List items={items} style={{ backgroundColor: 'green' }} />,
+              },
+              {
+                key: 'list-2',
+                content: <List items={items} style={{ backgroundColor: 'yellow' }} />,
+              },
+              {
+                key: 'list-3',
+                content: <List items={items} style={{ backgroundColor: 'red' }} />,
+              },
+            ]}
+          />
+        ),
+      },
+    ]}
+  />
+)
+
+ListNestedPerf.iterations = 1
+ListNestedPerf.filename = 'ListNested.perf.tsx'
+
+export default ListNestedPerf
diff --git a/docs/src/examples/components/List/Performance/ListWith60ListItems.perf.tsx b/docs/src/examples/components/List/Performance/ListWith60ListItems.perf.tsx
new file mode 100644
index 0000000000..da8fbcd8d1
--- /dev/null
+++ b/docs/src/examples/components/List/Performance/ListWith60ListItems.perf.tsx
@@ -0,0 +1,35 @@
+import { List, Avatar } from '@fluentui/react'
+import * as _ from 'lodash'
+import * as React from 'react'
+
+const avatars = {
+  ade:
+    '/9j/4AAQSkZJRgABAQAAAQABAAD/4gxYSUNDX1BST0ZJTEUAAQEAAAxITGlubwIQAABtbnRyUkdCIFhZWiAHzgACAAkABgAxAABhY3NwTVNGVAAAAABJRUMgc1JHQgAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLUhQICAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABFjcHJ0AAABUAAAADNkZXNjAAABhAAAAGx3dHB0AAAB8AAAABRia3B0AAACBAAAABRyWFlaAAACGAAAABRnWFlaAAACLAAAABRiWFlaAAACQAAAABRkbW5kAAACVAAAAHBkbWRkAAACxAAAAIh2dWVkAAADTAAAAIZ2aWV3AAAD1AAAACRsdW1pAAAD+AAAABRtZWFzAAAEDAAAACR0ZWNoAAAEMAAAAAxyVFJDAAAEPAAACAxnVFJDAAAEPAAACAxiVFJDAAAEPAAACAx0ZXh0AAAAAENvcHlyaWdodCAoYykgMTk5OCBIZXdsZXR0LVBhY2thcmQgQ29tcGFueQAAZGVzYwAAAAAAAAASc1JHQiBJRUM2MTk2Ni0yLjEAAAAAAAAAAAAAABJzUkdCIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWFlaIAAAAAAAAPNRAAEAAAABFsxYWVogAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z2Rlc2MAAAAAAAAAFklFQyBodHRwOi8vd3d3LmllYy5jaAAAAAAAAAAAAAAAFklFQyBodHRwOi8vd3d3LmllYy5jaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABkZXNjAAAAAAAAAC5JRUMgNjE5NjYtMi4xIERlZmF1bHQgUkdCIGNvbG91ciBzcGFjZSAtIHNSR0IAAAAAAAAAAAAAAC5JRUMgNjE5NjYtMi4xIERlZmF1bHQgUkdCIGNvbG91ciBzcGFjZSAtIHNSR0IAAAAAAAAAAAAAAAAAAAAAAAAAAAAAZGVzYwAAAAAAAAAsUmVmZXJlbmNlIFZpZXdpbmcgQ29uZGl0aW9uIGluIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAALFJlZmVyZW5jZSBWaWV3aW5nIENvbmRpdGlvbiBpbiBJRUM2MTk2Ni0yLjEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHZpZXcAAAAAABOk/gAUXy4AEM8UAAPtzAAEEwsAA1yeAAAAAVhZWiAAAAAAAEwJVgBQAAAAVx/nbWVhcwAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAo8AAAACc2lnIAAAAABDUlQgY3VydgAAAAAAAAQAAAAABQAKAA8AFAAZAB4AIwAoAC0AMgA3ADsAQABFAEoATwBUAFkAXgBjAGgAbQByAHcAfACBAIYAiwCQAJUAmgCfAKQAqQCuALIAtwC8AMEAxgDLANAA1QDbAOAA5QDrAPAA9gD7AQEBBwENARMBGQEfASUBKwEyATgBPgFFAUwBUgFZAWABZwFuAXUBfAGDAYsBkgGaAaEBqQGxAbkBwQHJAdEB2QHhAekB8gH6AgMCDAIUAh0CJgIvAjgCQQJLAlQCXQJnAnECegKEAo4CmAKiAqwCtgLBAssC1QLgAusC9QMAAwsDFgMhAy0DOANDA08DWgNmA3IDfgOKA5YDogOuA7oDxwPTA+AD7AP5BAYEEwQgBC0EOwRIBFUEYwRxBH4EjASaBKgEtgTEBNME4QTwBP4FDQUcBSsFOgVJBVgFZwV3BYYFlgWmBbUFxQXVBeUF9gYGBhYGJwY3BkgGWQZqBnsGjAadBq8GwAbRBuMG9QcHBxkHKwc9B08HYQd0B4YHmQesB78H0gflB/gICwgfCDIIRghaCG4IggiWCKoIvgjSCOcI+wkQCSUJOglPCWQJeQmPCaQJugnPCeUJ+woRCicKPQpUCmoKgQqYCq4KxQrcCvMLCwsiCzkLUQtpC4ALmAuwC8gL4Qv5DBIMKgxDDFwMdQyODKcMwAzZDPMNDQ0mDUANWg10DY4NqQ3DDd4N+A4TDi4OSQ5kDn8Omw62DtIO7g8JDyUPQQ9eD3oPlg+zD88P7BAJECYQQxBhEH4QmxC5ENcQ9RETETERTxFtEYwRqhHJEegSBxImEkUSZBKEEqMSwxLjEwMTIxNDE2MTgxOkE8UT5RQGFCcUSRRqFIsUrRTOFPAVEhU0FVYVeBWbFb0V4BYDFiYWSRZsFo8WshbWFvoXHRdBF2UXiReuF9IX9xgbGEAYZRiKGK8Y1Rj6GSAZRRlrGZEZtxndGgQaKhpRGncanhrFGuwbFBs7G2MbihuyG9ocAhwqHFIcexyjHMwc9R0eHUcdcB2ZHcMd7B4WHkAeah6UHr4e6R8THz4faR+UH78f6iAVIEEgbCCYIMQg8CEcIUghdSGhIc4h+yInIlUigiKvIt0jCiM4I2YjlCPCI/AkHyRNJHwkqyTaJQklOCVoJZclxyX3JicmVyaHJrcm6CcYJ0kneierJ9woDSg/KHEooijUKQYpOClrKZ0p0CoCKjUqaCqbKs8rAis2K2krnSvRLAUsOSxuLKIs1y0MLUEtdi2rLeEuFi5MLoIuty7uLyQvWi+RL8cv/jA1MGwwpDDbMRIxSjGCMbox8jIqMmMymzLUMw0zRjN/M7gz8TQrNGU0njTYNRM1TTWHNcI1/TY3NnI2rjbpNyQ3YDecN9c4FDhQOIw4yDkFOUI5fzm8Ofk6Njp0OrI67zstO2s7qjvoPCc8ZTykPOM9Ij1hPaE94D4gPmA+oD7gPyE/YT+iP+JAI0BkQKZA50EpQWpBrEHuQjBCckK1QvdDOkN9Q8BEA0RHRIpEzkUSRVVFmkXeRiJGZ0arRvBHNUd7R8BIBUhLSJFI10kdSWNJqUnwSjdKfUrESwxLU0uaS+JMKkxyTLpNAk1KTZNN3E4lTm5Ot08AT0lPk0/dUCdQcVC7UQZRUFGbUeZSMVJ8UsdTE1NfU6pT9lRCVI9U21UoVXVVwlYPVlxWqVb3V0RXklfgWC9YfVjLWRpZaVm4WgdaVlqmWvVbRVuVW+VcNVyGXNZdJ114XcleGl5sXr1fD19hX7NgBWBXYKpg/GFPYaJh9WJJYpxi8GNDY5dj62RAZJRk6WU9ZZJl52Y9ZpJm6Gc9Z5Nn6Wg/aJZo7GlDaZpp8WpIap9q92tPa6dr/2xXbK9tCG1gbbluEm5rbsRvHm94b9FwK3CGcOBxOnGVcfByS3KmcwFzXXO4dBR0cHTMdSh1hXXhdj52m3b4d1Z3s3gReG54zHkqeYl553pGeqV7BHtje8J8IXyBfOF9QX2hfgF+Yn7CfyN/hH/lgEeAqIEKgWuBzYIwgpKC9INXg7qEHYSAhOOFR4Wrhg6GcobXhzuHn4gEiGmIzokziZmJ/opkisqLMIuWi/yMY4zKjTGNmI3/jmaOzo82j56QBpBukNaRP5GokhGSepLjk02TtpQglIqU9JVflcmWNJaflwqXdZfgmEyYuJkkmZCZ/JpomtWbQpuvnByciZz3nWSd0p5Anq6fHZ+Ln/qgaaDYoUehtqImopajBqN2o+akVqTHpTilqaYapoum/adup+CoUqjEqTepqaocqo+rAqt1q+msXKzQrUStuK4trqGvFq+LsACwdbDqsWCx1rJLssKzOLOutCW0nLUTtYq2AbZ5tvC3aLfguFm40blKucK6O7q1uy67p7whvJu9Fb2Pvgq+hL7/v3q/9cBwwOzBZ8Hjwl/C28NYw9TEUcTOxUvFyMZGxsPHQce/yD3IvMk6ybnKOMq3yzbLtsw1zLXNNc21zjbOts83z7jQOdC60TzRvtI/0sHTRNPG1EnUy9VO1dHWVdbY11zX4Nhk2OjZbNnx2nba+9uA3AXcit0Q3ZbeHN6i3ynfr+A24L3hROHM4lPi2+Nj4+vkc+T85YTmDeaW5x/nqegy6LzpRunQ6lvq5etw6/vshu0R7ZzuKO6070DvzPBY8OXxcvH/8ozzGfOn9DT0wvVQ9d72bfb794r4Gfio+Tj5x/pX+uf7d/wH/Jj9Kf26/kv+3P9t////2wBDAAMCAgICAgMCAgMFAwMDBQUEAwMEBQYFBQUFBQYIBgcHBwcGCAgJCgoKCQgMDAwMDAwODg4ODhAQEBAQEBAQEBD/2wBDAQMEBAYGBgwICAwSDgwOEhQQEBAQFBEQEBAQEBEREBAQEBAQERAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAyADIDAREAAhEBAxEB/8QAHQAAAgICAwEAAAAAAAAAAAAABwgABgEDBAUJAv/EADwQAAEDAgQCBwMICwAAAAAAAAECAwQFBgAHERIhMQgTFCIyQVEJIzQWMzZSYWJxgRUXJENFY3JzkcHy/8QAHAEAAgIDAQEAAAAAAAAAAAAAAAcGCAIDBAEF/8QAQBEAAQIDBAUIBggHAQAAAAAAAQIDAAQRBRIhMQYHMkFREyIzUmFxkbEUQmJjgcEVI0NygrLR8DQ2kqGz4fLC/9oADAMBAAIRAxEAPwBmMU0h8RUs2cyqLlBl3Wcxa80qTHpTaBHgtq2rly31hthhKtDt3rI1VodqdT5Y+tZNmuT82iXbNCrM9VIxJ+A8THBPTaZZkuHdHm9evS46Q961B6Y5eEmgRVq1YpNB0hRmUk8EApBdWfLctZJxYyS0SsmWQByIWes5zifkO4CFg9a826qt8juwp842WL0uOkHl/WW5ki55dyRGXNJ9v19XaGnkpOi2960h1lz0Uk908weWC0NEbLmUFHJBtXWQLpSe0ZHtBEeS9sTTZCgu8DxNajsPzEelWX980HMyyaLf9sKUqm1yOmSwhzTrGV6lDrLmnDe04koV+GuK2T8i7JzK5d3aQad/AjsIxhqSkwl9pLicjFgxwR1xMEETBBCwe0SedZyIpSQvYyu4IXaeOgIRHkKTqfQK44Zur0D6TXXMNq80xEtJSfRR94eRhZ+j/lbTHpvyvuotrqMHq36Zbjw2vxkuDVqbJYWAoBQ4sajafF6YuVovZDS1ekOkFScUo3jgpQ/L4xU7TvSJ9pHobAUlC8Fu0ICuLaFf5Dn6uVY52eWWLN2VOrXVYCVVOv0Zjtt7USC05IdbiJGvbnOqSpLa0p4uJUQVJ72moOMdKpKWLpdaUkODbRXE+1TrcRvGPfloDac6lgS7zaix9k7Tmp92fY6pySebkRB69nLcjtSyqui2XHesbolZS/DGuoS1UoyXVAfYVtk/nin+sSXCZ1p0euih70GnkYtToy6SypHA+f7MNfhVRM4mCCJgggGdLtuhOWhYQumMibRvlvb6arDcdEdD0ZZeQtKnTrsTxBKvIYZmrwj6WNcuTV5piIaU19BwzvDyMdvnRl9UYBnX3XKa5HnIntRGKrUa6iqS2aOYobFHbCW0lxHbErlJcUdUA7BwxcTRlt1NoBVcCk17s/OKwaaLYcskpAxC0lNetvI/DX4RZbUyrvO1X5a7dguhdXiudofpdwClIqNWeWOyVJ9tLe73Mbax1JCkniTu11PwH0PLfW4o5qJPjEsljLtSrbSU0CUpA4ZfswGOh9Trfo2ZmfNEtVttul06tQYjSY+vUl9hL7UhTYPJCnkrKR5A6cMV21mAB5int/8An5w49ESS0sn2fnDPYS8T+JggiYIIVP2js9hrJi3aM8oD9JV1CynXQ7IsN5ajr9m8ccNLV20VWg4rg3+ZQiHaTOUYSnioeRglZa3XmpmH0c8uTVbnp1sXnPhhxT1YgsyEVWCx7mK8pUoLQ2+pkoWvh39QQRh8SNpzlomYas/pJZQS4TWigobimpFFAgimY4QvGRYVmzLarZa5Vp9JLab126pJFag0SqoUKc4UBOBgkv1y6oeX9WtGjXXHuDMWNSZQiVuJFabZYmqZUmOopbJbUtKgNPMnRRSOWNWkdszNhSDDkym+p5dy9S6kU5y1cTROWHOPARxSbdm2xaj6JEck02L/ACd7lCATRKb2QxzSCbqcATCaezWrzbVUzCtOcpYqctmn1ZSXiS8tUdx2PJ37uJUlxwFWvmcKnWQwSiXeGKQVJ/qooeNDDB0YcAU4g5mh8Kgw8mEhDAiYIImCCAfm7kZ+u3MKlV/MxaYeX1iMPvw6I25ulVuUsB6Q7IKeDEcJbS2BqXFgK8IVic2NbJkJYsyuMy+oJveq2K3UgdZVTU+qMM6RG5yQVNPhTmDaMhx/1/vKKPUc9qRnTIcp1LtqbbqbaDaFNzlRy283LSCz1AjkpCEpa4ceWg8sWx1T6KTViLnUzC0qUso2a+rfqanOtYrBrnnuVXKN3SkpDh+BuYjwj4jZoVjKVk12iUyPVXZSkxnIsqSuKEND3i3kFtC1KUjaBt4eLniVaxtFUW/JMMFzkyh29epewKSlWFR2GPjanJiYRazwbTVBaN9Xqp5ybtcDnilI3+MXKV0coSc2aT0j8mqs1btYnhMyu0GW0tylVVme2DJ4skLZcdSrVRAUnrAF6A64pUq31olHLLnUFaUEoSsHnoKFEJzwUBTDI3TSsW2XZVHxMMm6TmDka/uu/HdB5OhPd1A8tef54gESaJggjCilCStZCUpBKlEgAAcSSTyAx6kEkAAkk0AGJJOQA3k8I8JAFTlA+vy74dbt2r2xQ1qDlSjPQxUyPdNF0bSpKfEsafhh/wCimredammZydUlsNqC+R2lmmICjso7RiYhk5pGyKpaBV25D4cfKFeYhVvL+tNQ62z1cKWQyXkd9h1OuiVtr+sknkdDzxayz5wtvA15qsD+vwheaaWFL2/ZKy107ILjfWwFVtn2VgYbrwB4xmr0+sXfdT9IozPahA/ZisHRhsA99a1ngAVfn6YztSYvzBxwTgPn/eObV5ZzNl6PtuuYLmPrVdYg4Np+Cce9Rhl7CvBu27Wo1sVxK5DtLjNxHKiwNyXOr4BXVnRQ0HDFXdJtWk1Nzj03Juo+sUV8kuqaE5gLxTnxpDIltJWhzXEEDiMfEfpWCJCnQ6jGTMgPJfZXwS4g8NRzB8wR6HCBn5CZknyxMtltxOaVeY3EHcoVETFh9t5AW2oKSd4jfjgjfFdzB+iknx+Jr5rl4v3v3PXDP1afzEzsbK9rPZ+y971eysRvSH+BVnmMu/1vZ4wLsW+hWx1d3fRWpfDeD+IfDf8Af1PtxknaEdMr0yc/w5/88eyOFl79D4/w3zi/hP6j8R/O9cbH+kOee/ONbuafuJy2ch0fu+r2RYcaY1Rdcr/iKn4+TX9nmef3/wDWEHre6GT2c159LkNn3XH24m2i227nu+7/ANfKL/8A4xW+GBH/2Q==',
+}
+const janeAvatar = {
+  image: `data:image/jpeg;base64,${avatars.ade}`,
+  status: { color: 'green', icon: 'icon-checkmark' },
+}
+const headers = ['Irving Kuhic', 'Skyler Parks', 'Dante Schneider']
+const headerMedias = ['7:26:56 AM', '11:30:17 PM', '5:22:40 PM']
+const contents = [
+  'Program the sensor to the SAS alarm through the haptic SQL card!',
+  'Use the online FTP application to input the multi-byte application!',
+  'The GB pixel is down, navigate the virtual interface!',
+]
+
+const items = _.times(60, i => ({
+  id: `test${i}`,
+  key: `key${i}`,
+  content: `${contents[i % contents.length]}`,
+  media: <Avatar {...janeAvatar} />,
+  headerMedia: `${headerMedias[i % headerMedias.length]}`,
+  header: `${headers[i % headers.length]}`,
+}))
+
+const ListWith60ListItems = () => <List items={items} />
+
+ListWith60ListItems.iterations = 1
+ListWith60ListItems.filename = 'ListWith60ListItems.perf.tsx'
+
+export default ListWith60ListItems
diff --git a/docs/src/examples/components/List/Performance/index.tsx b/docs/src/examples/components/List/Performance/index.tsx
index 0f98895912..eff0447d12 100644
--- a/docs/src/examples/components/List/Performance/index.tsx
+++ b/docs/src/examples/components/List/Performance/index.tsx
@@ -10,6 +10,16 @@ const Performance = () => (
       description="A typical list with common slots filled."
       examplePath="components/List/Performance/ListCommon.perf"
     />
+    <ComponentPerfExample
+      title="With 60 items"
+      description="A list to be benchmarked against a Tree with List Items."
+      examplePath="components/List/Performance/ListWith60ListItems.perf"
+    />
+    <ComponentPerfExample
+      title="Nested"
+      description="A list with nested lists."
+      examplePath="components/List/Performance/ListNested.perf"
+    />
   </ExampleSection>
 )
 
diff --git a/docs/src/examples/components/List/Types/ListExample.tsx b/docs/src/examples/components/List/Types/ListExample.tsx
index 72685b974d..52e49d1a97 100644
--- a/docs/src/examples/components/List/Types/ListExample.tsx
+++ b/docs/src/examples/components/List/Types/ListExample.tsx
@@ -12,18 +12,21 @@ const ListExampleSelectable = () => {
         header="Irving Kuhic"
         headerMedia="7:26:56 AM"
         content="Program the sensor to the SAS alarm through the haptic SQL card!"
+        index={0}
       />
       <List.Item
         media={<Image src="public/images/avatar/small/steve.jpg" avatar />}
         header="Skyler Parks"
         headerMedia="11:30:17 PM"
         content="Use the online FTP application to input the multi-byte application!"
+        index={1}
       />
       <List.Item
         media={<Image src="public/images/avatar/small/nom.jpg" avatar />}
         header="Dante Schneider"
         headerMedia="5:22:40 PM"
         content="The GB pixel is down, navigate the virtual interface!"
+        index={2}
       />
     </List>
   )
diff --git a/docs/src/examples/components/List/Types/ListExampleNavigable.tsx b/docs/src/examples/components/List/Types/ListExampleNavigable.tsx
index 1ff3071564..8ff504ff42 100644
--- a/docs/src/examples/components/List/Types/ListExampleNavigable.tsx
+++ b/docs/src/examples/components/List/Types/ListExampleNavigable.tsx
@@ -9,6 +9,7 @@ const ListExampleNavigable = () => (
       headerMedia="7:26:56 AM"
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
       navigable
+      index={0}
     />
     <List.Item
       media={<Image src="public/images/avatar/small/steve.jpg" avatar />}
@@ -16,6 +17,7 @@ const ListExampleNavigable = () => (
       headerMedia="11:30:17 PM"
       content="Use the online FTP application to input the multi-byte application!"
       navigable
+      index={1}
     />
     <List.Item
       media={<Image src="public/images/avatar/small/nom.jpg" avatar />}
@@ -23,6 +25,7 @@ const ListExampleNavigable = () => (
       headerMedia="5:22:40 PM"
       content="The GB pixel is down, navigate the virtual interface!"
       navigable
+      index={2}
     />
   </List>
 )
diff --git a/docs/src/examples/components/List/Types/ListExampleSelectable.tsx b/docs/src/examples/components/List/Types/ListExampleSelectable.tsx
index f8d97a0202..28f6db6108 100644
--- a/docs/src/examples/components/List/Types/ListExampleSelectable.tsx
+++ b/docs/src/examples/components/List/Types/ListExampleSelectable.tsx
@@ -7,22 +7,22 @@ const ListExampleSelectable = () => (
       media={<Image src="public/images/avatar/small/matt.jpg" avatar />}
       header="Irving Kuhic"
       headerMedia="7:26:56 AM"
+      index={0}
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
-      selectable
     />
     <List.Item
       media={<Image src="public/images/avatar/small/steve.jpg" avatar />}
       header="Skyler Parks"
       headerMedia="11:30:17 PM"
+      index={1}
       content="Use the online FTP application to input the multi-byte application!"
-      selectable
     />
     <List.Item
       media={<Image src="public/images/avatar/small/nom.jpg" avatar />}
       header="Dante Schneider"
       headerMedia="5:22:40 PM"
+      index={2}
       content="The GB pixel is down, navigate the virtual interface!"
-      selectable
     />
   </List>
 )
diff --git a/docs/src/examples/components/List/Usage/ListExampleMemo.tsx b/docs/src/examples/components/List/Usage/ListExampleMemo.tsx
new file mode 100644
index 0000000000..6cbbd12c63
--- /dev/null
+++ b/docs/src/examples/components/List/Usage/ListExampleMemo.tsx
@@ -0,0 +1,59 @@
+import { useLogKnob } from '@fluentui/docs-components'
+import { List, ListItem } from '@fluentui/react'
+import * as React from 'react'
+
+type MemoItemProps = {
+  children?: string
+  index: number
+  onRender: (index: number) => void
+}
+
+const RenderLogger: React.FC<MemoItemProps & { 'data-id': number }> = props => {
+  const { 'data-id': id, onRender, ...rest } = props
+  onRender(id)
+
+  return <ul {...rest} />
+}
+
+const MemoItem = React.memo<MemoItemProps>(props => {
+  const { children, index, onRender } = props
+
+  return (
+    <ListItem
+      as={RenderLogger}
+      content={children}
+      data-id={index}
+      index={index}
+      onRender={onRender}
+    />
+  )
+})
+
+const ListExampleSelectable = () => {
+  // (!) `handleRender` and `RenderLogger` are used only for logging purposes and are not required
+  //     for an actual implementation
+  const handleRender = useLogKnob(
+    'MemoItem:render',
+    undefined,
+    (id: string, index: number) => `${new Date().toLocaleTimeString()}: ${id}({ id: ${index} })`,
+  )
+
+  return (
+    <List selectable>
+      <MemoItem index={0} onRender={handleRender}>
+        This is an item 0
+      </MemoItem>
+      <MemoItem index={1} onRender={handleRender}>
+        This is an item 1
+      </MemoItem>
+      <MemoItem index={2} onRender={handleRender}>
+        This is an item 2
+      </MemoItem>
+      <MemoItem index={3} onRender={handleRender}>
+        This is an item 3
+      </MemoItem>
+    </List>
+  )
+}
+
+export default ListExampleSelectable
diff --git a/docs/src/examples/components/List/Usage/index.tsx b/docs/src/examples/components/List/Usage/index.tsx
new file mode 100644
index 0000000000..cd7447d0fe
--- /dev/null
+++ b/docs/src/examples/components/List/Usage/index.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react'
+import ComponentExample from '../../../../components/ComponentDoc/ComponentExample'
+import ExampleSection from '../../../../components/ComponentDoc/ExampleSection'
+
+const Usage = () => (
+  <ExampleSection title="Usage">
+    <ComponentExample
+      title={
+        <>
+          List with <code>React.memo()</code>
+        </>
+      }
+      description="React.memo() can be used to avoid rerenders."
+      examplePath="components/List/Usage/ListExampleMemo"
+    />
+  </ExampleSection>
+)
+
+export default Usage
diff --git a/docs/src/examples/components/List/Variations/ListExampleTruncate.tsx b/docs/src/examples/components/List/Variations/ListExampleTruncate.tsx
index 2fd2387f22..5046acfb47 100644
--- a/docs/src/examples/components/List/Variations/ListExampleTruncate.tsx
+++ b/docs/src/examples/components/List/Variations/ListExampleTruncate.tsx
@@ -17,6 +17,7 @@ const ListExample = () => {
           headerMedia="7:26:56 AM"
           content="Program the sensor to the SAS alarm through the haptic SQL card!"
           contentMedia="!!"
+          index={0}
         />
         <List.Item
           media={<Image src="public/images/avatar/small/steve.jpg" avatar />}
@@ -24,6 +25,7 @@ const ListExample = () => {
           headerMedia="11:30:17 PM"
           content="Use the online FTP application to input the multi-byte application!"
           contentMedia="!!"
+          index={1}
         />
         <List.Item
           media={<Image src="public/images/avatar/small/nom.jpg" avatar />}
@@ -31,6 +33,7 @@ const ListExample = () => {
           headerMedia="5:22:40 PM"
           content="The GB pixel is down, navigate the virtual interface!"
           contentMedia="!!"
+          index={2}
         />
       </List>
     </div>
diff --git a/docs/src/examples/components/List/index.tsx b/docs/src/examples/components/List/index.tsx
index 47ad2ce4a6..fae919b8e2 100644
--- a/docs/src/examples/components/List/index.tsx
+++ b/docs/src/examples/components/List/index.tsx
@@ -5,6 +5,7 @@ import Types from './Types'
 import Content from './Content'
 import Variations from './Variations'
 import Performance from './Performance'
+import Usage from './Usage'
 
 const ListExamples = () => (
   <>
@@ -13,6 +14,7 @@ const ListExamples = () => (
     <Variations />
     <Rtl />
     <Performance />
+    <Usage />
   </>
 )
 
diff --git a/docs/src/examples/components/Loader/BestPractices/LoaderBestPractices.tsx b/docs/src/examples/components/Loader/BestPractices/LoaderBestPractices.tsx
new file mode 100644
index 0000000000..f9713d3396
--- /dev/null
+++ b/docs/src/examples/components/Loader/BestPractices/LoaderBestPractices.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+
+import ComponentBestPractices from '../../../../components/ComponentBestPractices'
+
+const doList = [
+  'Use react-aria-live or similar component to announce the loading state.',
+  'If loader is only the element in the screen or region, consider making it focusable by setting `tabIndex` prop to the `Loader`. In most of these cases value of `tabIndex` should be 0.',
+]
+
+const LoaderBestPractices: React.FunctionComponent<{}> = () => {
+  return <ComponentBestPractices doList={doList} />
+}
+
+export default LoaderBestPractices
diff --git a/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.steps.ts b/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.steps.ts
new file mode 100644
index 0000000000..6302da7b15
--- /dev/null
+++ b/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.steps.ts
@@ -0,0 +1,7 @@
+import { Button } from '@fluentui/react'
+
+const config: ScreenerTestsConfig = {
+  steps: [builder => builder.click(`.${Button.className}`).snapshot('Shows popup')],
+}
+
+export default config
diff --git a/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.tsx b/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.tsx
index 1182c806f5..8a47ce3f6a 100644
--- a/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.tsx
@@ -1,37 +1,33 @@
 import * as React from 'react'
-import { Popup, Button, Divider, Text, Grid } from '@fluentui/react'
-import { findDOMNode } from 'react-dom'
+import { Popup, Button, Divider, Text, Grid, Ref } from '@fluentui/react'
 
-class PopupExample extends React.Component {
-  ref = React.createRef<any>()
-  state = { popupTarget: undefined }
+const PopupCustomTargetExample: React.FC = () => {
+  const [textRef, setTextRef] = React.useState<HTMLSpanElement | null>(null)
 
-  componentDidMount() {
-    this.setState({ popupTarget: findDOMNode(this.ref.current) })
-  }
+  return (
+    <Grid columns="auto 1fr">
+      {/* CUSTOM DOM ELEMENT is used as target for Popup */}
+      <Popup
+        target={textRef}
+        trigger={<Button icon="qna" circular styles={{ cursor: 'pointer' }} title="Q&amp;A" />}
+        content="well, yes, I am just a garbish text ¯\_(ツ)_/¯"
+        position="below"
+      >
+        <Button icon="qna" circular styles={{ cursor: 'pointer' }} title="Q&amp;A" />
+      </Popup>
 
-  render() {
-    return (
-      <Grid columns="auto 1fr">
-        {/* CUSTOM DOM ELEMENT is used as target for Popup */}
-        <Popup
-          target={this.state.popupTarget}
-          trigger={<Button icon="qna" circular styles={{ cursor: 'pointer' }} title="Q&amp;A" />}
-          content="well, yes, I am just a garbish text ¯\_(ツ)_/¯"
-          position="below"
-        />
-
-        <div style={{ marginLeft: 10 }}>
-          <Text>Could you guess what does this text means? :)</Text>
-          <Divider />
-          <Text ref={this.ref}>
+      <div style={{ marginLeft: 10 }}>
+        <Text>Could you guess what does this text means? :)</Text>
+        <Divider />
+        <Ref innerRef={setTextRef}>
+          <Text>
             "To the lascivious looking-glass I, that love's majesty to strut before a want love's
             majesto, to the souls of York."
           </Text>
-        </div>
-      </Grid>
-    )
-  }
+        </Ref>
+      </div>
+    </Grid>
+  )
 }
 
-export default PopupExample
+export default PopupCustomTargetExample
diff --git a/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.tsx b/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.tsx
index b8fcf0506a..d58fad3ab1 100644
--- a/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.tsx
@@ -1,38 +1,32 @@
 import * as React from 'react'
-import { Popup, Button, Divider, Text, Grid } from '@fluentui/react'
-import { findDOMNode } from 'react-dom'
+import { Popup, Button, Divider, Text, Grid, Ref } from '@fluentui/react'
 
-class PopupExample extends React.Component {
-  ref = React.createRef<any>()
-  state = { popupTarget: undefined }
+const PopupCustomTargetExample: React.FC = () => {
+  const [textRef, setTextRef] = React.useState<HTMLSpanElement | null>(null)
 
-  componentDidMount() {
-    this.setState({ popupTarget: findDOMNode(this.ref.current) })
-  }
+  return (
+    <Grid columns="auto 1fr">
+      {/* CUSTOM DOM ELEMENT is used as target for Popup */}
+      <Popup
+        target={textRef}
+        content="well, yes, I am just a garbish text ¯\_(ツ)_/¯"
+        position="below"
+      >
+        <Button icon="qna" circular styles={{ cursor: 'pointer' }} title="Q&amp;A" />
+      </Popup>
 
-  render() {
-    return (
-      <Grid columns="auto 1fr">
-        {/* CUSTOM DOM ELEMENT is used as target for Popup */}
-        <Popup
-          target={this.state.popupTarget}
-          content="well, yes, I am just a garbish text ¯\_(ツ)_/¯"
-          position="below"
-        >
-          <Button icon="qna" circular styles={{ cursor: 'pointer' }} title="Q&amp;A" />
-        </Popup>
-
-        <div style={{ marginLeft: 10 }}>
-          <Text>Could you guess what does this text means? :)</Text>
-          <Divider />
-          <Text ref={this.ref}>
+      <div style={{ marginLeft: 10 }}>
+        <Text>Could you guess what does this text means? :)</Text>
+        <Divider />
+        <Ref innerRef={setTextRef}>
+          <Text>
             "To the lascivious looking-glass I, that love's majesty to strut before a want love's
             majesto, to the souls of York."
           </Text>
-        </div>
-      </Grid>
-    )
-  }
+        </Ref>
+      </div>
+    </Grid>
+  )
 }
 
-export default PopupExample
+export default PopupCustomTargetExample
diff --git a/docs/src/examples/components/Popup/Types/PopupExamplePointerOffset.steps.ts b/docs/src/examples/components/Popup/Types/PopupExamplePointerOffset.steps.ts
new file mode 100644
index 0000000000..6302da7b15
--- /dev/null
+++ b/docs/src/examples/components/Popup/Types/PopupExamplePointerOffset.steps.ts
@@ -0,0 +1,7 @@
+import { Button } from '@fluentui/react'
+
+const config: ScreenerTestsConfig = {
+  steps: [builder => builder.click(`.${Button.className}`).snapshot('Shows popup')],
+}
+
+export default config
diff --git a/docs/src/examples/components/Popup/Types/PopupExamplePointerOffset.tsx b/docs/src/examples/components/Popup/Types/PopupExamplePointerOffset.tsx
new file mode 100644
index 0000000000..bee5a59741
--- /dev/null
+++ b/docs/src/examples/components/Popup/Types/PopupExamplePointerOffset.tsx
@@ -0,0 +1,23 @@
+import { Button, Popup } from '@fluentui/react'
+import * as React from 'react'
+
+const PopupExamplePointerOffset = () => (
+  <div style={{ marginLeft: 50, marginTop: 75 }}>
+    <Popup
+      align="center"
+      position="above"
+      offset="20px"
+      pointing
+      trigger={<Button>Click</Button>}
+      content={
+        <p>
+          The popup is rendered at above-start
+          <br />
+          corner of the trigger.
+        </p>
+      }
+    />
+  </div>
+)
+
+export default PopupExamplePointerOffset
diff --git a/docs/src/examples/components/Popup/Types/index.tsx b/docs/src/examples/components/Popup/Types/index.tsx
index c2c8994390..09f10e95cb 100644
--- a/docs/src/examples/components/Popup/Types/index.tsx
+++ b/docs/src/examples/components/Popup/Types/index.tsx
@@ -2,6 +2,7 @@ import * as React from 'react'
 
 import ComponentExample from '../../../../components/ComponentDoc/ComponentExample'
 import ExampleSection from '../../../../components/ComponentDoc/ExampleSection'
+import NonPublicSection from '../../../../components/ComponentDoc/NonPublicSection'
 
 const Types = () => (
   <ExampleSection title="Types">
@@ -35,6 +36,10 @@ const Types = () => (
       description="The content of the popup can be rendered next to the trigger element instead of the body."
       examplePath="components/Popup/Types/PopupExampleInline"
     />
+
+    <NonPublicSection title="Types for visual tests">
+      <ComponentExample examplePath="components/Popup/Types/PopupExamplePointerOffset" />
+    </NonPublicSection>
   </ExampleSection>
 )
 
diff --git a/docs/src/examples/components/Provider/Types/ProviderExampleStyles.tsx b/docs/src/examples/components/Provider/Types/ProviderExampleStyles.tsx
new file mode 100644
index 0000000000..8dfd3567ee
--- /dev/null
+++ b/docs/src/examples/components/Provider/Types/ProviderExampleStyles.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react'
+import { mergeThemes, Provider, themes } from '@fluentui/react'
+
+const ProviderExampleShorthand = () => (
+  <Provider
+    variables={{ background: 'red' }}
+    design={{ padding: '20px' }}
+    styles={{ borderBottom: '3px solid blue' }}
+    theme={mergeThemes(themes.teamsDark, {
+      siteVariables: {
+        bodyBackground: 'salmon',
+      },
+      componentVariables: {
+        Provider: {
+          color: 'yellow',
+        },
+      },
+      componentStyles: {
+        Provider: {
+          root: {
+            borderTop: '3px solid green',
+          },
+        },
+      },
+    })}
+  >
+    <p>with custom overrides</p>
+  </Provider>
+)
+
+export default ProviderExampleShorthand
diff --git a/docs/src/examples/components/Provider/Types/index.tsx b/docs/src/examples/components/Provider/Types/index.tsx
index a26553e569..576c53a321 100644
--- a/docs/src/examples/components/Provider/Types/index.tsx
+++ b/docs/src/examples/components/Provider/Types/index.tsx
@@ -25,8 +25,7 @@ const Types = () => (
     </ExampleSection>
     <NonPublicSection title="Types for visual tests">
       <ComponentExample examplePath="components/Provider/Types/ProviderExampleScrollbar" />
-    </NonPublicSection>
-    <NonPublicSection title="Types for visual tests">
+      <ComponentExample examplePath="components/Provider/Types/ProviderExampleStyles" />
       <ComponentExample examplePath="components/Provider/Types/ProviderExampleRendererFelaPluginFallbackValue" />
     </NonPublicSection>
   </>
diff --git a/docs/src/examples/components/Tooltip/Types/TooltipExamplePointing.shorthand.steps.ts b/docs/src/examples/components/Tooltip/Types/TooltipExamplePointing.shorthand.steps.ts
new file mode 100644
index 0000000000..17170bf6ee
--- /dev/null
+++ b/docs/src/examples/components/Tooltip/Types/TooltipExamplePointing.shorthand.steps.ts
@@ -0,0 +1,15 @@
+import { Button } from '@fluentui/react'
+
+const config: ScreenerTestsConfig = {
+  steps: [
+    builder => builder.hover(`.${Button.className}`).snapshot('Shows tooltip'),
+    (builder, keys) =>
+      builder
+        .keys('body', keys.tab)
+        .snapshot('Has outline on keyboard')
+        .click(`.${Button.className}`)
+        .snapshot('No outline after click'),
+  ],
+}
+
+export default config
diff --git a/docs/src/examples/components/Tree/Performance/TreeWith60ListItems.perf.tsx b/docs/src/examples/components/Tree/Performance/TreeWith60ListItems.perf.tsx
new file mode 100644
index 0000000000..55ba6d2f1e
--- /dev/null
+++ b/docs/src/examples/components/Tree/Performance/TreeWith60ListItems.perf.tsx
@@ -0,0 +1,76 @@
+import { Tree, Avatar, List } from '@fluentui/react'
+import * as _ from 'lodash'
+import * as React from 'react'
+
+const avatars = {
+  ade:
+    '/9j/4AAQSkZJRgABAQAAAQABAAD/4gxYSUNDX1BST0ZJTEUAAQEAAAxITGlubwIQAABtbnRyUkdCIFhZWiAHzgACAAkABgAxAABhY3NwTVNGVAAAAABJRUMgc1JHQgAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLUhQICAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABFjcHJ0AAABUAAAADNkZXNjAAABhAAAAGx3dHB0AAAB8AAAABRia3B0AAACBAAAABRyWFlaAAACGAAAABRnWFlaAAACLAAAABRiWFlaAAACQAAAABRkbW5kAAACVAAAAHBkbWRkAAACxAAAAIh2dWVkAAADTAAAAIZ2aWV3AAAD1AAAACRsdW1pAAAD+AAAABRtZWFzAAAEDAAAACR0ZWNoAAAEMAAAAAxyVFJDAAAEPAAACAxnVFJDAAAEPAAACAxiVFJDAAAEPAAACAx0ZXh0AAAAAENvcHlyaWdodCAoYykgMTk5OCBIZXdsZXR0LVBhY2thcmQgQ29tcGFueQAAZGVzYwAAAAAAAAASc1JHQiBJRUM2MTk2Ni0yLjEAAAAAAAAAAAAAABJzUkdCIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWFlaIAAAAAAAAPNRAAEAAAABFsxYWVogAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z2Rlc2MAAAAAAAAAFklFQyBodHRwOi8vd3d3LmllYy5jaAAAAAAAAAAAAAAAFklFQyBodHRwOi8vd3d3LmllYy5jaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABkZXNjAAAAAAAAAC5JRUMgNjE5NjYtMi4xIERlZmF1bHQgUkdCIGNvbG91ciBzcGFjZSAtIHNSR0IAAAAAAAAAAAAAAC5JRUMgNjE5NjYtMi4xIERlZmF1bHQgUkdCIGNvbG91ciBzcGFjZSAtIHNSR0IAAAAAAAAAAAAAAAAAAAAAAAAAAAAAZGVzYwAAAAAAAAAsUmVmZXJlbmNlIFZpZXdpbmcgQ29uZGl0aW9uIGluIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAALFJlZmVyZW5jZSBWaWV3aW5nIENvbmRpdGlvbiBpbiBJRUM2MTk2Ni0yLjEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHZpZXcAAAAAABOk/gAUXy4AEM8UAAPtzAAEEwsAA1yeAAAAAVhZWiAAAAAAAEwJVgBQAAAAVx/nbWVhcwAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAo8AAAACc2lnIAAAAABDUlQgY3VydgAAAAAAAAQAAAAABQAKAA8AFAAZAB4AIwAoAC0AMgA3ADsAQABFAEoATwBUAFkAXgBjAGgAbQByAHcAfACBAIYAiwCQAJUAmgCfAKQAqQCuALIAtwC8AMEAxgDLANAA1QDbAOAA5QDrAPAA9gD7AQEBBwENARMBGQEfASUBKwEyATgBPgFFAUwBUgFZAWABZwFuAXUBfAGDAYsBkgGaAaEBqQGxAbkBwQHJAdEB2QHhAekB8gH6AgMCDAIUAh0CJgIvAjgCQQJLAlQCXQJnAnECegKEAo4CmAKiAqwCtgLBAssC1QLgAusC9QMAAwsDFgMhAy0DOANDA08DWgNmA3IDfgOKA5YDogOuA7oDxwPTA+AD7AP5BAYEEwQgBC0EOwRIBFUEYwRxBH4EjASaBKgEtgTEBNME4QTwBP4FDQUcBSsFOgVJBVgFZwV3BYYFlgWmBbUFxQXVBeUF9gYGBhYGJwY3BkgGWQZqBnsGjAadBq8GwAbRBuMG9QcHBxkHKwc9B08HYQd0B4YHmQesB78H0gflB/gICwgfCDIIRghaCG4IggiWCKoIvgjSCOcI+wkQCSUJOglPCWQJeQmPCaQJugnPCeUJ+woRCicKPQpUCmoKgQqYCq4KxQrcCvMLCwsiCzkLUQtpC4ALmAuwC8gL4Qv5DBIMKgxDDFwMdQyODKcMwAzZDPMNDQ0mDUANWg10DY4NqQ3DDd4N+A4TDi4OSQ5kDn8Omw62DtIO7g8JDyUPQQ9eD3oPlg+zD88P7BAJECYQQxBhEH4QmxC5ENcQ9RETETERTxFtEYwRqhHJEegSBxImEkUSZBKEEqMSwxLjEwMTIxNDE2MTgxOkE8UT5RQGFCcUSRRqFIsUrRTOFPAVEhU0FVYVeBWbFb0V4BYDFiYWSRZsFo8WshbWFvoXHRdBF2UXiReuF9IX9xgbGEAYZRiKGK8Y1Rj6GSAZRRlrGZEZtxndGgQaKhpRGncanhrFGuwbFBs7G2MbihuyG9ocAhwqHFIcexyjHMwc9R0eHUcdcB2ZHcMd7B4WHkAeah6UHr4e6R8THz4faR+UH78f6iAVIEEgbCCYIMQg8CEcIUghdSGhIc4h+yInIlUigiKvIt0jCiM4I2YjlCPCI/AkHyRNJHwkqyTaJQklOCVoJZclxyX3JicmVyaHJrcm6CcYJ0kneierJ9woDSg/KHEooijUKQYpOClrKZ0p0CoCKjUqaCqbKs8rAis2K2krnSvRLAUsOSxuLKIs1y0MLUEtdi2rLeEuFi5MLoIuty7uLyQvWi+RL8cv/jA1MGwwpDDbMRIxSjGCMbox8jIqMmMymzLUMw0zRjN/M7gz8TQrNGU0njTYNRM1TTWHNcI1/TY3NnI2rjbpNyQ3YDecN9c4FDhQOIw4yDkFOUI5fzm8Ofk6Njp0OrI67zstO2s7qjvoPCc8ZTykPOM9Ij1hPaE94D4gPmA+oD7gPyE/YT+iP+JAI0BkQKZA50EpQWpBrEHuQjBCckK1QvdDOkN9Q8BEA0RHRIpEzkUSRVVFmkXeRiJGZ0arRvBHNUd7R8BIBUhLSJFI10kdSWNJqUnwSjdKfUrESwxLU0uaS+JMKkxyTLpNAk1KTZNN3E4lTm5Ot08AT0lPk0/dUCdQcVC7UQZRUFGbUeZSMVJ8UsdTE1NfU6pT9lRCVI9U21UoVXVVwlYPVlxWqVb3V0RXklfgWC9YfVjLWRpZaVm4WgdaVlqmWvVbRVuVW+VcNVyGXNZdJ114XcleGl5sXr1fD19hX7NgBWBXYKpg/GFPYaJh9WJJYpxi8GNDY5dj62RAZJRk6WU9ZZJl52Y9ZpJm6Gc9Z5Nn6Wg/aJZo7GlDaZpp8WpIap9q92tPa6dr/2xXbK9tCG1gbbluEm5rbsRvHm94b9FwK3CGcOBxOnGVcfByS3KmcwFzXXO4dBR0cHTMdSh1hXXhdj52m3b4d1Z3s3gReG54zHkqeYl553pGeqV7BHtje8J8IXyBfOF9QX2hfgF+Yn7CfyN/hH/lgEeAqIEKgWuBzYIwgpKC9INXg7qEHYSAhOOFR4Wrhg6GcobXhzuHn4gEiGmIzokziZmJ/opkisqLMIuWi/yMY4zKjTGNmI3/jmaOzo82j56QBpBukNaRP5GokhGSepLjk02TtpQglIqU9JVflcmWNJaflwqXdZfgmEyYuJkkmZCZ/JpomtWbQpuvnByciZz3nWSd0p5Anq6fHZ+Ln/qgaaDYoUehtqImopajBqN2o+akVqTHpTilqaYapoum/adup+CoUqjEqTepqaocqo+rAqt1q+msXKzQrUStuK4trqGvFq+LsACwdbDqsWCx1rJLssKzOLOutCW0nLUTtYq2AbZ5tvC3aLfguFm40blKucK6O7q1uy67p7whvJu9Fb2Pvgq+hL7/v3q/9cBwwOzBZ8Hjwl/C28NYw9TEUcTOxUvFyMZGxsPHQce/yD3IvMk6ybnKOMq3yzbLtsw1zLXNNc21zjbOts83z7jQOdC60TzRvtI/0sHTRNPG1EnUy9VO1dHWVdbY11zX4Nhk2OjZbNnx2nba+9uA3AXcit0Q3ZbeHN6i3ynfr+A24L3hROHM4lPi2+Nj4+vkc+T85YTmDeaW5x/nqegy6LzpRunQ6lvq5etw6/vshu0R7ZzuKO6070DvzPBY8OXxcvH/8ozzGfOn9DT0wvVQ9d72bfb794r4Gfio+Tj5x/pX+uf7d/wH/Jj9Kf26/kv+3P9t////2wBDAAMCAgICAgMCAgMFAwMDBQUEAwMEBQYFBQUFBQYIBgcHBwcGCAgJCgoKCQgMDAwMDAwODg4ODhAQEBAQEBAQEBD/2wBDAQMEBAYGBgwICAwSDgwOEhQQEBAQFBEQEBAQEBEREBAQEBAQERAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAyADIDAREAAhEBAxEB/8QAHQAAAgICAwEAAAAAAAAAAAAABwgABgEDBAUJAv/EADwQAAEDAgQCBwMICwAAAAAAAAECAwQFBgAHERIhMQgTFCIyQVEJIzQWMzZSYWJxgRUXJENFY3JzkcHy/8QAHAEAAgIDAQEAAAAAAAAAAAAAAAcGCAIDBAEF/8QAQBEAAQIDBAUIBggHAQAAAAAAAQIDAAQRBRIhMQYHMkFREyIzUmFxkbEUQmJjgcEVI0NygrLR8DQ2kqGz4fLC/9oADAMBAAIRAxEAPwBmMU0h8RUs2cyqLlBl3Wcxa80qTHpTaBHgtq2rly31hthhKtDt3rI1VodqdT5Y+tZNmuT82iXbNCrM9VIxJ+A8THBPTaZZkuHdHm9evS46Q961B6Y5eEmgRVq1YpNB0hRmUk8EApBdWfLctZJxYyS0SsmWQByIWes5zifkO4CFg9a826qt8juwp842WL0uOkHl/WW5ki55dyRGXNJ9v19XaGnkpOi2960h1lz0Uk908weWC0NEbLmUFHJBtXWQLpSe0ZHtBEeS9sTTZCgu8DxNajsPzEelWX980HMyyaLf9sKUqm1yOmSwhzTrGV6lDrLmnDe04koV+GuK2T8i7JzK5d3aQad/AjsIxhqSkwl9pLicjFgxwR1xMEETBBCwe0SedZyIpSQvYyu4IXaeOgIRHkKTqfQK44Zur0D6TXXMNq80xEtJSfRR94eRhZ+j/lbTHpvyvuotrqMHq36Zbjw2vxkuDVqbJYWAoBQ4sajafF6YuVovZDS1ekOkFScUo3jgpQ/L4xU7TvSJ9pHobAUlC8Fu0ICuLaFf5Dn6uVY52eWWLN2VOrXVYCVVOv0Zjtt7USC05IdbiJGvbnOqSpLa0p4uJUQVJ72moOMdKpKWLpdaUkODbRXE+1TrcRvGPfloDac6lgS7zaix9k7Tmp92fY6pySebkRB69nLcjtSyqui2XHesbolZS/DGuoS1UoyXVAfYVtk/nin+sSXCZ1p0euih70GnkYtToy6SypHA+f7MNfhVRM4mCCJgggGdLtuhOWhYQumMibRvlvb6arDcdEdD0ZZeQtKnTrsTxBKvIYZmrwj6WNcuTV5piIaU19BwzvDyMdvnRl9UYBnX3XKa5HnIntRGKrUa6iqS2aOYobFHbCW0lxHbErlJcUdUA7BwxcTRlt1NoBVcCk17s/OKwaaLYcskpAxC0lNetvI/DX4RZbUyrvO1X5a7dguhdXiudofpdwClIqNWeWOyVJ9tLe73Mbax1JCkniTu11PwH0PLfW4o5qJPjEsljLtSrbSU0CUpA4ZfswGOh9Trfo2ZmfNEtVttul06tQYjSY+vUl9hL7UhTYPJCnkrKR5A6cMV21mAB5int/8An5w49ESS0sn2fnDPYS8T+JggiYIIVP2js9hrJi3aM8oD9JV1CynXQ7IsN5ajr9m8ccNLV20VWg4rg3+ZQiHaTOUYSnioeRglZa3XmpmH0c8uTVbnp1sXnPhhxT1YgsyEVWCx7mK8pUoLQ2+pkoWvh39QQRh8SNpzlomYas/pJZQS4TWigobimpFFAgimY4QvGRYVmzLarZa5Vp9JLab126pJFag0SqoUKc4UBOBgkv1y6oeX9WtGjXXHuDMWNSZQiVuJFabZYmqZUmOopbJbUtKgNPMnRRSOWNWkdszNhSDDkym+p5dy9S6kU5y1cTROWHOPARxSbdm2xaj6JEck02L/ACd7lCATRKb2QxzSCbqcATCaezWrzbVUzCtOcpYqctmn1ZSXiS8tUdx2PJ37uJUlxwFWvmcKnWQwSiXeGKQVJ/qooeNDDB0YcAU4g5mh8Kgw8mEhDAiYIImCCAfm7kZ+u3MKlV/MxaYeX1iMPvw6I25ulVuUsB6Q7IKeDEcJbS2BqXFgK8IVic2NbJkJYsyuMy+oJveq2K3UgdZVTU+qMM6RG5yQVNPhTmDaMhx/1/vKKPUc9qRnTIcp1LtqbbqbaDaFNzlRy283LSCz1AjkpCEpa4ceWg8sWx1T6KTViLnUzC0qUso2a+rfqanOtYrBrnnuVXKN3SkpDh+BuYjwj4jZoVjKVk12iUyPVXZSkxnIsqSuKEND3i3kFtC1KUjaBt4eLniVaxtFUW/JMMFzkyh29epewKSlWFR2GPjanJiYRazwbTVBaN9Xqp5ybtcDnilI3+MXKV0coSc2aT0j8mqs1btYnhMyu0GW0tylVVme2DJ4skLZcdSrVRAUnrAF6A64pUq31olHLLnUFaUEoSsHnoKFEJzwUBTDI3TSsW2XZVHxMMm6TmDka/uu/HdB5OhPd1A8tef54gESaJggjCilCStZCUpBKlEgAAcSSTyAx6kEkAAkk0AGJJOQA3k8I8JAFTlA+vy74dbt2r2xQ1qDlSjPQxUyPdNF0bSpKfEsafhh/wCimredammZydUlsNqC+R2lmmICjso7RiYhk5pGyKpaBV25D4cfKFeYhVvL+tNQ62z1cKWQyXkd9h1OuiVtr+sknkdDzxayz5wtvA15qsD+vwheaaWFL2/ZKy107ILjfWwFVtn2VgYbrwB4xmr0+sXfdT9IozPahA/ZisHRhsA99a1ngAVfn6YztSYvzBxwTgPn/eObV5ZzNl6PtuuYLmPrVdYg4Np+Cce9Rhl7CvBu27Wo1sVxK5DtLjNxHKiwNyXOr4BXVnRQ0HDFXdJtWk1Nzj03Juo+sUV8kuqaE5gLxTnxpDIltJWhzXEEDiMfEfpWCJCnQ6jGTMgPJfZXwS4g8NRzB8wR6HCBn5CZknyxMtltxOaVeY3EHcoVETFh9t5AW2oKSd4jfjgjfFdzB+iknx+Jr5rl4v3v3PXDP1afzEzsbK9rPZ+y971eysRvSH+BVnmMu/1vZ4wLsW+hWx1d3fRWpfDeD+IfDf8Af1PtxknaEdMr0yc/w5/88eyOFl79D4/w3zi/hP6j8R/O9cbH+kOee/ONbuafuJy2ch0fu+r2RYcaY1Rdcr/iKn4+TX9nmef3/wDWEHre6GT2c159LkNn3XH24m2i227nu+7/ANfKL/8A4xW+GBH/2Q==',
+}
+const janeAvatar = {
+  image: `data:image/jpeg;base64,${avatars.ade}`,
+  status: { color: 'green', icon: 'icon-checkmark' },
+}
+
+const headers = ['Irving Kuhic', 'Skyler Parks', 'Dante Schneider']
+const headerMedias = ['7:26:56 AM', '11:30:17 PM', '5:22:40 PM']
+const contents = [
+  'Program the sensor to the SAS alarm through the haptic SQL card!',
+  'Use the online FTP application to input the multi-byte application!',
+  'The GB pixel is down, navigate the virtual interface!',
+]
+
+const itemData = id =>
+  _.times(20, i => ({
+    id: `${id}${i}`,
+    key: `key${id}${i}`,
+    title: {
+      content: `${contents[i % contents.length]}`,
+      media: <Avatar {...janeAvatar} />,
+      headerMedia: `${headerMedias[i % headerMedias.length]}`,
+      header: `${headers[i % headers.length]}`,
+    },
+  }))
+
+const items = [
+  {
+    id: '1',
+    title: 'House Lannister',
+    items: itemData('list-1'),
+  },
+  {
+    id: '2',
+    title: 'House Targaryen',
+    items: itemData('list-2'),
+  },
+
+  {
+    id: '3',
+    title: 'House Stark',
+    items: itemData('list-3'),
+  },
+]
+
+// This renders titles depending on their level. The level one titles are rendered as default
+// TreeTitle with just text, while the level 2 titles are rendered as ListItems.
+const titleRenderer = (Component, { content, header, headerMedia, media, ...restProps }) => {
+  return !header ? (
+    <Component {...restProps}>{content}</Component>
+  ) : (
+    <List.Item
+      {...restProps}
+      content={content}
+      header={header}
+      headerMedia={headerMedia}
+      media={media}
+    />
+  )
+}
+
+const TreeWith60ListItems = () => (
+  <Tree items={items} defaultActiveItemIds={['1', '2', '3']} renderItemTitle={titleRenderer} />
+)
+
+TreeWith60ListItems.iterations = 1
+TreeWith60ListItems.filename = 'TreeWith60ListItems.perf.tsx'
+
+export default TreeWith60ListItems
diff --git a/docs/src/examples/components/Tree/Performance/index.tsx b/docs/src/examples/components/Tree/Performance/index.tsx
new file mode 100644
index 0000000000..1b9a4c8374
--- /dev/null
+++ b/docs/src/examples/components/Tree/Performance/index.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import ComponentPerfExample from '../../../../components/ComponentDoc/ComponentPerfExample'
+import ExampleSection from '../../../../components/ComponentDoc/ExampleSection'
+
+const Performance = () => (
+  <ExampleSection title="Performance">
+    <ComponentPerfExample
+      title="Default"
+      description="A test with list items as titles."
+      examplePath="components/Tree/Performance/TreeWith60ListItems.perf"
+    />
+  </ExampleSection>
+)
+
+export default Performance
diff --git a/docs/src/examples/components/Tree/index.tsx b/docs/src/examples/components/Tree/index.tsx
index a142fadb13..84305160a3 100644
--- a/docs/src/examples/components/Tree/index.tsx
+++ b/docs/src/examples/components/Tree/index.tsx
@@ -1,11 +1,13 @@
 import * as React from 'react'
 import Types from './Types'
 import Usage from './Usage'
+import Performance from './Performance'
 
 const TreeExamples = () => (
   <>
     <Types />
     <Usage />
+    <Performance />
   </>
 )
 
diff --git a/docs/src/pages/ComponentArchitecture.mdx b/docs/src/pages/ComponentArchitecture.mdx
new file mode 100644
index 0000000000..cac0bcf2b6
--- /dev/null
+++ b/docs/src/pages/ComponentArchitecture.mdx
@@ -0,0 +1,47 @@
+export const meta = {
+  title: 'Component Architecture',
+}
+
+The design and architecture of components should follow from a set of first principles.
+
+- There is 1 right way to do things, and it's easy to do the right thing.
+- Consumers should not be penalized for code they don't use (through bundle size, perf, etc).
+- Don't overgeneralize until we have a clear need (abstracting should solve a bundle size goal, or DRY goal, or partner use case)
+
+#### The consumer should be able to override, extend, or replace any opinions of the library.
+
+TODO: expand on what this means for the following aspects of the library:
+
+- State
+- Styling
+- Acessibility
+- Slots
+- Styling approach (css, css-in-js, etc)
+
+#### Components should be composable
+
+#### There should be one JSX element in the tree per rendered component
+
+#### Applications which load their own CSS in other means should not pay the penalty of loading a runtime CSS-in-JS package, especially if the class names are known at time of authoring.
+
+#### Applications which want to override specific aspects of a component should not incur a penalty of loading a concretely referenced component that will not be rendered in the final output.
+
+#### Any external dependencies mean negative parsing time, bundle size and runtime impact for consumers that don't intend to use them.
+
+#### There is a limited set of accessibility options that work well together, and each combination should be tested cohesively.
+
+#### Consumers should be able to import one component and have an appropriately minimal bundle size.
+
+#### We want to offer a delightful first-run experience, and bundle size will not be negatively impacted by including the default theme.
+
+#### As a component library cannot anticipate all needs to applications' design systems, allowances should be made to extend the design system while maintaining rich levels of type safety.
+
+#### Components should leverage a platform library's function to pass all relevant native props to appropriate controls whenever available.
+
+#### A component should be able to render any theme (including tokens, styles, icons and animations).
+
+#### Themes should cascade and merge allowing subtree themes to be updated at runtime and have the ability to adjust the incoming theme.
+
+#### RTL/LTR mode should be configurable for the entire application or a subtree of the application.
+
+#### Animations should be configurable for the entire application or a subtree of the application.
diff --git a/docs/src/pages/ThemingSpecification.mdx b/docs/src/pages/ThemingSpecification.mdx
new file mode 100644
index 0000000000..e231101658
--- /dev/null
+++ b/docs/src/pages/ThemingSpecification.mdx
@@ -0,0 +1,282 @@
+export const meta = {
+  title: 'Theming specification',
+}
+
+## Goals and requirements
+
+Components should have support for both CSS stylesheets and CSSinJS approaches. The theming mechanism as part of Fluent UI should be flexible and provide support for CSSinJS theme and all existing customization scenarios. Users can opt-out if the theming approach does not meet their needs.
+
+##### Support for CSS stylesheets
+
+Тhe users should be able to specify mappings from properties to classnames.
+
+**IMPORTANT**: applications which load their own CSS in other means should not pay the penalty of loading a runtime CSS-in-JS package, especially if the class names are known at time of authoring.
+
+##### Support for CSSinJS
+
+CSSinJS support that will not tie the users to just one CSS in JS framework. The users should be able to define their styles and specify the engine that they want to use, which will be aligned to some defined interface. The users are responsible for making sure that their styles are compatible with the CSSinJS engine that they use. Fluent will not support any compatibility between different engines.
+
+#### Application developers can get small bundles when only using a subset of components
+
+If the client's application contains only a subset of the Fluent components, we should provide a mechanism for the application developers to register the theme only for the components used.
+
+#### A component should be able to render any theme (including tokens, styles, icons and animations)
+
+The client should be able to reuse the components between different themes. Supporting new theme in the application should not require building new components.
+
+If new variants are added in the new theme, then the clients should be able to compose the existing component, by adding new design terms (via the props API). If the new theme doesn't need to support any new variant, nothing should be required from the client's side.
+
+##### Variants
+
+Variants are a way of allowing the users to specify new design terms for their components (among other customizations).
+
+In the CSS scenario, it is basically a way of allowing user to specify mapping to className for a new prop.
+
+In the CSSinJS scenario, it is allowing user to have new properties (design terms) inside the styles functions.
+
+#### Themes should cascade and merge allowing subtree themes to be updated at runtime and have the ability to adjust the incoming theme.
+
+If some parameters/tokens are changed on the root of the application, the changes should be propagated to all nested subtrees.
+
+#### RTL and disable animation modes should be configurable for the entire application or a subtree of the application.
+
+It is important to allow the users to specify the RTL/LTR mode for the entire application once, but if necessary they can specify it only in a subtree of the application (for example one chat message).
+
+The same is true for the disable animations mode. It is important to allow the users to specify it for the entire application once, but if necessary they can specify it only in a subtree of the application (for example the `Loader` component should always be animated).
+
+#### Parent components should be able to customize the styles for the child components
+
+The parent component should be able to customize the styles for it's children/slots, usually for positioning scenarios, or contextual changes that should be applied when some design term is applied on the parent component. This is especially required for "recursive component"'s scenarios
+
+## Technical proposal
+
+In the rest of the specification, there will be some proposals of how the themes, mappings and utilities can be structured.
+
+#### CSS stylesheets usage
+
+Users should be able to define mapping from props to classNames per component level.
+
+For inspiration we can get some ideas from [React Semantic UI's className builders](https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/lib/classNameBuilders.js)
+
+#### CSSinJS usage
+
+If users decide to use CSSinJS we have to propose some structure of how they can define all things required for theming their components.
+
+Here is one proposal of how the theme object can look like:
+
+##### Global tokens
+
+These are tokens that can be reused in many components, things like density, font sizes, font families, colors, shadows etc. Having these global tokens, can help designers to have more consistent look and feel on the components which are part of one application/theme.
+
+The global tokens can be defined as a plain javascript object. We can offer some utilities for generating color palettes if there is an agreement of how those should be generated, but anyway, the global tokens should be defined by the users in any format they would like to structure them, and our framework should not depend on something that is defined (or not defined) there.
+
+##### Component tokens
+
+These are tokens which are specific for a component. They can use some of the global tokens for their values.
+
+**Open for a debate here**
+
+We have the components tokens in Teams theme and those were shown as a good abstraction. On the other hand, people overused them for adding inline overrides, because these tokens can be overridden on any instance of a component. So, maybe the best option will be to restrict the ways of where these tokens can be defined (only in the theme and not on instance level), so we can avoid similar misusages in future.
+
+##### Component styles
+
+The component styles should be functions that return CSSinJS definition that is compatible with the CSSinJS engine used. The input parameters of these functions are:
+
+- **design terms** - in the react implementation, these are basically subset of the component's properties. It is important to note here that for better performance we need to restrict these to be primitive values like: booleans, strings, numbers, so we can easily hash based on them.
+- **design tokens** - these are basically the component's tokens. If we support inline overrides on these tokens, it will have some performance degradation
+
+As we mention before, parents component should be able to specify styles for their slots. We can have two ways of how this can be implemented
+
+- define slots' styles inside the styles of the parent component
+
+```
+const buttonStyles = {
+  root: ({ terms, tokens }) => ({
+    // some css in js definition
+  }),
+  icon: ({ terms, tokens }) => ({
+    // some css in js definition
+  }),
+}
+```
+
+- create composed components for the slots if they require some additional styles
+
+```
+const buttonStyles = {
+  root: ({ terms, tokens }) => ({
+    // some css in js definition
+  }),
+}
+
+const buttonIconStyles = {
+  root: ({ terms, tokens }) => ({
+    // some css in js definition
+  }),
+}
+```
+
+There are props and cons to both approaches, so I will just try to list them all and we can discuss them:
+
+| Description                                                                                                       | Define slots' styles in the parent's styles | Why                                                                                                                                            | Create composed components for the slots | Why                                                                                                                     |
+| ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
+| All styles for a component are easily discoverable                                                                | YES                                         | They are defined in one object/one component styles object                                                                                     | NO                                       | The styles are spreaded across different components for the parent and slots components                                 |
+| Changing the look and feel of a component will require composing only one component                               | YES                                         | We can override the styles for the component and it's slots in one place                                                                       | NO                                       | We will have to override the styles of the parent component, and all slots components used inside                       |
+| Children theme needs to know what are all the component's variants used in order to override correctly the styles | NO                                          | Because the slots styles were defined via the styles in the parent, not via new composed components                                            | YES                                      | Because we are using composed components for the slots                                                                  |
+| The styles defined for a "slot" component can be reused in different places                                       | NO                                          | The slot's styles are defined only in the context of the parent component                                                                      | YES                                      | They can be reused easily, by using the composed component as a slot in different components                            |
+| Simple caching based on the styles defined always on the root                                                     | NO                                          | We have to consider for the slots the styles of the base component plus the slot's styles                                                      | YES                                      | The styles are defined in one place (always the root)                                                                   |
+| Simple definition of tokens per parent component                                                                  | YES                                         | The parent component can define tokens for all children                                                                                        | NO                                       | Each component can define it's own token, which can be problematic when we want to override something on parent's lavel |
+| Adding new design term in the parent requires re-composing all slots components                                   | NO                                          | We can just override styles in the slot's styles inside the parents                                                                            | YES                                      | We need to re-compose if we want new design terms in the slots components                                               |
+| Requires knowledge of the internals of another component, which creates coupling                                  | PARTIALLY                                   | The parent can define styles only for the root (no other slots), but it needs to know some details for the root's styles of the slot component | NO                                       | All styles are defined in the composed component                                                                        |
+| Easy to swap a slot into another component which might want all its own styles.                                   | NO                                          |                                                                                                                                                | YES                                      |
+
+##### Variants
+
+Variants are just mechanism for allowing users do add or remove some design terms from their components.
+
+In order to enable this, the compose mechanism should provide to the users adding/removing some of the design terms. This can be easily done, by allowing the user to define mapping from props to design terms when they define the composed components.
+
+```
+export interface FluentButton extends ButtonProps {
+  primary?: boolean
+  circular?: boolean
+}
+
+// these code snippet is just illustrating a possible
+// mechanism of how the design tokens can be created
+// based on the props
+const FluentButton = compose(Button, {
+  displayName: 'FluentButton',
+  mapPropsToTerms: props => ({
+    primary: props.primary,
+    circular: props.circular,
+    hasIcon: !!props.icon,
+  }),
+})
+```
+
+##### Animations
+
+Animation should be defined as part of the theme, but they should not be all loaded if they are not used. Child themes should be able to customize them.
+
+```
+// TBD
+```
+
+##### Icons
+
+Icons should be defined as part of the theme, but they should not loaded if not used. Child themes should be able to customize them.
+
+```
+// TBD
+```
+
+##### Files and packaging
+
+```
+// themes/fluent/globalTokens.ts
+
+const globalTokens = {
+  colors: {
+    brandForeground: 'white',
+    brandBackground: 'red',
+
+    defaultBackground: 'white',
+    defaultForeground: 'black',
+  }
+}
+
+export default globalTokens
+
+// themes/fluent/buttonTokens.ts
+
+const buttonTokens = globalTokens => ({
+  defaultBackgroundColor: globalTokens.defaultBackground,
+  defaultForegroundColor: globalTokens.defaultForeground,
+
+  primaryBackgroundColor: globalTokens.brandBackground,
+  primaryForegroundColor: globalTokens.brandForeground,
+})
+
+export default buttonTokens
+
+// themes/fluent/buttonStyles.ts
+
+// avoiding types for simplicity
+
+const buttonStyles = {
+  root: ({terms, tokens}) => ({
+    color: tokens.defaultForegroundColor,
+    backgroundColor: tokens.defaultBackgroundColor,
+
+    ...(terms.primary && {
+      color: tokens.brandForegroundColor,
+      backgroundColor: tokens.brandBackgroundColor,
+    }),
+  }),
+  icon: ({terms, tokens}) => ({
+    color: tokens.defaultForegroundColor,
+    backgroundColor: tokens.defaultBackgroundColor,
+
+    ...(terms.primary && {
+      color: tokens.brandForegroundColor,
+      backgroundColor: tokens.brandBackgroundColor,
+    }),
+  }),
+}
+
+// react/components/Button.tsx
+
+const Button = props => {
+  // Not a real implementation
+  // avoiding details as it is not the main point in this spec
+  return <button>{props.children}</button>
+}
+
+export default Button
+
+// fluent/components/Button.tsx
+
+import { Button as BaseButton } from 'react/components'
+
+const Button = compose(BaseButton, {
+  displayName: 'Button',
+  mapPropsToTerms: props => ({
+    primary: props.primary,
+  })
+})
+
+export default Button
+```
+
+Possible folder structure
+
+```
+packages
+├── themes
+│   ├── fluent
+│   │   ├── index.ts
+│   │   ├── globalTokens.ts
+│   │   ├── components
+│   │   └── Button
+│   │       ├── buttonStyles.ts
+│   │       └── buttonTokens.ts
+│   ├── teams
+│   │   ├── index.ts
+│   │   ├── globalTokens.ts
+│   │   ├── components
+│   │   └── Button
+│   │       ├── buttonStyles.ts
+│   │       └── buttonTokens.ts
+│   └── outlook
+│       ├── index.ts
+│       └── globalTokens.ts
+│
+├── react
+│   └── components
+│       └── Button.tsx
+│
+└── fluent
+    └── components
+        └── Button.tsx
+```
diff --git a/docs/src/prototypes/EditorToolbar/EditorToolbar.tsx b/docs/src/prototypes/EditorToolbar/EditorToolbar.tsx
index fa3722e676..af78414f3c 100644
--- a/docs/src/prototypes/EditorToolbar/EditorToolbar.tsx
+++ b/docs/src/prototypes/EditorToolbar/EditorToolbar.tsx
@@ -16,7 +16,6 @@ import {
   ToolbarMenuItemShorthandKinds,
 } from '@fluentui/react'
 import { useEventListener } from '@fluentui/react-component-event-listener'
-import { toRefObject } from '@fluentui/react-component-ref'
 import * as keyboardKey from 'keyboard-key'
 import * as _ from 'lodash'
 import * as React from 'react'
@@ -243,7 +242,7 @@ const EditorToolbar: React.FC<EditorToolbarProps> = props => {
       }
     },
     type: 'keydown',
-    targetRef: toRefObject(props.target),
+    target: props.target,
   })
   useEventListener({
     listener: () => {
@@ -258,7 +257,7 @@ const EditorToolbar: React.FC<EditorToolbarProps> = props => {
       }
     },
     type: 'resize',
-    targetRef: toRefObject(props.target.defaultView),
+    target: props.target.defaultView,
   })
 
   return (
diff --git a/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx b/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx
index 74b4266d8f..2bc5c1a635 100644
--- a/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx
+++ b/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx
@@ -17,18 +17,16 @@ const reactions: ShorthandCollection<ReactionProps> = [
     content: '1K',
     key: 'likes',
     variables: { meReacting: true },
+    children: (Component, props) => <ReactionPopup {...props} />,
   },
   {
     icon: 'emoji',
     content: 2,
     key: 'smiles',
+    children: (Component, props) => <ReactionPopup {...props} />,
   },
 ]
 
-const reactionsWithPopup = reactions.map(reaction => render =>
-  render(reaction, (Component, props) => <ReactionPopup {...props} />),
-)
-
 const janeAvatar = {
   image: 'public/images/avatar/small/ade.jpg',
   status: { color: 'green', icon: 'check' },
@@ -95,7 +93,7 @@ const ChatWithPopover = () => {
                   </div>
                 }
                 reactionGroup={{
-                  items: reactionsWithPopup,
+                  items: reactions,
                 }}
                 timestamp="Yesterday, 10:15 PM"
               />
@@ -113,7 +111,7 @@ const ChatWithPopover = () => {
                   </div>
                 }
                 reactionGroup={{
-                  items: reactionsWithPopup,
+                  items: reactions,
                 }}
                 timestamp="Yesterday, 10:15 PM"
               />
diff --git a/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ReactionPopup.tsx b/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ReactionPopup.tsx
index 6aec0b05f7..ea096538f6 100644
--- a/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ReactionPopup.tsx
+++ b/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ReactionPopup.tsx
@@ -36,16 +36,19 @@ class ReactionPopup extends React.Component<ReactionProps, { open: boolean }> {
             aria-label={getAriaLabel(this.props)}
           />
         }
-        content={
-          <Menu
-            items={['Jane Doe', 'John Doe']}
-            vertical
-            variables={{ borderColor: 'transparent' }}
-            onKeyDown={this.handleKeyDownOnMenu}
-          />
-        }
+        content={{
+          children: () => (
+            <Menu
+              items={['Jane Doe', 'John Doe']}
+              vertical
+              variables={{ borderColor: 'transparent' }}
+              onKeyDown={this.handleKeyDownOnMenu}
+            />
+          ),
+        }}
         inline
         on="hover"
+        position="below"
         open={this.state.open}
         onOpenChange={this.handleOpenChange}
       />
diff --git a/docs/src/prototypes/chatMessages/ControlMessages/controlMessagesGroupBehavior.ts b/docs/src/prototypes/chatMessages/ControlMessages/controlMessagesGroupBehavior.ts
index 5392356c60..08901cde67 100644
--- a/docs/src/prototypes/chatMessages/ControlMessages/controlMessagesGroupBehavior.ts
+++ b/docs/src/prototypes/chatMessages/ControlMessages/controlMessagesGroupBehavior.ts
@@ -1,6 +1,6 @@
-import { chatBehavior, Accessibility } from '@fluentui/react'
+import { chatBehavior, Accessibility, ChatBehaviorProps } from '@fluentui/react'
 
-const controlMessagesGroupBehavior: Accessibility<any> = props => {
+const controlMessagesGroupBehavior: Accessibility<ChatBehaviorProps> = props => {
   const behaviorData = chatBehavior(props)
 
   behaviorData.attributes.root = {
diff --git a/docs/src/prototypes/chatMessages/ThreadedMessages/threadChatBehavior.ts b/docs/src/prototypes/chatMessages/ThreadedMessages/threadChatBehavior.ts
index b9d4e1cdaf..ec04365a0f 100644
--- a/docs/src/prototypes/chatMessages/ThreadedMessages/threadChatBehavior.ts
+++ b/docs/src/prototypes/chatMessages/ThreadedMessages/threadChatBehavior.ts
@@ -1,7 +1,7 @@
-import { chatBehavior, Accessibility } from '@fluentui/react'
+import { chatBehavior, Accessibility, ChatBehaviorProps } from '@fluentui/react'
 import classNames from './classNames'
 
-const threadChatBehavior: Accessibility = props => {
+const threadChatBehavior: Accessibility<ChatBehaviorProps> = props => {
   const behaviorData = chatBehavior(props)
 
   behaviorData.focusZone.props = {
diff --git a/docs/src/prototypes/chatMessages/ThreadedMessages/threadedMessageBehavior.ts b/docs/src/prototypes/chatMessages/ThreadedMessages/threadedMessageBehavior.ts
index 7b9aecdc6e..6f8069817b 100644
--- a/docs/src/prototypes/chatMessages/ThreadedMessages/threadedMessageBehavior.ts
+++ b/docs/src/prototypes/chatMessages/ThreadedMessages/threadedMessageBehavior.ts
@@ -1,7 +1,12 @@
-import { chatMessageBehavior, Accessibility, FocusZoneTabbableElements } from '@fluentui/react'
+import {
+  chatMessageBehavior,
+  Accessibility,
+  FocusZoneTabbableElements,
+  ChatMessageBehaviorProps,
+} from '@fluentui/react'
 import * as keyboardKey from 'keyboard-key'
 
-const threadedMessageBehavior: Accessibility = props => {
+const threadedMessageBehavior: Accessibility<ChatMessageBehaviorProps> = props => {
   const behaviorData = chatMessageBehavior(props)
 
   behaviorData.focusZone.props = {
diff --git a/docs/src/routes.tsx b/docs/src/routes.tsx
index 52954d7b85..7c4c84abd1 100644
--- a/docs/src/routes.tsx
+++ b/docs/src/routes.tsx
@@ -9,6 +9,7 @@ import MarkdownPage from './components/MarkdownPage'
 
 import * as Composition from './pages/Composition.mdx'
 import * as Layout from './pages/Layout.mdx'
+import * as ComponentArchitecture from './pages/ComponentArchitecture.mdx'
 import Accessibility from './views/Accessibility'
 import Colors from './views/Colors'
 import ColorPalette from './views/ColorPalette'
@@ -19,6 +20,7 @@ import CategoryColorSchemes from './views/CategoryColorSchemes'
 import FAQ from './views/FAQ'
 import Performance from './views/Performance'
 import * as ShorthandProps from './pages/ShorthandProps.mdx'
+import * as ThemingSpecification from './pages/ThemingSpecification.mdx'
 import Introduction from './views/Introduction'
 import PageNotFound from './views/PageNotFound'
 import QuickStart from './views/QuickStart'
@@ -103,6 +105,12 @@ const Routes = () => (
           <Route exact path="/shorthand-props">
             <MarkdownPage page={ShorthandProps} />
           </Route>
+          <Route exact path="/component-architecture">
+            <MarkdownPage page={ComponentArchitecture} />
+          </Route>
+          <Route exact path="/theming-specification">
+            <MarkdownPage page={ThemingSpecification} />
+          </Route>
           <Route exact path="/integrate-custom-components" component={IntegrateCustomComponents} />
           <Route exact path="/performance" component={Performance} />
           <Route exact path="/composition">
diff --git a/e2e/package.json b/e2e/package.json
index 596d353cf7..40bb2e4e4b 100644
--- a/e2e/package.json
+++ b/e2e/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@fluentui/e2e",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "private": true,
   "license": "MIT",
   "devDependencies": {
-    "@fluentui/internal-tooling": "^0.43.0",
-    "@fluentui/react": "^0.43.0",
+    "@fluentui/internal-tooling": "^0.44.0",
+    "@fluentui/react": "^0.44.0",
     "@types/puppeteer": "^1.11.1",
     "@types/react-router-dom": "^4.3.4",
     "puppeteer": "^1.13.0",
diff --git a/lerna.json b/lerna.json
index 5a0ed8df85..68d0f8cde9 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "packages": ["packages/*", "scripts", "build", "docs", "e2e", "perf"],
-  "version": "0.43.0",
+  "version": "0.44.0",
   "npmClient": "yarn",
   "useWorkspaces": true
 }
diff --git a/package.json b/package.json
index 1fd1d395f7..0c54881c5f 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "build": "gulp build",
     "build:bundle": "gulp bundle:all-packages",
     "build:docs": "gulp build:docs",
-    "ci": "yarn lint && yarn prettier && yarn test --strict",
+    "ci": "yarn lint && yarn prettier && yarn test -- -- --strict",
     "clean": "yarn clean:cache && yarn clean:docs && lerna run --stream clean",
     "clean:cache": "gulp clean:cache",
     "clean:docs": "gulp clean:docs",
@@ -20,6 +20,7 @@
     "perf": "cross-env PERF=true gulp perf --times=100",
     "perf:debug": "cross-env PERF=true gulp perf:debug --debug",
     "perf:test": "yarn lerna run --stream --scope @fluentui/perf-test perf:test",
+    "perf:test:base": "yarn lerna run --stream --scope @fluentui/perf-test perf:test:base",
     "prettier": "prettier --list-different \"**/*.{ts,tsx}\"",
     "prettier:fix": "prettier --write \"**/*.{ts,tsx}\"",
     "precommit": "lint-staged",
diff --git a/packages/ability-attributes/package.json b/packages/ability-attributes/package.json
index 2b73a20d93..2de4fb9dab 100644
--- a/packages/ability-attributes/package.json
+++ b/packages/ability-attributes/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@fluentui/ability-attributes",
   "description": "Accessibility attributes schema for Fluent UI",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "author": "Marat Abdullin <marata@microsoft.com>",
   "bugs": "https://github.com/microsoft/fluent-ui-react/issues",
   "dependencies": {
diff --git a/packages/accessibility/package.json b/packages/accessibility/package.json
index 738605ea76..de5a5bb1ea 100644
--- a/packages/accessibility/package.json
+++ b/packages/accessibility/package.json
@@ -1,16 +1,16 @@
 {
   "name": "@fluentui/accessibility",
   "description": "A set of reusable framework accessibility behaviours.",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "author": "Oleksandr Fediashov <olfedias@microsoft.com>",
   "bugs": "https://github.com/microsoft/fluent-ui-react/issues",
   "dependencies": {
-    "@babel/runtime": "^7.1.2",
+    "@babel/runtime": "^7.7.6",
     "keyboard-key": "^1.0.1",
     "lodash": "^4.17.15"
   },
   "devDependencies": {
-    "@fluentui/internal-tooling": "^0.43.0",
+    "@fluentui/internal-tooling": "^0.44.0",
     "lerna-alias": "^3.0.3-0"
   },
   "files": [
diff --git a/packages/accessibility/src/behaviors/Accordion/accordionTitleBehavior.ts b/packages/accessibility/src/behaviors/Accordion/accordionTitleBehavior.ts
index cd8793c8ff..88cfa9ce8c 100644
--- a/packages/accessibility/src/behaviors/Accordion/accordionTitleBehavior.ts
+++ b/packages/accessibility/src/behaviors/Accordion/accordionTitleBehavior.ts
@@ -4,7 +4,7 @@ import { Accessibility } from '../../types'
 /**
  * @description
  * Adds accessibility attributed to implement the Accordion design pattern.
- * Adds 'aria-disabled' to the 'content' slot with a value based on active and canBeCollapsed props.
+ * Adds 'aria-disabled' to the 'content' slot with a value based on disabled, active and canBeCollapsed props.
  * Adds role='heading' and aria-level='3' if the element type is not a header.
  *
  * @specification
@@ -16,6 +16,7 @@ import { Accessibility } from '../../types'
  */
 const accordionTitleBehavior: Accessibility<AccordionTitleBehaviorProps> = props => {
   const isHeading = /(h\d{1})$/.test(props.as)
+  const forcedOpen = props.active && !props.canBeCollapsed
   return {
     attributes: {
       root: {
@@ -24,7 +25,7 @@ const accordionTitleBehavior: Accessibility<AccordionTitleBehaviorProps> = props
       },
       content: {
         'aria-expanded': !!props.active,
-        'aria-disabled': !!(props.active && !props.canBeCollapsed),
+        'aria-disabled': !!(forcedOpen || props.disabled),
         'aria-controls': props.accordionContentId,
         role: 'button',
         tabIndex: 0,
@@ -49,6 +50,8 @@ type AccordionTitleBehaviorProps = {
   active?: boolean
   /** If at least one panel needs to stay active and this title does not correspond to the last active one. */
   canBeCollapsed?: boolean
+  /** An accordion title can show it is currently unable to be interacted with. */
+  disabled?: boolean
   /** Id of the content it owns. */
   accordionContentId?: string
 }
diff --git a/packages/accessibility/src/behaviors/Alert/alertBaseBehavior.ts b/packages/accessibility/src/behaviors/Alert/alertBaseBehavior.ts
new file mode 100644
index 0000000000..625e55c10f
--- /dev/null
+++ b/packages/accessibility/src/behaviors/Alert/alertBaseBehavior.ts
@@ -0,0 +1,17 @@
+import { Accessibility } from '../../types'
+import { AlertProps } from './alertWarningBehavior'
+
+/**
+ * @description
+ * Use attribute 'aria-describedby' for dismiss action.
+ */
+
+const alertBaseBehavior: Accessibility<AlertProps> = props => ({
+  attributes: {
+    dismissAction: {
+      'aria-describedby': props.bodyId,
+    },
+  },
+})
+
+export default alertBaseBehavior
diff --git a/packages/accessibility/src/behaviors/Alert/alertBehavior.ts b/packages/accessibility/src/behaviors/Alert/alertBehavior.ts
index 23a589ebd6..51c9a80ca9 100644
--- a/packages/accessibility/src/behaviors/Alert/alertBehavior.ts
+++ b/packages/accessibility/src/behaviors/Alert/alertBehavior.ts
@@ -1,11 +1,12 @@
 import { Accessibility } from '../../types'
 import alertWarningBehavior, { AlertProps } from './alertWarningBehavior'
+import alertBaseBehavior from './alertBaseBehavior'
 
 /**
  * @description
  * Uses `alertWarningBehavior` for 'danger' and 'warning' variants.
  */
 const alertBehavior: Accessibility<AlertProps> = props =>
-  props.warning || props.danger ? alertWarningBehavior(props) : {}
+  props.warning || props.danger ? alertWarningBehavior(props) : alertBaseBehavior(props)
 
 export default alertBehavior
diff --git a/packages/accessibility/src/behaviors/Chat/chatBehavior.ts b/packages/accessibility/src/behaviors/Chat/chatBehavior.ts
index 50093828e4..4fd005cd84 100644
--- a/packages/accessibility/src/behaviors/Chat/chatBehavior.ts
+++ b/packages/accessibility/src/behaviors/Chat/chatBehavior.ts
@@ -16,7 +16,7 @@ const CHAT_FOCUSZONE_ATTRIBUTE = 'chat-focuszone'
  * Focused active element of the component is reset when TAB from the component.
  * Focus can be moved inside a child component with embeded inner FocusZone by pressing a specified key.
  */
-const ChatBehavior: Accessibility = () => ({
+const ChatBehavior: Accessibility<ChatBehaviorProps> = () => ({
   attributes: {
     root: {},
   },
@@ -43,4 +43,6 @@ const getLastTabbableElement = (root: HTMLElement): HTMLElement => {
     : null
 }
 
+export type ChatBehaviorProps = never
+
 export default ChatBehavior
diff --git a/packages/accessibility/src/behaviors/Chat/chatMessageBehavior.ts b/packages/accessibility/src/behaviors/Chat/chatMessageBehavior.ts
index 29a372b357..60a4b6ac42 100644
--- a/packages/accessibility/src/behaviors/Chat/chatMessageBehavior.ts
+++ b/packages/accessibility/src/behaviors/Chat/chatMessageBehavior.ts
@@ -16,7 +16,7 @@ import { FocusZoneTabbableElements, FocusZoneDirection } from '../../focusZone/t
  * Keyboard navigation is circular.
  * Focus is moved within the focusable children of the component using TAB key.
  */
-const chatMessageBehavior: Accessibility = () => ({
+const chatMessageBehavior: Accessibility<ChatMessageBehaviorProps> = () => ({
   attributes: {
     root: {
       [IS_FOCUSABLE_ATTRIBUTE]: true,
@@ -43,4 +43,6 @@ const chatMessageBehavior: Accessibility = () => ({
   },
 })
 
+export type ChatMessageBehaviorProps = never
+
 export default chatMessageBehavior
diff --git a/packages/accessibility/src/behaviors/Checkbox/checkboxBehavior.ts b/packages/accessibility/src/behaviors/Checkbox/checkboxBehavior.ts
index c19a674928..ec40b9c9a0 100644
--- a/packages/accessibility/src/behaviors/Checkbox/checkboxBehavior.ts
+++ b/packages/accessibility/src/behaviors/Checkbox/checkboxBehavior.ts
@@ -31,9 +31,9 @@ const checkboxBehavior: Accessibility<CheckboxBehaviorProps> = props => ({
 
 export default checkboxBehavior
 
-type CheckboxBehaviorProps = {
+export type CheckboxBehaviorProps = {
   /** Whether or not item is checked. */
-  checked: boolean
+  checked?: boolean
   /** If the checkbox is in disabled state. */
   disabled?: boolean
 }
diff --git a/packages/accessibility/src/behaviors/Icon/iconBehavior.ts b/packages/accessibility/src/behaviors/Icon/iconBehavior.ts
index f309b0ff57..ccff2fd3fa 100644
--- a/packages/accessibility/src/behaviors/Icon/iconBehavior.ts
+++ b/packages/accessibility/src/behaviors/Icon/iconBehavior.ts
@@ -20,8 +20,7 @@ const iconBehavior: Accessibility<IconBehaviorProps> = props => ({
 
 export default iconBehavior
 
-type IconBehaviorProps = {
+export type IconBehaviorProps = {
   /** Alternative text. */
   alt?: string
-  'aria-label'?: string
 } & Pick<AccessibilityAttributes, 'aria-label'>
diff --git a/packages/accessibility/src/behaviors/Loader/loaderBehavior.ts b/packages/accessibility/src/behaviors/Loader/loaderBehavior.ts
index 8ee9c9cea4..600b668e08 100644
--- a/packages/accessibility/src/behaviors/Loader/loaderBehavior.ts
+++ b/packages/accessibility/src/behaviors/Loader/loaderBehavior.ts
@@ -3,17 +3,37 @@ import { Accessibility } from '../../types'
 /**
  * @description
  * Loader is usually an element that displays the progress status for a task that take a long time or consists of several steps.
+ * Adds attribute 'aria-labelledby' on 'root' when loader has 'tabIndex' prop. This can be overriden by providing 'aria-labelledby' or 'aria-label' property directly to the component.
  *
  * @specification
  * Adds role 'progressbar' to 'root' slot.
  */
 
-const loaderBehavior: Accessibility = () => ({
-  attributes: {
-    root: {
-      role: 'progressbar',
+const loaderBehavior: Accessibility<LoaderBehaviorProps> = props => {
+  return {
+    attributes: {
+      root: {
+        role: 'progressbar',
+        'aria-labelledby': getDefaultAriaLabelledBy(props),
+      },
     },
-  },
-})
+  }
+}
+
+type LoaderBehaviorProps = {
+  /** id of the loader label element. */
+  labelId?: string
+}
 
 export default loaderBehavior
+
+/**
+ * Returns the id of the loader label if user provide tabIndex prop. It is used when user does not provide aria-label or
+ * aria-labelledby as prop.
+ */
+const getDefaultAriaLabelledBy = (props: LoaderBehaviorProps) => {
+  if (props['aria-label'] || props['aria-labelledby']) {
+    return undefined
+  }
+  return props['tabIndex'] === undefined ? undefined : props.labelId
+}
diff --git a/packages/accessibility/src/behaviors/Slider/sliderBehavior.ts b/packages/accessibility/src/behaviors/Slider/sliderBehavior.ts
index 54baf7e4c0..1b2ca45503 100644
--- a/packages/accessibility/src/behaviors/Slider/sliderBehavior.ts
+++ b/packages/accessibility/src/behaviors/Slider/sliderBehavior.ts
@@ -26,7 +26,7 @@ const sliderBehavior: Accessibility<SliderBehaviorProps> = props => ({
 
 export default sliderBehavior
 
-type SliderBehaviorProps = {
+export type SliderBehaviorProps = {
   disabled?: boolean
   min?: number
   max?: number
diff --git a/packages/accessibility/src/behaviors/Tooltip/tooltipAsDescriptionBehavior.ts b/packages/accessibility/src/behaviors/Tooltip/tooltipAsDescriptionBehavior.ts
index 3df120346a..a581cba419 100644
--- a/packages/accessibility/src/behaviors/Tooltip/tooltipAsDescriptionBehavior.ts
+++ b/packages/accessibility/src/behaviors/Tooltip/tooltipAsDescriptionBehavior.ts
@@ -1,5 +1,5 @@
 import * as keyboardKey from 'keyboard-key'
-import { Accessibility } from '../../types'
+import { Accessibility, AccessibilityAttributes } from '../../types'
 
 /**
  * @description
@@ -52,4 +52,4 @@ export type TooltipBehaviorProps = {
   open: boolean
   /** Tooltip's container id. */
   contentId: string
-}
+} & Pick<AccessibilityAttributes, 'aria-label' | 'aria-labelledby' | 'aria-describedby'>
diff --git a/packages/accessibility/src/behaviors/index.ts b/packages/accessibility/src/behaviors/index.ts
index 9d5a887a42..261527b548 100644
--- a/packages/accessibility/src/behaviors/index.ts
+++ b/packages/accessibility/src/behaviors/index.ts
@@ -1,5 +1,6 @@
 export { default as alertBehavior } from './Alert/alertBehavior'
 export { default as alertWarningBehavior } from './Alert/alertWarningBehavior'
+export { default as alertBaseBehavior } from './Alert/alertBaseBehavior'
 export { default as attachmentBehavior } from './Attachment/attachmentBehavior'
 export { default as buttonBehavior } from './Button/buttonBehavior'
 export { default as toggleButtonBehavior } from './Button/toggleButtonBehavior'
@@ -27,6 +28,7 @@ export { default as selectableListItemBehavior } from './List/selectableListItem
 export { default as loaderBehavior } from './Loader/loaderBehavior'
 export { default as inputBehavior } from './Input/inputBehavior'
 export { default as iconBehavior } from './Icon/iconBehavior'
+export * from './Icon/iconBehavior'
 export { default as tabBehavior } from './Tab/tabBehavior'
 export { default as tabListBehavior } from './Tab/tabListBehavior'
 export { default as menuAsToolbarBehavior } from './Toolbar/menuAsToolbarBehavior'
@@ -44,7 +46,9 @@ export { default as radioGroupBehavior } from './Radio/radioGroupBehavior'
 export { default as radioGroupItemBehavior } from './Radio/radioGroupItemBehavior'
 export { default as popupBehavior } from './Popup/popupBehavior'
 export { default as chatBehavior } from './Chat/chatBehavior'
+export * from './Chat/chatBehavior'
 export { default as chatMessageBehavior } from './Chat/chatMessageBehavior'
+export * from './Chat/chatMessageBehavior'
 export { default as gridBehavior } from './Grid/gridBehavior'
 export { default as gridHorizontalBehavior } from './Grid/gridHorizontalBehavior'
 export { default as hierarchicalTreeBehavior } from './HierarchicalTree/hierarchicalTreeBehavior'
@@ -58,9 +62,12 @@ export { default as accordionBehavior } from './Accordion/accordionBehavior'
 export { default as accordionTitleBehavior } from './Accordion/accordionTitleBehavior'
 export { default as accordionContentBehavior } from './Accordion/accordionContentBehavior'
 export { default as checkboxBehavior } from './Checkbox/checkboxBehavior'
+export * from './Checkbox/checkboxBehavior'
+export * from './Tooltip/tooltipAsDescriptionBehavior'
 export { default as tooltipAsDescriptionBehavior } from './Tooltip/tooltipAsDescriptionBehavior'
 export { default as tooltipAsLabelBehavior } from './Tooltip/tooltipAsLabelBehavior'
 export { default as sliderBehavior } from './Slider/sliderBehavior'
+export * from './Slider/sliderBehavior'
 export { default as menuButtonBehavior } from './MenuButton/menuButtonBehavior'
 export { default as splitButtonBehavior } from './SplitButton/splitButtonBehavior'
 export { default as treeBehavior } from './Tree/treeBehavior'
diff --git a/packages/accessibility/test/behaviors/alertBehavior-test.tsx b/packages/accessibility/test/behaviors/alertBehavior-test.tsx
index d4c5812092..b969b916f9 100644
--- a/packages/accessibility/test/behaviors/alertBehavior-test.tsx
+++ b/packages/accessibility/test/behaviors/alertBehavior-test.tsx
@@ -10,4 +10,14 @@ describe('AlertBehavior.ts', () => {
     const expectedResult = alertBehavior({ danger: true })
     expect(expectedResult.attributes.body.role).toEqual('alert')
   })
+
+  test('use aria-describedby if dismiss action is defined for non-warning alert', () => {
+    const expectedResult = alertBehavior({ bodyId: 'alertId' })
+    expect(expectedResult.attributes.dismissAction['aria-describedby']).toEqual('alertId')
+  })
+
+  test('use aria-describedby if dismiss action is defined for warning alert', () => {
+    const expectedResult = alertBehavior({ warning: true, bodyId: 'alertId' })
+    expect(expectedResult.attributes.dismissAction['aria-describedby']).toEqual('alertId')
+  })
 })
diff --git a/packages/accessibility/test/behaviors/behavior-test.tsx b/packages/accessibility/test/behaviors/behavior-test.tsx
index 32125a553e..22a81766d1 100644
--- a/packages/accessibility/test/behaviors/behavior-test.tsx
+++ b/packages/accessibility/test/behaviors/behavior-test.tsx
@@ -41,6 +41,7 @@ import {
   gridHorizontalBehavior,
   statusBehavior,
   alertWarningBehavior,
+  alertBaseBehavior,
   accordionBehavior,
   accordionTitleBehavior,
   accordionContentBehavior,
@@ -125,6 +126,7 @@ testHelper.addBehavior('gridHorizontalBehavior', gridHorizontalBehavior)
 testHelper.addBehavior('dialogBehavior', dialogBehavior)
 testHelper.addBehavior('statusBehavior', statusBehavior)
 testHelper.addBehavior('alertWarningBehavior', alertWarningBehavior)
+testHelper.addBehavior('alertBaseBehavior', alertBaseBehavior)
 testHelper.addBehavior('accordionBehavior', accordionBehavior)
 testHelper.addBehavior('accordionTitleBehavior', accordionTitleBehavior)
 testHelper.addBehavior('accordionContentBehavior', accordionContentBehavior)
diff --git a/packages/accessibility/test/behaviors/loaderBehavior-test.tsx b/packages/accessibility/test/behaviors/loaderBehavior-test.tsx
new file mode 100644
index 0000000000..9824a4cd6f
--- /dev/null
+++ b/packages/accessibility/test/behaviors/loaderBehavior-test.tsx
@@ -0,0 +1,33 @@
+import { loaderBehavior } from '@fluentui/accessibility'
+
+describe('LoaderBehavior.ts', () => {
+  test('do NOT add aria-labelledby, when aria-label was set already', () => {
+    const props = { labelId: 'label-id', 'aria-label': 'any loading string' }
+    const expectedResult = loaderBehavior(props)
+    expect(expectedResult.attributes.root['aria-labelledby']).toEqual(undefined)
+  })
+
+  test('do NOT add aria-labelledby, when aria-labelled was set already', () => {
+    const props = { labelId: 'label-id', 'aria-labelledby': 'id' }
+    const expectedResult = loaderBehavior(props)
+    expect(expectedResult.attributes.root['aria-labelledby']).toEqual(undefined)
+  })
+
+  test('do NOT add aria-labelledby, when there is no tabIndex specified', () => {
+    const props = { labelId: 'label-id' }
+    const expectedResult = loaderBehavior(props)
+    expect(expectedResult.attributes.root['aria-labelledby']).toEqual(undefined)
+  })
+
+  test('add aria-labelledby, when there is tabIndex=0 specified', () => {
+    const props = { labelId: 'label-id', tabIndex: 0 }
+    const expectedResult = loaderBehavior(props)
+    expect(expectedResult.attributes.root['aria-labelledby']).toEqual('label-id')
+  })
+
+  test('add aria-labelledby, when there is tabIndex=-1 specified', () => {
+    const props = { labelId: 'label-id', tabIndex: -1 }
+    const expectedResult = loaderBehavior(props)
+    expect(expectedResult.attributes.root['aria-labelledby']).toEqual('label-id')
+  })
+})
diff --git a/packages/accessibility/test/behaviors/testHelper.tsx b/packages/accessibility/test/behaviors/testHelper.tsx
index 267fc35bb5..13bfad344a 100644
--- a/packages/accessibility/test/behaviors/testHelper.tsx
+++ b/packages/accessibility/test/behaviors/testHelper.tsx
@@ -21,6 +21,7 @@ const skipSpecChecksForFiles = [
   'listBehavior.ts', // tests are written in listBehavior-test.tsx
   'listItemBehavior.ts', // tests are written in listItemBehavior-test.tsx
   'alertBehavior.ts', // tests are written in alertBehavior-test.tsx
+  'alertBaseBehavior.ts', // tests are written in alertBaseBehavior-test.tsx
   'sliderBehavior.ts', // tests are written in sliderBehavior-test.ts
   'treeItemAsListItemBehavior.ts', // tests are written in treeItemAsListItemBehavior-test.ts
   'treeTitleAsListItemTitleBehavior.ts', // tests are written in treeTitleAsListItemTitleBehavior-test.ts
diff --git a/packages/code-sandbox/package.json b/packages/code-sandbox/package.json
index 9b93d5e637..c8f7be4187 100644
--- a/packages/code-sandbox/package.json
+++ b/packages/code-sandbox/package.json
@@ -1,14 +1,14 @@
 {
   "name": "@fluentui/code-sandbox",
   "description": "Fluent UI tools for CodeSandbox.",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "author": "Oleksandr Fediashov <a@fedyashov.com>",
   "bugs": "https://github.com/microsoft/fluent-ui-react/issues",
   "dependencies": {
-    "@fluentui/docs-components": "^0.43.0"
+    "@fluentui/docs-components": "^0.44.0"
   },
   "devDependencies": {
-    "@fluentui/react": "^0.43.0"
+    "@fluentui/react": "^0.44.0"
   },
   "files": [
     "dist"
diff --git a/packages/digest/package.json b/packages/digest/package.json
index d12998a7f3..ed13280ff6 100644
--- a/packages/digest/package.json
+++ b/packages/digest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/digest",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "private": true,
   "main": "lib/digest.js",
   "module": "lib/digest.js",
diff --git a/packages/docs-components/package.json b/packages/docs-components/package.json
index d5e29d4e0e..742e1c2b5d 100644
--- a/packages/docs-components/package.json
+++ b/packages/docs-components/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@fluentui/docs-components",
   "description": "A set of React components to build docs sites.",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "author": "Oleksandr Fediashov <a@fedyashov.com>",
   "bugs": "https://github.com/microsoft/fluent-ui-react/issues",
   "dependencies": {
-    "@babel/runtime": "^7.1.2",
+    "@babel/runtime": "^7.7.6",
     "copy-to-clipboard": "^3.2.0",
     "object.values": "^1.1.0",
     "prismjs": "^1.16.0",
diff --git a/packages/docs-components/src/knobs/KnobContexts.ts b/packages/docs-components/src/knobs/KnobContexts.ts
index 16385cc688..0982c11e95 100644
--- a/packages/docs-components/src/knobs/KnobContexts.ts
+++ b/packages/docs-components/src/knobs/KnobContexts.ts
@@ -10,11 +10,11 @@ export type KnobContextValue = {
   unregisterKnob: (knobName: KnobName) => void
 }
 
-export type LogContextValue = {
+export type LogContextFunctionsValue = {
   appendLog: (value: string) => void
   clearLog: () => void
-  items: string[]
 }
+export type LogContextItemsValue = string[]
 
 const noop = () => null
 
@@ -27,8 +27,8 @@ export const KnobContext = React.createContext<KnobContextValue>({
   unregisterKnob: noop,
 })
 
-export const LogContext = React.createContext<LogContextValue>({
+export const LogContextFunctions = React.createContext<LogContextFunctionsValue>({
   appendLog: noop,
   clearLog: noop,
-  items: [],
 })
+export const LogContextItems = React.createContext<LogContextItemsValue>([])
diff --git a/packages/docs-components/src/knobs/KnobProvider.tsx b/packages/docs-components/src/knobs/KnobProvider.tsx
index e99d82793d..dfb22a1d44 100644
--- a/packages/docs-components/src/knobs/KnobProvider.tsx
+++ b/packages/docs-components/src/knobs/KnobProvider.tsx
@@ -1,7 +1,13 @@
 import * as React from 'react'
 
 import defaultComponents from './defaultComponents'
-import { KnobContext, KnobContextValue, LogContext, LogContextValue } from './KnobContexts'
+import {
+  KnobContext,
+  KnobContextValue,
+  LogContextFunctions,
+  LogContextFunctionsValue,
+  LogContextItems,
+} from './KnobContexts'
 import { KnobComponents, KnobDefinition, KnobName, KnobSet } from './types'
 
 type KnobProviderProps = {
@@ -55,11 +61,16 @@ const KnobProvider: React.FunctionComponent<KnobProviderProps> = props => {
     }),
     [knobs, components],
   )
-  const logValue: LogContextValue = React.useMemo(() => ({ appendLog, clearLog, items }), [items])
+  const logValue: LogContextFunctionsValue = React.useMemo(() => ({ appendLog, clearLog }), [
+    appendLog,
+    clearLog,
+  ])
 
   return (
     <KnobContext.Provider value={knobValue}>
-      <LogContext.Provider value={logValue}>{children}</LogContext.Provider>
+      <LogContextFunctions.Provider value={logValue}>
+        <LogContextItems.Provider value={items}>{children}</LogContextItems.Provider>
+      </LogContextFunctions.Provider>
     </KnobContext.Provider>
   )
 }
diff --git a/packages/docs-components/src/knobs/LogInspector.tsx b/packages/docs-components/src/knobs/LogInspector.tsx
index 21e2da3146..6c4fbe964b 100644
--- a/packages/docs-components/src/knobs/LogInspector.tsx
+++ b/packages/docs-components/src/knobs/LogInspector.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { KnobContext, LogContext } from './KnobContexts'
+import { KnobContext, LogContextFunctions, LogContextItems } from './KnobContexts'
 
 type LogInspectorProps = {
   /** Will be hidden if is empty. */
@@ -8,7 +8,9 @@ type LogInspectorProps = {
 
 const LogInspector: React.FunctionComponent<LogInspectorProps> = props => {
   const { components } = React.useContext(KnobContext)
-  const { clearLog, items } = React.useContext(LogContext)
+
+  const { clearLog } = React.useContext(LogContextFunctions)
+  const items = React.useContext(LogContextItems)
 
   const visible = props.silent ? items.length > 0 : true
 
diff --git a/packages/docs-components/src/knobs/types.ts b/packages/docs-components/src/knobs/types.ts
index 31778d5a39..57b5a8608e 100644
--- a/packages/docs-components/src/knobs/types.ts
+++ b/packages/docs-components/src/knobs/types.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { LogContextValue } from './KnobContexts'
+import { LogContextFunctionsValue, LogContextItemsValue } from './KnobContexts'
 
 export type KnobDefinition = {
   content?: React.ReactNode
@@ -40,7 +40,9 @@ export type KnobRangeKnobComponentProps = KnobComponentProps & {
   unit: string
 }
 
-export type LogInspectorProps = Pick<LogContextValue, 'clearLog' | 'items'>
+export type LogInspectorProps = Pick<LogContextFunctionsValue, 'clearLog'> & {
+  items: LogContextItemsValue
+}
 
 export type LogFormatter<T extends any[] = any[]> = (name: string, ...args: T) => string
 
diff --git a/packages/docs-components/src/knobs/useLogKnob.ts b/packages/docs-components/src/knobs/useLogKnob.ts
index b351a01006..cfa491f84e 100644
--- a/packages/docs-components/src/knobs/useLogKnob.ts
+++ b/packages/docs-components/src/knobs/useLogKnob.ts
@@ -1,7 +1,7 @@
 import * as React from 'react'
 
-import { LogContext } from './KnobContexts'
-import { LogFormatter } from '@fluentui/docs-components'
+import { LogContextFunctions } from './KnobContexts'
+import { LogFormatter } from './types'
 
 const defaultFormatter: LogFormatter = (name: string) =>
   `${new Date().toLocaleTimeString()}: ${name}`
@@ -11,17 +11,16 @@ const useLogKnob = <T = (...args: any[]) => any>(
   callback?: T,
   formatter: LogFormatter = defaultFormatter,
 ): T => {
-  const { appendLog } = React.useContext(LogContext)
+  const { appendLog } = React.useContext(LogContextFunctions)
 
   const proxy = React.useCallback<any>(
     (...a) => {
       appendLog(formatter(name, ...a))
+
       if (typeof callback === 'function') {
         return (callback as any)(...a)
       }
-      if (process.env.NODE_ENV !== 'production') {
-        console.log(`Please provide a function to "useLogKnob(${name}, callback)"`)
-      }
+
       return null
     },
     [appendLog, callback, name, formatter],
diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json
index 90f8c1e87d..80a92c5901 100644
--- a/packages/eslint-plugin/package.json
+++ b/packages/eslint-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/eslint-plugin",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "dependencies": {
     "@typescript-eslint/eslint-plugin": "^2.5.0",
     "@typescript-eslint/experimental-utils": "^2.5.0"
diff --git a/packages/local-sandbox/.browserslistrc b/packages/local-sandbox/.browserslistrc
new file mode 100644
index 0000000000..3da50ae47a
--- /dev/null
+++ b/packages/local-sandbox/.browserslistrc
@@ -0,0 +1 @@
+chrome >= 79
diff --git a/packages/local-sandbox/README.md b/packages/local-sandbox/README.md
new file mode 100644
index 0000000000..f034b19d08
--- /dev/null
+++ b/packages/local-sandbox/README.md
@@ -0,0 +1,16 @@
+# Local sandbox
+
+This package is an empty application which uses Fluent UI.
+
+Production build without hot reload. Primary purpose of this application is to manually test performance and/or memory impact. 
+
+## Usage
+```
+yarn build:dependencies
+yarn build:production
+yarn serve
+```  
+
+## Measuring bundle size
+
+This package can be also used to analyze bundle size. After running `yarn build:production`, bundle size report is stored to **dist/report.html**. 
diff --git a/packages/local-sandbox/babel.config.js b/packages/local-sandbox/babel.config.js
new file mode 100644
index 0000000000..a1c212ad45
--- /dev/null
+++ b/packages/local-sandbox/babel.config.js
@@ -0,0 +1 @@
+module.exports = api => require('@fluentui/internal-tooling/babel')(api)
diff --git a/packages/local-sandbox/package.json b/packages/local-sandbox/package.json
new file mode 100644
index 0000000000..f9cbe27bc5
--- /dev/null
+++ b/packages/local-sandbox/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@fluentui/local-sandbox",
+  "version": "0.44.0",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "build:dependencies": "yarn --cwd ../.. build:bundle",
+    "build": "webpack",
+    "build:production": "webpack -p",
+    "serve": "node ./server.js"
+  },
+  "dependencies": {
+    "@fluentui/react": "^0.44.0",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
+  "devDependencies": {
+    "babel-loader": "^8.0.6",
+    "copy-webpack-plugin": "^4.5.2",
+    "express": "^4.15.4",
+    "fork-ts-checker-webpack-plugin": "^1.3.3",
+    "source-map-loader": "^0.2.4",
+    "terser-webpack-plugin": "^1.4.3",
+    "typescript": "~3.7.2",
+    "webpack": "^4.35.0",
+    "webpack-bundle-analyzer": "^3.6.0",
+    "webpack-cli": "^3.3.10"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/local-sandbox/public/index.html b/packages/local-sandbox/public/index.html
new file mode 100644
index 0000000000..76ef267ba1
--- /dev/null
+++ b/packages/local-sandbox/public/index.html
@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <div id="root"></div>
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/packages/local-sandbox/server.js b/packages/local-sandbox/server.js
new file mode 100644
index 0000000000..18f72a6d20
--- /dev/null
+++ b/packages/local-sandbox/server.js
@@ -0,0 +1,16 @@
+const express = require('express')
+const path = require('path')
+
+const host = process.env.HOST || '127.0.0.1'
+const port = process.env.PORT || 3000
+const root = path.resolve(__dirname, '.')
+
+const app = express()
+app.use(express.static(`${root}/dist`))
+
+app.listen(port, host, serverStarted)
+
+function serverStarted() {
+  console.log(`Server started ${host}:${port}`)
+  console.log('Press Ctrl+C to exit...\n')
+}
diff --git a/packages/local-sandbox/src/index.tsx b/packages/local-sandbox/src/index.tsx
new file mode 100644
index 0000000000..6c0c1f5704
--- /dev/null
+++ b/packages/local-sandbox/src/index.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+import { Provider, themes, Header, Text } from '@fluentui/react'
+
+const App = () => (
+  <Provider theme={themes.teams}>
+    <Header>@fluentui/local-sandbox</Header>
+    <Text>Sandbox to test Fluent UI with production React.</Text>
+  </Provider>
+)
+
+ReactDOM.render(<App />, document.querySelector('#root'))
diff --git a/packages/local-sandbox/tsconfig.json b/packages/local-sandbox/tsconfig.json
new file mode 100644
index 0000000000..cf87ca5f8c
--- /dev/null
+++ b/packages/local-sandbox/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": ["src"]
+}
diff --git a/packages/local-sandbox/webpack.config.ts b/packages/local-sandbox/webpack.config.ts
new file mode 100644
index 0000000000..f4a615612a
--- /dev/null
+++ b/packages/local-sandbox/webpack.config.ts
@@ -0,0 +1,73 @@
+import * as webpack from 'webpack'
+
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
+const TerserPlugin = require('terser-webpack-plugin')
+
+const webpackConfig: webpack.Configuration = {
+  name: 'client',
+  target: 'web',
+  mode: 'development',
+  entry: {
+    app: './src/index.tsx',
+  },
+  output: {
+    filename: `[name].js`,
+  },
+  devtool: 'source-map',
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: ['source-map-loader'],
+        enforce: 'pre',
+      },
+      {
+        test: /\.(ts|tsx)$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+        options: {
+          cacheDirectory: true,
+        },
+      },
+    ],
+  },
+  plugins: [
+    new ForkTsCheckerWebpackPlugin(),
+    new CopyWebpackPlugin([
+      {
+        from: 'public/index.html',
+      },
+    ]),
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      openAnalyzer: false,
+    }),
+  ],
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.json'],
+  },
+  performance: {
+    hints: false, // to (temporarily) disable "WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit")
+  },
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        cache: true,
+        parallel: true,
+        sourceMap: true,
+        terserOptions: {
+          // https://github.com/terser/terser
+          mangle: false,
+          output: {
+            beautify: true,
+            comments: true,
+          },
+        },
+      }),
+    ],
+  },
+}
+
+module.exports = webpackConfig
diff --git a/packages/perf-test/just.config.ts b/packages/perf-test/just.config.ts
index 888eb0738d..3e857048ed 100644
--- a/packages/perf-test/just.config.ts
+++ b/packages/perf-test/just.config.ts
@@ -1,6 +1,6 @@
 import path from 'path'
 import '@fluentui/scripts/tasks/preset'
-import { series, task } from '@fluentui/scripts'
+import { series, task, argv } from '@fluentui/scripts'
 
 // TODO: FUR integration issues
 // - FUR build fails when it comes across these new packages inside of packages/
@@ -26,7 +26,8 @@ task('perf-test:bundle', bundleStories())
 task('perf-test:run', () => {
   // delay require in case digest isn't built yet
   const runPerfTest = require('./tasks/perf-test').default
-  return runPerfTest()
+
+  return runPerfTest(argv().base)
 })
 
 // TOOD: is build doing anything meaningful? only if there's source that's not a just script?
diff --git a/packages/perf-test/package.json b/packages/perf-test/package.json
index d79b81b54b..5b7b9dae9e 100644
--- a/packages/perf-test/package.json
+++ b/packages/perf-test/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@fluentui/perf-test",
   "description": "Perf tests for fluentui.",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "private": true,
   "dependencies": {
     "office-ui-fabric-react": "^7.44.0",
@@ -12,16 +12,18 @@
     "build": "just-scripts build",
     "clean": "just-scripts clean",
     "test": "just-scripts test",
-    "perf:test": "just-scripts perf-test"
+    "perf:test": "just-scripts perf-test",
+    "perf:test:base": "just-scripts perf-test --base"
   },
   "devDependencies": {
-    "@fluentui/digest": "^0.43.0",
+    "@fluentui/digest": "^0.44.0",
     "@types/react": "^16.8.10",
     "@types/react-dom": "^16.8.3",
     "@types/webpack-env": "^1.14.1",
     "flamegrill": "^0.1.3",
     "ignore-not-found-export-webpack-plugin": "^1.0.1",
-    "just-scripts": "^0.35.0"
+    "just-scripts": "^0.35.0",
+    "node-fetch": "^2.6.0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/perf-test/tasks/perf-test.ts b/packages/perf-test/tasks/perf-test.ts
index 59adc7a287..b9b4e8a407 100644
--- a/packages/perf-test/tasks/perf-test.ts
+++ b/packages/perf-test/tasks/perf-test.ts
@@ -1,5 +1,6 @@
 import fs from 'fs'
 import path from 'path'
+import fetch from 'node-fetch'
 import _ from 'lodash'
 import flamegrill, { CookResult, CookResults, ScenarioConfig, Scenarios } from 'flamegrill'
 
@@ -44,7 +45,24 @@ const tempDir = path.join(__dirname, '../logfiles')
 
 console.log(`__dirname: ${__dirname}`)
 
-export default async function getPerfRegressions() {
+const GITHUB_REPO_ID = '141743704'
+async function getMasterBuild(): Promise<number> {
+  const url = 'https://fluent-ui-react-stats.azurewebsites.net/api/GetLatestBuild'
+
+  const response = await fetch(url)
+  const data = await response.json()
+  return data[0].build
+}
+
+export default async function getPerfRegressions(baselineOnly: boolean = false) {
+  let urlForMaster
+
+  if (!baselineOnly) {
+    const masterBuild = await getMasterBuild()
+    urlForMaster = `https://${masterBuild}-${GITHUB_REPO_ID}-gh.circle-artifacts.com/0/artifacts/perf/index.html`
+    console.log('Master URL', urlForMaster)
+  }
+
   // TODO: support iteration/kind/story via commandline as in other perf-test script
   // TODO: can do this now that we have story information
   // TODO: align flamegrill terminology with CSF (story vs. scenario)
@@ -65,13 +83,22 @@ export default async function getPerfRegressions() {
         const scenarioName = `${kindKey}.${storyKey}`
         scenarioList.push(scenarioName)
         scenarios[scenarioName] = {
-          // TODO: We can't do CI, measure baseline or do regression analysis until master & PR files are deployed and publicly accessible.
           scenario: generateUrl(
             urlForDeploy,
             kindKey,
             storyKey,
             getIterations(stories, kindKey, storyKey),
           ),
+          ...(!baselineOnly &&
+            storyKey !== 'Fabric' && {
+              // Optimization: skip baseline comparision for Fabric
+              baseline: generateUrl(
+                urlForMaster,
+                kindKey,
+                storyKey,
+                getIterations(stories, kindKey, storyKey),
+              ),
+            }),
         }
       })
   })
diff --git a/packages/playground/package.json b/packages/playground/package.json
index 0ddc5f00e4..adeed66316 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/playground",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "description": "> TODO: description",
   "homepage": "https://github.com/microsoft/fluent-ui#readme",
   "bugs": {
@@ -34,11 +34,11 @@
     "update-snapshots": "just-scripts jest:snapshots"
   },
   "dependencies": {
-    "@fluentui/react-theming": "^0.43.0",
+    "@fluentui/react-theming": "^0.44.0",
     "classnames": "^2.2.6"
   },
   "devDependencies": {
-    "@fluentui/scripts": "^0.43.0",
+    "@fluentui/scripts": "^0.44.0",
     "@types/classnames": "^2.2.9",
     "@types/enzyme": "^3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.5",
diff --git a/packages/react-bindings/README.md b/packages/react-bindings/README.md
index 9ce96d7101..5dfde54140 100644
--- a/packages/react-bindings/README.md
+++ b/packages/react-bindings/README.md
@@ -9,11 +9,13 @@ A set of reusable components and hooks to build component libraries and UI kits.
 - [Hooks](#hooks)
   - [`useAccesibility()`](#useaccesibility)
     - [Usage](#usage)
-  - [`useStateManager()`](#usestatemanager)
+  - [`useAutoControlled()`](#useautocontrolled)
     - [Usage](#usage-1)
+  - [`useStateManager()`](#usestatemanager)
+    - [Usage](#usage-2)
     - [Reference](#reference)
   - [`useStyles()`](#usestyles)
-    - [Usage](#usage-2)
+    - [Usage](#usage-3)
     - [Reference](#reference-1)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
@@ -89,6 +91,39 @@ const Image: React.FC<ImageProps> = props => {
 }
 ```
 
+## `useAutoControlled()`
+
+A React hook that allows to manage state like in `React.useState()`, but implements the [autocontrolled pattern](https://reactjs.org/docs/uncontrolled-components.html).
+
+### Usage
+
+The example below assumes a component called `<Input>` will be used this way:
+
+```tsx
+type InputProps = {
+  defaultValue?: string
+  value?: string
+  onChange?: (value: string) => void
+}
+
+const Input: React.FC<InputProps> = props => {
+  const [value, setValue] = useAutoControlled({
+    defaultValue: props.defaultValue,
+    value: props.value,
+  })
+
+  return (
+    <input
+      onChange={e => {
+        setValue(e.target.value)
+        if (props.onChange) props.onChange(e.target.value)
+      }}
+      value={value}
+    />
+  )
+}
+```
+
 ## `useStateManager()`
 
 A React hook that provides bindings for state managers.
diff --git a/packages/react-bindings/package.json b/packages/react-bindings/package.json
index 3a50ae2166..61f3171b3d 100644
--- a/packages/react-bindings/package.json
+++ b/packages/react-bindings/package.json
@@ -1,20 +1,20 @@
 {
   "name": "@fluentui/react-bindings",
   "description": "A set of components and hooks to build components libraries and UI kits.",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "author": "Oleksandr Fediashov <a@fedyashov.com>",
   "bugs": "https://github.com/microsoft/fluent-ui-react/issues",
   "dependencies": {
-    "@babel/runtime": "^7.1.2",
-    "@fluentui/accessibility": "^0.43.0",
-    "@fluentui/state": "^0.43.0",
-    "@fluentui/styles": "^0.43.0",
+    "@babel/runtime": "^7.7.6",
+    "@fluentui/accessibility": "^0.44.0",
+    "@fluentui/state": "^0.44.0",
+    "@fluentui/styles": "^0.44.0",
     "classnames": "^2.2.6",
     "fela": "^10.6.1",
     "lodash": "^4.17.15"
   },
   "devDependencies": {
-    "@fluentui/internal-tooling": "^0.43.0",
+    "@fluentui/internal-tooling": "^0.44.0",
     "@types/classnames": "^2.2.9",
     "lerna-alias": "^3.0.3-0"
   },
diff --git a/packages/react-bindings/src/FocusZone/FocusZone.tsx b/packages/react-bindings/src/FocusZone/FocusZone.tsx
index 3286dfeb9e..55c9adb5e6 100644
--- a/packages/react-bindings/src/FocusZone/FocusZone.tsx
+++ b/packages/react-bindings/src/FocusZone/FocusZone.tsx
@@ -206,6 +206,9 @@ export default class FocusZone extends React.Component<FocusZoneProps> implement
     if (this._root.current) {
       this._root.current.removeEventListener('blur', this._onBlur, true)
     }
+
+    this._activeElement = null
+    this._defaultFocusElement = null
   }
 
   render() {
diff --git a/packages/react-bindings/src/hooks/useAutoControlled.ts b/packages/react-bindings/src/hooks/useAutoControlled.ts
new file mode 100644
index 0000000000..eb59d5207a
--- /dev/null
+++ b/packages/react-bindings/src/hooks/useAutoControlled.ts
@@ -0,0 +1,27 @@
+import * as React from 'react'
+
+type UseAutoControlledOptions<Value> = {
+  defaultValue: Value
+  value: Value
+
+  initialValue?: Value
+}
+
+const isUndefined = (value: any) => typeof value === 'undefined'
+
+/**
+ * Returns a stateful value, and a function to update it. Mimics the `useState()` React Hook
+ * signature.
+ */
+const useAutoControlled = <Value>(
+  options: UseAutoControlledOptions<Value>,
+): [Value, React.Dispatch<React.SetStateAction<Value>>] => {
+  const { defaultValue, initialValue = undefined, value } = options
+  const [state, setState] = React.useState<Value>(
+    isUndefined(defaultValue) ? (initialValue as Value) : defaultValue,
+  )
+
+  return [isUndefined(value) ? state : value, setState]
+}
+
+export default useAutoControlled
diff --git a/packages/react-bindings/src/hooks/useIsomorphicLayoutEffect.ts b/packages/react-bindings/src/hooks/useIsomorphicLayoutEffect.ts
new file mode 100644
index 0000000000..4a55b29563
--- /dev/null
+++ b/packages/react-bindings/src/hooks/useIsomorphicLayoutEffect.ts
@@ -0,0 +1,8 @@
+import * as React from 'react'
+
+// useLayoutEffect() produces a warning with SSR rendering
+// https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect
+
+export default useIsomorphicLayoutEffect
diff --git a/packages/react-bindings/src/hooks/useStateManager.ts b/packages/react-bindings/src/hooks/useStateManager.ts
index 9ab42d4ea4..035eee16a3 100644
--- a/packages/react-bindings/src/hooks/useStateManager.ts
+++ b/packages/react-bindings/src/hooks/useStateManager.ts
@@ -36,6 +36,7 @@ const useStateManager = <
     mapPropsToState = () => ({} as Partial<State>),
     sideEffects = [],
   } = options
+  const latestActions = React.useMemo<Actions>(() => ({} as Actions), [managerFactory])
   const latestManager = React.useRef<Manager<State, Actions> | null>(null)
 
   // Heads up! forceUpdate() is used only for triggering rerenders, stateManager is SSOT
@@ -58,19 +59,28 @@ const useStateManager = <
     ],
   })
 
+  // We need to keep the same reference to an object with actions to allow usage them as
+  // a dependency in useCallback() hook
+  Object.assign(latestActions, latestManager.current.actions)
+
+  // For development environments we disallow ability to extend object with other properties to
+  // avoid misusage
+  if (process.env.NODE_ENV !== 'production') {
+    if (Object.isExtensible(latestActions)) Object.preventExtensions(latestActions)
+  }
+
   // We need to pass exactly `manager.state` to provide the same state object during the same render
   // frame.
   // It keeps behavior consistency between React state tools and our managers
   // https://github.com/facebook/react/issues/11527#issuecomment-360199710
-
-  if (process.env.NODE_ENV === 'production') {
-    return { state: latestManager.current.state, actions: latestManager.current.actions }
-  }
-
   // Object.freeze() is used only in dev-mode to avoid usage mistakes
+
   return {
-    state: Object.freeze(latestManager.current.state),
-    actions: Object.freeze(latestManager.current.actions),
+    state:
+      process.env.NODE_ENV === 'production'
+        ? latestManager.current.state
+        : Object.freeze(latestManager.current.state),
+    actions: latestActions,
   }
 }
 
diff --git a/packages/react-bindings/src/hooks/useStyles.ts b/packages/react-bindings/src/hooks/useStyles.ts
index d69c691999..3765e22ba1 100644
--- a/packages/react-bindings/src/hooks/useStyles.ts
+++ b/packages/react-bindings/src/hooks/useStyles.ts
@@ -1,6 +1,6 @@
 import {
   ComponentSlotStyle,
-  ComponentSlotStylesPrepared,
+  ComponentSlotStylesResolved,
   ComponentVariablesInput,
   DebugData,
   emptyTheme,
@@ -12,12 +12,12 @@ import { ThemeContext } from 'react-fela'
 import {
   ComponentDesignProp,
   ComponentSlotClasses,
+  PrimitiveProps,
   RendererRenderRule,
   StylesContextValue,
 } from '../styles/types'
 import getStyles from '../styles/getStyles'
 
-type PrimitiveProps = Record<string, boolean | number | string | undefined>
 type UseStylesOptions<StyleProps extends PrimitiveProps> = {
   className?: string
   mapPropsToStyles?: () => StyleProps
@@ -27,7 +27,7 @@ type UseStylesOptions<StyleProps extends PrimitiveProps> = {
 
 type UseStylesResult = {
   classes: ComponentSlotClasses
-  styles: ComponentSlotStylesPrepared
+  styles: ComponentSlotStylesResolved
 }
 
 type InlineStyleProps<StyleProps> = {
@@ -45,9 +45,12 @@ type InlineStyleProps<StyleProps> = {
 
 const defaultContext: StylesContextValue<{ renderRule: RendererRenderRule }> = {
   disableAnimations: false,
+  performance: {
+    enableStylesCaching: true,
+    enableVariablesCaching: true,
+  },
   renderer: { renderRule: () => '' },
   theme: emptyTheme,
-  _internal_resolvedComponentVariables: {},
 }
 
 const useStyles = <StyleProps extends PrimitiveProps>(
@@ -57,6 +60,8 @@ const useStyles = <StyleProps extends PrimitiveProps>(
   const context: StylesContextValue<{ renderRule: RendererRenderRule }> =
     React.useContext(ThemeContext) || defaultContext
 
+  const { enableStylesCaching = true, enableVariablesCaching = true } = context.performance || {}
+
   const {
     className = process.env.NODE_ENV === 'production' ? '' : 'no-classname-🙉',
     mapPropsToStyles = () => ({} as StyleProps),
@@ -81,7 +86,10 @@ const useStyles = <StyleProps extends PrimitiveProps>(
     rtl,
     saveDebug: fluentUIDebug => (debug.current = { fluentUIDebug }),
     theme: context.theme,
-    _internal_resolvedComponentVariables: context._internal_resolvedComponentVariables,
+    performance: {
+      enableStylesCaching,
+      enableVariablesCaching,
+    },
   })
 
   return { classes, styles: resolvedStyles }
diff --git a/packages/react-bindings/src/index.ts b/packages/react-bindings/src/index.ts
index 96d3dd8f22..75ed78e683 100644
--- a/packages/react-bindings/src/index.ts
+++ b/packages/react-bindings/src/index.ts
@@ -10,11 +10,14 @@ export * from './FocusZone/FocusZone.types'
 export * from './FocusZone/focusUtilities'
 
 export { default as useAccessibility } from './hooks/useAccessibility'
-export { default as useStyles } from './hooks/useStyles'
+export { default as useAutoControlled } from './hooks/useAutoControlled'
 export { default as unstable_useDispatchEffect } from './hooks/useDispatchEffect'
+export { default as useIsomorphicLayoutEffect } from './hooks/useIsomorphicLayoutEffect'
 export { default as useStateManager } from './hooks/useStateManager'
+export { default as useStyles } from './hooks/useStyles'
 
 export { default as unstable_createAnimationStyles } from './styles/createAnimationStyles'
+export { default as unstable_calculateAnimationTimeout } from './styles/calculateAnimationTimeout'
 export { default as unstable_getStyles } from './styles/getStyles'
 export * from './styles/types'
 
diff --git a/packages/react-bindings/src/styles/calculateAnimationTimeout.ts b/packages/react-bindings/src/styles/calculateAnimationTimeout.ts
new file mode 100644
index 0000000000..2064874d95
--- /dev/null
+++ b/packages/react-bindings/src/styles/calculateAnimationTimeout.ts
@@ -0,0 +1,10 @@
+import convertCssTimeToNumber from './convertCssTimeToNumber'
+import * as _ from 'lodash'
+
+const calculateAnimationTimeout = (duration: string | undefined, delay?: string): number => {
+  if (_.isNil(duration) || duration === 'inherit' || duration === 'initial') return 0
+  if (delay === 'inherit' || delay === 'initial') return 0
+  return convertCssTimeToNumber(duration) + convertCssTimeToNumber(delay)
+}
+
+export default calculateAnimationTimeout
diff --git a/packages/react-bindings/src/styles/convertCssTimeToNumber.ts b/packages/react-bindings/src/styles/convertCssTimeToNumber.ts
new file mode 100644
index 0000000000..a582bdb2c9
--- /dev/null
+++ b/packages/react-bindings/src/styles/convertCssTimeToNumber.ts
@@ -0,0 +1,20 @@
+import * as _ from 'lodash'
+
+const convertCssTimeToNumber = (time: string | undefined): number => {
+  if (_.isNil(time) || time === 'initial' || time === 'inherit') {
+    return 0
+  }
+
+  if (!_.endsWith(time, 'ms') && !_.endsWith(time, 's')) {
+    return 0
+  }
+
+  const multiplier = _.endsWith(time, 'ms') ? 1 : 1000
+  const stringNumber = _.endsWith(time, 'ms')
+    ? time.substring(0, time.length - 2)
+    : time.substring(0, time.length - 1)
+
+  return isNaN(_.toNumber(stringNumber)) ? 0 : multiplier * _.toNumber(stringNumber)
+}
+
+export default convertCssTimeToNumber
diff --git a/packages/react-bindings/src/styles/getStyles.ts b/packages/react-bindings/src/styles/getStyles.ts
index defec91c40..3ab17b5190 100644
--- a/packages/react-bindings/src/styles/getStyles.ts
+++ b/packages/react-bindings/src/styles/getStyles.ts
@@ -1,126 +1,49 @@
 import {
-  callable,
-  ComponentSlotStylesInput,
-  ComponentSlotStylesPrepared,
-  ComponentStyleFunctionParam,
+  ComponentSlotStylesResolved,
   ComponentVariablesObject,
-  DebugData,
-  ICSSInJSStyle,
   isDebugEnabled,
-  mergeComponentStyles,
-  mergeComponentVariables,
-  PropsWithVarsAndStyles,
-  withDebugId,
 } from '@fluentui/styles'
-import cx from 'classnames'
+
 import * as _ from 'lodash'
 
-import resolveStylesAndClasses from './resolveStylesAndClasses'
-import {
-  ComponentDesignProp,
-  ComponentSlotClasses,
-  RendererParam,
-  RendererRenderRule,
-  StylesContextValue,
-} from '../styles/types'
-
-type GetStylesOptions = StylesContextValue<{
-  renderRule: RendererRenderRule
-}> & {
-  className?: string
-  displayName: string
-  props: PropsWithVarsAndStyles & { design?: ComponentDesignProp }
-  rtl: boolean
-  saveDebug: (debug: DebugData | null) => void
-}
+import { ComponentSlotClasses, ResolveStylesOptions, StylesContextValue } from '../styles/types'
+import resolveVariables from './resolveVariables'
+import resolveStyles from './resolveStyles'
 
 export type GetStylesResult = {
   classes: ComponentSlotClasses
   variables: ComponentVariablesObject
-  styles: ComponentSlotStylesPrepared
+  styles: ComponentSlotStylesResolved
   theme: StylesContextValue['theme']
 }
 
-const getStyles = (options: GetStylesOptions): GetStylesResult => {
-  const {
-    className,
-    disableAnimations,
-    displayName,
-    props,
-    renderer,
-    rtl,
-    saveDebug,
-    theme,
-    _internal_resolvedComponentVariables: resolvedComponentVariables,
-  } = options
-
-  // Resolve variables for this component, cache the result in provider
-  if (!resolvedComponentVariables[displayName]) {
-    resolvedComponentVariables[displayName] =
-      callable(theme.componentVariables[displayName])(theme.siteVariables) || {} // component variables must not be undefined/null (see mergeComponentVariables contract)
-  }
-
-  // Merge inline variables on top of cached variables
-  const resolvedVariables = props.variables
-    ? mergeComponentVariables(
-        resolvedComponentVariables[displayName],
-        withDebugId(props.variables, 'props.variables'),
-      )(theme.siteVariables)
-    : resolvedComponentVariables[displayName]
-
-  // Resolve styles using resolved variables, merge results, allow props.styles to override
-  let mergedStyles: ComponentSlotStylesPrepared = theme.componentStyles[displayName] || {
-    root: () => ({}),
-  }
-
-  const hasInlineOverrides = !_.isNil(props.design) || !_.isNil(props.styles)
-
-  if (hasInlineOverrides) {
-    mergedStyles = mergeComponentStyles(
-      mergedStyles,
-      props.design && withDebugId({ root: props.design }, 'props.design'),
-      props.styles &&
-        withDebugId({ root: props.styles } as ComponentSlotStylesInput, 'props.styles'),
-    )
-  }
-
-  const styleParam: ComponentStyleFunctionParam = {
-    displayName,
-    props,
-    variables: resolvedVariables,
-    theme,
-    rtl,
-    disableAnimations,
-  }
-
-  // Fela plugins rely on `direction` param in `theme` prop instead of RTL
-  // Our API should be aligned with it
-  // Heads Up! Keep in sync with Design.tsx render logic
-  const direction = rtl ? 'rtl' : 'ltr'
-  const felaParam: RendererParam = {
-    theme: { direction },
-    disableAnimations,
-    displayName, // does not affect styles, only used by useEnhancedRenderer in docs
-  }
-
-  const { resolvedStyles, resolvedStylesDebug, classes } = resolveStylesAndClasses(
-    mergedStyles,
-    styleParam,
-    (style: ICSSInJSStyle) => renderer.renderRule(() => style, felaParam),
+const getStyles = (options: ResolveStylesOptions): GetStylesResult => {
+  //
+  // To compute styles we are going through three stages:
+  // - resolve variables (siteVariables => componentVariables + props.variables)
+  // - resolve styles (with resolvedVariables & props.styles & props.design)
+  // - compute classes (with resolvedStyles)
+  // - conditionally add sources for evaluating debug information to component
+
+  const resolvedVariables = resolveVariables(
+    options.displayName,
+    options.theme,
+    options.props.variables,
+    options.performance.enableVariablesCaching,
   )
 
-  classes.root = cx(className, classes.root, props.className)
+  const { classes, resolvedStyles, resolvedStylesDebug } = resolveStyles(options, resolvedVariables)
 
   // conditionally add sources for evaluating debug information to component
   if (process.env.NODE_ENV !== 'production' && isDebugEnabled) {
-    saveDebug({
-      componentName: displayName,
+    options.saveDebug({
+      componentName: options.displayName,
       componentVariables: _.filter(
         resolvedVariables._debug,
         variables => !_.isEmpty(variables.resolved),
       ),
       componentStyles: resolvedStylesDebug,
-      siteVariables: _.filter(theme.siteVariables._debug, siteVars => {
+      siteVariables: _.filter(options.theme.siteVariables._debug, siteVars => {
         if (_.isEmpty(siteVars) || _.isEmpty(siteVars.resolved)) {
           return false
         }
@@ -143,7 +66,7 @@ const getStyles = (options: GetStylesOptions): GetStylesResult => {
     classes,
     variables: resolvedVariables,
     styles: resolvedStyles,
-    theme,
+    theme: options.theme,
   }
 }
 
diff --git a/packages/react-bindings/src/styles/resolveStyles.ts b/packages/react-bindings/src/styles/resolveStyles.ts
new file mode 100644
index 0000000000..8d9dcda323
--- /dev/null
+++ b/packages/react-bindings/src/styles/resolveStyles.ts
@@ -0,0 +1,227 @@
+import cx from 'classnames'
+import {
+  ComponentSlotStylesInput,
+  ComponentSlotStylesPrepared,
+  ComponentSlotStylesResolved,
+  ComponentStyleFunctionParam,
+  ComponentVariablesObject,
+  ICSSInJSStyle,
+  isDebugEnabled,
+  mergeComponentStyles,
+  ThemePrepared,
+  withDebugId,
+} from '@fluentui/styles'
+import { ComponentSlotClasses, RendererParam, ResolveStylesOptions } from '@fluentui/react-bindings'
+import * as _ from 'lodash'
+
+export type ResolveStylesResult = {
+  resolvedStyles: ComponentSlotStylesResolved
+  resolvedStylesDebug: Record<string, { styles: Object }[]>
+  classes: ComponentSlotClasses
+}
+
+// this weak map is used as cache for the classes
+const classesCache = new WeakMap<ThemePrepared, Record<string, string>>()
+
+// this weak map is used as cache for the styles
+const stylesCache = new WeakMap<ThemePrepared, Record<string, ICSSInJSStyle>>()
+
+/**
+ * Both resolvedStyles and classes are objects of getters with lazy evaluation
+ *
+ * Additionally if the cacheEnabled option is provided, than the resolved styles
+ * and classes are caching the results in WeakMaps. The key of the maps contains the following:
+ * - theme
+ * - displayName
+ * - slot name
+ * - styling props
+ * - rtl mode
+ * - disable animations mode
+ */
+const resolveStyles = (
+  options: ResolveStylesOptions,
+  resolvedVariables: ComponentVariablesObject,
+  renderStylesInput?: (styles: ICSSInJSStyle) => string,
+): ResolveStylesResult => {
+  const {
+    className: componentClassName,
+    theme,
+    displayName,
+    props,
+    rtl,
+    disableAnimations,
+    renderer,
+    performance = {},
+  } = options || {}
+
+  const { className, design, styles, variables, ...stylesProps } = props
+  const noInlineOverrides = !(design || styles || variables)
+
+  const cacheEnabled = performance.enableStylesCaching && noInlineOverrides
+
+  // Merge theme styles with inline overrides if any
+  let mergedStyles: ComponentSlotStylesPrepared = theme.componentStyles[displayName] || {
+    root: () => ({}),
+  }
+  const hasInlineStylesOverrides = !_.isNil(props.design) || !_.isNil(props.styles)
+
+  if (hasInlineStylesOverrides) {
+    mergedStyles = mergeComponentStyles(
+      mergedStyles,
+      props.design && withDebugId({ root: props.design }, 'props.design'),
+      props.styles &&
+        withDebugId({ root: props.styles } as ComponentSlotStylesInput, 'props.styles'),
+    )
+  }
+
+  const styleParam: ComponentStyleFunctionParam = {
+    displayName,
+    props,
+    variables: resolvedVariables,
+    theme,
+    rtl,
+    disableAnimations,
+  }
+
+  // Fela plugins rely on `direction` param in `theme` prop instead of RTL
+  // Our API should be aligned with it
+  // Heads Up! Keep in sync with Design.tsx render logic
+  const direction = rtl ? 'rtl' : 'ltr'
+  const felaParam: RendererParam = {
+    theme: { direction },
+    disableAnimations,
+    displayName, // does not affect styles, only used by useEnhancedRenderer in docs
+  }
+
+  const renderStyles =
+    renderStylesInput || ((style: ICSSInJSStyle) => renderer.renderRule(() => style, felaParam))
+
+  const resolvedStyles: Record<string, ICSSInJSStyle> = {}
+  const resolvedStylesDebug: Record<string, { styles: Object }[]> = {}
+  const classes: Record<string, string> = {}
+
+  if (cacheEnabled && theme) {
+    if (!stylesCache.has(theme)) {
+      stylesCache.set(theme, {})
+    }
+    if (!classesCache.has(theme)) {
+      classesCache.set(theme, {})
+    }
+  }
+
+  const componentCacheKey =
+    cacheEnabled && displayName && stylesProps
+      ? `${displayName}:${JSON.stringify(stylesProps)}${styleParam.rtl}${
+          styleParam.disableAnimations
+        }`
+      : ''
+
+  Object.keys(mergedStyles).forEach(slotName => {
+    // resolve/render slot styles once and cache
+    const lazyEvaluationKey = `${slotName}__return`
+    const slotCacheKey = componentCacheKey + slotName
+
+    Object.defineProperty(resolvedStyles, slotName, {
+      enumerable: false,
+      configurable: false,
+      set(val: ICSSInJSStyle) {
+        // Add to the cache if it's enabled
+        if (cacheEnabled && theme) {
+          stylesCache.set(theme, {
+            ...stylesCache.get(theme),
+            [slotCacheKey]: val,
+          })
+        }
+
+        resolvedStyles[lazyEvaluationKey] = val
+      },
+      get(): ICSSInJSStyle {
+        // If caching enabled and entry exists, get from cache, avoid lazy evaluation
+        if (cacheEnabled && theme) {
+          const stylesThemeCache = stylesCache.get(theme) || {}
+          if (stylesThemeCache[slotCacheKey]) {
+            return stylesThemeCache[slotCacheKey]
+          }
+        }
+
+        if (resolvedStyles[lazyEvaluationKey]) {
+          return resolvedStyles[lazyEvaluationKey]
+        }
+
+        // resolve/render slot styles once and cache
+        resolvedStyles[lazyEvaluationKey] = mergedStyles[slotName](styleParam)
+
+        if (cacheEnabled && theme) {
+          stylesCache.set(theme, {
+            ...stylesCache.get(theme),
+            [slotCacheKey]: resolvedStyles[lazyEvaluationKey],
+          })
+        }
+
+        if (process.env.NODE_ENV !== 'production' && isDebugEnabled) {
+          resolvedStylesDebug[slotName] = resolvedStyles[slotName]['_debug']
+          delete resolvedStyles[slotName]['_debug']
+        }
+
+        return resolvedStyles[lazyEvaluationKey]
+      },
+    })
+
+    Object.defineProperty(classes, slotName, {
+      enumerable: false,
+      configurable: false,
+      set(val: string) {
+        if (cacheEnabled && theme) {
+          classesCache.set(theme, {
+            ...classesCache.get(theme),
+            [slotCacheKey]: val,
+          })
+        }
+
+        classes[lazyEvaluationKey] = val
+      },
+      get(): string {
+        if (cacheEnabled && theme) {
+          const classesThemeCache = classesCache.get(theme) || {}
+          if (classesThemeCache[slotCacheKey]) {
+            return slotName === 'root'
+              ? cx(componentClassName, classesThemeCache[slotCacheKey], className)
+              : classesThemeCache[slotCacheKey]
+          }
+        }
+
+        if (classes[lazyEvaluationKey]) {
+          return slotName === 'root'
+            ? cx(componentClassName, classes[lazyEvaluationKey], className)
+            : classes[lazyEvaluationKey]
+        }
+
+        // this resolves the getter magic
+        const styleObj = resolvedStyles[slotName]
+
+        if (renderStyles && styleObj) {
+          classes[lazyEvaluationKey] = renderStyles(styleObj)
+
+          if (cacheEnabled && theme) {
+            classesCache.set(theme, {
+              ...classesCache.get(theme),
+              [slotCacheKey]: classes[lazyEvaluationKey],
+            })
+          }
+        }
+
+        return slotName === 'root'
+          ? cx(componentClassName, classes[lazyEvaluationKey], className)
+          : classes[lazyEvaluationKey]
+      },
+    })
+  })
+
+  return {
+    resolvedStyles,
+    resolvedStylesDebug,
+    classes,
+  }
+}
+
+export default resolveStyles
diff --git a/packages/react-bindings/src/styles/resolveStylesAndClasses.tsx b/packages/react-bindings/src/styles/resolveStylesAndClasses.tsx
deleted file mode 100644
index 38fa28c875..0000000000
--- a/packages/react-bindings/src/styles/resolveStylesAndClasses.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import {
-  ComponentSlotStylesPrepared,
-  isDebugEnabled,
-  ICSSInJSStyle,
-  ComponentStyleFunctionParam,
-} from '@fluentui/styles'
-import { ComponentSlotClasses } from '../styles/types'
-
-// Both resolvedStyles and classes are objects of getters with lazy evaluation
-const resolveStylesAndClasses = (
-  mergedStyles: ComponentSlotStylesPrepared,
-  styleParam: ComponentStyleFunctionParam,
-  renderStyles: (styles: ICSSInJSStyle) => string,
-): {
-  resolvedStyles: ICSSInJSStyle
-  resolvedStylesDebug: Record<string, { styles: Object }[]>
-  classes: ComponentSlotClasses
-} => {
-  const resolvedStyles: Record<string, ICSSInJSStyle> = {}
-  const resolvedStylesDebug: Record<string, { styles: Object }[]> = {}
-  const classes: Record<string, string> = {}
-
-  Object.keys(mergedStyles).forEach(slotName => {
-    // resolve/render slot styles once and cache
-    const cacheKey = `${slotName}__return`
-
-    Object.defineProperty(resolvedStyles, slotName, {
-      enumerable: false,
-      configurable: false,
-      set(val) {
-        resolvedStyles[cacheKey] = val
-        return true
-      },
-      get() {
-        if (resolvedStyles[cacheKey]) {
-          return resolvedStyles[cacheKey]
-        }
-
-        // resolve/render slot styles once and cache
-        resolvedStyles[cacheKey] = mergedStyles[slotName](styleParam)
-
-        if (process.env.NODE_ENV !== 'production' && isDebugEnabled) {
-          resolvedStylesDebug[slotName] = resolvedStyles[slotName]['_debug']
-          delete resolvedStyles[slotName]['_debug']
-        }
-
-        return resolvedStyles[cacheKey]
-      },
-    })
-
-    Object.defineProperty(classes, slotName, {
-      enumerable: false,
-      configurable: false,
-      set(val) {
-        classes[cacheKey] = val
-        return true
-      },
-      get() {
-        if (classes[cacheKey]) {
-          return classes[cacheKey]
-        }
-
-        // this resolves the getter magic
-        const styleObj = resolvedStyles[slotName]
-
-        if (renderStyles && styleObj) {
-          classes[cacheKey] = renderStyles(styleObj)
-        }
-
-        return classes[cacheKey]
-      },
-    })
-  })
-
-  return {
-    resolvedStyles,
-    resolvedStylesDebug,
-    classes,
-  }
-}
-
-export default resolveStylesAndClasses
diff --git a/packages/react-bindings/src/styles/resolveVariables.ts b/packages/react-bindings/src/styles/resolveVariables.ts
new file mode 100644
index 0000000000..0f3a8db47a
--- /dev/null
+++ b/packages/react-bindings/src/styles/resolveVariables.ts
@@ -0,0 +1,54 @@
+import {
+  callable,
+  ComponentVariablesInput,
+  ComponentVariablesObject,
+  mergeComponentVariables,
+  ThemePrepared,
+  withDebugId,
+} from '@fluentui/styles'
+
+const variablesCache = new WeakMap<ThemePrepared, Record<string, ComponentVariablesObject>>()
+
+const resolveVariables = (
+  displayName: string,
+  theme: ThemePrepared,
+  variables: ComponentVariablesInput | undefined,
+  enabledVariablesCaching: boolean | undefined,
+): ComponentVariablesObject => {
+  //
+  // Simple caching model, works only if there is no `props.variables`
+  // Resolves variables for this component, cache the result in provider
+  //
+
+  let componentThemeVariables = {}
+
+  if (enabledVariablesCaching) {
+    if (!variablesCache.has(theme)) {
+      variablesCache.set(theme, {})
+    }
+
+    const variablesThemeCache = variablesCache.get(theme) || {}
+
+    if (!variablesThemeCache[displayName]) {
+      variablesThemeCache[displayName] =
+        callable(theme.componentVariables[displayName])(theme.siteVariables) || {}
+      variablesCache.set(theme, variablesThemeCache)
+    }
+
+    componentThemeVariables = variablesThemeCache[displayName]
+  } else {
+    componentThemeVariables =
+      callable(theme.componentVariables[displayName])(theme.siteVariables) || {}
+  }
+
+  if (variables === undefined) {
+    return componentThemeVariables
+  }
+
+  return mergeComponentVariables(
+    componentThemeVariables,
+    withDebugId(variables, 'props.variables'),
+  )(theme.siteVariables)
+}
+
+export default resolveVariables
diff --git a/packages/react-bindings/src/styles/types.ts b/packages/react-bindings/src/styles/types.ts
index 4472bf7e9d..fa4fc1a169 100644
--- a/packages/react-bindings/src/styles/types.ts
+++ b/packages/react-bindings/src/styles/types.ts
@@ -1,4 +1,10 @@
-import { ICSSInJSStyle, ThemeInput, ThemePrepared } from '@fluentui/styles'
+import {
+  DebugData,
+  ICSSInJSStyle,
+  PropsWithVarsAndStyles,
+  ThemeInput,
+  ThemePrepared,
+} from '@fluentui/styles'
 import { IRenderer as FelaRenderer } from 'fela'
 
 // Notice:
@@ -61,13 +67,30 @@ export type Renderer = Omit<FelaRenderer, 'renderRule'> & {
   renderRule: RendererRenderRule
 }
 
+export interface StylesContextPerformance {
+  enableStylesCaching?: boolean
+  enableVariablesCaching?: boolean
+}
+
 export type StylesContextInputValue<R = Renderer> = {
   disableAnimations?: boolean
+  performance?: StylesContextPerformance
   renderer?: R
   theme?: ThemeInput
 }
 
 export type StylesContextValue<R = Renderer> = Required<StylesContextInputValue<R>> & {
   theme: ThemePrepared
-  _internal_resolvedComponentVariables: Record<string, object>
+}
+
+export type PrimitiveProps = Record<string, boolean | number | string | undefined>
+
+export type ResolveStylesOptions = StylesContextValue<{
+  renderRule: RendererRenderRule
+}> & {
+  className?: string
+  displayName: string
+  props: PropsWithVarsAndStyles & { design?: ComponentDesignProp }
+  rtl: boolean
+  saveDebug: (debug: DebugData | null) => void
 }
diff --git a/packages/react-bindings/test/hooks/useAutoControlled-test.tsx b/packages/react-bindings/test/hooks/useAutoControlled-test.tsx
new file mode 100644
index 0000000000..d4e4803dcb
--- /dev/null
+++ b/packages/react-bindings/test/hooks/useAutoControlled-test.tsx
@@ -0,0 +1,110 @@
+import { useAutoControlled } from '@fluentui/react-bindings'
+import { shallow } from 'enzyme'
+import * as React from 'react'
+import * as ReactTestUtils from 'react-dom/test-utils'
+
+type TestComponentProps = {
+  defaultValue?: string
+  value?: string
+
+  initialValue?: string
+  onChange?: (value: string) => void
+}
+
+const TestComponent: React.FunctionComponent<TestComponentProps> = props => {
+  const [value, setValue] = useAutoControlled({
+    defaultValue: props.defaultValue,
+    value: props.value,
+
+    initialValue: props.initialValue,
+  })
+
+  return (
+    <input
+      onChange={e => {
+        setValue(e.target.value)
+        if (props.onChange) props.onChange(e.target.value)
+      }}
+      value={value || ''}
+    />
+  )
+}
+
+describe('useAutoControlled', () => {
+  it('defaults to "undefined"', () => {
+    const wrapper = shallow(<TestComponent />)
+
+    expect(wrapper.find('input').prop('value')).toBe('')
+  })
+
+  it('defaults to `initialValue` if specified', () => {
+    const wrapper = shallow(<TestComponent initialValue="foo" />)
+
+    expect(wrapper.find('input').prop('value')).toBe('foo')
+  })
+
+  it('sets default values of controlled props to the state', () => {
+    const wrapper = shallow(<TestComponent defaultValue="foo" />)
+
+    expect(wrapper.find('input').prop('value')).toBe('foo')
+  })
+
+  it('sets values of controlled props to the state', () => {
+    const wrapper = shallow(<TestComponent value="foo" />)
+
+    expect(wrapper.find('input').prop('value')).toBe('foo')
+  })
+
+  it('handles state updates', () => {
+    const wrapper = shallow(<TestComponent />)
+
+    ReactTestUtils.act(() => {
+      wrapper.find('input').simulate('change', { target: { value: 'foo' } })
+    })
+
+    expect(wrapper.find('input').prop('value')).toBe('foo')
+  })
+
+  it('handles state updates with a default value', () => {
+    const wrapper = shallow(<TestComponent defaultValue="foo" />)
+
+    ReactTestUtils.act(() => {
+      wrapper.find('input').simulate('change', { target: { value: 'bar' } })
+    })
+
+    expect(wrapper.find('input').prop('value')).toBe('bar')
+  })
+
+  it('ignores state updates if controlled', () => {
+    const wrapper = shallow(<TestComponent value="foo" />)
+
+    ReactTestUtils.act(() => {
+      wrapper.find('input').simulate('change', { target: { value: 'bar' } })
+    })
+
+    expect(wrapper.find('input').prop('value')).toBe('foo')
+  })
+
+  it('sets values of controlled props to the state on updates', () => {
+    const wrapper = shallow(<TestComponent value="foo" />)
+
+    ReactTestUtils.act(() => {
+      wrapper.setProps({ value: 'bar' })
+    })
+    expect(wrapper.find('input').prop('value')).toBe('bar')
+
+    ReactTestUtils.act(() => {
+      wrapper.setProps({ value: 'baz' })
+    })
+    expect(wrapper.find('input').prop('value')).toBe('baz')
+  })
+
+  it('keeps last value of controlled prop in the state if value gets "undefined"', () => {
+    const wrapper = shallow(<TestComponent defaultValue="foo" />)
+
+    ReactTestUtils.act(() => {
+      wrapper.setProps({ value: undefined })
+    })
+    expect(wrapper.find('input').prop('value')).toBe('foo')
+  })
+})
diff --git a/packages/react-bindings/test/hooks/useStateManager-test.tsx b/packages/react-bindings/test/hooks/useStateManager-test.tsx
index f39e597616..737638658c 100644
--- a/packages/react-bindings/test/hooks/useStateManager-test.tsx
+++ b/packages/react-bindings/test/hooks/useStateManager-test.tsx
@@ -1,6 +1,6 @@
 import { useStateManager } from '@fluentui/react-bindings'
 import { createManager, ManagerFactory } from '@fluentui/state'
-import { shallow } from 'enzyme'
+import { mount, shallow } from 'enzyme'
 import * as React from 'react'
 import * as ReactTestUtils from 'react-dom/test-utils'
 
@@ -63,6 +63,23 @@ const TestComponent: React.FunctionComponent<TestComponentProps> = props => {
   )
 }
 
+type ActionsComponentProps = {
+  onRender: () => void
+  onUpdate: () => void
+}
+
+const ActionsComponent: React.FunctionComponent<ActionsComponentProps> = props => {
+  const { actions, state } = useStateManager(createTestManager)
+  const handleClick = React.useCallback(() => actions.toggle(), [actions])
+
+  props.onRender()
+  React.useEffect(() => {
+    props.onUpdate()
+  }, [actions])
+
+  return <div data-open={state.open} onClick={handleClick} />
+}
+
 describe('useStateManager', () => {
   it('uses default values from state manager', () => {
     const wrapper = shallow(<TestComponent />)
@@ -148,4 +165,30 @@ describe('useStateManager', () => {
     expect(onChange).toHaveBeenNthCalledWith(1, 'foo')
     expect(onChange).toHaveBeenNthCalledWith(2, 'foo')
   })
+
+  it('actions are referentially equal between renders', () => {
+    const onRender = jest.fn()
+    const onUpdate = jest.fn()
+    const wrapper = mount(<ActionsComponent onRender={onRender} onUpdate={onUpdate} />)
+
+    expect(wrapper.find('div').prop('data-open')).toBe(false)
+
+    ReactTestUtils.act(() => {
+      wrapper.find('div').simulate('click')
+    })
+    wrapper.update()
+
+    expect(wrapper.find('div').prop('data-open')).toBe(true)
+    expect(onRender).toHaveBeenCalledTimes(2)
+    expect(onUpdate).toHaveBeenCalledTimes(1)
+
+    ReactTestUtils.act(() => {
+      wrapper.find('div').simulate('click')
+    })
+    wrapper.update()
+
+    expect(wrapper.find('div').prop('data-open')).toBe(false)
+    expect(onRender).toHaveBeenCalledTimes(3)
+    expect(onUpdate).toHaveBeenCalledTimes(1)
+  })
 })
diff --git a/packages/react-bindings/test/hooks/useStyles-test.tsx b/packages/react-bindings/test/hooks/useStyles-test.tsx
index d97892855b..6eba9f4953 100644
--- a/packages/react-bindings/test/hooks/useStyles-test.tsx
+++ b/packages/react-bindings/test/hooks/useStyles-test.tsx
@@ -39,7 +39,6 @@ const TestProvider: React.FC<{ theme: ThemeInput }> = props => {
     <ThemeContext.Provider
       value={{
         theme,
-        _internal_resolvedComponentVariables: {},
       }}
     >
       {children}
diff --git a/packages/react-bindings/test/styles/convertCssTimeToNumber-test.ts b/packages/react-bindings/test/styles/convertCssTimeToNumber-test.ts
new file mode 100644
index 0000000000..55f778b23f
--- /dev/null
+++ b/packages/react-bindings/test/styles/convertCssTimeToNumber-test.ts
@@ -0,0 +1,25 @@
+import { unstable_calculateAnimationTimeout as calculateAnimationTimeout } from '@fluentui/react-bindings'
+
+describe('convertCssTimeToNumber', () => {
+  test('converts "ms" values to number', () => {
+    expect(calculateAnimationTimeout('200ms', '300ms')).toEqual(500)
+  })
+
+  test('converts "s" values to number', () => {
+    expect(calculateAnimationTimeout('20s', '2s')).toEqual(22000)
+  })
+
+  test('converts other valid css values to 0', () => {
+    expect(calculateAnimationTimeout('initial', '200ms')).toEqual(0)
+    expect(calculateAnimationTimeout('inherit', '400ms')).toEqual(0)
+  })
+
+  test('converts invalid css values to 0', () => {
+    expect(calculateAnimationTimeout('intial', undefined)).toEqual(0)
+  })
+
+  test('returns the duration if delay is not set', () => {
+    expect(calculateAnimationTimeout('400ms')).toEqual(400)
+    expect(calculateAnimationTimeout('2s')).toEqual(2000)
+  })
+})
diff --git a/packages/react-bindings/test/styles/resolveStyles-test.ts b/packages/react-bindings/test/styles/resolveStyles-test.ts
new file mode 100644
index 0000000000..ae8216cef1
--- /dev/null
+++ b/packages/react-bindings/test/styles/resolveStyles-test.ts
@@ -0,0 +1,269 @@
+import * as _ from 'lodash'
+import {
+  ComponentSlotStylesPrepared,
+  ComponentVariablesObject,
+  emptyTheme,
+  ICSSInJSStyle,
+} from '@fluentui/styles'
+import resolveStyles from '../../src/styles/resolveStyles'
+import { ResolveStylesOptions } from '../../src/styles/types'
+
+const componentStyles: ComponentSlotStylesPrepared<{}, { color: string }> = {
+  root: ({ variables: v }): ICSSInJSStyle => ({
+    color: v.color,
+  }),
+}
+
+const resolvedVariables: ComponentVariablesObject = {
+  color: 'red',
+}
+
+const resolveStylesOptions = (options?: {
+  displayName?: ResolveStylesOptions['displayName']
+  performance?: ResolveStylesOptions['performance']
+  props?: ResolveStylesOptions['props']
+}): ResolveStylesOptions => {
+  const {
+    displayName = 'Test',
+    performance = {
+      enableVariablesCaching: true,
+      enableStylesCaching: true,
+    },
+    props = {},
+  } = options || {}
+
+  return {
+    theme: {
+      ...emptyTheme,
+      componentStyles: {
+        [displayName]: componentStyles,
+      },
+    },
+    displayName,
+    props,
+    rtl: false,
+    disableAnimations: false,
+    renderer: {
+      renderRule: () => '',
+    },
+    performance,
+    saveDebug: () => {},
+  }
+}
+
+describe('resolveStyles', () => {
+  test('resolves styles', () => {
+    const { resolvedStyles } = resolveStyles(resolveStylesOptions(), resolvedVariables)
+
+    expect(resolvedStyles.root).toMatchObject({ color: 'red' })
+  })
+
+  test('caches resolved styles', () => {
+    spyOn(componentStyles, 'root').and.callThrough()
+    const { resolvedStyles } = resolveStyles(resolveStylesOptions(), resolvedVariables)
+
+    expect(resolvedStyles.root).toMatchObject({ color: 'red' })
+    expect(componentStyles.root).toHaveBeenCalledTimes(1)
+    expect(resolvedStyles.root).toMatchObject({ color: 'red' })
+    expect(componentStyles.root).toHaveBeenCalledTimes(1)
+  })
+
+  test('does not render classes if not fetched', () => {
+    const renderStyles = jest.fn()
+    const { resolvedStyles } = resolveStyles(
+      resolveStylesOptions(),
+      resolvedVariables,
+      renderStyles,
+    )
+
+    expect(resolvedStyles.root).toMatchObject({ color: 'red' })
+    expect(renderStyles).not.toBeCalled()
+  })
+
+  test('renders classes when slot classes getter is accessed', () => {
+    const renderStyles = jest.fn().mockReturnValue('a')
+    const { classes } = resolveStyles(resolveStylesOptions(), resolvedVariables, renderStyles)
+
+    expect(classes['root']).toBeDefined()
+    expect(renderStyles).toHaveBeenCalledWith({ color: 'red' })
+  })
+
+  test('caches rendered classes', () => {
+    const renderStyles = jest.fn().mockReturnValue('a')
+    const { classes } = resolveStyles(resolveStylesOptions(), resolvedVariables, renderStyles)
+
+    expect(classes['root']).toBeDefined()
+    expect(renderStyles).toHaveBeenCalledWith({ color: 'red' })
+    expect(classes['root']).toBeDefined()
+    expect(renderStyles).toHaveBeenCalledTimes(1)
+  })
+
+  test('caches resolved styles for no props', () => {
+    spyOn(componentStyles, 'root').and.callThrough()
+    const options = resolveStylesOptions()
+    const { resolvedStyles } = resolveStyles(options, resolvedVariables)
+    const { resolvedStyles: secondResolvedStyles } = resolveStyles(options, resolvedVariables)
+
+    expect(resolvedStyles.root).toMatchObject({ color: 'red' })
+    expect(componentStyles.root).toHaveBeenCalledTimes(1)
+    expect(secondResolvedStyles.root).toMatchObject({ color: 'red' })
+    expect(componentStyles.root).toHaveBeenCalledTimes(1)
+  })
+
+  test('caches classes for no props', () => {
+    const renderStyles = jest.fn().mockReturnValue('a')
+    const options = resolveStylesOptions({ displayName: 'Test1' })
+    const { classes } = resolveStyles(options, resolvedVariables, renderStyles)
+    const { classes: secondClasses } = resolveStyles(options, resolvedVariables, renderStyles)
+
+    expect(classes['root']).toBeDefined()
+    expect(renderStyles).toHaveBeenCalledWith({ color: 'red' })
+    expect(secondClasses['root']).toBeDefined()
+    expect(renderStyles).toHaveBeenCalledTimes(1)
+  })
+
+  test('caches resolved styles for the same props', () => {
+    spyOn(componentStyles, 'root').and.callThrough()
+    const options = resolveStylesOptions({
+      displayName: 'Test2',
+      props: { primary: true },
+    })
+    const { resolvedStyles } = resolveStyles(options, resolvedVariables)
+    const { resolvedStyles: secondResolvedStyles } = resolveStyles(options, resolvedVariables)
+
+    expect(resolvedStyles.root).toMatchObject({ color: 'red' })
+    expect(componentStyles.root).toHaveBeenCalledTimes(1)
+    expect(secondResolvedStyles.root).toMatchObject({ color: 'red' })
+    expect(componentStyles.root).toHaveBeenCalledTimes(1)
+  })
+
+  test('caches classes for the same props', () => {
+    const renderStyles = jest.fn().mockReturnValue('a')
+    const options = resolveStylesOptions({
+      displayName: 'Test3',
+      props: { primary: true },
+    })
+    const { classes } = resolveStyles(options, resolvedVariables, renderStyles)
+    const { classes: secondClasses } = resolveStyles(options, resolvedVariables, renderStyles)
+
+    expect(classes['root']).toBeDefined()
+    expect(renderStyles).toHaveBeenCalledWith({ color: 'red' })
+    expect(secondClasses['root']).toBeDefined()
+    expect(renderStyles).toHaveBeenCalledTimes(1)
+  })
+
+  test('considers props when caching resolved styles', () => {
+    spyOn(componentStyles, 'root').and.callThrough()
+    const options = resolveStylesOptions({
+      displayName: 'Test4',
+      props: { primary: true },
+    })
+    const { resolvedStyles } = resolveStyles(options, resolvedVariables)
+
+    options.props = { primary: false }
+    const { resolvedStyles: secondResolvedStyles } = resolveStyles(options, resolvedVariables)
+
+    expect(resolvedStyles.root).toMatchObject({ color: 'red' })
+    expect(componentStyles.root).toHaveBeenCalledTimes(1)
+    expect(secondResolvedStyles.root).toMatchObject({ color: 'red' })
+    expect(componentStyles.root).toHaveBeenCalledTimes(2)
+  })
+
+  test('considers props when caching classes', () => {
+    const renderStyles = jest.fn().mockReturnValue('a')
+    const options = resolveStylesOptions({
+      displayName: 'Test5',
+      props: { primary: true },
+    })
+    const { classes } = resolveStyles(options, resolvedVariables, renderStyles)
+
+    options.props = { primary: false }
+    const { classes: secondClasses } = resolveStyles(options, resolvedVariables, renderStyles)
+
+    expect(classes['root']).toBeDefined()
+    expect(renderStyles).toHaveBeenCalledWith({ color: 'red' })
+    expect(secondClasses['root']).toBeDefined()
+    expect(renderStyles).toHaveBeenCalledTimes(2)
+  })
+
+  test('does not cache styles if caching is disabled', () => {
+    spyOn(componentStyles, 'root').and.callThrough()
+    const options = resolveStylesOptions({ performance: { enableStylesCaching: false } })
+    const { resolvedStyles } = resolveStyles(options, resolvedVariables)
+    const { resolvedStyles: secondResolvedStyles } = resolveStyles(options, resolvedVariables)
+
+    expect(resolvedStyles.root).toMatchObject({ color: 'red' })
+    expect(secondResolvedStyles.root).toMatchObject({ color: 'red' })
+    expect(componentStyles.root).toHaveBeenCalledTimes(2)
+  })
+
+  test('does not cache classes if caching is disabled', () => {
+    const renderStyles = jest.fn().mockReturnValue('a')
+    const options = resolveStylesOptions({ performance: { enableStylesCaching: false } })
+    const { classes } = resolveStyles(options, resolvedVariables, renderStyles)
+    const { classes: secondClasses } = resolveStyles(options, resolvedVariables, renderStyles)
+
+    expect(classes['root']).toBeDefined()
+    expect(renderStyles).toHaveBeenCalledWith({ color: 'red' })
+    expect(secondClasses['root']).toBeDefined()
+    expect(renderStyles).toHaveBeenCalledTimes(2)
+  })
+
+  test('does not cache styles if there are inline overrides', () => {
+    spyOn(componentStyles, 'root').and.callThrough()
+    const propsInlineOverrides: ResolveStylesOptions['props'][] = [
+      { styles: { fontSize: '10px' } },
+      { design: { left: '10px' } },
+      { variables: { backgroundColor: 'yellow' } },
+    ]
+
+    const propsInlineOverridesResolvedStyles: ICSSInJSStyle[] = [
+      { color: 'red', fontSize: '10px' },
+      { color: 'red', left: '10px' },
+      { color: 'red' },
+    ]
+
+    const propsInlineOverridesSize = propsInlineOverrides.length
+
+    _.forEach(propsInlineOverrides, (props, idx) => {
+      const options = resolveStylesOptions({
+        props,
+        performance: { enableStylesCaching: false },
+      })
+
+      const { resolvedStyles } = resolveStyles(options, resolvedVariables)
+      const { resolvedStyles: secondResolvedStyles } = resolveStyles(options, resolvedVariables)
+
+      expect(resolvedStyles.root).toMatchObject(propsInlineOverridesResolvedStyles[idx])
+      expect(secondResolvedStyles.root).toMatchObject(propsInlineOverridesResolvedStyles[idx])
+      resolveStyles(options, resolvedVariables)
+    })
+
+    expect(componentStyles.root).toHaveBeenCalledTimes(propsInlineOverridesSize * 2)
+  })
+
+  test('does not cache classes if there are inline overrides', () => {
+    const renderStyles = jest.fn().mockReturnValue('a')
+    const propsInlineOverrides: ResolveStylesOptions['props'][] = [
+      { styles: { fontSize: '10px' } },
+      { design: { left: '10px' } },
+      { variables: { backgroundColor: 'yellow' } },
+    ]
+
+    const propsInlineOverridesSize = propsInlineOverrides.length
+
+    _.forEach(propsInlineOverrides, props => {
+      const options = resolveStylesOptions({
+        props,
+        performance: { enableStylesCaching: false },
+      })
+      const { classes } = resolveStyles(options, resolvedVariables, renderStyles)
+      const { classes: secondClasses } = resolveStyles(options, resolvedVariables, renderStyles)
+
+      expect(classes['root']).toBeDefined()
+      expect(secondClasses['root']).toBeDefined()
+    })
+
+    expect(renderStyles).toHaveBeenCalledTimes(propsInlineOverridesSize * 2)
+  })
+})
diff --git a/packages/react-bindings/test/styles/resolveStylesAndClasses-test.ts b/packages/react-bindings/test/styles/resolveStylesAndClasses-test.ts
deleted file mode 100644
index 71ea32fdbe..0000000000
--- a/packages/react-bindings/test/styles/resolveStylesAndClasses-test.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import {
-  ComponentSlotStylesPrepared,
-  ComponentStyleFunctionParam,
-  emptyTheme,
-  ICSSInJSStyle,
-} from '@fluentui/styles'
-import resolveStylesAndClasses from '../../src/styles/resolveStylesAndClasses'
-
-const styleParam: ComponentStyleFunctionParam = {
-  disableAnimations: false,
-  displayName: 'Test',
-  props: {},
-  rtl: false,
-  theme: emptyTheme,
-  variables: {
-    color: 'red',
-  },
-}
-
-const componentStyles: ComponentSlotStylesPrepared<{}, { color: string }> = {
-  root: ({ variables: v }): ICSSInJSStyle => ({
-    color: v.color,
-  }),
-}
-
-describe('resolveStylesAndClasses', () => {
-  test('resolves styles', () => {
-    const { resolvedStyles } = resolveStylesAndClasses(componentStyles, styleParam, () => '')
-
-    expect(resolvedStyles.root).toMatchObject({ color: 'red' })
-  })
-
-  test('caches resolved styles', () => {
-    spyOn(componentStyles, 'root').and.callThrough()
-    const { resolvedStyles } = resolveStylesAndClasses(componentStyles, styleParam, () => '')
-
-    expect(resolvedStyles.root).toMatchObject({ color: 'red' })
-    expect(componentStyles.root).toHaveBeenCalledTimes(1)
-    expect(resolvedStyles.root).toMatchObject({ color: 'red' })
-    expect(componentStyles.root).toHaveBeenCalledTimes(1)
-  })
-
-  test('does not render classes if not fetched', () => {
-    const renderStyles = jest.fn()
-    const { resolvedStyles } = resolveStylesAndClasses(componentStyles, styleParam, renderStyles)
-
-    expect(resolvedStyles.root).toMatchObject({ color: 'red' })
-    expect(renderStyles).not.toBeCalled()
-  })
-
-  test('renders classes when slot classes getter is accessed', () => {
-    const renderStyles = jest.fn().mockReturnValue('a')
-    const { classes } = resolveStylesAndClasses(componentStyles, styleParam, renderStyles)
-
-    expect(classes.root).toBeDefined()
-    expect(renderStyles).toHaveBeenCalledWith({ color: 'red' })
-  })
-
-  test('caches rendered classes', () => {
-    const renderStyles = jest.fn().mockReturnValue('a')
-    const { classes } = resolveStylesAndClasses(componentStyles, styleParam, renderStyles)
-
-    expect(classes.root).toBeDefined()
-    expect(renderStyles).toHaveBeenCalledWith({ color: 'red' })
-    expect(classes.root).toBeDefined()
-    expect(renderStyles).toHaveBeenCalledTimes(1)
-  })
-})
diff --git a/packages/react-bindings/test/styles/resolveVariables-test.ts b/packages/react-bindings/test/styles/resolveVariables-test.ts
new file mode 100644
index 0000000000..433d4bf28d
--- /dev/null
+++ b/packages/react-bindings/test/styles/resolveVariables-test.ts
@@ -0,0 +1,86 @@
+import resolveVariables from '../../src/styles/resolveVariables'
+import { ComponentVariablesPrepared, emptyTheme, ThemePrepared } from '@fluentui/styles'
+
+const siteVariables = {
+  ...emptyTheme.siteVariables,
+  brand: 'blue',
+}
+const componentVariables: ComponentVariablesPrepared = (
+  siteVariables = emptyTheme.siteVariables,
+) => ({
+  backgroundColor: siteVariables.brand,
+})
+
+const createTheme: (displayName?: string) => ThemePrepared = displayName => ({
+  ...emptyTheme,
+  siteVariables,
+  componentVariables: {
+    [displayName || 'Test']: componentVariables,
+  },
+})
+
+describe('resolveVariables', () => {
+  test('resolved variables', () => {
+    const variables = resolveVariables('Test', createTheme('Test'), {}, false)
+    expect(variables).toMatchObject({ backgroundColor: 'blue' })
+  })
+
+  test('merges theme with input variables', () => {
+    const propsVariables = () => ({
+      color: 'red',
+    })
+    const variables = resolveVariables('Test', createTheme('Test'), propsVariables, false)
+    expect(variables).toMatchObject({ backgroundColor: 'blue', color: 'red' })
+  })
+
+  test("allows input variabes to override theme's", () => {
+    const propsVariables = {
+      backgroundColor: 'green',
+    }
+    const variables = resolveVariables('Test', createTheme('Test'), propsVariables, false)
+    expect(variables).toMatchObject({ backgroundColor: 'green' })
+  })
+
+  test('caches resolved variables', () => {
+    const componentVariablesMock = jest.fn().mockReturnValue({ backgroundColor: 'blue' })
+    const theme = createTheme()
+    theme.componentVariables['Test'] = componentVariablesMock
+
+    const variables = resolveVariables('Test', theme, {}, true)
+    const secondVariables = resolveVariables('Test', theme, {}, true)
+
+    expect(variables).toMatchObject(secondVariables)
+    expect(componentVariablesMock).toHaveBeenCalledTimes(1)
+  })
+
+  test('considers displayName while caching resolved variables', () => {
+    const componentVariablesMock1 = jest.fn().mockReturnValue({ backgroundColor: 'blue' })
+    const componentVariablesMock2 = jest.fn().mockReturnValue({ color: 'red' })
+    const theme = createTheme()
+    theme.componentVariables['Test1'] = componentVariablesMock1
+    theme.componentVariables['Test2'] = componentVariablesMock2
+
+    const variables = resolveVariables('Test1', theme, {}, true)
+    const secondVariables = resolveVariables('Test2', theme, {}, true)
+
+    expect(variables).toMatchObject({ backgroundColor: 'blue' })
+    expect(secondVariables).toMatchObject({ color: 'red' })
+    expect(componentVariablesMock1).toHaveBeenCalledTimes(1)
+    expect(componentVariablesMock2).toHaveBeenCalledTimes(1)
+  })
+
+  test('considers theme while caching resolved variables', () => {
+    const componentVariablesMock = jest.fn().mockReturnValue({ backgroundColor: 'blue' })
+    const theme = createTheme('Test')
+    const secondTheme = createTheme('Test')
+    theme.componentVariables['Test'] = componentVariablesMock
+    secondTheme.componentVariables['Test'] = componentVariablesMock
+
+    const variables = resolveVariables('Test', theme, {}, true)
+    const secondVariables = resolveVariables('Test', secondTheme, {}, true)
+
+    expect(variables).toMatchObject({ backgroundColor: 'blue' })
+    expect(secondVariables).toMatchObject({ backgroundColor: 'blue' })
+    expect(componentVariablesMock).toHaveBeenCalledTimes(2)
+  })
+})
diff --git a/packages/react-component-event-listener/package.json b/packages/react-component-event-listener/package.json
index a66e0f5e26..8fa76e9cad 100644
--- a/packages/react-component-event-listener/package.json
+++ b/packages/react-component-event-listener/package.json
@@ -1,15 +1,15 @@
 {
   "name": "@fluentui/react-component-event-listener",
   "description": "React components for binding events on the global scope.",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "author": "Oleksandr Fediashov <a@fedyashov.com>",
   "bugs": "https://github.com/microsoft/fluent-ui-react/issues",
   "dependencies": {
-    "@babel/runtime": "^7.1.2",
+    "@babel/runtime": "^7.7.6",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "@fluentui/internal-tooling": "^0.43.0",
+    "@fluentui/internal-tooling": "^0.44.0",
     "@types/simulant": "^0.2.0",
     "lerna-alias": "^3.0.3-0",
     "simulant": "^0.2.2"
diff --git a/packages/react-component-event-listener/src/EventListener.ts b/packages/react-component-event-listener/src/EventListener.ts
index 48b318b092..b7a3dcb06e 100644
--- a/packages/react-component-event-listener/src/EventListener.ts
+++ b/packages/react-component-event-listener/src/EventListener.ts
@@ -1,7 +1,7 @@
 import * as PropTypes from 'prop-types'
 
 import useEventListener from './useEventListener'
-import { EventListenerOptions, EventTypes, TargetRef } from './types'
+import { EventListenerOptions, EventTypes, Target, TargetRef } from './types'
 
 function EventListener<T extends EventTypes>(props: EventListenerOptions<T>) {
   useEventListener(props)
@@ -16,9 +16,10 @@ EventListener.propTypes =
     ? {
         capture: PropTypes.bool,
         listener: PropTypes.func.isRequired,
+        target: PropTypes.object as PropTypes.Validator<Target>,
         targetRef: PropTypes.shape({
           current: PropTypes.object,
-        }).isRequired as PropTypes.Validator<TargetRef>,
+        }) as PropTypes.Validator<TargetRef>,
         type: PropTypes.string.isRequired as PropTypes.Validator<EventTypes>,
       }
     : {}
diff --git a/packages/react-component-event-listener/src/types.ts b/packages/react-component-event-listener/src/types.ts
index 4155976c11..57c9a0d433 100644
--- a/packages/react-component-event-listener/src/types.ts
+++ b/packages/react-component-event-listener/src/types.ts
@@ -7,8 +7,11 @@ export interface EventListenerOptions<T extends EventTypes = 'click'> {
   /** A function which receives a notification when an event of the specified type occurs. */
   listener: EventHandler<T>
 
+  /** A target node. Use `target` or `targetRef` prop. */
+  target?: Target
+
   /** A ref object with a target node. */
-  targetRef: TargetRef
+  targetRef?: TargetRef
 
   /** A case-sensitive string representing the event type to listen for. */
   type: T
@@ -17,4 +20,5 @@ export interface EventListenerOptions<T extends EventTypes = 'click'> {
 export type EventHandler<T extends EventTypes> = (e: DocumentEventMap[T]) => void
 export type EventTypes = keyof DocumentEventMap
 
-export type TargetRef = React.RefObject<Node | Window>
+export type Target = Node | Window
+export type TargetRef = React.RefObject<Target>
diff --git a/packages/react-component-event-listener/src/useEventListener.ts b/packages/react-component-event-listener/src/useEventListener.ts
index 91f7561c58..125633ee3c 100644
--- a/packages/react-component-event-listener/src/useEventListener.ts
+++ b/packages/react-component-event-listener/src/useEventListener.ts
@@ -1,14 +1,14 @@
 import * as React from 'react'
 
-import { EventHandler, EventListenerOptions, EventTypes, TargetRef } from './types'
+import { EventHandler, EventListenerOptions, EventTypes, Target } from './types'
 
 const isActionSupported = (
-  targetRef: TargetRef,
+  element: Target | null | undefined,
   method: 'addEventListener' | 'removeEventListener',
-) => targetRef && !!targetRef.current && !!targetRef.current[method]
+): element is Target => (element ? !!element[method] : false)
 
 const useEventListener = <T extends EventTypes>(options: EventListenerOptions<T>): void => {
-  const { capture, listener, type, targetRef } = options
+  const { capture, listener, type, target, targetRef } = options
 
   const latestListener = React.useRef<EventHandler<T>>(listener)
   latestListener.current = listener
@@ -17,25 +17,44 @@ const useEventListener = <T extends EventTypes>(options: EventListenerOptions<T>
     return latestListener.current(event)
   }, [])
 
+  if (process.env.NODE_ENV !== 'production') {
+    React.useEffect(() => {
+      if (typeof target !== 'undefined' && typeof targetRef !== 'undefined') {
+        throw new Error(
+          '`target` and `targetRef` props are mutually exclusive, please use one of them.',
+        )
+      }
+
+      if (typeof target === 'undefined' && typeof targetRef === 'undefined') {
+        throw new Error(
+          "`target` and `targetRef` props are `undefined`, it' required to use one of them.",
+        )
+      }
+    }, [target, targetRef])
+  }
+
   React.useEffect(() => {
-    if (isActionSupported(targetRef, 'addEventListener')) {
-      ;(targetRef.current as NonNullable<Node>).addEventListener(type, eventHandler, capture)
+    const element: Target | null | undefined =
+      typeof targetRef === 'undefined' ? target : targetRef.current
+
+    if (isActionSupported(element, 'addEventListener')) {
+      element.addEventListener(type, eventHandler, capture)
     } else if (process.env.NODE_ENV !== 'production') {
       throw new Error(
-        '@fluentui/react-component-event-listener: Passed `targetRef` is not valid or does not support `addEventListener()` method.',
+        '@fluentui/react-component-event-listener: Passed `element` is not valid or does not support `addEventListener()` method.',
       )
     }
 
     return () => {
-      if (isActionSupported(targetRef, 'removeEventListener')) {
-        ;(targetRef.current as NonNullable<Node>).removeEventListener(type, eventHandler, capture)
+      if (isActionSupported(element, 'removeEventListener')) {
+        element.removeEventListener(type, eventHandler, capture)
       } else if (process.env.NODE_ENV !== 'production') {
         throw new Error(
-          '@fluentui/react-component-event-listener: Passed `targetRef` is not valid or does not support `removeEventListener()` method.',
+          '@fluentui/react-component-event-listener: Passed `element` is not valid or does not support `removeEventListener()` method.',
         )
       }
     }
-  }, [capture, targetRef, type])
+  }, [capture, target, targetRef, type])
 }
 
 export default useEventListener
diff --git a/packages/react-component-event-listener/test/EventListener-test.tsx b/packages/react-component-event-listener/test/EventListener-test.tsx
index 57280e2a0b..56e46fd886 100644
--- a/packages/react-component-event-listener/test/EventListener-test.tsx
+++ b/packages/react-component-event-listener/test/EventListener-test.tsx
@@ -4,6 +4,23 @@ import * as React from 'react'
 // @ts-ignore
 import * as simulant from 'simulant'
 
+class TestBoundary extends React.Component<{ onError: (e: Error) => void }, { hasError: boolean }> {
+  state = { hasError: false }
+
+  componentDidCatch(error: Error) {
+    this.props.onError(error)
+    this.setState({ hasError: true })
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return null
+    }
+
+    return this.props.children
+  }
+}
+
 describe('EventListener', () => {
   describe('listener', () => {
     it('handles events on `target`', () => {
@@ -83,4 +100,70 @@ describe('EventListener', () => {
       expect(listener).toHaveBeenCalledTimes(2)
     })
   })
+
+  describe('target', () => {
+    it('handles events', () => {
+      const listener = jest.fn()
+      mount(<EventListener listener={listener} target={document} type="click" />)
+
+      simulant.fire(document, 'click')
+      expect(listener).toHaveBeenCalledTimes(1)
+    })
+
+    it('throws an error when is used with `targetRef`', () => {
+      jest.spyOn(console, 'error').mockImplementation(() => {})
+      const onError = jest.fn()
+
+      mount(
+        <TestBoundary onError={onError}>
+          <EventListener
+            listener={jest.fn()}
+            target={document}
+            targetRef={documentRef}
+            type="click"
+          />
+        </TestBoundary>,
+      )
+
+      expect(onError).toBeCalledWith(
+        expect.objectContaining({
+          message: '`target` and `targetRef` props are mutually exclusive, please use one of them.',
+        }),
+      )
+
+      // We need to clean up mocks to avoid errors reported by React
+      ;(console.error as any).mockClear()
+    })
+
+    it('throws an error when not defined', () => {
+      jest.spyOn(console, 'error').mockImplementation(() => {})
+      const onError = jest.fn()
+
+      mount(
+        <TestBoundary onError={onError}>
+          <EventListener listener={jest.fn()} type="click" />
+        </TestBoundary>,
+      )
+
+      expect(onError).toBeCalledWith(
+        expect.objectContaining({
+          message:
+            "`target` and `targetRef` props are `undefined`, it' required to use one of them.",
+        }),
+      )
+
+      // We need to clean up mocks to avoid errors reported by React
+      ;(console.error as any).mockClear()
+    })
+  })
+
+  describe('targetRef', () => {
+    it('handles events', () => {
+      const listener = jest.fn()
+      mount(<EventListener listener={listener} targetRef={documentRef} type="click" />)
+
+      simulant.fire(document, 'click')
+      expect(listener).toHaveBeenCalledTimes(1)
+    })
+  })
 })
diff --git a/packages/react-component-nesting-registry/package.json b/packages/react-component-nesting-registry/package.json
index 9bf2d562e1..8fdd73198b 100644
--- a/packages/react-component-nesting-registry/package.json
+++ b/packages/react-component-nesting-registry/package.json
@@ -1,15 +1,15 @@
 {
   "name": "@fluentui/react-component-nesting-registry",
   "description": "Registers a DOM nodes within a context.",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "author": "Oleksandr Fediashov <a@fedyashov.com>",
   "bugs": "https://github.com/microsoft/fluent-ui-react/issues",
   "dependencies": {
-    "@babel/runtime": "^7.1.2",
+    "@babel/runtime": "^7.7.6",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "@fluentui/internal-tooling": "^0.43.0",
+    "@fluentui/internal-tooling": "^0.44.0",
     "lerna-alias": "^3.0.3-0"
   },
   "files": [
diff --git a/packages/react-component-ref/package.json b/packages/react-component-ref/package.json
index f236c65c19..adcff3339b 100644
--- a/packages/react-component-ref/package.json
+++ b/packages/react-component-ref/package.json
@@ -1,16 +1,16 @@
 {
   "name": "@fluentui/react-component-ref",
   "description": "A set of components and utils to deal with React refs.",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "author": "Oleksandr Fediashov <olfedias@microsoft.com>",
   "bugs": "https://github.com/microsoft/fluent-ui-react/issues",
   "dependencies": {
-    "@babel/runtime": "^7.1.2",
+    "@babel/runtime": "^7.7.6",
     "prop-types": "^15.7.2",
     "react-is": "^16.6.3"
   },
   "devDependencies": {
-    "@fluentui/internal-tooling": "^0.43.0",
+    "@fluentui/internal-tooling": "^0.44.0",
     "@types/react-is": "^16.7.1",
     "lerna-alias": "^3.0.3-0"
   },
diff --git a/packages/react-component-ref/src/RefFindNode.tsx b/packages/react-component-ref/src/RefFindNode.tsx
index 9ec7a4e4e8..fb792ebcf7 100644
--- a/packages/react-component-ref/src/RefFindNode.tsx
+++ b/packages/react-component-ref/src/RefFindNode.tsx
@@ -40,6 +40,8 @@ export default class RefFindNode extends React.Component<RefProps> {
 
   componentWillUnmount() {
     handleRef(this.props.innerRef, null)
+
+    delete this.prevNode
   }
 
   render() {
diff --git a/packages/react-component-ref/src/index.ts b/packages/react-component-ref/src/index.ts
index d5724dd37d..5242fee943 100644
--- a/packages/react-component-ref/src/index.ts
+++ b/packages/react-component-ref/src/index.ts
@@ -1,6 +1,5 @@
 export { default as handleRef } from './handleRef'
 export { default as isRefObject } from './isRefObject'
-export { default as toRefObject } from './toRefObject'
 
 export { default as Ref } from './Ref'
 export { default as RefFindNode } from './RefFindNode'
diff --git a/packages/react-component-ref/src/toRefObject.ts b/packages/react-component-ref/src/toRefObject.ts
deleted file mode 100644
index 872620d464..0000000000
--- a/packages/react-component-ref/src/toRefObject.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react'
-
-const nullRefObject: React.RefObject<null> = { current: null }
-
-// A map of created ref objects to provide memoization.
-const refObjects = new WeakMap<Node | Window, React.RefObject<Node | Window>>()
-
-/** Creates a React ref object from existing DOM node. */
-const toRefObject = <T extends Node | Window>(node: T): React.RefObject<T> => {
-  // A "null" is not valid key for a WeakMap
-  if (node === null) {
-    return nullRefObject as any
-  }
-
-  if (refObjects.has(node)) {
-    return refObjects.get(node) as React.RefObject<T>
-  }
-
-  const refObject: React.RefObject<T> = { current: node }
-  refObjects.set(node, refObject)
-
-  return refObject
-}
-
-export default toRefObject
diff --git a/packages/react-component-ref/test/toRefObject-test.ts b/packages/react-component-ref/test/toRefObject-test.ts
deleted file mode 100644
index d103efe878..0000000000
--- a/packages/react-component-ref/test/toRefObject-test.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { toRefObject } from '@fluentui/react-component-ref'
-
-describe('toRefObject', () => {
-  it('creates an ref object from an input', () => {
-    const node = document.createElement('div')
-    expect(toRefObject(node)).toHaveProperty('current', node)
-  })
-
-  it('handles "null" as input', () => {
-    expect(toRefObject(null as any)).toHaveProperty('current', null)
-  })
-
-  it('returned object is memoized', () => {
-    const node = document.createElement('div')
-    const refObject = toRefObject(node)
-
-    expect(toRefObject(node)).toBe(refObject)
-  })
-})
diff --git a/packages/react-context-selector/.gulp.js b/packages/react-context-selector/.gulp.js
new file mode 100644
index 0000000000..87c6422c6b
--- /dev/null
+++ b/packages/react-context-selector/.gulp.js
@@ -0,0 +1 @@
+module.exports = require('../../.gulp')
diff --git a/packages/react-context-selector/README.md b/packages/react-context-selector/README.md
new file mode 100644
index 0000000000..b7c8eac4fc
--- /dev/null
+++ b/packages/react-context-selector/README.md
@@ -0,0 +1,41 @@
+# `@fluentui/react-context-selector`
+
+React `useContextSelector()` and `useContextSelectors()` hooks in userland.
+
+## Introduction
+
+[React Context](https://reactjs.org/docs/context.html) and [`useContext()`](https://reactjs.org/docs/hooks-reference.html#usecontext) is often used to avoid prop drilling,
+however it's known that there's a performance issue. When a context value is changed, all components that are subscribed with `useContext()` will re-render.
+
+[useContextSelector](https://github.com/reactjs/rfcs/pull/119) is recently proposed. While waiting for the process, this library provides the API in userland.
+
+# Installation
+
+**NPM**
+
+```bash
+npm install --save @fluentui/react-context-selector
+```
+
+**Yarn**
+
+```bash
+yarn add @fluentui/react-context-selector
+```
+
+## Technical memo
+
+React context by nature triggers propagation of component re-rendering if a value is changed. To avoid this, this library uses undocumented feature of `calculateChangedBits`. It then uses a subscription model to force update when a component needs to re-render.
+
+## Limitations
+
+- In order to stop propagation, `children` of a context provider has to be either created outside of the provider or memoized with `React.memo`.
+- `<Consumer />` components are not supported.
+- The [stale props](https://react-redux.js.org/api/hooks#stale-props-and-zombie-children) issue can't be solved in userland. (workaround with try-catch)
+
+## Related projects
+
+The implementation is heavily inspired by:
+
+- [use-context-selector](https://github.com/dai-shi/use-context-selector)
+- [react-tracked](https://github.com/dai-shi/react-tracked)
diff --git a/packages/react-context-selector/babel.config.js b/packages/react-context-selector/babel.config.js
new file mode 100644
index 0000000000..a1c212ad45
--- /dev/null
+++ b/packages/react-context-selector/babel.config.js
@@ -0,0 +1 @@
+module.exports = api => require('@fluentui/internal-tooling/babel')(api)
diff --git a/packages/react-context-selector/gulpfile.ts b/packages/react-context-selector/gulpfile.ts
new file mode 100644
index 0000000000..de10829664
--- /dev/null
+++ b/packages/react-context-selector/gulpfile.ts
@@ -0,0 +1 @@
+import '../../gulpfile'
diff --git a/packages/react-context-selector/jest.config.js b/packages/react-context-selector/jest.config.js
new file mode 100644
index 0000000000..8c78ce7fdf
--- /dev/null
+++ b/packages/react-context-selector/jest.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  ...require('@fluentui/internal-tooling/jest'),
+  name: 'react-context-selector',
+  moduleNameMapper: require('lerna-alias').jest(),
+}
diff --git a/packages/react-context-selector/package.json b/packages/react-context-selector/package.json
new file mode 100644
index 0000000000..117605bb4a
--- /dev/null
+++ b/packages/react-context-selector/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "@fluentui/react-context-selector",
+  "description": "React useContextSelector & useContextSelectors hooks in userland",
+  "version": "0.44.0",
+  "author": "Oleksandr Fediashov <a@fedyashov.com>",
+  "bugs": "https://github.com/microsoft/fluent-ui-react/issues",
+  "dependencies": {
+    "@babel/runtime": "^7.7.6"
+  },
+  "devDependencies": {
+    "@fluentui/internal-tooling": "^0.44.0",
+    "@types/react-is": "^16.7.1",
+    "lerna-alias": "^3.0.3-0",
+    "react": "^16.8.0",
+    "react-is": "^16.6.3"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "homepage": "https://github.com/microsoft/fluent-ui-react/tree/master/packages/react-context-selector",
+  "jsnext:main": "dist/es/index.js",
+  "license": "MIT",
+  "main": "dist/commonjs/index.js",
+  "module": "dist/es/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": "microsoft/fluent-ui-react.git",
+  "scripts": {
+    "build": "gulp bundle:package:no-umd",
+    "clean": "gulp bundle:package:clean",
+    "test": "gulp test",
+    "test:watch": "gulp test:watch"
+  },
+  "sideEffects": false,
+  "types": "dist/es/index.d.ts"
+}
diff --git a/packages/react-context-selector/src/createContext.ts b/packages/react-context-selector/src/createContext.ts
new file mode 100644
index 0000000000..4c1cd28296
--- /dev/null
+++ b/packages/react-context-selector/src/createContext.ts
@@ -0,0 +1,78 @@
+import * as React from 'react'
+import { Context, ContextListener, ContextValue, CreateContextOptions } from './types'
+
+// Stops React Context propagation
+// https://github.com/facebook/react/blob/95bd7aad7daa80c381faa3215c80b0906ab5ead5/packages/react-reconciler/src/ReactFiberBeginWork.js#L2656
+const calculateChangedBits = () => 0
+
+const createProvider = <Value>(Original: React.Provider<ContextValue<Value>>) => {
+  const Provider: React.FC<React.ProviderProps<Value>> = props => {
+    const listeners = React.useRef<ContextListener<Value>[]>([])
+
+    // We call listeners in render intentionally. Listeners are not technically pure, but
+    // otherwise we can't get benefits from concurrent mode.
+    //
+    // We make sure to work with double or more invocation of listeners.
+    listeners.current.forEach(listener => listener(props.value))
+
+    // Disables updates propogation for React Context as `value` is always shallow equal
+    const subscribe = React.useCallback((listener: ContextListener<Value>) => {
+      listeners.current.push(listener)
+
+      const unsubscribe = () => {
+        const index = listeners.current.indexOf(listener)
+        listeners.current.splice(index, 1)
+      }
+
+      return unsubscribe
+    }, [])
+
+    return React.createElement(
+      Original,
+      { value: { subscribe, value: props.value } },
+      props.children,
+    )
+  }
+
+  /* istanbul ignore else */
+  if (process.env.NODE_ENV !== 'production') {
+    Provider.displayName = 'ContextSelector.Provider'
+  }
+
+  return Provider
+}
+
+const createContext = <Value>(
+  defaultValue: Value,
+  options: CreateContextOptions = {},
+): Context<Value> => {
+  const { strict = true } = options
+
+  const context = React.createContext<ContextValue<Value>>(
+    {
+      get subscribe() {
+        if (strict) {
+          /* istanbul ignore next */
+          throw new Error(
+            process.env.NODE_ENV === 'production'
+              ? ''
+              : `Please use <Provider /> component from "@fluentui/react-context-selector"`,
+          )
+        }
+
+        /* istanbul ignore next */
+        return () => () => {}
+      },
+      value: defaultValue,
+    },
+    calculateChangedBits,
+  )
+  context.Provider = createProvider<Value>(context.Provider) as any
+
+  // We don't support Consumer API
+  delete context.Consumer
+
+  return (context as unknown) as Context<Value>
+}
+
+export default createContext
diff --git a/packages/react-context-selector/src/index.ts b/packages/react-context-selector/src/index.ts
new file mode 100644
index 0000000000..9f8f0f3613
--- /dev/null
+++ b/packages/react-context-selector/src/index.ts
@@ -0,0 +1,4 @@
+export { default as createContext } from './createContext'
+export { default as useContextSelector } from './useContextSelector'
+export { default as useContextSelectors } from './useContextSelectors'
+export * from './types'
diff --git a/packages/react-context-selector/src/types.ts b/packages/react-context-selector/src/types.ts
new file mode 100644
index 0000000000..1847125baa
--- /dev/null
+++ b/packages/react-context-selector/src/types.ts
@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+export type Context<Value> = React.Context<Value> & {
+  Provider: React.FC<React.ProviderProps<Value>>
+  Consumer: never
+}
+
+export type CreateContextOptions = {
+  strict?: boolean
+}
+
+export type ContextListener<Value> = (value: Value) => void
+
+export type ContextSelector<Value, SelectedValue> = (value: Value) => SelectedValue
+
+export type ContextValue<Value> = {
+  subscribe: (listener: ContextListener<Value>) => any
+  value: Value
+}
diff --git a/packages/react-context-selector/src/useContextSelector.ts b/packages/react-context-selector/src/useContextSelector.ts
new file mode 100644
index 0000000000..b2a651cdab
--- /dev/null
+++ b/packages/react-context-selector/src/useContextSelector.ts
@@ -0,0 +1,63 @@
+import * as React from 'react'
+
+import { Context, ContextSelector, ContextValue } from './types'
+import { useIsomorphicLayoutEffect } from './utils'
+
+type UseSelectorRef<Value, SelectedValue> = {
+  selector: ContextSelector<Value, SelectedValue>
+  selected: SelectedValue
+  value: Value
+}
+
+/**
+ * This hook returns context selected value by selector.
+ * It will only accept context created by `createContext`.
+ * It will trigger re-render if only the selected value is referencially changed.
+ */
+const useContextSelector = <Value, SelectedValue>(
+  context: Context<Value>,
+  selector: ContextSelector<Value, SelectedValue>,
+): SelectedValue => {
+  const { subscribe, value } = React.useContext(
+    (context as unknown) as Context<ContextValue<Value>>,
+  )
+  const [, forceUpdate] = React.useReducer((c: number) => c + 1, 0) as [never, () => void]
+
+  const ref = React.useRef<UseSelectorRef<Value, SelectedValue>>()
+  const selected = selector(value)
+
+  useIsomorphicLayoutEffect(() => {
+    ref.current = {
+      selector,
+      value,
+      selected,
+    }
+  })
+  useIsomorphicLayoutEffect(() => {
+    const callback = (nextState: Value) => {
+      try {
+        const reference: UseSelectorRef<Value, SelectedValue> = ref.current as NonNullable<
+          UseSelectorRef<Value, SelectedValue>
+        >
+
+        if (
+          reference.value === nextState ||
+          Object.is(reference.selected, reference.selector(nextState))
+        ) {
+          // not changed
+          return
+        }
+      } catch (e) {
+        // ignored (stale props or some other reason)
+      }
+
+      forceUpdate()
+    }
+
+    return subscribe(callback)
+  }, [subscribe])
+
+  return selected
+}
+
+export default useContextSelector
diff --git a/packages/react-context-selector/src/useContextSelectors.ts b/packages/react-context-selector/src/useContextSelectors.ts
new file mode 100644
index 0000000000..0224726f63
--- /dev/null
+++ b/packages/react-context-selector/src/useContextSelectors.ts
@@ -0,0 +1,82 @@
+import * as React from 'react'
+
+import { Context, ContextSelector, ContextValue } from './types'
+import { useIsomorphicLayoutEffect } from './utils'
+
+type UseSelectorsRef<
+  Value,
+  Properties extends string,
+  Selectors extends Record<Properties, ContextSelector<Value, SelectedValue>>,
+  SelectedValue extends any
+> = {
+  selectors: Selectors
+  value: Value
+  selected: Record<Properties, SelectedValue>
+}
+
+/**
+ * This hook returns context selected value by selectors.
+ * It will only accept context created by `createContext`.
+ * It will trigger re-render if only the selected value is referencially changed.
+ */
+const useContextSelectors = <
+  Value,
+  Properties extends string,
+  Selectors extends Record<Properties, ContextSelector<Value, SelectedValue>>,
+  SelectedValue extends any
+>(
+  context: Context<Value>,
+  selectors: Selectors,
+): Record<Properties, SelectedValue> => {
+  const { subscribe, value } = React.useContext(
+    (context as unknown) as Context<ContextValue<Value>>,
+  )
+  const [, forceUpdate] = React.useReducer((c: number) => c + 1, 0) as [never, () => void]
+
+  const ref = React.useRef<UseSelectorsRef<Value, Properties, Selectors, SelectedValue>>()
+  const selected = {} as Record<Properties, SelectedValue>
+
+  Object.keys(selectors).forEach((key: Properties) => {
+    selected[key] = selectors[key](value)
+  })
+
+  useIsomorphicLayoutEffect(() => {
+    ref.current = {
+      selectors,
+      value,
+      selected,
+    }
+  })
+  useIsomorphicLayoutEffect(() => {
+    const callback = (nextState: Value) => {
+      try {
+        const reference: UseSelectorsRef<
+          Value,
+          Properties,
+          Selectors,
+          SelectedValue
+        > = ref.current as NonNullable<UseSelectorsRef<Value, Properties, Selectors, SelectedValue>>
+
+        if (
+          reference.value === nextState ||
+          Object.keys(reference.selected).every((key: Properties) =>
+            Object.is(reference.selected[key], reference.selectors[key](nextState)),
+          )
+        ) {
+          // not changed
+          return
+        }
+      } catch (e) {
+        // ignored (stale props or some other reason)
+      }
+
+      forceUpdate()
+    }
+
+    return subscribe(callback)
+  }, [subscribe])
+
+  return selected
+}
+
+export default useContextSelectors
diff --git a/packages/react-context-selector/src/utils.ts b/packages/react-context-selector/src/utils.ts
new file mode 100644
index 0000000000..7afd4eabda
--- /dev/null
+++ b/packages/react-context-selector/src/utils.ts
@@ -0,0 +1,6 @@
+import * as React from 'react'
+
+// useLayoutEffect that does not show warning when server-side rendering, see Alex Reardon's article for more info
+// @see https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
+export const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? React.useLayoutEffect : /* istanbul ignore next */ React.useEffect
diff --git a/packages/react-context-selector/test/createContext-test.tsx b/packages/react-context-selector/test/createContext-test.tsx
new file mode 100644
index 0000000000..da488cf169
--- /dev/null
+++ b/packages/react-context-selector/test/createContext-test.tsx
@@ -0,0 +1,73 @@
+import { createContext, useContextSelector } from '@fluentui/react-context-selector'
+import { mount } from 'enzyme'
+import * as React from 'react'
+import * as ReactIs from 'react-is'
+
+class TestBoundary extends React.Component<{ onError: (e: Error) => void }, { hasError: boolean }> {
+  state = { hasError: false }
+
+  componentDidCatch(error: Error) {
+    this.props.onError(error)
+    this.setState({ hasError: true })
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return null
+    }
+
+    return this.props.children
+  }
+}
+
+describe('createContext', () => {
+  it('creates a Provider component', () => {
+    const Context = createContext(null)
+    expect(ReactIs.isValidElementType(Context.Provider)).toBeTruthy()
+  })
+
+  describe('options', () => {
+    it('throws on usage outside Provider by default', () => {
+      jest.spyOn(console, 'error').mockImplementation(() => {})
+
+      const TestContext = createContext<string>('')
+      const TestComponent: React.FC = () => {
+        const value = useContextSelector(TestContext, v => v)
+        return <div data-value={value} />
+      }
+
+      const onError = jest.fn()
+      mount(
+        <TestBoundary onError={onError}>
+          <TestComponent />
+        </TestBoundary>,
+      )
+
+      expect(onError).toBeCalledWith(
+        expect.objectContaining({
+          message: 'Please use <Provider /> component from "@fluentui/react-context-selector"',
+        }),
+      )
+
+      // We need to clean up mocks to avoid errors reported by React
+      ;(console.error as any).mockClear()
+    })
+
+    it('do not throw usage outside Provider when `strict` is `false`', () => {
+      const TestContext = createContext<string>('', { strict: false })
+      const TestComponent: React.FC = () => {
+        const value = useContextSelector(TestContext, v => v)
+        return <div data-value={value} />
+      }
+
+      const onError = jest.fn()
+      mount(
+        <TestBoundary onError={onError}>
+          <TestComponent />
+        </TestBoundary>,
+      )
+
+      expect(onError).not.toBeCalled()
+    })
+  })
+})
diff --git a/packages/react-context-selector/test/useContextSelector-test.tsx b/packages/react-context-selector/test/useContextSelector-test.tsx
new file mode 100644
index 0000000000..4f303fc9a4
--- /dev/null
+++ b/packages/react-context-selector/test/useContextSelector-test.tsx
@@ -0,0 +1,88 @@
+import { createContext, useContextSelector } from '@fluentui/react-context-selector'
+import { mount } from 'enzyme'
+import * as React from 'react'
+
+const TestContext = createContext<{ index: number }>({ index: -1 })
+
+const TestComponent: React.FC<{ index: number; onUpdate?: () => void }> = props => {
+  const active = useContextSelector(TestContext, v => v.index === props.index)
+
+  React.useEffect(() => {
+    props.onUpdate && props.onUpdate()
+  })
+
+  return <div data-active={active} />
+}
+
+describe('useContextSelector', () => {
+  it('propogates values via Context', () => {
+    const wrapper = mount(
+      <TestContext.Provider value={{ index: 1 }}>
+        <TestComponent index={1} />
+      </TestContext.Provider>,
+    )
+
+    expect(wrapper.find('div').prop('data-active')).toBe(true)
+  })
+
+  it('updates only on selector match', () => {
+    const onUpdate = jest.fn()
+    const wrapper = mount(
+      <TestContext.Provider value={{ index: 0 }}>
+        <TestComponent index={1} onUpdate={onUpdate} />
+      </TestContext.Provider>,
+    )
+
+    expect(wrapper.find('div').prop('data-active')).toBe(false)
+    expect(onUpdate).toBeCalledTimes(1)
+
+    // No match, (v.index: 2, p.index: 1)
+    wrapper.setProps({ value: { index: 2 } })
+    expect(wrapper.find('div').prop('data-active')).toBe(false)
+    expect(onUpdate).toBeCalledTimes(1)
+
+    // Match => update, (v.index: 1, p.index: 1)
+    wrapper.setProps({ value: { index: 1 } })
+    expect(wrapper.find('div').prop('data-active')).toBe(true)
+    expect(onUpdate).toBeCalledTimes(2)
+
+    // Match previous => no update, (v.index: 1, p.index: 1)
+    wrapper.setProps({ value: { index: 1 } })
+    expect(wrapper.find('div').prop('data-active')).toBe(true)
+    expect(onUpdate).toBeCalledTimes(2)
+  })
+
+  it('updates are propogated inside React.memo()', () => {
+    // https://reactjs.org/docs/react-api.html#reactmemo
+    // Will never pass updates
+    const MemoComponent = React.memo(TestComponent, () => true)
+
+    const onUpdate = jest.fn()
+    const wrapper = mount(
+      <TestContext.Provider value={{ index: 0 }}>
+        <MemoComponent index={1} onUpdate={onUpdate} />
+      </TestContext.Provider>,
+    )
+
+    wrapper.setProps({ value: { index: 1 } })
+    expect(wrapper.find('div').prop('data-active')).toBe(true)
+    expect(onUpdate).toBeCalledTimes(2)
+  })
+
+  it('handles unsubscribe', () => {
+    const MemoComponent = React.memo(TestComponent)
+    const onUpdate = jest.fn()
+
+    const wrapper = mount(
+      <TestContext.Provider value={{ index: 0 }}>
+        <MemoComponent index={1} />
+        <MemoComponent index={2} key="2" onUpdate={onUpdate} />
+      </TestContext.Provider>,
+    )
+
+    wrapper.setProps({
+      children: [null, <MemoComponent index={2} key={2} onUpdate={onUpdate} />],
+    })
+    expect(onUpdate).toBeCalledTimes(1)
+  })
+})
diff --git a/packages/react-context-selector/test/useContextSelectors-test.tsx b/packages/react-context-selector/test/useContextSelectors-test.tsx
new file mode 100644
index 0000000000..0cfd991d59
--- /dev/null
+++ b/packages/react-context-selector/test/useContextSelectors-test.tsx
@@ -0,0 +1,87 @@
+import { createContext, useContextSelectors } from '@fluentui/react-context-selector'
+import { mount } from 'enzyme'
+import * as React from 'react'
+
+const TestContext = createContext<{ index: number; value: string }>({
+  index: -1,
+  value: '',
+})
+
+const TestComponent: React.FC<{ index: number; onUpdate?: () => void }> = props => {
+  const context = useContextSelectors(TestContext, {
+    active: v => v.index === props.index,
+    value: v => v.value,
+  })
+
+  React.useEffect(() => {
+    props.onUpdate && props.onUpdate()
+  })
+
+  return <div data-active={context.active} data-value={context.value} />
+}
+
+describe('useContextSelectors', () => {
+  it('propogates values via Context', () => {
+    const wrapper = mount(
+      <TestContext.Provider value={{ index: 1, value: 'foo' }}>
+        <TestComponent index={1} />
+      </TestContext.Provider>,
+    )
+
+    expect(wrapper.find('div').prop('data-active')).toBe(true)
+    expect(wrapper.find('div').prop('data-value')).toBe('foo')
+  })
+
+  it('updates only on selector match', () => {
+    const onUpdate = jest.fn()
+    const wrapper = mount(
+      <TestContext.Provider value={{ index: -1, value: 'foo' }}>
+        <TestComponent index={1} onUpdate={onUpdate} />
+      </TestContext.Provider>,
+    )
+
+    expect(wrapper.find('div').prop('data-active')).toBe(false)
+    expect(wrapper.find('div').prop('data-value')).toBe('foo')
+    expect(onUpdate).toBeCalledTimes(1)
+
+    // No match, (v.index: 2, p.index: 1)
+    wrapper.setProps({ value: { index: 2, value: 'foo' } })
+    expect(wrapper.find('div').prop('data-active')).toBe(false)
+    expect(wrapper.find('div').prop('data-value')).toBe('foo')
+    expect(onUpdate).toBeCalledTimes(1)
+
+    // Match => update, (v.index: 1, p.index: 1)
+    wrapper.setProps({ value: { index: 1, value: 'foo' } })
+    expect(wrapper.find('div').prop('data-active')).toBe(true)
+    expect(wrapper.find('div').prop('data-value')).toBe('foo')
+    expect(onUpdate).toBeCalledTimes(2)
+
+    // Match previous => no update, (v.index: 1, p.index: 1)
+    wrapper.setProps({ value: { index: 1, value: 'foo' } })
+    expect(wrapper.find('div').prop('data-active')).toBe(true)
+    expect(wrapper.find('div').prop('data-value')).toBe('foo')
+    expect(onUpdate).toBeCalledTimes(2)
+
+    // Match => update, (v.value: 'bar')
+    wrapper.setProps({ value: { index: 1, value: 'bar' } })
+    expect(wrapper.find('div').prop('data-value')).toBe('bar')
+    expect(onUpdate).toBeCalledTimes(3)
+  })
+
+  it('updates are propogated inside React.memo()', () => {
+    // https://reactjs.org/docs/react-api.html#reactmemo
+    // Will never pass updates
+    const MemoComponent = React.memo(TestComponent, () => true)
+
+    const onUpdate = jest.fn()
+    const wrapper = mount(
+      <TestContext.Provider value={{ index: 0, value: 'foo' }}>
+        <MemoComponent index={1} onUpdate={onUpdate} />
+      </TestContext.Provider>,
+    )
+
+    wrapper.setProps({ value: { index: 1, value: 'foo' } })
+    expect(wrapper.find('div').prop('data-active')).toBe(true)
+    expect(onUpdate).toBeCalledTimes(2)
+  })
+})
diff --git a/packages/react-context-selector/tsconfig.json b/packages/react-context-selector/tsconfig.json
new file mode 100644
index 0000000000..6908043d43
--- /dev/null
+++ b/packages/react-context-selector/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../../build/tsconfig.common",
+  "compilerOptions": {
+    "composite": true,
+    "outDir": "dist/dts",
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedParameters": true,
+    "strictNullChecks": true
+  },
+  "include": ["src", "test"],
+  "references": []
+}
diff --git a/packages/react-proptypes/package.json b/packages/react-proptypes/package.json
index b2c198db68..268201b061 100644
--- a/packages/react-proptypes/package.json
+++ b/packages/react-proptypes/package.json
@@ -1,16 +1,16 @@
 {
   "name": "@fluentui/react-proptypes",
   "description": "Set of custom reusable PropTypes for React components, some of them are specific for Fluent UI.",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "author": "Oleksandr Fediashov <olfedias@microsoft.com>",
   "bugs": "https://github.com/microsoft/fluent-ui-react/issues",
   "dependencies": {
-    "@babel/runtime": "^7.1.2",
+    "@babel/runtime": "^7.7.6",
     "lodash": "^4.17.15",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "@fluentui/internal-tooling": "^0.43.0",
+    "@fluentui/internal-tooling": "^0.44.0",
     "lerna-alias": "^3.0.3-0"
   },
   "files": [
diff --git a/packages/react-proptypes/src/index.ts b/packages/react-proptypes/src/index.ts
index 714b9df0e4..90f5a41c8e 100644
--- a/packages/react-proptypes/src/index.ts
+++ b/packages/react-proptypes/src/index.ts
@@ -13,6 +13,8 @@ const typeOf = (x: any) => Object.prototype.toString.call(x)
 export const domNode = (props: ObjectOf<any>, propName: string) => {
   // skip if prop is undefined
   if (props[propName] === undefined) return undefined
+  // skip if prop is null
+  if (props[propName] === null) return null
   // skip if prop is valid
   if (props[propName] instanceof Element) return undefined
 
@@ -482,7 +484,12 @@ export const size = PropTypes.oneOf<
   'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest'
 >(['smallest', 'smaller', 'small', 'medium', 'large', 'larger', 'largest'])
 
-export const align = PropTypes.oneOf(['start', 'end', 'center', 'justify'])
+export const align = PropTypes.oneOf<'start' | 'end' | 'center' | 'justify'>([
+  'start',
+  'end',
+  'center',
+  'justify',
+])
 
 export const animation = PropTypes.oneOfType([
   // Validator is broken in the latest @react/types
@@ -531,4 +538,7 @@ export const design = PropTypes.shape({
 })
 
 /** A checker that matches the React.Ref type. */
-export const ref = PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+export const ref = PropTypes.oneOfType([
+  PropTypes.func,
+  PropTypes.object as PropTypes.Validator<{ current: any }>,
+])
diff --git a/packages/react-theming/package.json b/packages/react-theming/package.json
index e54f81e390..ad580fb563 100644
--- a/packages/react-theming/package.json
+++ b/packages/react-theming/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-theming",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "description": "> TODO: description",
   "homepage": "https://github.com/microsoft/fluent-ui#readme",
   "bugs": {
@@ -37,7 +37,7 @@
     "jss-preset-default": "^10.0.0"
   },
   "devDependencies": {
-    "@fluentui/scripts": "^0.43.0",
+    "@fluentui/scripts": "^0.44.0",
     "@types/jss": "^9.5.8",
     "@types/react": "^16.8.10",
     "react": "^16.8.0"
diff --git a/packages/react/package.json b/packages/react/package.json
index 09f1eacbd0..c17e5dc8ec 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,18 +1,19 @@
 {
   "name": "@fluentui/react",
   "description": "A themable React component library.",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "author": "Levi Thomason <me@levithomason.com>",
   "bugs": "https://github.com/microsoft/fluent-ui-react/issues",
   "dependencies": {
-    "@babel/runtime": "^7.1.2",
-    "@fluentui/accessibility": "^0.43.0",
-    "@fluentui/styles": "^0.43.0",
-    "@fluentui/react-bindings": "^0.43.0",
-    "@fluentui/react-component-event-listener": "^0.43.0",
-    "@fluentui/react-component-nesting-registry": "^0.43.0",
-    "@fluentui/react-component-ref": "^0.43.0",
-    "@fluentui/react-proptypes": "^0.43.0",
+    "@babel/runtime": "^7.7.6",
+    "@fluentui/accessibility": "^0.44.0",
+    "@fluentui/react-bindings": "^0.44.0",
+    "@fluentui/react-component-event-listener": "^0.44.0",
+    "@fluentui/react-component-nesting-registry": "^0.44.0",
+    "@fluentui/react-context-selector": "^0.44.0",
+    "@fluentui/react-component-ref": "^0.44.0",
+    "@fluentui/react-proptypes": "^0.44.0",
+    "@fluentui/styles": "^0.44.0",
     "classnames": "^2.2.6",
     "downshift": "3.2.14",
     "fast-memoize": "^2.5.1",
@@ -30,7 +31,7 @@
     "react-transition-group": "^4.3.0"
   },
   "devDependencies": {
-    "@fluentui/internal-tooling": "^0.43.0",
+    "@fluentui/internal-tooling": "^0.44.0",
     "@types/classnames": "^2.2.9",
     "@types/faker": "^4.1.3",
     "@types/simulant": "^0.2.0",
diff --git a/packages/react/src/components/Accordion/AccordionTitle.tsx b/packages/react/src/components/Accordion/AccordionTitle.tsx
index c02647ca95..b3d7f047ab 100644
--- a/packages/react/src/components/Accordion/AccordionTitle.tsx
+++ b/packages/react/src/components/Accordion/AccordionTitle.tsx
@@ -38,6 +38,9 @@ export interface AccordionTitleProps
   /** If at least one panel needs to stay active and this title does not correspond to the last active one. */
   canBeCollapsed?: boolean
 
+  /** An accordion title can show it is currently unable to be interacted with. */
+  disabled?: boolean
+
   /** AccordionTitle index inside Accordion. */
   index?: number
 
@@ -78,6 +81,7 @@ class AccordionTitle extends UIComponent<WithAsProp<AccordionTitleProps>, any> {
     active: PropTypes.bool,
     contentRef: customPropTypes.ref,
     canBeCollapsed: PropTypes.bool,
+    disabled: PropTypes.bool,
     index: PropTypes.number,
     onClick: PropTypes.func,
     indicator: customPropTypes.itemShorthand,
@@ -97,7 +101,9 @@ class AccordionTitle extends UIComponent<WithAsProp<AccordionTitleProps>, any> {
   }
 
   handleClick = (e: React.SyntheticEvent) => {
-    _.invoke(this.props, 'onClick', e, this.props)
+    if (!this.props.disabled) {
+      _.invoke(this.props, 'onClick', e, this.props)
+    }
   }
 
   handleFocus = (e: React.SyntheticEvent) => {
diff --git a/packages/react/src/components/Animation/Animation.tsx b/packages/react/src/components/Animation/Animation.tsx
index cc586f87d5..1457facb8b 100644
--- a/packages/react/src/components/Animation/Animation.tsx
+++ b/packages/react/src/components/Animation/Animation.tsx
@@ -1,26 +1,35 @@
-import * as PropTypes from 'prop-types'
-import * as React from 'react'
+import {
+  ComponentAnimationProp,
+  getUnhandledProps,
+  unstable_createAnimationStyles as createAnimationStyles,
+  unstable_calculateAnimationTimeout as calculateAnimationTimeout,
+  unstable_getStyles as getStyles,
+  useTelemetry,
+} from '@fluentui/react-bindings'
 import cx from 'classnames'
 import * as _ from 'lodash'
+import * as PropTypes from 'prop-types'
+import * as React from 'react'
+// @ts-ignore
+import { ThemeContext } from 'react-fela'
 import { Transition } from 'react-transition-group'
 
 import {
-  UIComponent,
   childrenExist,
   StyledComponentProps,
   commonPropTypes,
-  ShorthandFactory,
+  ChildrenComponentProps,
 } from '../../utils'
-import { ComponentEventHandler } from '../../types'
+import { ComponentEventHandler, ProviderContextPrepared } from '../../types'
 
 export type AnimationChildrenProp = (props: { classes: string }) => React.ReactNode
 
-export interface AnimationProps extends StyledComponentProps {
+export interface AnimationProps
+  extends StyledComponentProps,
+    ChildrenComponentProps<AnimationChildrenProp | React.ReactChild> {
   /** Additional CSS class name(s) to apply.  */
   className?: string
 
-  children: AnimationChildrenProp | React.ReactChild
-
   /** The name for the animation that should be applied, defined in the theme. */
   name?: string
 
@@ -139,92 +148,162 @@ export interface AnimationProps extends StyledComponentProps {
 /**
  * An Animation provides animation effects to rendered elements.
  */
-class Animation extends UIComponent<AnimationProps, any> {
-  static create: ShorthandFactory<AnimationProps>
-
-  static className = 'ui-animation'
-
-  static displayName = 'Animation'
-
-  static propTypes = {
-    ...commonPropTypes.createCommon({
-      accessibility: false,
-      as: false,
-      content: false,
-      children: false,
-    }),
-    children: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
-    name: PropTypes.string,
-    delay: PropTypes.string,
-    direction: PropTypes.string,
-    duration: PropTypes.string,
-    fillMode: PropTypes.string,
-    iterationCount: PropTypes.string,
-    keyframeParams: PropTypes.object,
-    playState: PropTypes.string,
-    timingFunction: PropTypes.string,
-    visible: PropTypes.bool,
-    appear: PropTypes.bool,
-    mountOnEnter: PropTypes.bool,
-    unmountOnExit: PropTypes.bool,
-    timeout: PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.shape({
-        appear: PropTypes.number,
-        enter: PropTypes.number,
-        exit: PropTypes.number,
-      }),
-    ]),
-    onEnter: PropTypes.func,
-    onEntering: PropTypes.func,
-    onEntered: PropTypes.func,
-    onExit: PropTypes.func,
-    onExiting: PropTypes.func,
-    onExited: PropTypes.func,
-  }
-
-  static defaultProps = {
-    timeout: 0,
-  }
-
-  handleAnimationEvent = (
+const Animation: React.FC<AnimationProps> & {
+  className: string
+  handledProps: (keyof AnimationProps)[]
+} = props => {
+  const context: ProviderContextPrepared = React.useContext(ThemeContext)
+  const { setStart, setEnd } = useTelemetry(Animation.displayName, context.telemetry)
+  setStart()
+
+  const {
+    appear,
+    children,
+    className,
+    delay,
+    direction,
+    duration,
+    fillMode,
+    iterationCount,
+    keyframeParams,
+    mountOnEnter,
+    name,
+    playState,
+    timeout,
+    timingFunction,
+    visible,
+    unmountOnExit,
+  } = props
+
+  const handleAnimationEvent = (
     event: 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited',
   ) => () => {
-    _.invoke(this.props, event, null, this.props)
+    _.invoke(props, event, null, props)
   }
 
-  renderComponent({ ElementType, classes, unhandledProps }) {
-    const { children, mountOnEnter, unmountOnExit, timeout, appear, visible } = this.props
-
-    const isChildrenFunction = typeof children === 'function'
-
-    const child =
-      childrenExist(children) &&
-      !isChildrenFunction &&
-      (React.Children.only(children) as React.ReactElement<any>)
-
-    return (
-      <Transition
-        in={visible}
-        appear={appear}
-        mountOnEnter={mountOnEnter}
-        unmountOnExit={unmountOnExit}
-        timeout={timeout}
-        onEnter={this.handleAnimationEvent('onEnter')}
-        onEntering={this.handleAnimationEvent('onEntering')}
-        onEntered={this.handleAnimationEvent('onEntered')}
-        onExit={this.handleAnimationEvent('onExit')}
-        onExiting={this.handleAnimationEvent('onExiting')}
-        onExited={this.handleAnimationEvent('onExited')}
-        {...unhandledProps}
-        className={!isChildrenFunction ? cx(classes.root, (child as any).props.className) : ''}
-      >
-        {isChildrenFunction
-          ? () => (children as AnimationChildrenProp)({ classes: classes.root })
-          : child}
-      </Transition>
-    )
+  const { classes, styles: animationStyles } = React.useMemo(() => {
+    const animation: ComponentAnimationProp = {
+      name,
+      keyframeParams,
+      duration,
+      delay,
+      iterationCount,
+      direction,
+      fillMode,
+      playState,
+      timingFunction,
+    }
+
+    return getStyles({
+      className: Animation.className,
+      displayName: Animation.displayName,
+      props: {
+        className,
+        styles: createAnimationStyles(animation, context.theme),
+      },
+
+      disableAnimations: context.disableAnimations,
+      renderer: context.renderer,
+      rtl: context.rtl,
+      performance: {},
+      saveDebug: _.noop,
+      theme: context.theme,
+    })
+  }, [
+    className,
+    context,
+    name,
+    delay,
+    direction,
+    duration,
+    fillMode,
+    iterationCount,
+    keyframeParams,
+    playState,
+    timingFunction,
+  ])
+
+  if (_.isNil(children)) {
+    setEnd()
+    return null
   }
+
+  const { animationDuration, animationDelay } = animationStyles.root
+  const timeoutResult = timeout || calculateAnimationTimeout(animationDuration, animationDelay) || 0
+
+  const unhandledProps = getUnhandledProps(Animation.handledProps, props)
+
+  const isChildrenFunction = typeof children === 'function'
+  const child =
+    childrenExist(children) &&
+    !isChildrenFunction &&
+    (React.Children.only(children) as React.ReactElement)
+
+  const element = (
+    <Transition
+      in={visible}
+      appear={appear}
+      mountOnEnter={mountOnEnter}
+      unmountOnExit={unmountOnExit}
+      timeout={timeoutResult}
+      onEnter={handleAnimationEvent('onEnter')}
+      onEntering={handleAnimationEvent('onEntering')}
+      onEntered={handleAnimationEvent('onEntered')}
+      onExit={handleAnimationEvent('onExit')}
+      onExiting={handleAnimationEvent('onExiting')}
+      onExited={handleAnimationEvent('onExited')}
+      {...unhandledProps}
+      className={!isChildrenFunction ? cx(classes.root, (child as any)?.props?.className) : ''}
+    >
+      {isChildrenFunction
+        ? () => (children as AnimationChildrenProp)({ classes: classes.root })
+        : child}
+    </Transition>
+  )
+  setEnd()
+
+  return element
+}
+
+Animation.className = 'ui-animation'
+Animation.displayName = 'Animation'
+
+Animation.propTypes = {
+  ...commonPropTypes.createCommon({
+    accessibility: false,
+    as: false,
+    content: false,
+    children: false,
+  }),
+  children: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  name: PropTypes.string,
+  delay: PropTypes.string,
+  direction: PropTypes.string,
+  duration: PropTypes.string,
+  fillMode: PropTypes.string,
+  iterationCount: PropTypes.string,
+  keyframeParams: PropTypes.object,
+  playState: PropTypes.string,
+  timingFunction: PropTypes.string,
+  visible: PropTypes.bool,
+  appear: PropTypes.bool,
+  mountOnEnter: PropTypes.bool,
+  unmountOnExit: PropTypes.bool,
+  timeout: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.shape({
+      appear: PropTypes.number,
+      enter: PropTypes.number,
+      exit: PropTypes.number,
+    }),
+  ]),
+  onEnter: PropTypes.func,
+  onEntering: PropTypes.func,
+  onEntered: PropTypes.func,
+  onExit: PropTypes.func,
+  onExiting: PropTypes.func,
+  onExited: PropTypes.func,
 }
+Animation.handledProps = Object.keys(Animation.propTypes) as any
 
 export default Animation
diff --git a/packages/react/src/components/Carousel/Carousel.tsx b/packages/react/src/components/Carousel/Carousel.tsx
index acf5e858ba..6e8f208170 100644
--- a/packages/react/src/components/Carousel/Carousel.tsx
+++ b/packages/react/src/components/Carousel/Carousel.tsx
@@ -3,7 +3,9 @@ import { Accessibility, carouselBehavior } from '@fluentui/accessibility'
 import * as React from 'react'
 import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
+import cx from 'classnames'
 import { Ref } from '@fluentui/react-component-ref'
+import Animation from '../Animation/Animation'
 
 import {
   UIComponentProps,
@@ -15,10 +17,12 @@ import {
   ChildrenComponentProps,
   getOrGenerateIdFromShorthand,
   AutoControlledComponent,
+  isFromKeyboard,
 } from '../../utils'
 import {
   WithAsProp,
   withSafeTypeForAs,
+  DebounceResultFn,
   ShorthandCollection,
   ShorthandValue,
   ComponentEventHandler,
@@ -108,8 +112,11 @@ export interface CarouselProps extends UIComponentProps, ChildrenComponentProps
 
 export interface CarouselState {
   activeIndex: number
+  prevActiveIndex: number
   ariaLiveOn: boolean
   itemIds: string[]
+  shouldFocusContainer: boolean
+  isFromKeyboard: boolean
 }
 
 class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, CarouselState> {
@@ -200,13 +207,20 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
   }
 
   getInitialAutoControlledState(): CarouselState {
-    return { activeIndex: 0, ariaLiveOn: false, itemIds: [] as string[] }
+    return {
+      activeIndex: 0,
+      prevActiveIndex: -1,
+      ariaLiveOn: false,
+      itemIds: [] as string[],
+      shouldFocusContainer: false,
+      isFromKeyboard: false,
+    }
   }
 
   itemRefs = [] as React.RefObject<HTMLElement>[]
   paddleNextRef = React.createRef<HTMLElement>()
   paddlePreviousRef = React.createRef<HTMLElement>()
-  focusItemAtIndex = _.debounce((index: number) => {
+  focusItemAtIndex: DebounceResultFn<(index: number) => void> = _.debounce((index: number) => {
     this.itemRefs[index].current.focus()
   }, 400)
 
@@ -230,6 +244,7 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
     }
 
     this.setState({
+      prevActiveIndex: this.state.activeIndex,
       activeIndex,
     })
 
@@ -240,17 +255,36 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
     }
   }
 
-  renderContent = (accessibility, styles, unhandledProps) => {
-    const { getItemPositionText, items } = this.props
-    const { activeIndex, itemIds } = this.state
+  overrideItemProps = predefinedProps => ({
+    onFocus: (e, itemProps) => {
+      this.setState({
+        shouldFocusContainer: e.currentTarget === e.target,
+        isFromKeyboard: isFromKeyboard(),
+      })
+      _.invoke(predefinedProps, 'onFocus', e, itemProps)
+    },
+    onBlur: (e, itemProps) => {
+      this.setState({
+        shouldFocusContainer: e.currentTarget.contains(e.relatedTarget),
+        isFromKeyboard: false,
+      })
+      _.invoke(predefinedProps, 'onBlur', e, itemProps)
+    },
+  })
+
+  renderContent = (accessibility, classes, unhandledProps) => {
+    const { getItemPositionText, items, circular } = this.props
+    const { activeIndex, itemIds, prevActiveIndex } = this.state
 
     this.itemRefs = []
 
     return (
-      <div style={styles.itemsContainerWrapper} {...accessibility.attributes.itemsContainerWrapper}>
+      <div
+        className={classes.itemsContainerWrapper}
+        {...accessibility.attributes.itemsContainerWrapper}
+      >
         <div
-          className={Carousel.slotClassNames.itemsContainer}
-          style={styles.itemsContainer}
+          className={cx(Carousel.slotClassNames.itemsContainer, classes.itemsContainer)}          
           {...accessibility.attributes.itemsContainer}
           {...applyAccessibilityKeyHandlers(
             accessibility.keyHandlers.itemsContainer,
@@ -261,19 +295,49 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
             items.map((item, index) => {
               const itemRef = React.createRef<HTMLElement>()
               this.itemRefs.push(itemRef)
+              const active = activeIndex === index
+              let slideToNext = prevActiveIndex < activeIndex
+
+              const initialMounting = prevActiveIndex === -1
+
+              if (circular && prevActiveIndex === items.length - 1 && activeIndex === 0) {
+                slideToNext = true
+              } else if (circular && prevActiveIndex === 0 && activeIndex === items.length - 1) {
+                slideToNext = false
+              }
+
               return (
-                <Ref key={item['key'] || index} innerRef={itemRef}>
-                  {CarouselItem.create(item, {
-                    defaultProps: () => ({
-                      active: activeIndex === index,
-                      id: itemIds[index],
-                      navigation: !!this.props.navigation,
-                      ...(getItemPositionText && {
-                        itemPositionText: getItemPositionText(index, items.length),
+                <Animation
+                  key={item['key'] || index}
+                  mountOnEnter
+                  unmountOnExit
+                  visible={active}
+                  name={
+                    initialMounting
+                      ? ''
+                      : active
+                      ? slideToNext
+                        ? 'carousel-slide-to-next-enter'
+                        : 'carousel-slide-to-previous-enter'
+                      : slideToNext
+                      ? 'carousel-slide-to-next-exit'
+                      : 'carousel-slide-to-previous-exit'
+                  }
+                >
+                  <Ref innerRef={itemRef}>
+                    {CarouselItem.create(item, {
+                      defaultProps: () => ({
+                        active,
+                        id: itemIds[index],
+                        navigation: !!this.props.navigation,
+                        ...(getItemPositionText && {
+                          itemPositionText: getItemPositionText(index, items.length),
+                        }),
                       }),
-                    }),
-                  })}
-                </Ref>
+                      overrideProps: this.overrideItemProps,
+                    })}
+                  </Ref>
+                </Animation>
               )
             })}
         </div>
@@ -411,7 +475,7 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
           children
         ) : (
           <>
-            {this.renderContent(accessibility, styles, unhandledProps)}
+            {this.renderContent(accessibility, classes, unhandledProps)}
             {this.renderPaddles(accessibility, styles)}
             {this.renderNavigation()}
           </>
diff --git a/packages/react/src/components/Chat/Chat.tsx b/packages/react/src/components/Chat/Chat.tsx
index ee3c990b26..349f97d21f 100644
--- a/packages/react/src/components/Chat/Chat.tsx
+++ b/packages/react/src/components/Chat/Chat.tsx
@@ -1,20 +1,35 @@
-import { Accessibility, chatBehavior } from '@fluentui/accessibility'
+import { Accessibility, chatBehavior, ChatBehaviorProps } from '@fluentui/accessibility'
+import {
+  getElementType,
+  getUnhandledProps,
+  useAccessibility,
+  useStyles,
+  useTelemetry,
+} from '@fluentui/react-bindings'
 import * as customPropTypes from '@fluentui/react-proptypes'
 import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
+// @ts-ignore
+import { ThemeContext } from 'react-fela'
 
 import {
   childrenExist,
-  UIComponent,
+  ChildrenComponentProps,
   commonPropTypes,
+  createShorthandFactory,
   rtlTextContainer,
-  applyAccessibilityKeyHandlers,
+  UIComponentProps,
 } from '../../utils'
+import {
+  WithAsProp,
+  withSafeTypeForAs,
+  ShorthandCollection,
+  FluentComponentStaticProps,
+  ProviderContextPrepared,
+} from '../../types'
 import ChatItem, { ChatItemProps } from './ChatItem'
 import ChatMessage from './ChatMessage'
-import { WithAsProp, withSafeTypeForAs, ShorthandCollection } from '../../types'
-import { UIComponentProps, ChildrenComponentProps } from '../../utils/commonPropInterfaces'
 
 export interface ChatSlotClassNames {
   item: string
@@ -22,59 +37,90 @@ export interface ChatSlotClassNames {
 
 export interface ChatProps extends UIComponentProps, ChildrenComponentProps {
   /** Accessibility behavior if overridden by the user. */
-  accessibility?: Accessibility
+  accessibility?: Accessibility<ChatBehaviorProps>
 
   /** Shorthand array of the items inside the chat. */
   items?: ShorthandCollection<ChatItemProps>
 }
 
-class Chat extends UIComponent<WithAsProp<ChatProps>, any> {
-  static displayName = 'Chat'
+export type ChatStylesProps = {}
 
-  static className = 'ui-chat'
+const Chat: React.FC<WithAsProp<ChatProps>> &
+  FluentComponentStaticProps<ChatProps> & {
+    slotClassNames: ChatSlotClassNames
+    Item: typeof ChatItem
+    Message: typeof ChatMessage
+  } = props => {
+  const context: ProviderContextPrepared = React.useContext(ThemeContext)
+  const { setStart, setEnd } = useTelemetry(Chat.displayName, context.telemetry)
+  setStart()
 
-  static slotClassNames: ChatSlotClassNames = {
-    item: `${Chat.className}__item`,
-  }
+  const { accessibility, children, className, design, items, styles, variables } = props
 
-  static propTypes = {
-    ...commonPropTypes.createCommon({
-      content: false,
+  const getA11Props = useAccessibility(accessibility, {
+    debugName: Chat.displayName,
+    rtl: context.rtl,
+  })
+  const { classes } = useStyles<ChatStylesProps>(Chat.displayName, {
+    className: Chat.className,
+    mapPropsToInlineStyles: () => ({
+      className,
+      design,
+      styles,
+      variables,
     }),
-    items: PropTypes.arrayOf(customPropTypes.itemShorthand),
-  }
-
-  static defaultProps = {
-    accessibility: chatBehavior,
-    as: 'ul',
-  }
-
-  static Item = ChatItem
-  static Message = ChatMessage
-
-  renderComponent({ ElementType, classes, accessibility, unhandledProps }) {
-    const { children, items } = this.props
-
-    return (
-      <ElementType
-        className={classes.root}
-        {...accessibility.attributes.root}
-        {...rtlTextContainer.getAttributes({ forElements: [children] })}
-        {...unhandledProps}
-        {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.root, unhandledProps)}
-      >
-        {childrenExist(children)
-          ? children
-          : _.map(items, item =>
-              ChatItem.create(item, {
-                defaultProps: () => ({ className: Chat.slotClassNames.item }),
-              }),
-            )}
-      </ElementType>
-    )
-  }
+    rtl: context.rtl,
+  })
+
+  const ElementType = getElementType(props)
+  const unhandledProps = getUnhandledProps(Chat.handledProps, props)
+
+  const element = getA11Props.unstable_wrapWithFocusZone(
+    <ElementType
+      {...getA11Props('root', {
+        className: classes.root,
+        ...rtlTextContainer.getAttributes({ forElements: [children] }),
+        ...unhandledProps,
+      })}
+    >
+      {childrenExist(children)
+        ? children
+        : _.map(items, item =>
+            ChatItem.create(item, {
+              defaultProps: () => ({ className: Chat.slotClassNames.item }),
+            }),
+          )}
+    </ElementType>,
+  )
+  setEnd()
+
+  return element
 }
 
+Chat.className = 'ui-chat'
+Chat.displayName = 'Chat'
+
+Chat.slotClassNames = {
+  item: `${Chat.className}__item`,
+}
+
+Chat.defaultProps = {
+  accessibility: chatBehavior,
+  as: 'ul',
+}
+Chat.propTypes = {
+  ...commonPropTypes.createCommon({
+    content: false,
+  }),
+  items: PropTypes.arrayOf(customPropTypes.itemShorthand),
+}
+Chat.handledProps = Object.keys(Chat.propTypes) as any
+
+Chat.Item = ChatItem
+Chat.Message = ChatMessage
+
+Chat.create = createShorthandFactory({ Component: Chat })
+
 /**
  * A Chat displays messages from a conversation between multiple users.
  */
diff --git a/packages/react/src/components/Chat/ChatItem.tsx b/packages/react/src/components/Chat/ChatItem.tsx
index 664b2107dd..f84dbfd8be 100644
--- a/packages/react/src/components/Chat/ChatItem.tsx
+++ b/packages/react/src/components/Chat/ChatItem.tsx
@@ -1,24 +1,34 @@
 import { Accessibility } from '@fluentui/accessibility'
+import {
+  getElementType,
+  getUnhandledProps,
+  useAccessibility,
+  useStyles,
+  useTelemetry,
+} from '@fluentui/react-bindings'
 import * as customPropTypes from '@fluentui/react-proptypes'
-import * as React from 'react'
 import * as PropTypes from 'prop-types'
+import * as React from 'react'
+// @ts-ignore
+import { ThemeContext } from 'react-fela'
 
-import { WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
+import {
+  WithAsProp,
+  ShorthandValue,
+  withSafeTypeForAs,
+  FluentComponentStaticProps,
+  ProviderContextPrepared,
+} from '../../types'
 import {
   childrenExist,
   createShorthandFactory,
-  RenderResultConfig,
-  UIComponent,
   UIComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
   rtlTextContainer,
   getElementProp,
-  ShorthandFactory,
 } from '../../utils'
 import Box, { BoxProps } from '../Box/Box'
-
-import { ComponentSlotStylesPrepared } from '@fluentui/styles'
 import ChatMessage from './ChatMessage'
 
 export interface ChatItemSlotClassNames {
@@ -30,7 +40,7 @@ export interface ChatItemProps extends UIComponentProps, ChildrenComponentProps
   /**
    * Accessibility behavior if overridden by the user.
    */
-  accessibility?: Accessibility
+  accessibility?: Accessibility<never>
 
   /** Controls item's relation to other chat items. */
   attached?: boolean | 'top' | 'bottom'
@@ -45,108 +55,149 @@ export interface ChatItemProps extends UIComponentProps, ChildrenComponentProps
   message?: ShorthandValue<BoxProps>
 }
 
-class ChatItem extends UIComponent<WithAsProp<ChatItemProps>, any> {
-  static className = 'ui-chat__item'
-  static create: ShorthandFactory<ChatItemProps>
-  static displayName = 'ChatItem'
-  static slotClassNames: ChatItemSlotClassNames
-
-  static propTypes = {
-    ...commonPropTypes.createCommon({ content: false }),
-    attached: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['top', 'bottom'])]),
-    gutter: customPropTypes.itemShorthand,
-    contentPosition: PropTypes.oneOf(['start', 'end']),
-    message: customPropTypes.itemShorthand,
-  }
+export type ChatItemStylesProps = Pick<ChatItemProps, 'attached' | 'contentPosition'>
 
-  static defaultProps = {
-    as: 'li',
-    contentPosition: 'start',
-    attached: false,
+const cloneElementWithCustomProps = (element, props, prop?) => {
+  if (!prop) {
+    return React.cloneElement(element, props)
   }
+  return React.cloneElement(element, {
+    [prop]: React.cloneElement(getElementProp(element, prop), props),
+  })
+}
+
+const ChatItem: React.FC<WithAsProp<ChatItemProps>> &
+  FluentComponentStaticProps<ChatItemProps> & {
+    slotClassNames: ChatItemSlotClassNames
+  } = props => {
+  const context: ProviderContextPrepared = React.useContext(ThemeContext)
+  const { setStart, setEnd } = useTelemetry(ChatItem.displayName, context.telemetry)
+  setStart()
 
-  renderComponent({
+  const {
     accessibility,
-    ElementType,
-    classes,
-    unhandledProps,
+    attached,
+    children,
+    className,
+    contentPosition,
+    design,
+    gutter,
+    message,
     styles,
-  }: RenderResultConfig<ChatItemProps>) {
-    const { children } = this.props
-
-    return (
-      <ElementType
-        {...rtlTextContainer.getAttributes({ forElements: [children] })}
-        {...accessibility.attributes.root}
-        {...unhandledProps}
-        className={classes.root}
-      >
-        {childrenExist(children) ? children : this.renderChatItem(styles)}
-      </ElementType>
-    )
-  }
-
-  renderChatItem(styles: ComponentSlotStylesPrepared) {
-    const { gutter, contentPosition } = this.props
-    const gutterElement =
-      gutter &&
-      Box.create(gutter, {
-        defaultProps: () => ({ className: ChatItem.slotClassNames.gutter, styles: styles.gutter }),
-      })
-
-    const messageElement = this.setAttachedPropValueForChatMessage(styles)
-
-    return (
-      <>
-        {contentPosition === 'start' && gutterElement}
-        {messageElement}
-        {contentPosition === 'end' && gutterElement}
-      </>
-    )
-  }
-
-  setAttachedPropValueForChatMessage = styles => {
-    const { message, attached } = this.props
+    variables,
+  } = props
+
+  const getA11Props = useAccessibility(accessibility, {
+    debugName: ChatItem.displayName,
+    rtl: context.rtl,
+  })
+  const { classes, styles: resolvedStyles } = useStyles<ChatItemStylesProps>(ChatItem.displayName, {
+    className: ChatItem.className,
+    mapPropsToStyles: () => ({
+      attached,
+      contentPosition,
+    }),
+    mapPropsToInlineStyles: () => ({
+      className,
+      design,
+      styles,
+      variables,
+    }),
+    rtl: context.rtl,
+  })
+
+  const setAttachedPropValueForChatMessage = () => {
     const messageElement = Box.create(message, {
-      defaultProps: () => ({
-        className: ChatItem.slotClassNames.message,
-        styles: styles.message,
-      }),
+      defaultProps: () =>
+        getA11Props('message', {
+          className: ChatItem.slotClassNames.message,
+          styles: resolvedStyles.message,
+        }),
     })
 
     // the element is ChatMessage
     if (ChatMessage.isTypeOfElement(messageElement)) {
-      return this.cloneElementWithCustomProps(messageElement, { attached })
+      return cloneElementWithCustomProps(messageElement, { attached })
     }
 
     // the children is ChatMessage
     if (ChatMessage.isTypeOfElement(getElementProp(messageElement, 'children'))) {
-      return this.cloneElementWithCustomProps(messageElement, { attached }, 'children')
+      return cloneElementWithCustomProps(messageElement, { attached }, 'children')
     }
 
     // the content is ChatMessage
     if (ChatMessage.isTypeOfElement(getElementProp(messageElement, 'content'))) {
-      return this.cloneElementWithCustomProps(messageElement, { attached }, 'content')
+      return cloneElementWithCustomProps(messageElement, { attached }, 'content')
     }
+
     return messageElement
   }
 
-  cloneElementWithCustomProps = (element, props, prop?) => {
-    if (!prop) {
-      return React.cloneElement(element, props)
-    }
-    return React.cloneElement(element, {
-      [prop]: React.cloneElement(getElementProp(element, prop), props),
+  const renderContent = () => {
+    const gutterElement = Box.create(gutter, {
+      defaultProps: () =>
+        getA11Props('gutter', {
+          className: ChatItem.slotClassNames.gutter,
+          styles: resolvedStyles.gutter,
+        }),
     })
+    const messageElement = setAttachedPropValueForChatMessage()
+
+    return (
+      <>
+        {contentPosition === 'start' && gutterElement}
+        {messageElement}
+        {contentPosition === 'end' && gutterElement}
+      </>
+    )
   }
+
+  const ElementType = getElementType(props)
+  const unhandledProps = getUnhandledProps(ChatItem.handledProps, props)
+
+  const element = (
+    <ElementType
+      {...getA11Props('root', {
+        className: classes.root,
+        ...rtlTextContainer.getAttributes({ forElements: [children] }),
+        ...unhandledProps,
+      })}
+    >
+      {childrenExist(children) ? children : renderContent()}
+    </ElementType>
+  )
+  setEnd()
+
+  return element
 }
 
-ChatItem.create = createShorthandFactory({ Component: ChatItem, mappedProp: 'message' })
+ChatItem.className = 'ui-chat__item'
+ChatItem.displayName = 'ChatItem'
+
 ChatItem.slotClassNames = {
   message: `${ChatItem.className}__message`,
   gutter: `${ChatItem.className}__gutter`,
 }
 
+ChatItem.defaultProps = {
+  as: 'li',
+  contentPosition: 'start',
+  attached: false,
+}
+ChatItem.propTypes = {
+  ...commonPropTypes.createCommon({ content: false }),
+  attached: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.oneOf<'top' | 'bottom'>(['top', 'bottom']),
+  ]),
+  gutter: customPropTypes.itemShorthand,
+  contentPosition: PropTypes.oneOf(['start', 'end']),
+  message: customPropTypes.itemShorthand,
+}
+ChatItem.handledProps = Object.keys(ChatItem.propTypes) as any
+
+ChatItem.create = createShorthandFactory({ Component: ChatItem, mappedProp: 'message' })
+
 /**
  * A ChatItem is container for single entity in Chat (e.g. message, notification, etc).
  */
diff --git a/packages/react/src/components/Chat/ChatMessage.tsx b/packages/react/src/components/Chat/ChatMessage.tsx
index 89851990ae..bf9d054555 100644
--- a/packages/react/src/components/Chat/ChatMessage.tsx
+++ b/packages/react/src/components/Chat/ChatMessage.tsx
@@ -3,27 +3,34 @@ import {
   IS_FOCUSABLE_ATTRIBUTE,
   chatMessageBehavior,
   menuAsToolbarBehavior,
+  ChatMessageBehaviorProps,
 } from '@fluentui/accessibility'
-import * as customPropTypes from '@fluentui/react-proptypes'
+import {
+  getElementType,
+  getUnhandledProps,
+  useAccessibility,
+  useStyles,
+  useTelemetry,
+} from '@fluentui/react-bindings'
 import { Ref } from '@fluentui/react-component-ref'
-import * as React from 'react'
-import * as PropTypes from 'prop-types'
+import * as customPropTypes from '@fluentui/react-proptypes'
 import cx from 'classnames'
 import * as _ from 'lodash'
+import * as PropTypes from 'prop-types'
+import * as React from 'react'
+// @ts-ignore
+import { ThemeContext } from 'react-fela'
+
 import { Popper } from '../../utils/positioner'
 
 import {
   childrenExist,
   createShorthandFactory,
-  RenderResultConfig,
-  UIComponent,
   UIComponentProps,
   ChildrenComponentProps,
   ContentComponentProps,
   commonPropTypes,
   rtlTextContainer,
-  applyAccessibilityKeyHandlers,
-  ShorthandFactory,
 } from '../../utils'
 import {
   WithAsProp,
@@ -31,6 +38,8 @@ import {
   ComponentEventHandler,
   withSafeTypeForAs,
   ShorthandCollection,
+  FluentComponentStaticProps,
+  ProviderContextPrepared,
 } from '../../types'
 
 import Box, { BoxProps } from '../Box/Box'
@@ -40,7 +49,6 @@ import { MenuItemProps } from '../Menu/MenuItem'
 import Text, { TextProps } from '../Text/Text'
 import Reaction, { ReactionProps } from '../Reaction/Reaction'
 import { ReactionGroupProps } from '../Reaction/ReactionGroup'
-import { ComponentSlotStylesPrepared } from '@fluentui/styles'
 
 export interface ChatMessageSlotClassNames {
   actionMenu: string
@@ -56,7 +64,7 @@ export interface ChatMessageProps
     ChildrenComponentProps,
     ContentComponentProps<ShorthandValue<BoxProps>> {
   /** Accessibility behavior if overridden by the user. */
-  accessibility?: Accessibility
+  accessibility?: Accessibility<ChatMessageBehaviorProps>
 
   /** Menu with actions of the message. */
   actionMenu?: ShorthandValue<MenuProps> | ShorthandCollection<MenuItemProps>
@@ -113,116 +121,117 @@ export interface ChatMessageProps
   unstable_overflow?: boolean
 }
 
-export interface ChatMessageState {
-  focused: boolean
-  messageNode: HTMLElement
-}
-
-class ChatMessage extends UIComponent<WithAsProp<ChatMessageProps>, ChatMessageState> {
-  static className = 'ui-chat__message'
-
-  static create: ShorthandFactory<ChatMessageProps>
-
-  static slotClassNames: ChatMessageSlotClassNames
-
-  static displayName = 'ChatMessage'
-
-  static __isChatMessage = true
-
-  static isTypeOfElement = element => _.get(element, `type.__isChatMessage`)
-
-  static propTypes = {
-    ...commonPropTypes.createCommon({ content: 'shorthand' }),
-    actionMenu: customPropTypes.itemShorthand,
-    attached: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['top', 'bottom'])]),
-    author: customPropTypes.itemShorthand,
-    badge: customPropTypes.itemShorthand,
-    badgePosition: PropTypes.oneOf(['start', 'end']),
-    mine: PropTypes.bool,
-    timestamp: customPropTypes.itemShorthand,
-    onBlur: PropTypes.func,
-    onFocus: PropTypes.func,
-    onMouseEnter: PropTypes.func,
-    positionActionMenu: PropTypes.bool,
-    reactionGroup: PropTypes.oneOfType([
-      customPropTypes.collectionShorthand,
-      customPropTypes.itemShorthand,
-    ]),
-    reactionGroupPosition: PropTypes.oneOf(['start', 'end']),
-    unstable_overflow: PropTypes.bool,
-  }
-
-  static defaultProps = {
-    accessibility: chatMessageBehavior,
-    as: 'div',
-    badgePosition: 'end',
-    positionActionMenu: true,
-    reactionGroupPosition: 'start',
-  }
-
-  updateActionsMenuPosition = () => {}
-
-  state = {
-    focused: false,
-    messageNode: null,
-  }
-
-  menuRef = React.createRef<HTMLElement>()
+export type ChatMessageStylesProps = Pick<
+  ChatMessageProps,
+  'attached' | 'badgePosition' | 'mine'
+> & { focused: boolean; hasBadge: boolean; hasReactionGroup: boolean }
+
+const ChatMessage: React.FC<WithAsProp<ChatMessageProps>> &
+  FluentComponentStaticProps<ChatMessageProps> & {
+    __isChatMessage: boolean
+    isTypeOfElement: Function
+    slotClassNames: ChatMessageSlotClassNames
+  } = props => {
+  const context: ProviderContextPrepared = React.useContext(ThemeContext)
+  const { setStart, setEnd } = useTelemetry(ChatMessage.displayName, context.telemetry)
+  setStart()
+
+  const {
+    accessibility,
+    actionMenu,
+    attached,
+    author,
+    badge,
+    badgePosition,
+    children,
+    className,
+    content,
+    design,
+    mine,
+    positionActionMenu,
+    reactionGroup,
+    reactionGroupPosition,
+    timestamp,
+    styles,
+    variables,
+    unstable_overflow: overflow,
+  } = props
+
+  const [focused, setFocused] = React.useState<boolean>(false)
+  const [messageNode, setMessageNode] = React.useState<HTMLElement | null>(null)
+
+  const menuRef = React.useRef<HTMLElement>()
+  const updateActionsMenuPosition = React.useRef<(() => void) | null>(null)
+
+  const getA11Props = useAccessibility(accessibility, {
+    actionHandlers: {
+      // prevents default FocusZone behavior, e.g., in ChatMessageBehavior, it prevents FocusZone from using arrow keys
+      // as navigation (only Tab key should work)
+      preventDefault: event => {
+        // preventDefault only if event coming from inside the message
+        if (event.currentTarget !== event.target) {
+          event.preventDefault()
+        }
+      },
 
-  actionHandlers = {
-    // prevents default FocusZone behavior, e.g., in ChatMessageBehavior, it prevents FocusZone from using arrow keys
-    // as navigation (only Tab key should work)
-    preventDefault: event => {
-      // preventDefault only if event coming from inside the message
-      if (event.currentTarget !== event.target) {
-        event.preventDefault()
-      }
+      focus: event => {
+        if (messageNode) {
+          messageNode.focus()
+          event.stopPropagation()
+        }
+      },
     },
-
-    focus: event => {
-      if (this.state.messageNode) {
-        this.state.messageNode.focus()
-        event.stopPropagation()
-      }
+  })
+  const { classes, styles: resolvedStyles } = useStyles<ChatMessageStylesProps>(
+    ChatMessage.displayName,
+    {
+      className: ChatMessage.className,
+      mapPropsToStyles: () => ({
+        attached,
+        badgePosition,
+        focused,
+        mine,
+        hasBadge: !!badge,
+        hasReactionGroup: !!reactionGroup,
+      }),
+      mapPropsToInlineStyles: () => ({
+        className,
+        design,
+        styles,
+        variables,
+      }),
+      rtl: context.rtl,
     },
-  }
+  )
 
-  handleFocus = (e: React.SyntheticEvent) => {
-    this.updateActionsMenuPosition()
+  const handleFocus = (e: React.SyntheticEvent) => {
+    _.invoke(updateActionsMenuPosition, 'current')
 
-    this.setState({ focused: true })
-    _.invoke(this.props, 'onFocus', e, this.props)
+    setFocused(true)
+    _.invoke(props, 'onFocus', e, props)
   }
 
-  handleBlur = (e: React.SyntheticEvent) => {
-    // `this.state.focused` controls is focused the whole `ChatMessage` or any of its children. When we're navigating
+  const handleBlur = (e: React.SyntheticEvent) => {
+    // `focused` controls is focused the whole `ChatMessage` or any of its children. When we're navigating
     // with keyboard the focused element will be changed and there is no way to use `:focus` selector
     const shouldPreserveFocusState = _.invoke(e, 'currentTarget.contains', (e as any).relatedTarget)
 
-    this.setState({ focused: shouldPreserveFocusState })
-    _.invoke(this.props, 'onBlur', e, this.props)
+    setFocused(shouldPreserveFocusState)
+    _.invoke(props, 'onBlur', e, props)
   }
 
-  handleMouseEnter = (e: React.SyntheticEvent) => {
-    this.updateActionsMenuPosition()
-    _.invoke(this.props, 'onMouseEnter', e, this.props)
+  const handleMouseEnter = (e: React.SyntheticEvent) => {
+    _.invoke(updateActionsMenuPosition, 'current')
+    _.invoke(props, 'onMouseEnter', e, props)
   }
 
-  handleMessageRef = (node: HTMLElement) => this.setState({ messageNode: node })
-
-  renderActionMenu(
-    actionMenu: ChatMessageProps['actionMenu'],
-    styles: ComponentSlotStylesPrepared,
-  ) {
-    const { unstable_overflow: overflow, positionActionMenu } = this.props
-    const { messageNode } = this.state
-
+  const renderActionMenu = () => {
     const actionMenuElement = Menu.create(actionMenu, {
       defaultProps: () => ({
         [IS_FOCUSABLE_ATTRIBUTE]: true,
         accessibility: menuAsToolbarBehavior,
         className: ChatMessage.slotClassNames.actionMenu,
-        styles: styles.actionMenu,
+        styles: resolvedStyles.actionMenu,
       }),
     })
 
@@ -231,7 +240,7 @@ class ChatMessage extends UIComponent<WithAsProp<ChatMessageProps>, ChatMessageS
     }
 
     const menuRect: DOMRect = (positionActionMenu &&
-      _.invoke(this.menuRef.current, 'getBoundingClientRect')) || {
+      _.invoke(menuRef.current, 'getBoundingClientRect')) || {
       height: 0,
     }
     const messageRect: DOMRect = (positionActionMenu &&
@@ -266,85 +275,72 @@ class ChatMessage extends UIComponent<WithAsProp<ChatMessageProps>, ChatMessageS
         targetRef={messageNode}
       >
         {({ scheduleUpdate }) => {
-          this.updateActionsMenuPosition = scheduleUpdate
+          updateActionsMenuPosition.current = scheduleUpdate
 
-          return <Ref innerRef={this.menuRef}>{actionMenuElement}</Ref>
+          return <Ref innerRef={menuRef}>{actionMenuElement}</Ref>
         }}
       </Popper>
     )
   }
 
-  renderComponent({
-    ElementType,
-    classes,
-    accessibility,
-    unhandledProps,
-    styles,
-  }: RenderResultConfig<ChatMessageProps>) {
-    const {
-      actionMenu,
-      author,
-      badge,
-      badgePosition,
-      children,
-      content,
-      timestamp,
-      reactionGroup,
-      reactionGroupPosition,
-    } = this.props
-    const childrenPropExists = childrenExist(children)
-    const className = childrenPropExists ? cx(classes.root, classes.content) : classes.root
-    const badgeElement = Label.create(badge, {
-      defaultProps: () => ({
-        className: ChatMessage.slotClassNames.badge,
-        styles: styles.badge,
-      }),
-    })
-
-    const reactionGroupElement = Reaction.Group.create(reactionGroup, {
-      defaultProps: () => ({
-        className: ChatMessage.slotClassNames.reactionGroup,
-        styles: styles.reactionGroup,
-      }),
-    })
-
-    const actionMenuElement = this.renderActionMenu(actionMenu, styles)
-
-    const authorElement = Text.create(author, {
-      defaultProps: () => ({
-        size: 'small',
-        styles: styles.author,
-        className: ChatMessage.slotClassNames.author,
-      }),
-    })
-
-    const timestampElement = Text.create(timestamp, {
-      defaultProps: () => ({
-        size: 'small',
-        styles: styles.timestamp,
-        timestamp: true,
-        className: ChatMessage.slotClassNames.timestamp,
-      }),
-    })
-
-    const messageContent = Box.create(content, {
-      defaultProps: () => ({
-        className: ChatMessage.slotClassNames.content,
-        styles: styles.content,
-      }),
-    })
-
-    return (
-      <Ref innerRef={this.handleMessageRef}>
+  const childrenPropExists = childrenExist(children)
+  const rootClasses = childrenPropExists ? cx(classes.root, classes.content) : classes.root
+
+  const ElementType = getElementType(props)
+  const unhandledProps = getUnhandledProps(ChatMessage.handledProps, props)
+
+  const badgeElement = Label.create(badge, {
+    defaultProps: () => ({
+      className: ChatMessage.slotClassNames.badge,
+      styles: resolvedStyles.badge,
+    }),
+  })
+
+  const reactionGroupElement = Reaction.Group.create(reactionGroup, {
+    defaultProps: () => ({
+      className: ChatMessage.slotClassNames.reactionGroup,
+      styles: resolvedStyles.reactionGroup,
+    }),
+  })
+
+  const actionMenuElement = renderActionMenu()
+
+  const authorElement = Text.create(author, {
+    defaultProps: () => ({
+      size: 'small',
+      styles: resolvedStyles.author,
+      className: ChatMessage.slotClassNames.author,
+    }),
+  })
+
+  const timestampElement = Text.create(timestamp, {
+    defaultProps: () => ({
+      size: 'small',
+      styles: resolvedStyles.timestamp,
+      timestamp: true,
+      className: ChatMessage.slotClassNames.timestamp,
+    }),
+  })
+
+  const messageContent = Box.create(content, {
+    defaultProps: () => ({
+      className: ChatMessage.slotClassNames.content,
+      styles: resolvedStyles.content,
+    }),
+  })
+
+  const element = (
+    <Ref innerRef={setMessageNode}>
+      {getA11Props.unstable_wrapWithFocusZone(
         <ElementType
-          onBlur={this.handleBlur}
-          onFocus={this.handleFocus}
-          onMouseEnter={this.handleMouseEnter}
-          className={className}
-          {...accessibility.attributes.root}
-          {...unhandledProps}
-          {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.root, unhandledProps)}
-          {...rtlTextContainer.getAttributes({ forElements: [children] })}
+          {...getA11Props('root', {
+            className: rootClasses,
+            onBlur: handleBlur,
+            onFocus: handleFocus,
+            onMouseEnter: handleMouseEnter,
+            ...rtlTextContainer.getAttributes({ forElements: [children] }),
+            ...unhandledProps,
+          })}
         >
           {childrenPropExists ? (
             children
@@ -360,12 +356,53 @@ class ChatMessage extends UIComponent<WithAsProp<ChatMessageProps>, ChatMessageS
               {badgePosition === 'end' && badgeElement}
             </>
           )}
-        </ElementType>
-      </Ref>
-    )
-  }
+        </ElementType>,
+      )}
+    </Ref>
+  )
+  setEnd()
+
+  return element
 }
 
+ChatMessage.className = 'ui-chat__message'
+ChatMessage.displayName = 'ChatMessage'
+
+ChatMessage.defaultProps = {
+  accessibility: chatMessageBehavior,
+  badgePosition: 'end',
+  positionActionMenu: true,
+  reactionGroupPosition: 'start',
+}
+ChatMessage.propTypes = {
+  ...commonPropTypes.createCommon({ content: 'shorthand' }),
+  actionMenu: customPropTypes.itemShorthand,
+  attached: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.oneOf<'top' | 'bottom'>(['top', 'bottom']),
+  ]),
+  author: customPropTypes.itemShorthand,
+  badge: customPropTypes.itemShorthand,
+  badgePosition: PropTypes.oneOf(['start', 'end']),
+  mine: PropTypes.bool,
+  timestamp: customPropTypes.itemShorthand,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  positionActionMenu: PropTypes.bool,
+  reactionGroup: PropTypes.oneOfType([
+    customPropTypes.collectionShorthand,
+    customPropTypes.itemShorthand,
+  ]),
+  reactionGroupPosition: PropTypes.oneOf(['start', 'end']),
+  unstable_overflow: PropTypes.bool,
+}
+ChatMessage.handledProps = Object.keys(ChatMessage.propTypes) as any
+
+// TODO: remove this magic static
+ChatMessage.__isChatMessage = true
+ChatMessage.isTypeOfElement = element => _.get(element, `type.__isChatMessage`)
+
 ChatMessage.create = createShorthandFactory({ Component: ChatMessage, mappedProp: 'content' })
 ChatMessage.slotClassNames = {
   actionMenu: `${ChatMessage.className}__actions`,
diff --git a/packages/react/src/components/Checkbox/Checkbox.tsx b/packages/react/src/components/Checkbox/Checkbox.tsx
index 8ae819f263..709e65f817 100644
--- a/packages/react/src/components/Checkbox/Checkbox.tsx
+++ b/packages/react/src/components/Checkbox/Checkbox.tsx
@@ -1,19 +1,34 @@
-import { Accessibility, checkboxBehavior } from '@fluentui/accessibility'
+import { Accessibility, checkboxBehavior, CheckboxBehaviorProps } from '@fluentui/accessibility'
+import {
+  getElementType,
+  getUnhandledProps,
+  useAccessibility,
+  useStateManager,
+  useStyles,
+  useTelemetry,
+} from '@fluentui/react-bindings'
 import * as customPropTypes from '@fluentui/react-proptypes'
+import { createCheckboxManager } from '@fluentui/state'
 import * as _ from 'lodash'
-import * as React from 'react'
 import * as PropTypes from 'prop-types'
+import * as React from 'react'
+// @ts-ignore
+import { ThemeContext } from 'react-fela'
 
 import {
-  applyAccessibilityKeyHandlers,
-  AutoControlledComponent,
   createShorthandFactory,
   ChildrenComponentProps,
   commonPropTypes,
   UIComponentProps,
-  ShorthandFactory,
 } from '../../utils'
-import { ComponentEventHandler, WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
+import {
+  ComponentEventHandler,
+  WithAsProp,
+  ShorthandValue,
+  withSafeTypeForAs,
+  ProviderContextPrepared,
+  FluentComponentStaticProps,
+} from '../../types'
 import Icon, { IconProps } from '../Icon/Icon'
 import Text, { TextProps } from '../Text/Text'
 import { SupportedIntrinsicInputProps } from '../../utils/htmlPropsUtils'
@@ -25,7 +40,7 @@ export interface CheckboxSlotClassNames {
 
 export interface CheckboxProps extends UIComponentProps, ChildrenComponentProps {
   /** Accessibility behavior if overridden by the user. */
-  accessibility?: Accessibility
+  accessibility?: Accessibility<CheckboxBehaviorProps>
 
   /** A checkbox can be checked by default. */
   defaultChecked?: SupportedIntrinsicInputProps['defaultChecked']
@@ -63,116 +78,146 @@ export interface CheckboxProps extends UIComponentProps, ChildrenComponentProps
   toggle?: boolean
 }
 
-export interface CheckboxState {
-  checked: CheckboxProps['checked']
-}
-
-class Checkbox extends AutoControlledComponent<WithAsProp<CheckboxProps>, CheckboxState> {
-  static slotClassNames: CheckboxSlotClassNames
-
-  static create: ShorthandFactory<CheckboxProps>
-
-  static displayName = 'Checkbox'
-
-  static className = 'ui-checkbox'
-
-  static propTypes = {
-    ...commonPropTypes.createCommon({
-      content: false,
+const Checkbox: React.FC<WithAsProp<CheckboxProps>> &
+  FluentComponentStaticProps<CheckboxProps> & {
+    slotClassNames: CheckboxSlotClassNames
+  } = props => {
+  const context: ProviderContextPrepared = React.useContext(ThemeContext)
+  const { setStart, setEnd } = useTelemetry(Checkbox.displayName, context.telemetry)
+  setStart()
+
+  const {
+    checked,
+    className,
+    defaultChecked,
+    design,
+    disabled,
+    label,
+    labelPosition,
+    icon,
+    styles,
+    toggle,
+    variables,
+  } = props
+
+  const { state, actions } = useStateManager(createCheckboxManager, {
+    mapPropsToInitialState: () => ({ checked: defaultChecked }),
+    mapPropsToState: () => ({ checked }),
+  })
+  const getA11Props = useAccessibility(props.accessibility, {
+    debugName: Checkbox.displayName,
+    mapPropsToBehavior: () => ({
+      checked: state.checked,
+      disabled,
     }),
-    checked: PropTypes.bool,
-    defaultChecked: PropTypes.bool,
-    disabled: PropTypes.bool,
-    icon: customPropTypes.itemShorthandWithoutJSX,
-    label: customPropTypes.itemShorthand,
-    labelPosition: PropTypes.oneOf(['start', 'end']),
-    onChange: PropTypes.func,
-    onClick: PropTypes.func,
-    toggle: PropTypes.bool,
-  }
-
-  static defaultProps = {
-    accessibility: checkboxBehavior,
-    icon: {},
-    labelPosition: 'end',
-  }
-
-  static autoControlledProps = ['checked']
-
-  actionHandlers = {
-    performClick: (e: any /* TODO: use React.KeyboardEvent */) => {
-      e.preventDefault()
-      this.handleClick(e)
+    actionHandlers: {
+      performClick: (e: React.KeyboardEvent) => {
+        e.preventDefault()
+        handleClick(e)
+      },
     },
-  }
-
-  getInitialAutoControlledState(): CheckboxState {
-    return { checked: false }
-  }
+    rtl: context.rtl,
+  })
+  const { classes, styles: resolvedStyles } = useStyles(Checkbox.displayName, {
+    className: Checkbox.className,
+    mapPropsToStyles: () => ({
+      checked: state.checked,
+      disabled,
+      labelPosition,
+      toggle,
+    }),
+    mapPropsToInlineStyles: () => ({
+      className,
+      design,
+      styles,
+      variables,
+    }),
+    rtl: context.rtl,
+  })
 
-  handleChange = (e: React.ChangeEvent) => {
-    // Checkbox component doesn't present any `input` component in markup, however all of our
-    // components should handle events transparently.
-    const { disabled } = this.props
-    const checked = !this.state.checked
+  const ElementType = getElementType(props)
+  const unhandledProps = getUnhandledProps(Checkbox.handledProps, props)
 
+  const handleChange = (e: React.ChangeEvent) => {
     if (!disabled) {
-      this.setState({ checked })
-      _.invoke(this.props, 'onChange', e, { ...this.props, checked })
+      // Checkbox component doesn't present any `input` component in markup, however all of our
+      // components should handle events transparently.
+      const checked = !state.checked
+
+      actions.toggle(checked)
+      _.invoke(props, 'onChange', e, { ...props, checked })
     }
   }
 
-  handleClick = (e: React.MouseEvent | React.KeyboardEvent) => {
-    const { disabled } = this.props
-    const checked = !this.state.checked
-
+  const handleClick = (e: React.MouseEvent | React.KeyboardEvent) => {
     if (!disabled) {
-      this.setState({ checked })
+      const checked = !state.checked
+      actions.toggle(checked)
 
-      _.invoke(this.props, 'onClick', e, { ...this.props, checked })
-      _.invoke(this.props, 'onChange', e, { ...this.props, checked })
+      _.invoke(props, 'onClick', e, { ...props, checked })
+      _.invoke(props, 'onChange', e, { ...props, checked })
     }
   }
 
-  handleFocus = (e: React.FocusEvent) => {
-    _.invoke(this.props, 'onFocus', e, this.props)
-  }
-
-  renderComponent({ ElementType, classes, unhandledProps, styles, accessibility }) {
-    const { label, labelPosition, icon, toggle } = this.props
-
-    const labelElement = Text.create(label, {
-      defaultProps: () => ({
-        styles: styles.label,
+  const labelElement = Text.create(label, {
+    defaultProps: () =>
+      getA11Props('label', {
+        styles: resolvedStyles.label,
         className: Checkbox.slotClassNames.label,
       }),
-    })
-
-    return (
-      <ElementType
-        className={classes.root}
-        onClick={this.handleClick}
-        onChange={this.handleChange}
-        onFocus={this.handleFocus}
-        {...accessibility.attributes.root}
-        {...unhandledProps}
-        {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.root, unhandledProps)}
-      >
-        {labelPosition === 'start' && labelElement}
-        {Icon.create(icon, {
-          defaultProps: () => ({
-            outline: toggle && !this.state.checked,
+  })
+
+  const element = (
+    <ElementType
+      {...getA11Props('root', {
+        className: classes.root,
+        onClick: handleClick,
+        onChange: handleChange,
+        ...unhandledProps,
+      })}
+    >
+      {labelPosition === 'start' && labelElement}
+      {Icon.create(icon, {
+        defaultProps: () =>
+          getA11Props('icon', {
+            outline: toggle && !state.checked,
             size: toggle ? 'medium' : 'smaller',
             className: Checkbox.slotClassNames.indicator,
             name: toggle ? 'icon-circle' : 'icon-checkmark',
-            styles: toggle ? styles.toggle : styles.checkbox,
+            styles: toggle ? resolvedStyles.toggle : resolvedStyles.checkbox,
           }),
-        })}
-        {labelPosition === 'end' && labelElement}
-      </ElementType>
-    )
-  }
+      })}
+      {labelPosition === 'end' && labelElement}
+    </ElementType>
+  )
+  setEnd()
+
+  return element
+}
+
+Checkbox.displayName = 'Checkbox'
+Checkbox.className = 'ui-checkbox'
+
+Checkbox.defaultProps = {
+  accessibility: checkboxBehavior,
+  icon: {} as any,
+  labelPosition: 'end',
+}
+Checkbox.propTypes = {
+  ...commonPropTypes.createCommon({
+    content: false,
+  }),
+  checked: PropTypes.bool,
+  defaultChecked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  icon: customPropTypes.itemShorthandWithoutJSX,
+  label: customPropTypes.itemShorthand,
+  labelPosition: PropTypes.oneOf(['start', 'end']),
+  onChange: PropTypes.func,
+  onClick: PropTypes.func,
+  toggle: PropTypes.bool,
 }
+Checkbox.handledProps = Object.keys(Checkbox.propTypes) as any
 
 Checkbox.slotClassNames = {
   label: `${Checkbox.className}__label`,
diff --git a/packages/react/src/components/Debug/Debug.tsx b/packages/react/src/components/Debug/Debug.tsx
index 6c0c3bd3e5..931268e9c9 100644
--- a/packages/react/src/components/Debug/Debug.tsx
+++ b/packages/react/src/components/Debug/Debug.tsx
@@ -1,7 +1,6 @@
 import keyboardKey from 'keyboard-key'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
-import { toRefObject } from '@fluentui/react-component-ref'
 import { EventListener } from '@fluentui/react-component-event-listener'
 
 import { isBrowser } from '../../utils'
@@ -146,22 +145,18 @@ class Debug extends React.Component<DebugProps, DebugState> {
     if (process.env.NODE_ENV !== 'production' && isDebugEnabled) {
       return (
         <>
-          <EventListener
-            targetRef={toRefObject(mountDocument.body)}
-            listener={this.handleKeyDown}
-            type="keydown"
-          />
+          <EventListener listener={this.handleKeyDown} target={mountDocument.body} type="keydown" />
           {isSelecting && (
             <EventListener
-              targetRef={toRefObject(mountDocument.body)}
               listener={this.handleMouseMove}
+              target={mountDocument.body}
               type="mousemove"
             />
           )}
           {isSelecting && fiberNav && fiberNav.domNode && (
             <EventListener
-              targetRef={toRefObject(fiberNav.domNode)}
               listener={this.handleDOMNodeClick}
+              target={fiberNav.domNode}
               type="click"
             />
           )}
diff --git a/packages/react/src/components/Dialog/Dialog.tsx b/packages/react/src/components/Dialog/Dialog.tsx
index 0c20b1ceed..2c3f57c044 100644
--- a/packages/react/src/components/Dialog/Dialog.tsx
+++ b/packages/react/src/components/Dialog/Dialog.tsx
@@ -2,7 +2,7 @@ import { Accessibility, dialogBehavior } from '@fluentui/accessibility'
 import { FocusTrapZoneProps } from '@fluentui/react-bindings'
 import { Unstable_NestingAuto } from '@fluentui/react-component-nesting-registry'
 import { EventListener } from '@fluentui/react-component-event-listener'
-import { Ref, toRefObject } from '@fluentui/react-component-ref'
+import { Ref } from '@fluentui/react-component-ref'
 import * as customPropTypes from '@fluentui/react-proptypes'
 import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
@@ -287,8 +287,6 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
       <Ref innerRef={this.contentRef}>
         <ElementType
           className={classes.root}
-          // it's required to have an `rtl` attribute there as Dialog is rendered outside the main DOM tree
-          dir={rtl ? 'rtl' : undefined}
           {...accessibility.attributes.popup}
           {...unhandledProps}
           {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.popup, unhandledProps)}
@@ -330,7 +328,6 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
       </Ref>
     )
 
-    const targetRef = toRefObject(this.context.target)
     const triggerAccessibility: TriggerAccessibility = {
       attributes: accessibility.attributes.trigger,
       keyHandlers: accessibility.keyHandlers.trigger,
@@ -366,14 +363,14 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
               {closeOnOutsideClick && (
                 <EventListener
                   listener={this.handleOverlayClick}
-                  targetRef={targetRef}
+                  target={this.context.target}
                   type="click"
                   capture
                 />
               )}
               <EventListener
                 listener={this.handleDocumentKeydown(getRefs)}
-                targetRef={targetRef}
+                target={this.context.target}
                 type="keydown"
                 capture
               />
diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx
index 7f04a31599..c44d94c0e3 100644
--- a/packages/react/src/components/Dropdown/Dropdown.tsx
+++ b/packages/react/src/components/Dropdown/Dropdown.tsx
@@ -7,6 +7,7 @@ import cx from 'classnames'
 import * as keyboardKey from 'keyboard-key'
 
 import {
+  DebounceResultFn,
   ShorthandRenderFunction,
   ShorthandValue,
   ComponentEventHandler,
@@ -445,7 +446,7 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
           highlightedIndex={highlightedIndex}
           onStateChange={this.handleStateChange}
           labelId={this.props['aria-labelledby']}
-          environment={this.context.target.defaultView}
+          environment={this.context.target?.defaultView}
           inputId={
             this.props.searchInput && this.props.searchInput['id']
               ? this.props.searchInput['id']
@@ -1371,11 +1372,11 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
     this.clearStartingString()
   }
 
-  clearA11ySelectionMessage = _.debounce(() => {
+  clearA11ySelectionMessage: DebounceResultFn<() => void> = _.debounce(() => {
     this.setState({ a11ySelectionStatus: '' })
   }, Dropdown.a11yStatusCleanupTime)
 
-  clearStartingString = _.debounce(() => {
+  clearStartingString: DebounceResultFn<() => void> = _.debounce(() => {
     this.setState({ startingString: '' })
   }, Dropdown.charKeyPressedCleanupTime)
 }
diff --git a/packages/react/src/components/Flex/FlexItem.tsx b/packages/react/src/components/Flex/FlexItem.tsx
index b34d966925..e71def7610 100644
--- a/packages/react/src/components/Flex/FlexItem.tsx
+++ b/packages/react/src/components/Flex/FlexItem.tsx
@@ -23,7 +23,7 @@ export interface FlexItemProps extends UIComponentProps, ChildrenComponentProps<
   align?: 'auto' | 'start' | 'end' | 'center' | 'baseline' | 'stretch'
 
   /** Defines size of the item. */
-  size?: 'size.half' | 'size.quarter' | 'size.small' | 'size.medium' | 'size.large'
+  size?: 'size.half' | 'size.quarter' | 'size.small' | 'size.medium' | 'size.large' | string
 
   /**
    * Item can fill remaining space of the container.
@@ -65,7 +65,14 @@ class FlexItem extends UIComponent<FlexItemProps> {
     children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
 
     align: PropTypes.oneOf(['auto', 'start', 'end', 'center', 'baseline', 'stretch']),
-    size: PropTypes.oneOf(['size.half', 'size.quarter', 'size.small', 'size.medium', 'size.large']),
+    size: PropTypes.oneOf([
+      'size.half',
+      'size.quarter',
+      'size.small',
+      'size.medium',
+      'size.large',
+      PropTypes.string,
+    ]),
 
     stretch: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
     shrink: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
diff --git a/packages/react/src/components/Icon/Icon.tsx b/packages/react/src/components/Icon/Icon.tsx
index 8e86f8fca3..3150648db8 100644
--- a/packages/react/src/components/Icon/Icon.tsx
+++ b/packages/react/src/components/Icon/Icon.tsx
@@ -1,24 +1,46 @@
-import { Accessibility, iconBehavior } from '@fluentui/accessibility'
-import { callable } from '@fluentui/styles'
+import {
+  Accessibility,
+  AccessibilityAttributes,
+  IconBehaviorProps,
+  iconBehavior,
+} from '@fluentui/accessibility'
 import * as customPropTypes from '@fluentui/react-proptypes'
+import {
+  getElementType,
+  getUnhandledProps,
+  useAccessibility,
+  useStyles,
+  useTelemetry,
+} from '@fluentui/react-bindings'
+import { callable } from '@fluentui/styles'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
+// @ts-ignore
+import { ThemeContext } from 'react-fela'
+
 import {
-  UIComponent,
   createShorthandFactory,
   UIComponentProps,
   commonPropTypes,
   ColorComponentProps,
   SizeValue,
-  ShorthandFactory,
 } from '../../utils'
-import { WithAsProp, withSafeTypeForAs } from '../../types'
+import {
+  FluentComponentStaticProps,
+  ProviderContextPrepared,
+  WithAsProp,
+  withSafeTypeForAs,
+} from '../../types'
 
 export type IconXSpacing = 'none' | 'before' | 'after' | 'both'
 
 export interface IconProps extends UIComponentProps, ColorComponentProps {
+  /** Alternative text. */
+  alt?: string
+  'aria-label'?: AccessibilityAttributes['aria-label']
+
   /** Accessibility behavior if overridden by the user. */
-  accessibility?: Accessibility
+  accessibility?: Accessibility<IconBehaviorProps>
 
   /** Icon can appear with rectangular border. */
   bordered?: boolean
@@ -45,50 +67,102 @@ export interface IconProps extends UIComponentProps, ColorComponentProps {
   xSpacing?: IconXSpacing
 }
 
-class Icon extends UIComponent<WithAsProp<IconProps>, any> {
-  static create: ShorthandFactory<IconProps>
+const Icon: React.FC<WithAsProp<IconProps>> & FluentComponentStaticProps = props => {
+  const context: ProviderContextPrepared = React.useContext(ThemeContext)
+
+  const { setStart, setEnd } = useTelemetry(Icon.displayName, context.telemetry)
+  setStart()
+
+  const {
+    accessibility,
+    alt,
+    'aria-label': ariaLabel,
+    bordered,
+    circular,
+    className,
+    color,
+    disabled,
+    design,
+    name,
+    outline,
+    rotate,
+    size,
+    styles,
+    variables,
+    xSpacing,
+  } = props
+
+  const { icons = {} } = context.theme
+  const maybeIcon = icons[name]
+  const isSvgIcon = maybeIcon && maybeIcon.isSvg
+
+  const getA11Props = useAccessibility(accessibility, {
+    debugName: Icon.displayName,
+    mapPropsToBehavior: () => ({
+      alt,
+      'aria-label': ariaLabel,
+    }),
+    rtl: context.rtl,
+  })
+  const { classes } = useStyles(Icon.displayName, {
+    className: Icon.className,
+    mapPropsToStyles: () => ({
+      bordered,
+      circular,
+      color,
+      disabled,
+      // name is required only for font icons
+      // one can compose the Icon component with FontIcon to handle this if necessary
+      name: isSvgIcon ? undefined : name,
+      outline,
+      rotate,
+      size,
+      xSpacing,
+      isFontIcon: !isSvgIcon,
+      isSvgIcon,
+    }),
+    mapPropsToInlineStyles: () => ({ className, design, styles, variables }),
+    rtl: context.rtl,
+  })
 
-  static className = 'ui-icon'
+  const ElementType = getElementType(props)
+  const unhandledProps = getUnhandledProps(Icon.handledProps, props)
 
-  static displayName = 'Icon'
+  const element = (
+    <ElementType {...getA11Props('root', { className: classes.root, ...unhandledProps })}>
+      {isSvgIcon && callable(maybeIcon.icon)({ classes, rtl: context.rtl, props })}
+    </ElementType>
+  )
+  setEnd()
 
-  static propTypes = {
-    ...commonPropTypes.createCommon({
-      children: false,
-      content: false,
-      color: true,
-    }),
-    bordered: PropTypes.bool,
-    circular: PropTypes.bool,
-    disabled: PropTypes.bool,
-    name: PropTypes.string.isRequired,
-    outline: PropTypes.bool,
-    rotate: PropTypes.number,
-    size: customPropTypes.size,
-    xSpacing: PropTypes.oneOf(['none', 'before', 'after', 'both']),
-  }
-
-  static defaultProps = {
-    as: 'span',
-    size: 'medium',
-    accessibility: iconBehavior,
-    rotate: 0,
-  }
-
-  renderComponent({ ElementType, classes, unhandledProps, accessibility, theme, rtl, styles }) {
-    const { name } = this.props
-    const { icons = {} } = theme || {}
-
-    const maybeIcon = icons[name]
-    const isSvgIcon = maybeIcon && maybeIcon.isSvg
-
-    return (
-      <ElementType className={classes.root} {...accessibility.attributes.root} {...unhandledProps}>
-        {isSvgIcon && callable(maybeIcon.icon)({ classes, rtl, props: this.props })}
-      </ElementType>
-    )
-  }
+  return element
+}
+
+Icon.className = 'ui-icon'
+Icon.displayName = 'Icon'
+Icon.defaultProps = {
+  as: 'span',
+  accessibility: iconBehavior,
+  size: 'medium',
+  rotate: 0,
+}
+
+Icon.propTypes = {
+  ...commonPropTypes.createCommon({
+    children: false,
+    content: false,
+    color: true,
+  }),
+  bordered: PropTypes.bool,
+  circular: PropTypes.bool,
+  disabled: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+  outline: PropTypes.bool,
+  rotate: PropTypes.number,
+  size: customPropTypes.size,
+  xSpacing: PropTypes.oneOf(['none', 'before', 'after', 'both']),
 }
+Icon.handledProps = Object.keys(Icon.propTypes) as any
 
 Icon.create = createShorthandFactory({ Component: Icon, mappedProp: 'name', allowsJSX: false })
 
diff --git a/packages/react/src/components/Label/Label.tsx b/packages/react/src/components/Label/Label.tsx
index 8c9174c0ab..2e57a1f5af 100644
--- a/packages/react/src/components/Label/Label.tsx
+++ b/packages/react/src/components/Label/Label.tsx
@@ -1,27 +1,41 @@
 import { Accessibility } from '@fluentui/accessibility'
+import {
+  getElementType,
+  getUnhandledProps,
+  useAccessibility,
+  useStyles,
+  useTelemetry,
+} from '@fluentui/react-bindings'
 import * as customPropTypes from '@fluentui/react-proptypes'
+import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
+// @ts-ignore
+import { ThemeContext } from 'react-fela'
 
 import {
   childrenExist,
   createShorthandFactory,
   pxToRem,
-  UIComponent,
   UIComponentProps,
   ChildrenComponentProps,
   ContentComponentProps,
   commonPropTypes,
   ColorComponentProps,
   rtlTextContainer,
-  ShorthandFactory,
 } from '../../utils'
 
 import Icon, { IconProps } from '../Icon/Icon'
 import Image, { ImageProps } from '../Image/Image'
 import Layout from '../Layout/Layout'
 
-import { WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
+import {
+  WithAsProp,
+  ShorthandValue,
+  withSafeTypeForAs,
+  FluentComponentStaticProps,
+  ProviderContextPrepared,
+} from '../../types'
 
 export interface LabelProps
   extends UIComponentProps,
@@ -31,7 +45,7 @@ export interface LabelProps
   /**
    * Accessibility behavior if overridden by the user.
    */
-  accessibility?: Accessibility
+  accessibility?: Accessibility<never>
 
   /** A Label can be circular. */
   circular?: boolean
@@ -52,100 +66,142 @@ export interface LabelProps
   imagePosition?: 'start' | 'end'
 }
 
-class Label extends UIComponent<WithAsProp<LabelProps>, any> {
-  static displayName = 'Label'
-
-  static create: ShorthandFactory<LabelProps>
-
-  static className = 'ui-label'
+const Label: React.FC<WithAsProp<LabelProps>> & FluentComponentStaticProps = props => {
+  const context: ProviderContextPrepared = React.useContext(ThemeContext)
+  const { setStart, setEnd } = useTelemetry(Label.displayName, context.telemetry)
+  setStart()
+
+  const {
+    accessibility,
+    children,
+    className,
+    circular,
+    color,
+    content,
+    icon,
+    iconPosition,
+    design,
+    styles,
+    variables,
+    image,
+    imagePosition,
+  } = props
+
+  const getA11Props = useAccessibility(accessibility, {
+    debugName: Label.displayName,
+    rtl: context.rtl,
+  })
+  const { classes, styles: resolvedStyles } = useStyles(Label.displayName, {
+    className: Label.className,
+    mapPropsToStyles: () => ({
+      hasActionableIcon: _.has(icon, 'onClick'),
+      hasImage: !!image,
+      circular,
+      color,
+      imagePosition,
+    }),
+    mapPropsToInlineStyles: () => ({ className, design, styles, variables }),
+    rtl: context.rtl,
+  })
+
+  const handleIconOverrides = (predefinedProps: IconProps) => ({
+    ...(!predefinedProps.xSpacing && {
+      xSpacing: 'none',
+    }),
+  })
+
+  const ElementType = getElementType(props)
+  const unhandledProps = getUnhandledProps(Label.handledProps, props)
+
+  if (childrenExist(children)) {
+    const element = (
+      <ElementType
+        {...getA11Props('root', {
+          className: classes.root,
+          ...rtlTextContainer.getAttributes({ forElements: [children] }),
+          ...unhandledProps,
+        })}
+      >
+        {children}
+      </ElementType>
+    )
+    setEnd()
 
-  static propTypes = {
-    ...commonPropTypes.createCommon({ color: true }),
-    circular: PropTypes.bool,
-    icon: customPropTypes.itemShorthandWithoutJSX,
-    iconPosition: PropTypes.oneOf(['start', 'end']),
-    image: customPropTypes.itemShorthandWithoutJSX,
-    imagePosition: PropTypes.oneOf(['start', 'end']),
-    fluid: PropTypes.bool,
+    return element
   }
 
-  static defaultProps = {
-    as: 'span',
-    imagePosition: 'start',
-    iconPosition: 'end',
-  }
+  const imageElement = Image.create(image, {
+    defaultProps: () => ({
+      styles: resolvedStyles.image,
+    }),
+  })
+  const iconElement = Icon.create(icon, {
+    defaultProps: () => ({
+      styles: resolvedStyles.icon,
+    }),
+    overrideProps: handleIconOverrides,
+  })
+
+  const startImage = imagePosition === 'start' && imageElement
+  const startIcon = iconPosition === 'start' && iconElement
+  const endIcon = iconPosition === 'end' && iconElement
+  const endImage = imagePosition === 'end' && imageElement
+
+  const hasStartElement = startImage || startIcon
+  const hasEndElement = endIcon || endImage
+
+  const element = (
+    <ElementType
+      {...getA11Props('root', {
+        className: classes.root,
+        ...unhandledProps,
+      })}
+    >
+      <Layout
+        start={
+          hasStartElement && (
+            <>
+              {startImage}
+              {startIcon}
+            </>
+          )
+        }
+        main={content}
+        end={
+          hasEndElement && (
+            <>
+              {endIcon}
+              {endImage}
+            </>
+          )
+        }
+        gap={pxToRem(3)}
+      />
+    </ElementType>
+  )
+  setEnd()
+
+  return element
+}
 
-  handleIconOverrides = iconProps => {
-    return {
-      ...(!iconProps.xSpacing && {
-        xSpacing: 'none',
-      }),
-    }
-  }
+Label.displayName = 'Label'
+Label.className = 'ui-label'
+
+Label.propTypes = {
+  ...commonPropTypes.createCommon({ color: true }),
+  circular: PropTypes.bool,
+  icon: customPropTypes.itemShorthandWithoutJSX,
+  iconPosition: PropTypes.oneOf(['start', 'end']),
+  image: customPropTypes.itemShorthandWithoutJSX,
+  imagePosition: PropTypes.oneOf(['start', 'end']),
+  fluid: PropTypes.bool,
+}
+Label.handledProps = Object.keys(Label.propTypes) as any
 
-  renderComponent({ accessibility, ElementType, classes, unhandledProps, variables, styles }) {
-    const { children, content, icon, iconPosition, image, imagePosition } = this.props
-
-    if (childrenExist(children)) {
-      return (
-        <ElementType
-          {...rtlTextContainer.getAttributes({ forElements: [children] })}
-          {...accessibility.attributes.root}
-          {...unhandledProps}
-          className={classes.root}
-        >
-          {children}
-        </ElementType>
-      )
-    }
-
-    const imageElement = Image.create(image, {
-      defaultProps: () => ({
-        styles: styles.image,
-        variables: variables.image,
-      }),
-    })
-    const iconElement = Icon.create(icon, {
-      defaultProps: () => ({
-        styles: styles.icon,
-        variables: variables.icon,
-      }),
-      overrideProps: this.handleIconOverrides,
-    })
-
-    const startImage = imagePosition === 'start' && imageElement
-    const startIcon = iconPosition === 'start' && iconElement
-    const endIcon = iconPosition === 'end' && iconElement
-    const endImage = imagePosition === 'end' && imageElement
-
-    const hasStartElement = startImage || startIcon
-    const hasEndElement = endIcon || endImage
-
-    return (
-      <ElementType {...accessibility.attributes.root} {...unhandledProps} className={classes.root}>
-        <Layout
-          start={
-            hasStartElement && (
-              <>
-                {startImage}
-                {startIcon}
-              </>
-            )
-          }
-          main={content}
-          end={
-            hasEndElement && (
-              <>
-                {endIcon}
-                {endImage}
-              </>
-            )
-          }
-          gap={pxToRem(3)}
-        />
-      </ElementType>
-    )
-  }
+Label.defaultProps = {
+  as: 'span',
+  imagePosition: 'start',
+  iconPosition: 'end',
 }
 
 Label.create = createShorthandFactory({ Component: Label, mappedProp: 'content' })
diff --git a/packages/react/src/components/List/List.tsx b/packages/react/src/components/List/List.tsx
index 10df6c5e41..078c48bb86 100644
--- a/packages/react/src/components/List/List.tsx
+++ b/packages/react/src/components/List/List.tsx
@@ -3,11 +3,10 @@ import {
   getElementType,
   getUnhandledProps,
   useAccessibility,
-  useStateManager,
+  useAutoControlled,
   useStyles,
   useTelemetry,
 } from '@fluentui/react-bindings'
-import { createListManager } from '@fluentui/state'
 import * as customPropTypes from '@fluentui/react-proptypes'
 import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
@@ -32,6 +31,7 @@ import {
   rtlTextContainer,
   createShorthandFactory,
 } from '../../utils'
+import { ListContextProvider, ListContextValue } from './listContext'
 import ListItem, { ListItemProps } from './ListItem'
 
 export interface ListProps extends UIComponentProps, ChildrenComponentProps {
@@ -76,16 +76,6 @@ export interface ListProps extends UIComponentProps, ChildrenComponentProps {
   wrap?: (children: ReactChildren) => React.ReactNode
 }
 
-// List props that are passed to each individual Item props
-const itemProps = [
-  'debug',
-  'selectable',
-  'navigable',
-  'truncateContent',
-  'truncateHeader',
-  'variables',
-]
-
 const List: React.FC<WithAsProp<ListProps>> &
   FluentComponentStaticProps<ListProps> & {
     Item: typeof ListItem
@@ -100,21 +90,22 @@ const List: React.FC<WithAsProp<ListProps>> &
     children,
     className,
     debug,
-    defaultSelectedIndex,
     design,
     horizontal,
-    navigable,
     items,
+    navigable,
     selectable,
-    selectedIndex,
     styles,
+    truncateContent,
+    truncateHeader,
     variables,
     wrap,
   } = props
 
-  const { state, actions } = useStateManager(createListManager, {
-    mapPropsToInitialState: () => ({ selectedIndex: defaultSelectedIndex }),
-    mapPropsToState: () => ({ selectedIndex }),
+  const [selectedIndex, setSelectedIndex] = useAutoControlled({
+    defaultValue: props.defaultSelectedIndex,
+    value: props.selectedIndex,
+    initialValue: -1,
   })
   const getA11Props = useAccessibility(accessibility, {
     debugName: List.displayName,
@@ -132,42 +123,38 @@ const List: React.FC<WithAsProp<ListProps>> &
     rtl: context.rtl,
   })
 
+  const latestProps = React.useRef<ListProps>(props)
+  latestProps.current = props
+
   const ElementType = getElementType(props)
   const unhandledProps = getUnhandledProps(List.handledProps, props)
 
   const hasContent = childrenExist(children) || (items && items.length > 0)
-
-  const handleItemOverrides = (predefinedProps: ListItemProps) => ({
-    onClick: (e: React.SyntheticEvent, itemProps: ListItemProps) => {
-      _.invoke(predefinedProps, 'onClick', e, itemProps)
-
+  const onItemClick = React.useCallback(
+    (e, itemIndex) => {
       if (selectable) {
-        actions.select(itemProps.index)
-        _.invoke(props, 'onSelectedIndexChange', e, {
-          ...props,
-          ...{ selectedIndex: itemProps.index },
+        setSelectedIndex(itemIndex)
+        _.invoke(latestProps.current, 'onSelectedIndexChange', e, {
+          ...latestProps.current,
+          selectedIndex: itemIndex,
         })
       }
     },
-  })
+    [latestProps, setSelectedIndex],
+  )
 
+  const childProps: ListContextValue = {
+    debug,
+    navigable,
+    onItemClick,
+    selectable,
+    selectedIndex,
+    truncateContent,
+    truncateHeader,
+    variables,
+  }
   const renderItems = () =>
-    _.map(items, (item, index) => {
-      const maybeSelectableItemProps = {} as any
-
-      if (selectable) {
-        maybeSelectableItemProps.selected = index === state.selectedIndex
-      }
-
-      return ListItem.create(item, {
-        defaultProps: () => ({
-          ..._.pick(props, itemProps),
-          ...maybeSelectableItemProps,
-          index,
-        }),
-        overrideProps: handleItemOverrides,
-      })
-    })
+    _.map(items, (item, index) => ListItem.create(item, { defaultProps: () => ({ index }) }))
 
   const element = getA11Props.unstable_wrapWithFocusZone(
     <ElementType
@@ -177,7 +164,9 @@ const List: React.FC<WithAsProp<ListProps>> &
         ...unhandledProps,
       })}
     >
-      {hasContent && wrap(childrenExist(children) ? children : renderItems())}
+      <ListContextProvider value={childProps}>
+        {hasContent && wrap(childrenExist(children) ? children : renderItems())}
+      </ListContextProvider>
     </ElementType>,
   )
   setEnd()
diff --git a/packages/react/src/components/List/ListItem.tsx b/packages/react/src/components/List/ListItem.tsx
index 6af5e1aed2..496103f29b 100644
--- a/packages/react/src/components/List/ListItem.tsx
+++ b/packages/react/src/components/List/ListItem.tsx
@@ -6,6 +6,7 @@ import {
   useStyles,
   useTelemetry,
 } from '@fluentui/react-bindings'
+import { useContextSelectors } from '@fluentui/react-context-selector'
 import cx from 'classnames'
 import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
@@ -28,6 +29,7 @@ import {
   commonPropTypes,
   ContentComponentProps,
 } from '../../utils'
+import { ListContext, ListContextSubscribedValue } from './listContext'
 
 export interface ListItemSlotClassNames {
   header: string
@@ -98,13 +100,26 @@ const ListItem: React.FC<WithAsProp<ListItemProps> & { index: number }> &
     headerMedia,
     media,
     styles,
-    debug,
-    navigable,
-    selectable,
-    selected,
-    truncateContent,
-    truncateHeader,
-    variables,
+  } = props
+
+  const parentProps: ListContextSubscribedValue = useContextSelectors(ListContext, {
+    debug: v => v.debug,
+    navigable: v => v.navigable,
+    selectable: v => v.selectable,
+    truncateContent: v => v.truncateContent,
+    truncateHeader: v => v.truncateHeader,
+    variables: v => v.variables,
+    onItemClick: v => v.onItemClick,
+    selected: v => v.selectedIndex === props.index,
+  })
+  const {
+    debug = parentProps.debug,
+    navigable = parentProps.navigable,
+    selectable = parentProps.selectable,
+    selected = parentProps.selected,
+    truncateContent = parentProps.truncateContent,
+    truncateHeader = parentProps.truncateHeader,
+    variables = parentProps.variables,
   } = props
 
   const getA11Props = useAccessibility(accessibility, {
@@ -147,6 +162,7 @@ const ListItem: React.FC<WithAsProp<ListItemProps> & { index: number }> &
 
   const handleClick = (e: React.MouseEvent | React.KeyboardEvent) => {
     _.invoke(props, 'onClick', e, props)
+    parentProps.onItemClick(e, props.index)
   }
 
   const contentElement = Box.create(content, {
diff --git a/packages/react/src/components/List/listContext.ts b/packages/react/src/components/List/listContext.ts
new file mode 100644
index 0000000000..f1e3ead194
--- /dev/null
+++ b/packages/react/src/components/List/listContext.ts
@@ -0,0 +1,43 @@
+import { createContext } from '@fluentui/react-context-selector'
+import { ComponentVariablesInput } from '@fluentui/styles'
+import * as React from 'react'
+
+export type ListContextValue = {
+  debug: boolean
+  selectable: boolean
+  navigable: boolean
+  truncateContent: boolean
+  truncateHeader: boolean
+  variables: ComponentVariablesInput
+
+  onItemClick: (e: React.KeyboardEvent | React.MouseEvent, itemIndex: number) => void
+  selectedIndex: number
+}
+
+export type ListContextSubscribedValue = Pick<
+  ListContextValue,
+  | 'debug'
+  | 'selectable'
+  | 'navigable'
+  | 'truncateContent'
+  | 'truncateHeader'
+  | 'variables'
+  | 'onItemClick'
+> & { selected: boolean }
+
+export const ListContext = createContext<ListContextValue>(
+  {
+    debug: false,
+    selectable: false,
+    navigable: false,
+    truncateContent: false,
+    truncateHeader: false,
+    variables: {},
+
+    onItemClick: () => {},
+    selectedIndex: -1,
+  },
+  { strict: false },
+)
+
+export const ListContextProvider = ListContext.Provider
diff --git a/packages/react/src/components/Loader/Loader.tsx b/packages/react/src/components/Loader/Loader.tsx
index 127bd04bdb..5ad4513450 100644
--- a/packages/react/src/components/Loader/Loader.tsx
+++ b/packages/react/src/components/Loader/Loader.tsx
@@ -10,6 +10,7 @@ import {
   commonPropTypes,
   SizeValue,
   ShorthandFactory,
+  getOrGenerateIdFromShorthand,
 } from '../../utils'
 import { WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
 import Box, { BoxProps } from '../Box/Box'
@@ -49,6 +50,7 @@ export interface LoaderProps extends UIComponentProps {
 
 export interface LoaderState {
   visible: boolean
+  labelId: string
 }
 
 /**
@@ -94,6 +96,13 @@ class Loader extends UIComponent<WithAsProp<LoaderProps>, LoaderState> {
 
     this.state = {
       visible: this.props.delay === 0,
+      labelId: '',
+    }
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    return {
+      labelId: getOrGenerateIdFromShorthand('loader-label-', props.label, state.labelId),
     }
   }
 
@@ -114,7 +123,7 @@ class Loader extends UIComponent<WithAsProp<LoaderProps>, LoaderState> {
 
   renderComponent({ ElementType, classes, accessibility, variables, styles, unhandledProps }) {
     const { indicator, label, svg } = this.props
-    const { visible } = this.state
+    const { visible, labelId } = this.state
 
     const svgElement = Box.create(svg, {
       defaultProps: () => ({ className: Loader.slotClassNames.svg, styles: styles.svg }),
@@ -135,7 +144,11 @@ class Loader extends UIComponent<WithAsProp<LoaderProps>, LoaderState> {
             }),
           })}
           {Text.create(label, {
-            defaultProps: () => ({ className: Loader.slotClassNames.label, styles: styles.label }),
+            defaultProps: () => ({
+              className: Loader.slotClassNames.label,
+              styles: styles.label,
+              id: labelId,
+            }),
           })}
         </ElementType>
       )
diff --git a/packages/react/src/components/Menu/MenuItem.tsx b/packages/react/src/components/Menu/MenuItem.tsx
index 0ae3ee368e..de7fc05168 100644
--- a/packages/react/src/components/Menu/MenuItem.tsx
+++ b/packages/react/src/components/Menu/MenuItem.tsx
@@ -1,7 +1,7 @@
 import { Accessibility, menuItemBehavior, submenuBehavior } from '@fluentui/accessibility'
 import { focusAsync } from '@fluentui/react-bindings'
 import { EventListener } from '@fluentui/react-component-event-listener'
-import { Ref, toRefObject } from '@fluentui/react-component-ref'
+import { Ref } from '@fluentui/react-component-ref'
 import * as customPropTypes from '@fluentui/react-proptypes'
 import * as _ from 'lodash'
 import cx from 'classnames'
@@ -215,7 +215,6 @@ class MenuItem extends AutoControlledComponent<WithAsProp<MenuItemProps>, MenuIt
 
     const defaultIndicator = { name: vertical ? 'icon-arrow-end' : 'icon-arrow-down' }
     const indicatorWithDefaults = indicator === undefined ? defaultIndicator : indicator
-    const targetRef = toRefObject(this.context.target)
 
     const menuItemInner = childrenExist(children) ? (
       children
@@ -274,7 +273,11 @@ class MenuItem extends AutoControlledComponent<WithAsProp<MenuItemProps>, MenuIt
               })}
             </Popper>
           </Ref>
-          <EventListener listener={this.outsideClickHandler} targetRef={targetRef} type="click" />
+          <EventListener
+            listener={this.outsideClickHandler}
+            target={this.context.target}
+            type="click"
+          />
         </>
       ) : null
 
diff --git a/packages/react/src/components/Popup/Popup.tsx b/packages/react/src/components/Popup/Popup.tsx
index 1a82c47c9a..ffc787e404 100644
--- a/packages/react/src/components/Popup/Popup.tsx
+++ b/packages/react/src/components/Popup/Popup.tsx
@@ -6,7 +6,7 @@ import {
 } from '@fluentui/react-bindings'
 import { EventListener } from '@fluentui/react-component-event-listener'
 import { NodeRef, Unstable_NestingAuto } from '@fluentui/react-component-nesting-registry'
-import { handleRef, toRefObject, Ref } from '@fluentui/react-component-ref'
+import { handleRef, Ref } from '@fluentui/react-component-ref'
 import * as customPropTypes from '@fluentui/react-proptypes'
 import * as React from 'react'
 import * as PropTypes from 'prop-types'
@@ -241,14 +241,10 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
     }
   }
 
-  renderComponent({
-    classes,
-    rtl,
-    accessibility,
-  }: RenderResultConfig<PopupProps>): React.ReactNode {
+  renderComponent({ rtl, accessibility }: RenderResultConfig<PopupProps>): React.ReactNode {
     const { inline, mountNode } = this.props
     const { open } = this.state
-    const popupContent = open && this.renderPopupContent(classes.popup, rtl, accessibility)
+    const popupContent = open && this.renderPopupContent(rtl, accessibility)
 
     return (
       <>
@@ -369,7 +365,7 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
     if (_.includes(normalizedOn, 'hover')) {
       triggerProps.onMouseEnter = (e, ...args) => {
         this.setPopupOpen(true, e)
-        setWhatInputSource('mouse')
+        setWhatInputSource(this.context.target, 'mouse')
         _.invoke(triggerElement, 'props.onMouseEnter', e, ...args)
       }
       triggerProps.onMouseLeave = (e, ...args) => {
@@ -462,11 +458,7 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
     )
   }
 
-  renderPopupContent(
-    popupPositionClasses: string,
-    rtl: boolean,
-    accessibility: ReactAccessibilityBehavior,
-  ): JSX.Element {
+  renderPopupContent(rtl: boolean, accessibility: ReactAccessibilityBehavior): JSX.Element {
     const { align, position, offset, target, unstable_pinned } = this.props
 
     return (
@@ -477,20 +469,16 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
         offset={offset}
         rtl={rtl}
         unstable_pinned={unstable_pinned}
-        targetRef={
-          this.rightClickReferenceObject || (target ? toRefObject(target) : this.triggerRef)
-        }
-        children={this.renderPopperChildren.bind(this, popupPositionClasses, rtl, accessibility)}
+        targetRef={this.rightClickReferenceObject || target || this.triggerRef}
+        children={this.renderPopperChildren(accessibility)}
       />
     )
   }
 
-  renderPopperChildren = (
-    popupPositionClasses: string,
-    rtl: boolean,
-    accessibility: ReactAccessibilityBehavior,
-    { placement, scheduleUpdate }: PopperChildrenProps,
-  ) => {
+  renderPopperChildren = (accessibility: ReactAccessibilityBehavior) => ({
+    placement,
+    scheduleUpdate,
+  }: PopperChildrenProps) => {
     const {
       content: propsContent,
       renderContent,
@@ -501,14 +489,10 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
     } = this.props
 
     const content = renderContent ? renderContent(scheduleUpdate) : propsContent
-    const targetRef = toRefObject(this.context.target)
-
     const popupContent = Popup.Content.create(content || {}, {
       defaultProps: () => ({
-        ...(rtl && { dir: 'rtl' }),
         ...accessibility.attributes.popup,
         ...accessibility.keyHandlers.popup,
-        className: popupPositionClasses,
         ...this.getContentProps(),
         placement,
         pointing,
@@ -535,19 +519,19 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
 
             <EventListener
               listener={this.handleDocumentClick(getRefs)}
-              targetRef={targetRef}
+              target={this.context.target}
               type="click"
               capture
             />
             <EventListener
               listener={this.handleDocumentClick(getRefs)}
-              targetRef={targetRef}
+              target={this.context.target}
               type="contextmenu"
               capture
             />
             <EventListener
               listener={this.handleDocumentKeyDown(getRefs)}
-              targetRef={targetRef}
+              target={this.context.target}
               type="keydown"
               capture
             />
@@ -556,13 +540,13 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
               <>
                 <EventListener
                   listener={this.dismissOnScroll}
-                  targetRef={targetRef}
+                  target={this.context.target}
                   type="wheel"
                   capture
                 />
                 <EventListener
                   listener={this.dismissOnScroll}
-                  targetRef={targetRef}
+                  target={this.context.target}
                   type="touchmove"
                   capture
                 />
diff --git a/packages/react/src/components/Portal/Portal.tsx b/packages/react/src/components/Portal/Portal.tsx
index ef4998fca2..da1ac9bd7e 100644
--- a/packages/react/src/components/Portal/Portal.tsx
+++ b/packages/react/src/components/Portal/Portal.tsx
@@ -5,7 +5,7 @@ import {
   FocusTrapZoneProps,
 } from '@fluentui/react-bindings'
 import { EventListener } from '@fluentui/react-component-event-listener'
-import { handleRef, Ref, toRefObject } from '@fluentui/react-component-ref'
+import { handleRef, Ref } from '@fluentui/react-component-ref'
 import * as customPropTypes from '@fluentui/react-proptypes'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
@@ -126,7 +126,6 @@ class Portal extends AutoControlledComponent<PortalProps, PortalState> {
 
     const contentToRender = childrenExist(children) ? children : content
     const focusTrapZoneProps = (_.keys(trapFocus).length && trapFocus) || {}
-    const targetRef = toRefObject(this.context.target)
 
     return (
       open && (
@@ -141,7 +140,11 @@ class Portal extends AutoControlledComponent<PortalProps, PortalState> {
             ) : (
               contentToRender
             )}
-            <EventListener listener={this.handleDocumentClick} targetRef={targetRef} type="click" />
+            <EventListener
+              listener={this.handleDocumentClick}
+              target={this.context.target}
+              type="click"
+            />
           </PortalInner>
         </Ref>
       )
diff --git a/packages/react/src/components/Portal/PortalInner.tsx b/packages/react/src/components/Portal/PortalInner.tsx
index 901963b794..2a01fec378 100644
--- a/packages/react/src/components/Portal/PortalInner.tsx
+++ b/packages/react/src/components/Portal/PortalInner.tsx
@@ -1,11 +1,10 @@
-import * as PropTypes from 'prop-types'
 import * as _ from 'lodash'
+import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
-// @ts-ignore
-import { ThemeContext } from 'react-fela'
 
 import { isBrowser, ChildrenComponentProps, commonPropTypes } from '../../utils'
+import { PortalBoxContext } from '../Provider/usePortalBox'
 
 export interface PortalInnerProps extends ChildrenComponentProps {
   /** Existing element the portal should be bound to. */
@@ -30,7 +29,7 @@ export interface PortalInnerProps extends ChildrenComponentProps {
  * A PortalInner is a container for Portal's content.
  */
 class PortalInner extends React.Component<PortalInnerProps> {
-  static contextType = ThemeContext
+  static contextType = PortalBoxContext
 
   static propTypes = {
     ...commonPropTypes.createCommon({
@@ -56,7 +55,9 @@ class PortalInner extends React.Component<PortalInnerProps> {
   render() {
     const { children, mountNode } = this.props
 
-    const target: HTMLElement | null = isBrowser() ? this.context.target.body : null
+    // PortalInner should render elements even without a context
+    // eslint-disable-next-line
+    const target: HTMLDivElement | null = isBrowser() ? this.context || document.body : null
     const container: HTMLElement | null = mountNode || target
 
     return container && ReactDOM.createPortal(children, container)
diff --git a/packages/react/src/components/Provider/Provider.tsx b/packages/react/src/components/Provider/Provider.tsx
index c11e38c259..d37648b657 100644
--- a/packages/react/src/components/Provider/Provider.tsx
+++ b/packages/react/src/components/Provider/Provider.tsx
@@ -1,26 +1,35 @@
 import { IStyle } from 'fela'
 import * as _ from 'lodash'
-import { Renderer, Telemetry } from '@fluentui/react-bindings'
-import * as customPropTypes from '@fluentui/react-proptypes'
+import {
+  getElementType,
+  getUnhandledProps,
+  Renderer,
+  StylesContextPerformance,
+  Telemetry,
+  unstable_getStyles,
+  useIsomorphicLayoutEffect,
+} from '@fluentui/react-bindings'
 import {
   mergeSiteVariables,
-  ThemePrepared,
   StaticStyleObject,
   StaticStyle,
   StaticStyleFunction,
   FontFace,
-  ComponentVariablesInput,
   ThemeInput,
+  SiteVariablesPrepared,
 } from '@fluentui/styles'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 // @ts-ignore
 import { RendererProvider, ThemeProvider, ThemeContext } from 'react-fela'
 
-import { ChildrenComponentProps, setUpWhatInput, tryCleanupWhatInput } from '../../utils'
+import {
+  ChildrenComponentProps,
+  setUpWhatInput,
+  tryCleanupWhatInput,
+  UIComponentProps,
+} from '../../utils'
 
-import ProviderConsumer from './ProviderConsumer'
-import ProviderBox, { ProviderBoxProps } from './ProviderBox'
 import {
   WithAsProp,
   ProviderContextInput,
@@ -28,201 +37,232 @@ import {
   withSafeTypeForAs,
 } from '../../types'
 import mergeContexts from '../../utils/mergeProviderContexts'
+import ProviderConsumer from './ProviderConsumer'
+import usePortalBox, { PortalBoxContext } from './usePortalBox'
 
-export interface ProviderProps extends ChildrenComponentProps {
+export interface ProviderProps extends ChildrenComponentProps, UIComponentProps {
   renderer?: Renderer
   rtl?: boolean
   disableAnimations?: boolean
+  performance?: StylesContextPerformance
   overwrite?: boolean
   target?: Document
   theme?: ThemeInput
-  variables?: ComponentVariablesInput
-  telemetryRef?: React.Ref<Telemetry>
+  telemetryRef?: React.MutableRefObject<Telemetry>
 }
 
-/**
- * The Provider passes the CSS-in-JS renderer, theme styles and other settings to Fluent UI components.
- */
-class Provider extends React.Component<WithAsProp<ProviderProps>> {
-  static displayName = 'Provider'
-
-  static propTypes = {
-    as: PropTypes.elementType,
-    variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
-    theme: PropTypes.shape({
-      siteVariables: PropTypes.object,
-      componentVariables: PropTypes.object,
-      componentStyles: PropTypes.object,
-      fontFaces: PropTypes.arrayOf(
-        PropTypes.shape({
-          name: PropTypes.string,
-          paths: PropTypes.arrayOf(PropTypes.string),
-          style: PropTypes.shape({
-            fontStretch: PropTypes.string,
-            fontStyle: PropTypes.string,
-            fontVariant: PropTypes.string,
-            fontWeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-            localAlias: PropTypes.string,
-            unicodeRange: PropTypes.string,
-          }),
-        }),
-      ),
-      staticStyles: PropTypes.arrayOf(
-        PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func]),
-      ),
-      animations: PropTypes.object,
-    }),
-    renderer: PropTypes.object,
-    rtl: PropTypes.bool,
-    disableAnimations: PropTypes.bool,
-    children: PropTypes.node.isRequired,
-    target: PropTypes.object,
-    telemetryRef: customPropTypes.ref,
+const renderFontFaces = (renderer: Renderer, theme: ThemeInput) => {
+  if (!theme.fontFaces) {
+    return
   }
 
-  static defaultProps = {
-    theme: {},
-  }
-
-  static Consumer = ProviderConsumer
-  static Box = ProviderBox
-  static contextType = ThemeContext
-
-  outgoingContext: ProviderContextPrepared
-  staticStylesRendered: boolean = false
-
-  telemetry: Telemetry
+  const renderFontObject = (font: FontFace) => {
+    if (!_.isPlainObject(font)) {
+      throw new Error(`fontFaces must be objects, got: ${typeof font}`)
+    }
 
-  renderStaticStyles = (renderer: Renderer, mergedTheme: ThemePrepared) => {
-    const { siteVariables } = mergedTheme
-    const { staticStyles } = this.props.theme
+    renderer.renderFont(font.name, font.paths, font.props)
+  }
 
-    if (!staticStyles) return
+  theme.fontFaces.forEach((font: FontFace) => {
+    renderFontObject(font)
+  })
+}
 
-    const renderObject = (object: StaticStyleObject) => {
-      _.forEach(object, (style, selector) => {
-        renderer.renderStatic(style as IStyle, selector)
-      })
-    }
+const renderStaticStyles = (
+  renderer: Renderer,
+  theme: ThemeInput,
+  siteVariables: SiteVariablesPrepared,
+) => {
+  if (!theme.staticStyles) {
+    return
+  }
 
-    staticStyles.forEach((staticStyle: StaticStyle) => {
-      if (typeof staticStyle === 'string') {
-        renderer.renderStatic(staticStyle)
-      } else if (_.isPlainObject(staticStyle)) {
-        renderObject(staticStyle as StaticStyleObject)
-      } else if (_.isFunction(staticStyle)) {
-        const preparedSiteVariables = mergeSiteVariables(siteVariables)
-        renderObject((staticStyle as StaticStyleFunction)(preparedSiteVariables))
-      } else {
-        throw new Error(
-          `staticStyles array must contain CSS strings, style objects, or style functions, got: ${typeof staticStyle}`,
-        )
-      }
+  const renderObject = (object: StaticStyleObject) => {
+    _.forEach(object, (style, selector) => {
+      renderer.renderStatic(style as IStyle, selector)
     })
   }
 
-  renderFontFaces = (renderer: Renderer) => {
-    const { fontFaces } = this.props.theme
+  theme.staticStyles.forEach((staticStyle: StaticStyle) => {
+    if (typeof staticStyle === 'string') {
+      renderer.renderStatic(staticStyle)
+    } else if (_.isPlainObject(staticStyle)) {
+      renderObject(staticStyle as StaticStyleObject)
+    } else if (_.isFunction(staticStyle)) {
+      const preparedSiteVariables = mergeSiteVariables(siteVariables)
+      renderObject((staticStyle as StaticStyleFunction)(preparedSiteVariables))
+    } else {
+      throw new Error(
+        `staticStyles array must contain CSS strings, style objects, or style functions, got: ${typeof staticStyle}`,
+      )
+    }
+  })
+}
+
+/**
+ * The Provider passes the CSS-in-JS renderer, theme styles and other settings to Fluent UI components.
+ */
+const Provider: React.FC<WithAsProp<ProviderProps>> & {
+  className: string
+  Consumer: typeof ProviderConsumer
+  handledProps: (keyof ProviderProps)[]
+} = props => {
+  const { children, className, design, overwrite, styles, variables, telemetryRef } = props
 
-    if (!fontFaces) return
+  const ElementType = getElementType(props)
+  const unhandledProps = getUnhandledProps(Provider.handledProps, props)
 
-    const renderFontObject = (font: FontFace) => {
-      if (!_.isPlainObject(font)) {
-        throw new Error(`fontFaces must be objects, got: ${typeof font}`)
-      }
+  const telemetry = React.useMemo<Telemetry | undefined>(() => {
+    if (!telemetryRef) {
+      return undefined
+    }
 
-      renderer.renderFont(font.name, font.paths, font.props)
+    if (!telemetryRef.current) {
+      telemetryRef.current = new Telemetry()
     }
 
-    fontFaces.forEach((font: FontFace) => {
-      renderFontObject(font)
-    })
+    return telemetryRef.current
+  }, [telemetryRef])
+  const inputContext: ProviderContextInput = {
+    theme: props.theme,
+    rtl: props.rtl,
+    disableAnimations: props.disableAnimations,
+    performance: props.performance,
+    renderer: props.renderer,
+    target: props.target,
+    telemetry,
   }
 
-  componentDidMount() {
-    this.renderFontFaces(this.outgoingContext.renderer)
-    if (this.props.target) {
-      setUpWhatInput(this.props.target)
-    }
-  }
+  const consumedContext: ProviderContextPrepared = React.useContext(ThemeContext)
+  const incomingContext: ProviderContextPrepared = overwrite ? ({} as any) : consumedContext
 
-  componentWillUnmount() {
-    if (this.props.target) {
-      tryCleanupWhatInput(this.props.target)
-    }
+  // rehydration disabled to avoid leaking styles between renderers
+  // https://github.com/rofrischmann/fela/blob/master/docs/api/fela-dom/rehydrate.md
+  const outgoingContext = mergeContexts(incomingContext, inputContext)
+
+  const rtlProps: { dir?: 'rtl' | 'ltr' } = {}
+  // only add dir attribute for top level provider or when direction changes from parent to child
+  if (
+    !consumedContext ||
+    (consumedContext.rtl !== outgoingContext.rtl && _.isBoolean(outgoingContext.rtl))
+  ) {
+    rtlProps.dir = outgoingContext.rtl ? 'rtl' : 'ltr'
   }
 
-  render() {
-    const {
-      as,
-      children,
-      disableAnimations,
-      overwrite,
-      renderer,
-      rtl,
-      target,
-      theme,
+  const { classes } = unstable_getStyles({
+    className: Provider.className,
+    displayName: Provider.displayName,
+    props: {
+      className,
+      design,
+      styles,
       variables,
-      telemetryRef,
-      ...unhandledProps
-    } = this.props
+    },
 
-    if (telemetryRef) {
-      if (!this.telemetry) {
-        this.telemetry = new Telemetry()
-      }
+    disableAnimations: outgoingContext.disableAnimations,
+    performance: outgoingContext.performance,
+    renderer: outgoingContext.renderer,
+    rtl: outgoingContext.rtl,
+    theme: outgoingContext.theme,
+    saveDebug: _.noop,
+  })
 
-      telemetryRef['current'] = this.telemetry
-    } else if (this.telemetry) {
-      delete this.telemetry
-    }
+  const element = usePortalBox({
+    className: classes.root,
+    target: outgoingContext.target,
+    rtl: outgoingContext.rtl,
+  })
 
-    const inputContext: ProviderContextInput = {
-      theme,
-      rtl,
-      disableAnimations,
-      renderer,
-      target,
-      telemetry: this.telemetry,
+  useIsomorphicLayoutEffect(() => {
+    renderFontFaces(outgoingContext.renderer, props.theme)
+    renderStaticStyles(outgoingContext.renderer, props.theme, outgoingContext.theme.siteVariables)
+
+    if (props.target) {
+      setUpWhatInput(props.target)
     }
 
-    const incomingContext: ProviderContextPrepared = overwrite ? {} : this.context
-    // rehydration disabled to avoid leaking styles between renderers
-    // https://github.com/rofrischmann/fela/blob/master/docs/api/fela-dom/rehydrate.md
-    this.outgoingContext = mergeContexts(incomingContext, inputContext)
+    return () => {
+      if (props.target) {
+        tryCleanupWhatInput(props.target)
+      }
+    }
+  }, [])
 
-    this.renderStaticStylesOnce(this.outgoingContext.theme)
+  // do not spread anything - React.Fragment can only have `key` and `children` props
+  const elementProps =
+    ElementType === React.Fragment
+      ? {}
+      : {
+          className: classes.root,
+          ...rtlProps,
+          ...unhandledProps,
+        }
 
-    const rtlProps: { dir?: 'rtl' | 'ltr' } = {}
-    // only add dir attribute for top level provider or when direction changes from parent to child
-    if (
-      !this.context ||
-      (this.context.rtl !== this.outgoingContext.rtl && _.isBoolean(this.outgoingContext.rtl))
-    ) {
-      rtlProps.dir = this.outgoingContext.rtl ? 'rtl' : 'ltr'
-    }
+  return (
+    <RendererProvider
+      renderer={outgoingContext.renderer}
+      {...{ rehydrate: false, targetDocument: outgoingContext.target }}
+    >
+      <ThemeProvider theme={outgoingContext} overwrite>
+        <PortalBoxContext.Provider value={element}>
+          <ElementType {...elementProps}>{children}</ElementType>
+        </PortalBoxContext.Provider>
+      </ThemeProvider>
+    </RendererProvider>
+  )
+}
 
-    return (
-      <RendererProvider
-        renderer={this.outgoingContext.renderer}
-        {...{ rehydrate: false, targetDocument: this.outgoingContext.target }}
-      >
-        <ThemeProvider theme={this.outgoingContext} overwrite>
-          <ProviderBox as={as} variables={variables} {...unhandledProps} {...rtlProps}>
-            {children}
-          </ProviderBox>
-        </ThemeProvider>
-      </RendererProvider>
-    )
-  }
+Provider.className = 'ui-provider'
+Provider.displayName = 'Provider'
 
-  renderStaticStylesOnce = (mergedTheme: ThemePrepared) => {
-    const { staticStyles } = this.props.theme
-    if (!this.staticStylesRendered && staticStyles) {
-      this.renderStaticStyles(this.outgoingContext.renderer, mergedTheme)
-      this.staticStylesRendered = true
-    }
-  }
+Provider.defaultProps = {
+  theme: {},
 }
+Provider.propTypes = {
+  as: PropTypes.elementType,
+  design: PropTypes.object,
+  variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  theme: PropTypes.shape({
+    siteVariables: PropTypes.object,
+    componentVariables: PropTypes.object,
+    componentStyles: PropTypes.object,
+    fontFaces: PropTypes.arrayOf(
+      PropTypes.shape({
+        name: PropTypes.string,
+        paths: PropTypes.arrayOf(PropTypes.string),
+        style: PropTypes.shape({
+          fontStretch: PropTypes.string,
+          fontStyle: PropTypes.string,
+          fontVariant: PropTypes.string,
+          fontWeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+          localAlias: PropTypes.string,
+          unicodeRange: PropTypes.string,
+        }),
+      }),
+    ),
+    staticStyles: PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func]),
+    ),
+    animations: PropTypes.object,
+  }),
+  renderer: PropTypes.object as PropTypes.Validator<Renderer>,
+  rtl: PropTypes.bool,
+  disableAnimations: PropTypes.bool,
+  // Heads Up!
+  // Keep in sync with packages/react-bindings/src/styles/types.ts
+  performance: PropTypes.shape({
+    enableStylesCaching: PropTypes.bool,
+    enableVariablesCaching: PropTypes.bool,
+  }),
+  children: PropTypes.node.isRequired,
+  overwrite: PropTypes.bool,
+  target: PropTypes.object as PropTypes.Validator<Document>,
+  telemetryRef: PropTypes.object as PropTypes.Validator<React.MutableRefObject<Telemetry>>,
+}
+Provider.handledProps = Object.keys(Provider.propTypes) as any
+
+Provider.Consumer = ProviderConsumer
 
-export default withSafeTypeForAs<typeof Provider, ProviderProps & ProviderBoxProps>(Provider)
+export default withSafeTypeForAs<typeof Provider, ProviderProps>(Provider)
diff --git a/packages/react/src/components/Provider/ProviderBox.tsx b/packages/react/src/components/Provider/ProviderBox.tsx
deleted file mode 100644
index d92b0dea69..0000000000
--- a/packages/react/src/components/Provider/ProviderBox.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as React from 'react'
-import {
-  commonPropTypes,
-  ContentComponentProps,
-  ChildrenComponentProps,
-  UIComponentProps,
-} from '../../utils'
-import createComponentInternal from '../../utils/createComponentInternal'
-import { WithAsProp, withSafeTypeForAs } from '../../types'
-
-export interface ProviderBoxProps
-  extends UIComponentProps<ProviderBoxProps>,
-    ContentComponentProps,
-    ChildrenComponentProps {}
-
-const ProviderBox = createComponentInternal<WithAsProp<ProviderBoxProps>>({
-  displayName: 'ProviderBox',
-
-  className: 'ui-provider__box',
-
-  propTypes: {
-    ...commonPropTypes.createCommon(),
-  },
-
-  render(config, props) {
-    const { ElementType, classes, unhandledProps } = config
-    const { children } = props
-    if (ElementType === React.Fragment) {
-      // do not spread anything - React.Fragment can only have `key` and `children` props.
-      return <>{children}</>
-    }
-
-    return (
-      <ElementType className={classes.root} {...unhandledProps}>
-        {children}
-      </ElementType>
-    )
-  },
-})
-
-/**
- * The ProviderBox passes the CSS-in-JS renderer, theme styles and other settings to Fluent UI components.
- * Also, being comapred to Provider, it additionally renders an element to the DOM (`div` by default).
- */
-export default withSafeTypeForAs<typeof ProviderBox, ProviderBoxProps>(ProviderBox)
diff --git a/packages/react/src/components/Provider/usePortalBox.ts b/packages/react/src/components/Provider/usePortalBox.ts
new file mode 100644
index 0000000000..fc7bc445d5
--- /dev/null
+++ b/packages/react/src/components/Provider/usePortalBox.ts
@@ -0,0 +1,48 @@
+import { useIsomorphicLayoutEffect } from '@fluentui/react-bindings'
+import * as React from 'react'
+
+import isBrowser from '../../utils/isBrowser'
+
+type UsePortalBoxOptions = {
+  className: string
+  rtl: boolean
+  target: Document
+}
+
+export const PortalBoxContext = React.createContext<HTMLDivElement>(null)
+
+const usePortalBox = (options: UsePortalBoxOptions): HTMLDivElement => {
+  const { className, rtl, target } = options
+
+  const element: HTMLDivElement | null = React.useMemo(
+    () => (isBrowser() ? target.createElement('div') : null),
+    [target],
+  )
+
+  useIsomorphicLayoutEffect(() => {
+    if (element) {
+      target.body.appendChild(element)
+    }
+
+    return () => {
+      if (element) {
+        target.body.removeChild(element)
+      }
+    }
+  }, [])
+  useIsomorphicLayoutEffect(() => {
+    if (element) {
+      element.setAttribute('class', className)
+
+      if (rtl) {
+        element.setAttribute('dir', 'rtl')
+      } else {
+        element.removeAttribute('dir')
+      }
+    }
+  }, [className, rtl])
+
+  return element
+}
+
+export default usePortalBox
diff --git a/packages/react/src/components/Slider/Slider.tsx b/packages/react/src/components/Slider/Slider.tsx
index 51c3357bb2..331ecfdf03 100644
--- a/packages/react/src/components/Slider/Slider.tsx
+++ b/packages/react/src/components/Slider/Slider.tsx
@@ -1,20 +1,29 @@
-import { Accessibility, sliderBehavior } from '@fluentui/accessibility'
-import * as React from 'react'
-import * as _ from 'lodash'
-import * as PropTypes from 'prop-types'
-import * as customPropTypes from '@fluentui/react-proptypes'
+import { Accessibility, sliderBehavior, SliderBehaviorProps } from '@fluentui/accessibility'
+import {
+  getElementType,
+  getUnhandledProps,
+  useAccessibility,
+  useStateManager,
+  useStyles,
+  useTelemetry,
+} from '@fluentui/react-bindings'
 import { handleRef, Ref } from '@fluentui/react-component-ref'
+import * as customPropTypes from '@fluentui/react-proptypes'
+import { createSliderManager } from '@fluentui/state'
 import cx from 'classnames'
+import * as _ from 'lodash'
+import * as PropTypes from 'prop-types'
+import * as React from 'react'
+// @ts-ignore
+import { ThemeContext } from 'react-fela'
 
 import {
-  applyAccessibilityKeyHandlers,
-  AutoControlledComponent,
   ChildrenComponentProps,
   commonPropTypes,
   partitionHTMLProps,
   UIComponentProps,
-  RenderResultConfig,
   setWhatInputSource,
+  createShorthandFactory,
 } from '../../utils'
 import {
   ComponentEventHandler,
@@ -22,12 +31,14 @@ import {
   WithAsProp,
   withSafeTypeForAs,
   Omit,
+  FluentComponentStaticProps,
+  ProviderContextPrepared,
 } from '../../types'
 import { SupportedIntrinsicInputProps } from '../../utils/htmlPropsUtils'
 import Box, { BoxProps } from '../Box/Box'
 
 const processInputValues = (
-  p: Pick<SliderProps, 'min' | 'max'> & Pick<SliderState, 'value'>,
+  p: Pick<SliderProps, 'min' | 'max'> & { value: string },
 ): { min: number; max: number; value: number; valueAsPercentage: string } => {
   let min = _.toNumber(p.min)
   let max = _.toNumber(p.max)
@@ -54,7 +65,7 @@ export interface SliderProps
     ChildrenComponentProps,
     Omit<SupportedIntrinsicInputProps, 'defaultValue'> {
   /** Accessibility behavior if overridden by the user. */
-  accessibility?: Accessibility
+  accessibility?: Accessibility<SliderBehaviorProps>
 
   /** The default value of the slider. */
   defaultValue?: string | number
@@ -104,121 +115,154 @@ export interface SliderProps
   vertical?: boolean
 }
 
-export interface SliderState {
-  value: SliderProps['value']
-}
+const Slider: React.FC<WithAsProp<SliderProps>> &
+  FluentComponentStaticProps & { slotClassNames: SliderSlotClassNames } = props => {
+  const context: ProviderContextPrepared = React.useContext(ThemeContext)
+  const { setStart, setEnd } = useTelemetry(Slider.displayName, context.telemetry)
+  setStart()
 
-class Slider extends AutoControlledComponent<WithAsProp<SliderProps>, SliderState> {
-  inputRef = React.createRef<HTMLElement>()
-
-  static displayName = 'Slider'
-
-  static className = 'ui-slider'
-
-  static slotClassNames: SliderSlotClassNames
-
-  static propTypes = {
-    ...commonPropTypes.createCommon({ content: false }),
-    defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    fluid: PropTypes.bool,
-    getA11yValueMessageOnChange: PropTypes.func,
-    input: customPropTypes.itemShorthand,
-    inputRef: customPropTypes.ref,
-    max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    onChange: PropTypes.func,
-    step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    vertical: PropTypes.bool,
-  }
-
-  static defaultProps: SliderProps = {
-    accessibility: sliderBehavior,
-    getA11yValueMessageOnChange: ({ value }) => String(value),
-    max: 100,
-    min: 0,
-    step: 1,
-  }
-
-  static autoControlledProps = ['value']
-
-  getInitialAutoControlledState(): Partial<SliderState> {
-    return { value: 50 }
-  }
-
-  handleInputOverrides = () => ({
+  const {
+    accessibility,
+    min,
+    max,
+    value,
+    getA11yValueMessageOnChange,
+    defaultValue,
+    input,
+    inputRef: userInputRef,
+    step,
+    className,
+    styles,
+    variables,
+    design,
+    fluid,
+    vertical,
+    disabled,
+  } = props
+  const inputRef = React.createRef<HTMLElement>()
+
+  const { state, actions } = useStateManager(createSliderManager, {
+    mapPropsToInitialState: () => ({
+      value: defaultValue as string,
+    }),
+    mapPropsToState: () => ({
+      value: value as string,
+    }),
+  })
+  const {
+    min: numericMin,
+    max: numericMax,
+    value: numericValue,
+    valueAsPercentage,
+  } = processInputValues({
+    min,
+    max,
+    value: state.value || '',
+  })
+
+  const getA11Props = useAccessibility(accessibility, {
+    debugName: Slider.displayName,
+    rtl: context.rtl,
+    mapPropsToBehavior: () => ({
+      disabled,
+      getA11yValueMessageOnChange,
+      max: numericMax,
+      min: numericMax,
+      value: numericValue,
+      vertical,
+    }),
+  })
+  const { classes, styles: resolvedStyles } = useStyles(Slider.displayName, {
+    className: Slider.className,
+    mapPropsToStyles: () => ({
+      fluid,
+      vertical,
+      disabled,
+    }),
+    mapPropsToInlineStyles: () => ({
+      className,
+      styles,
+      variables,
+      design,
+    }),
+    rtl: context.rtl,
+  })
+
+  const handleInputOverrides = () => ({
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
       const value = _.get(e, 'target.value')
-      _.invoke(this.props, 'onChange', e, { ...this.props, value })
-      this.setState({ value })
+      _.invoke(props, 'onChange', e, { ...props, value })
+      actions.change(value)
     },
     onMouseDown: (e: React.MouseEvent<HTMLInputElement>) => {
-      setWhatInputSource('mouse')
-      _.invoke(this.props, 'onMouseDown', e, this.props)
+      setWhatInputSource(context.target, 'mouse')
+      _.invoke(props, 'onMouseDown', e, props)
     },
   })
 
-  renderComponent({
-    ElementType,
-    classes,
-    accessibility,
-    rtl,
-    styles,
-    unhandledProps,
-  }: RenderResultConfig<SliderProps>) {
-    const { input, inputRef, step } = this.props
-    const [htmlInputProps, restProps] = partitionHTMLProps(unhandledProps)
-    const type = 'range'
-
-    const { min, max, value, valueAsPercentage } = processInputValues({
-      min: this.props.min,
-      max: this.props.max,
-      value: this.state.value || '',
-    })
-
-    // we need 2 wrappers around the slider rail, track, input and thumb slots to achieve correct component sizes
-    return (
-      <ElementType className={classes.root} {...accessibility.attributes.root} {...restProps}>
-        <div className={cx(Slider.slotClassNames.inputWrapper, classes.inputWrapper)}>
-          <span className={cx(Slider.slotClassNames.rail, classes.rail)} />
-          <span
-            className={cx(Slider.slotClassNames.track, classes.track)}
-            style={{ width: valueAsPercentage }}
-          />
-          <Ref
-            innerRef={(inputElement: HTMLElement) => {
-              handleRef(this.inputRef, inputElement)
-              handleRef(inputRef, inputElement)
-            }}
-          >
-            {Box.create(input || type, {
-              defaultProps: () => ({
-                ...htmlInputProps,
-                ...accessibility.attributes.input,
-                className: Slider.slotClassNames.input,
-                as: 'input',
-                min,
-                max,
-                step,
-                type,
-                value,
-                styles: styles.input,
-                ...applyAccessibilityKeyHandlers(accessibility.keyHandlers.input, htmlInputProps),
-              }),
-              overrideProps: this.handleInputOverrides,
-            })}
-          </Ref>
-          {/* the thumb slot needs to appear after the input slot */}
-          <span
-            className={cx(Slider.slotClassNames.thumb, classes.thumb)}
-            style={{ [rtl ? 'right' : 'left']: valueAsPercentage }}
-          />
-        </div>
-      </ElementType>
-    )
-  }
+  const ElementType = getElementType(props)
+  const unhandledProps = getUnhandledProps(Slider.handledProps, props)
+  const [htmlInputProps, restProps] = partitionHTMLProps(unhandledProps)
+  const type = 'range'
+
+  // we need 2 wrappers around the slider rail, track, input and thumb slots to achieve correct component sizes
+
+  const inputElement = Box.create(input || type, {
+    defaultProps: () =>
+      getA11Props('input', {
+        ...htmlInputProps,
+        as: 'input',
+        className: Slider.slotClassNames.input,
+        fluid,
+        min: numericMin,
+        max: numericMax,
+        step,
+        styles: resolvedStyles.input,
+        type,
+        value: numericValue,
+        vertical,
+      }),
+    overrideProps: handleInputOverrides,
+  })
+
+  const element = (
+    <ElementType {...getA11Props('root', { className: classes.root, ...restProps })}>
+      <div
+        {...getA11Props('inputWrapper', {
+          className: cx(Slider.slotClassNames.inputWrapper, classes.inputWrapper),
+        })}
+      >
+        <span
+          {...getA11Props('rail', { className: cx(Slider.slotClassNames.rail, classes.rail) })}
+        />
+        <span
+          {...getA11Props('track', { className: cx(Slider.slotClassNames.track, classes.track) })}
+          style={{ width: valueAsPercentage }}
+        />
+        <Ref
+          innerRef={(inputElement: HTMLElement) => {
+            handleRef(inputRef, inputElement)
+            handleRef(userInputRef, inputElement)
+          }}
+        >
+          {inputElement}
+        </Ref>
+        {/* the thumb slot needs to appear after the input slot */}
+        <span
+          {...getA11Props('thumb', { className: cx(Slider.slotClassNames.thumb, classes.thumb) })}
+          style={{ [context.rtl ? 'right' : 'left']: valueAsPercentage }}
+        />
+      </div>
+    </ElementType>
+  )
+  setEnd()
+
+  return element
 }
 
+Slider.className = 'ui-slider'
+Slider.displayName = 'Slider'
+
 Slider.slotClassNames = {
   input: `${Slider.className}__input`,
   inputWrapper: `${Slider.className}__input-wrapper`,
@@ -227,6 +271,31 @@ Slider.slotClassNames = {
   track: `${Slider.className}__track`,
 }
 
+Slider.defaultProps = {
+  accessibility: sliderBehavior,
+  getA11yValueMessageOnChange: ({ value }) => String(value),
+  max: 100,
+  min: 0,
+  step: 1,
+}
+Slider.propTypes = {
+  ...commonPropTypes.createCommon({ content: false }),
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  fluid: PropTypes.bool,
+  getA11yValueMessageOnChange: PropTypes.func,
+  input: customPropTypes.itemShorthand,
+  inputRef: customPropTypes.ref,
+  max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  onChange: PropTypes.func,
+  step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  vertical: PropTypes.bool,
+}
+Slider.handledProps = Object.keys(Slider.propTypes) as any
+
+Slider.create = createShorthandFactory({ Component: Slider, mappedProp: 'value' })
+
 /**
  * A Slider represents an input that allows user to choose a value from within a specific range.
  *
diff --git a/packages/react/src/components/Status/Status.tsx b/packages/react/src/components/Status/Status.tsx
index b1635a00ee..8f3b864395 100644
--- a/packages/react/src/components/Status/Status.tsx
+++ b/packages/react/src/components/Status/Status.tsx
@@ -1,22 +1,30 @@
 import { Accessibility, statusBehavior } from '@fluentui/accessibility'
+import {
+  getElementType,
+  getUnhandledProps,
+  useAccessibility,
+  useStyles,
+  useTelemetry,
+} from '@fluentui/react-bindings'
 import * as customPropTypes from '@fluentui/react-proptypes'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
-import Icon, { IconProps } from '../Icon/Icon'
+// @ts-ignore
+import { ThemeContext } from 'react-fela'
 
+import { createShorthandFactory, UIComponentProps, commonPropTypes, SizeValue } from '../../utils'
 import {
-  UIComponent,
-  createShorthandFactory,
-  UIComponentProps,
-  commonPropTypes,
-  SizeValue,
-  ShorthandFactory,
-} from '../../utils'
-import { WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
+  WithAsProp,
+  ShorthandValue,
+  withSafeTypeForAs,
+  ProviderContextPrepared,
+  FluentComponentStaticProps,
+} from '../../types'
+import Icon, { IconProps } from '../Icon/Icon'
 
 export interface StatusProps extends UIComponentProps {
   /** Accessibility behavior if overridden by the user. */
-  accessibility?: Accessibility
+  accessibility?: Accessibility<never>
 
   /** A custom color. */
   color?: string
@@ -31,46 +39,71 @@ export interface StatusProps extends UIComponentProps {
   state?: 'success' | 'info' | 'warning' | 'error' | 'unknown'
 }
 
-class Status extends UIComponent<WithAsProp<StatusProps>, any> {
-  static create: ShorthandFactory<StatusProps>
+const Status: React.FC<WithAsProp<StatusProps>> & FluentComponentStaticProps = props => {
+  const context: ProviderContextPrepared = React.useContext(ThemeContext)
+  const { setStart, setEnd } = useTelemetry(Icon.displayName, context.telemetry)
+  setStart()
 
-  static className = 'ui-status'
+  const { className, color, icon, size, state, design, styles, variables } = props
+  const { classes, styles: resolvedStyles } = useStyles(Status.displayName, {
+    className: Status.className,
+    mapPropsToStyles: () => ({
+      color,
+      size,
+      state,
+    }),
+    mapPropsToInlineStyles: () => ({
+      className,
+      design,
+      styles,
+      variables,
+    }),
+    rtl: context.rtl,
+  })
+  const getA11Props = useAccessibility(props.accessibility, {
+    debugName: Status.displayName,
+    rtl: context.rtl,
+  })
+  const ElementType = getElementType(props)
+  const unhandledProps = getUnhandledProps(Status.handledProps, props)
 
-  static displayName = 'Status'
+  const iconElement = Icon.create(icon, {
+    defaultProps: () =>
+      getA11Props('icon', {
+        size: 'smallest',
+        styles: resolvedStyles.icon,
+        xSpacing: 'none',
+      }),
+  })
 
-  static propTypes = {
-    ...commonPropTypes.createCommon({
-      children: false,
-      content: false,
-    }),
-    color: PropTypes.string,
-    icon: customPropTypes.itemShorthandWithoutJSX,
-    size: customPropTypes.size,
-    state: PropTypes.oneOf(['success', 'info', 'warning', 'error', 'unknown']),
-  }
+  const element = (
+    <ElementType {...getA11Props('root', { className: classes.root, ...unhandledProps })}>
+      {iconElement}
+    </ElementType>
+  )
+  setEnd()
 
-  static defaultProps = {
-    accessibility: statusBehavior,
-    as: 'span',
-    size: 'medium',
-    state: 'unknown',
-  }
+  return element
+}
 
-  renderComponent({ accessibility, ElementType, classes, unhandledProps, variables, styles }) {
-    const { icon } = this.props as StatusProps
-    return (
-      <ElementType className={classes.root} {...accessibility.attributes.root} {...unhandledProps}>
-        {Icon.create(icon, {
-          defaultProps: () => ({
-            size: 'smallest',
-            styles: styles.icon,
-            variables: variables.icon,
-            xSpacing: 'none',
-          }),
-        })}
-      </ElementType>
-    )
-  }
+Status.className = 'ui-status'
+Status.displayName = 'Status'
+Status.propTypes = {
+  ...commonPropTypes.createCommon({
+    children: false,
+    content: false,
+  }),
+  color: PropTypes.string,
+  icon: customPropTypes.itemShorthandWithoutJSX,
+  size: customPropTypes.size,
+  state: PropTypes.oneOf(['success', 'info', 'warning', 'error', 'unknown']),
+}
+Status.handledProps = Object.keys(Status.propTypes) as any
+Status.defaultProps = {
+  accessibility: statusBehavior,
+  as: 'span',
+  size: 'medium',
+  state: 'unknown',
 }
 
 Status.create = createShorthandFactory({ Component: Status, mappedProp: 'state' })
diff --git a/packages/react/src/components/Text/Text.tsx b/packages/react/src/components/Text/Text.tsx
index 29b96575a0..dde729be6e 100644
--- a/packages/react/src/components/Text/Text.tsx
+++ b/packages/react/src/components/Text/Text.tsx
@@ -5,7 +5,6 @@ import * as React from 'react'
 import {
   childrenExist,
   createShorthandFactory,
-  UIComponent,
   UIComponentProps,
   ContentComponentProps,
   ChildrenComponentProps,
@@ -14,11 +13,24 @@ import {
   rtlTextContainer,
   SizeValue,
   AlignValue,
-  ShorthandFactory,
 } from '../../utils'
 import { Accessibility } from '@fluentui/accessibility'
 
-import { WithAsProp, withSafeTypeForAs } from '../../types'
+import {
+  FluentComponentStaticProps,
+  ProviderContextPrepared,
+  WithAsProp,
+  withSafeTypeForAs,
+} from '../../types'
+import {
+  getElementType,
+  getUnhandledProps,
+  useAccessibility,
+  useStyles,
+  useTelemetry,
+} from '@fluentui/react-bindings'
+// @ts-ignore
+import { ThemeContext } from 'react-fela'
 
 export interface TextProps
   extends UIComponentProps,
@@ -28,7 +40,7 @@ export interface TextProps
   /**
    * Accessibility behavior if overridden by the user.
    */
-  accessibility?: Accessibility
+  accessibility?: Accessibility<never>
 
   /** At mentions can be formatted to draw users' attention. Mentions for "me" can be formatted to appear differently. */
   atMention?: boolean | 'me'
@@ -64,47 +76,103 @@ export interface TextProps
   truncated?: boolean
 }
 
-class Text extends UIComponent<WithAsProp<TextProps>, any> {
-  static create: ShorthandFactory<TextProps>
-
-  static className = 'ui-text'
-
-  static displayName = 'Text'
-
-  static propTypes = {
-    ...commonPropTypes.createCommon({ color: true }),
-    atMention: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['me'])]),
-    disabled: PropTypes.bool,
-    error: PropTypes.bool,
-    important: PropTypes.bool,
-    size: customPropTypes.size,
-    weight: PropTypes.oneOf(['light', 'semilight', 'regular', 'semibold', 'bold']),
-    success: PropTypes.bool,
-    temporary: PropTypes.bool,
-    align: customPropTypes.align,
-    timestamp: PropTypes.bool,
-    truncated: PropTypes.bool,
-  }
-
-  static defaultProps = {
-    as: 'span',
-  }
-
-  renderComponent({ accessibility, ElementType, classes, unhandledProps }): React.ReactNode {
-    const { children, content } = this.props
-
-    return (
-      <ElementType
-        className={classes.root}
-        {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
-        {...accessibility.attributes.root}
-        {...unhandledProps}
-      >
-        {childrenExist(children) ? children : content}
-      </ElementType>
-    )
-  }
+const Text: React.FC<WithAsProp<TextProps>> & FluentComponentStaticProps<TextProps> = props => {
+  const context: ProviderContextPrepared = React.useContext(ThemeContext)
+  const { setStart, setEnd } = useTelemetry(Text.displayName, context.telemetry)
+  setStart()
+
+  const {
+    accessibility,
+    align,
+    atMention,
+    children,
+    className,
+    color,
+    content,
+    design,
+    disabled,
+    error,
+    important,
+    size,
+    styles,
+    success,
+    timestamp,
+    truncated,
+    temporary,
+    variables,
+    weight,
+  } = props
+
+  const getA11Props = useAccessibility(accessibility, {
+    debugName: Text.displayName,
+    rtl: context.rtl,
+  })
+  const { classes } = useStyles(Text.displayName, {
+    className: Text.className,
+    mapPropsToStyles: () => ({
+      atMention,
+      color,
+      important,
+      timestamp,
+      truncated,
+      disabled,
+      error,
+      success,
+      temporary,
+      align,
+      weight,
+      size,
+    }),
+    mapPropsToInlineStyles: () => ({
+      className,
+      design,
+      styles,
+      variables,
+    }),
+    rtl: context.rtl,
+  })
+
+  const unhandledProps = getUnhandledProps(Text.handledProps, props)
+  const ElementType = getElementType(props)
+
+  const element = (
+    <ElementType
+      {...getA11Props('root', {
+        className: classes.root,
+        ...rtlTextContainer.getAttributes({ forElements: [children, content] }),
+        ...unhandledProps,
+      })}
+    >
+      {childrenExist(children) ? children : content}
+    </ElementType>
+  )
+
+  setEnd()
+
+  return element
+}
+
+Text.className = 'ui-text'
+Text.displayName = 'Text'
+
+Text.defaultProps = {
+  as: 'span',
+}
+Text.propTypes = {
+  ...commonPropTypes.createCommon({ color: true }),
+  atMention: PropTypes.oneOfType<any>([PropTypes.bool, PropTypes.oneOf(['me'])]),
+  disabled: PropTypes.bool,
+  error: PropTypes.bool,
+  important: PropTypes.bool,
+  size: customPropTypes.size,
+  weight: PropTypes.oneOf(['light', 'semilight', 'regular', 'semibold', 'bold']),
+  success: PropTypes.bool,
+  temporary: PropTypes.bool,
+  align: customPropTypes.align,
+  timestamp: PropTypes.bool,
+  truncated: PropTypes.bool,
 }
+Text.handledProps = Object.keys(Text.propTypes) as any
 
 Text.create = createShorthandFactory({ Component: Text, mappedProp: 'content' })
 
diff --git a/packages/react/src/components/Toolbar/Toolbar.tsx b/packages/react/src/components/Toolbar/Toolbar.tsx
index 0fc284db4f..8a2a849fa6 100644
--- a/packages/react/src/components/Toolbar/Toolbar.tsx
+++ b/packages/react/src/components/Toolbar/Toolbar.tsx
@@ -8,7 +8,7 @@ import * as React from 'react'
 import * as _ from 'lodash'
 import * as customPropTypes from '@fluentui/react-proptypes'
 import * as PropTypes from 'prop-types'
-import { Ref, toRefObject } from '@fluentui/react-component-ref'
+import { Ref } from '@fluentui/react-component-ref'
 import { EventListener } from '@fluentui/react-component-event-listener'
 
 import {
@@ -498,8 +498,6 @@ class Toolbar extends UIComponent<WithAsProp<ToolbarProps>> {
     unhandledProps,
     rtl,
   }): React.ReactNode {
-    const windowRef = toRefObject(this.context.target.defaultView)
-
     this.rtl = rtl
     const { children, items, overflow, overflowItem } = this.props
 
@@ -530,7 +528,11 @@ class Toolbar extends UIComponent<WithAsProp<ToolbarProps>> {
           </div>
           <div className={classes.offsetMeasure} ref={this.offsetMeasureRef} />
         </ElementType>
-        <EventListener listener={this.handleWindowResize} targetRef={windowRef} type="resize" />
+        <EventListener
+          listener={this.handleWindowResize}
+          target={this.context.target.defaultView}
+          type="resize"
+        />
       </>
     )
   }
diff --git a/packages/react/src/components/Toolbar/ToolbarItem.tsx b/packages/react/src/components/Toolbar/ToolbarItem.tsx
index 508852977f..f6e350de54 100644
--- a/packages/react/src/components/Toolbar/ToolbarItem.tsx
+++ b/packages/react/src/components/Toolbar/ToolbarItem.tsx
@@ -4,7 +4,7 @@ import * as PropTypes from 'prop-types'
 import * as customPropTypes from '@fluentui/react-proptypes'
 import { Accessibility, toolbarItemBehavior } from '@fluentui/accessibility'
 import cx from 'classnames'
-import { Ref, toRefObject } from '@fluentui/react-component-ref'
+import { Ref } from '@fluentui/react-component-ref'
 import { EventListener } from '@fluentui/react-component-event-listener'
 
 import {
@@ -199,7 +199,6 @@ class ToolbarItem extends UIComponent<WithAsProp<ToolbarItemProps>> {
 
   renderComponent({ ElementType, classes, unhandledProps, accessibility, variables }) {
     const { icon, children, disabled, popup, menu, menuOpen, wrapper } = this.props
-    const targetRef = toRefObject(this.context.target)
 
     const itemElement = (
       <ElementType
@@ -242,7 +241,7 @@ class ToolbarItem extends UIComponent<WithAsProp<ToolbarItemProps>> {
             </Ref>
             <EventListener
               listener={this.handleOutsideClick(getRefs)}
-              targetRef={targetRef}
+              target={this.context.target}
               type="click"
               capture
             />
diff --git a/packages/react/src/components/Toolbar/ToolbarMenuItem.tsx b/packages/react/src/components/Toolbar/ToolbarMenuItem.tsx
index 55b5a709f0..70c19c25e9 100644
--- a/packages/react/src/components/Toolbar/ToolbarMenuItem.tsx
+++ b/packages/react/src/components/Toolbar/ToolbarMenuItem.tsx
@@ -5,7 +5,7 @@ import cx from 'classnames'
 import * as PropTypes from 'prop-types'
 
 import { EventListener } from '@fluentui/react-component-event-listener'
-import { Ref, toRefObject } from '@fluentui/react-component-ref'
+import { Ref } from '@fluentui/react-component-ref'
 import * as customPropTypes from '@fluentui/react-proptypes'
 import { focusAsync } from '@fluentui/react-bindings'
 import { GetRefs, NodeRef, Unstable_NestingAuto } from '@fluentui/react-component-nesting-registry'
@@ -281,8 +281,6 @@ class ToolbarMenuItem extends AutoControlledComponent<
     } = this.props
     const { menuOpen } = this.state
 
-    const targetRef = toRefObject(this.context.target)
-
     const elementType = (
       <ElementType
         {...accessibility.attributes.root}
@@ -363,7 +361,7 @@ class ToolbarMenuItem extends AutoControlledComponent<
               </Ref>
               <EventListener
                 listener={this.outsideClickHandler(getRefs)}
-                targetRef={targetRef}
+                target={this.context.target}
                 type="click"
               />
             </>
diff --git a/packages/react/src/components/Tooltip/Tooltip.tsx b/packages/react/src/components/Tooltip/Tooltip.tsx
index bdbc0adaeb..b006844dd8 100644
--- a/packages/react/src/components/Tooltip/Tooltip.tsx
+++ b/packages/react/src/components/Tooltip/Tooltip.tsx
@@ -1,16 +1,19 @@
-import { Accessibility, tooltipAsLabelBehavior } from '@fluentui/accessibility'
-import { ReactAccessibilityBehavior } from '@fluentui/react-bindings'
-import { toRefObject, Ref } from '@fluentui/react-component-ref'
+import {
+  Accessibility,
+  tooltipAsLabelBehavior,
+  TooltipBehaviorProps,
+} from '@fluentui/accessibility'
+import { useAccessibility, useAutoControlled, useTelemetry } from '@fluentui/react-bindings'
+import { Ref } from '@fluentui/react-component-ref'
 import * as customPropTypes from '@fluentui/react-proptypes'
-import * as React from 'react'
-import * as PropTypes from 'prop-types'
 import * as _ from 'lodash'
+import * as PropTypes from 'prop-types'
+import * as React from 'react'
+// @ts-ignore
+import { ThemeContext } from 'react-fela'
 
 import {
-  applyAccessibilityKeyHandlers,
   childrenExist,
-  AutoControlledComponent,
-  RenderResultConfig,
   ChildrenComponentProps,
   ContentComponentProps,
   StyledComponentProps,
@@ -19,31 +22,27 @@ import {
   setWhatInputSource,
   getOrGenerateIdFromShorthand,
   createShorthandFactory,
-  ShorthandFactory,
 } from '../../utils'
-import { ShorthandValue, Props } from '../../types'
+import { ShorthandValue, FluentComponentStaticProps, ProviderContextPrepared } from '../../types'
 import {
   ALIGNMENTS,
   POSITIONS,
   Popper,
   BasicPositioningProps,
   PopperChildrenProps,
+  Alignment,
+  Position,
 } from '../../utils/positioner'
-import TooltipContent, { TooltipContentProps } from './TooltipContent'
 import PortalInner from '../Portal/PortalInner'
+import TooltipContent, { TooltipContentProps } from './TooltipContent'
 
 export interface TooltipSlotClassNames {
   content: string
 }
 
-export interface TooltipState {
-  open: boolean
-  contentId: string
-}
-
 export interface TooltipProps
   extends StyledComponentProps<TooltipProps>,
-    ChildrenComponentProps,
+    ChildrenComponentProps<React.ReactElement>,
     ContentComponentProps<ShorthandValue<TooltipContentProps>>,
     BasicPositioningProps {
   /**
@@ -51,7 +50,7 @@ export interface TooltipProps
    * @default tooltipBehavior
    * @available tooltipAsLabelBehavior
    * */
-  accessibility?: Accessibility
+  accessibility?: Accessibility<TooltipBehaviorProps>
 
   /** Additional CSS class name(s) to apply.  */
   className?: string
@@ -69,7 +68,16 @@ export interface TooltipProps
   open?: boolean
 
   /**
-   * TODO: should this be centralized?
+   * Event for request to change 'open' value.
+   * @param event - React's original SyntheticEvent.
+   * @param data - All props and proposed value.
+   */
+  onOpenChange?: (
+    e: React.MouseEvent | React.FocusEvent | React.KeyboardEvent,
+    data: TooltipProps,
+  ) => void
+
+  /**
    * Offset value to apply to rendered component. Accepts the following units:
    * - px or unit-less, interpreted as pixels
    * - %, percentage relative to the length of the trigger element
@@ -98,229 +106,206 @@ export interface TooltipProps
  * @accessibility
  * Implements [ARIA Tooltip](https://www.w3.org/TR/wai-aria-practices-1.1/#tooltip) design pattern.
  */
-export default class Tooltip extends AutoControlledComponent<TooltipProps, TooltipState> {
-  static displayName = 'Tooltip'
-
-  static className = 'ui-tooltip'
-
-  static slotClassNames: TooltipSlotClassNames = {
-    content: `${Tooltip.className}__content`,
-  }
-
-  static Content = TooltipContent
-
-  static propTypes = {
-    ...commonPropTypes.createCommon({
-      as: false,
-      content: false,
+const Tooltip: React.FC<TooltipProps> &
+  FluentComponentStaticProps<TooltipProps> & {
+    Content: typeof TooltipContent
+    slotClassNames: TooltipSlotClassNames
+  } = props => {
+  const context: ProviderContextPrepared = React.useContext(ThemeContext)
+  const { setStart, setEnd } = useTelemetry(Tooltip.displayName, context.telemetry)
+  setStart()
+
+  const {
+    accessibility,
+    align,
+    children,
+    content,
+    mountNode,
+    mouseLeaveDelay,
+    offset,
+    pointing,
+    position,
+    target,
+    trigger,
+  } = props
+
+  const [open, setOpen] = useAutoControlled({
+    defaultValue: props.defaultOpen,
+    value: props.open,
+
+    initialValue: false,
+  })
+
+  const contentRef = React.useRef<HTMLElement>()
+  const pointerTargetRef = React.useRef<HTMLDivElement>()
+  const triggerRef = React.useRef<HTMLElement>()
+
+  const closeTimeoutId = React.useRef<number>()
+  // TODO: Consider `getOrGenerateIdFromShorthand()` as hook and make it SSR safe
+  const contentId = React.useRef<string>()
+  contentId.current = getOrGenerateIdFromShorthand('tooltip-content-', content, contentId.current)
+
+  const getA11Props = useAccessibility(accessibility, {
+    actionHandlers: {
+      close: e => {
+        setTooltipOpen(false, e)
+        e.stopPropagation()
+        e.preventDefault()
+      },
+    },
+    mapPropsToBehavior: () => ({
+      'aria-describedby': props['aria-describedby'],
+      'aria-label': props['aria-label'],
+      'aria-labelledby': props['aria-labelledby'],
+      contentId: contentId.current,
+      open,
     }),
-    align: PropTypes.oneOf(ALIGNMENTS),
-    defaultOpen: PropTypes.bool,
-    inline: PropTypes.bool,
-    mountNode: customPropTypes.domNode,
-    mouseLeaveDelay: PropTypes.number,
-    offset: PropTypes.string,
-    open: PropTypes.bool,
-    onOpenChange: PropTypes.func,
-    pointing: PropTypes.bool,
-    position: PropTypes.oneOf(POSITIONS),
-    target: customPropTypes.domNode,
-    trigger: customPropTypes.every([customPropTypes.disallow(['children']), PropTypes.element]),
-    content: customPropTypes.shorthandAllowingChildren,
-  }
+  })
+
+  const getContentOverrideProps = (
+    predefinedProps: TooltipContentProps,
+  ): TooltipContentProps &
+    Pick<React.DOMAttributes<HTMLDivElement>, 'onMouseEnter' | 'onMouseLeave'> => ({
+    onMouseEnter: (e: React.MouseEvent) => {
+      setTooltipOpen(true, e)
+      _.invoke(predefinedProps, 'onMouseEnter', e)
+    },
+    onMouseLeave: (e: React.MouseEvent) => {
+      setTooltipOpen(false, e)
+      _.invoke(predefinedProps, 'onMouseLeave', e)
+    },
+  })
+
+  const renderPopperChildren = (popperProps: PopperChildrenProps) => {
+    const tooltipContent = TooltipContent.create(content, {
+      defaultProps: () =>
+        getA11Props('tooltip', {
+          open,
+          placement: popperProps.placement,
+          pointing,
+          pointerRef: pointerTargetRef,
+        }),
+      generateKey: false,
+      overrideProps: getContentOverrideProps,
+    })
 
-  static defaultProps: TooltipProps = {
-    align: 'center',
-    position: 'above',
-    mouseLeaveDelay: 10,
-    pointing: true,
-    accessibility: tooltipAsLabelBehavior,
+    return tooltipContent ? <Ref innerRef={contentRef}>{tooltipContent}</Ref> : null
   }
 
-  static autoControlledProps = ['open']
-
-  static create: ShorthandFactory<TooltipProps>
-
-  pointerTargetRef = React.createRef<HTMLDivElement>()
-  triggerRef = React.createRef<HTMLElement>()
-  contentRef = React.createRef<HTMLElement>()
-  closeTimeoutId
+  const shouldStayOpen = (e: React.FocusEvent) =>
+    _.invoke(e, 'currentTarget.contains', e.relatedTarget) ||
+    _.invoke(contentRef.current, 'contains', e.relatedTarget)
 
-  actionHandlers = {
-    close: e => {
-      this.setTooltipOpen(false, e)
-      e.stopPropagation()
-      e.preventDefault()
-    },
+  const trySetOpen = (
+    newValue: boolean,
+    e: React.MouseEvent | React.FocusEvent | React.KeyboardEvent,
+  ) => {
+    setOpen(newValue)
+    _.invoke(props, 'onOpenChange', e, { ...props, ...{ open: newValue } })
   }
 
-  getInitialAutoControlledState(): Partial<TooltipState> {
-    return { open: false }
-  }
+  const setTooltipOpen = (newOpen: boolean, e: React.MouseEvent | React.KeyboardEvent) => {
+    clearTimeout(closeTimeoutId.current)
 
-  static getAutoControlledStateFromProps(
-    props: TooltipProps,
-    state: TooltipState,
-  ): Partial<TooltipState> {
-    return {
-      contentId: getOrGenerateIdFromShorthand('tooltip-content-', props.content, state.contentId),
+    if (newOpen) {
+      trySetOpen(true, e)
+    } else {
+      closeTimeoutId.current = context.target.defaultView.setTimeout(() => {
+        trySetOpen(false, e)
+      }, mouseLeaveDelay)
     }
   }
 
-  renderComponent({
-    classes,
-    rtl,
-    accessibility,
-  }: RenderResultConfig<TooltipProps>): React.ReactNode {
-    const { mountNode, children, trigger } = this.props
-    const tooltipContent = this.renderTooltipContent(classes.content, rtl, accessibility)
-
-    const triggerNode = childrenExist(children) ? children : trigger
-    const triggerElement = triggerNode && (React.Children.only(triggerNode) as React.ReactElement)
-    const triggerProps = this.getTriggerProps(triggerElement)
-
-    return (
-      <>
-        {triggerElement && (
-          <Ref innerRef={this.triggerRef}>
-            {React.cloneElement(triggerElement, {
-              ...accessibility.attributes.trigger,
-              ...triggerProps,
-              ...applyAccessibilityKeyHandlers(accessibility.keyHandlers.trigger, triggerProps),
-            })}
-          </Ref>
-        )}
-        <PortalInner mountNode={mountNode}>{tooltipContent}</PortalInner>
-      </>
-    )
-  }
+  const triggerNode: React.ReactElement | undefined = childrenExist(children) ? children : trigger
+  const triggerElement = triggerNode && React.Children.only(triggerNode)
 
-  getTriggerProps(triggerElement) {
-    const triggerProps: Props = {}
-
-    triggerProps.onFocus = (e, ...args) => {
+  const triggerProps: React.HTMLAttributes<HTMLElement> = {
+    onFocus: (e, ...args) => {
       if (isFromKeyboard()) {
-        this.trySetOpen(true, e)
+        trySetOpen(true, e)
       }
       _.invoke(triggerElement, 'props.onFocus', e, ...args)
-    }
-    triggerProps.onBlur = (e, ...args) => {
-      if (!this.shouldStayOpen(e)) {
-        this.trySetOpen(false, e)
+    },
+    onBlur: (e, ...args) => {
+      if (!shouldStayOpen(e)) {
+        trySetOpen(false, e)
       }
       _.invoke(triggerElement, 'props.onBlur', e, ...args)
-    }
-
-    triggerProps.onMouseEnter = (e, ...args) => {
-      this.setTooltipOpen(true, e)
-      setWhatInputSource('mouse')
+    },
+    onMouseEnter: (e, ...args) => {
+      setTooltipOpen(true, e)
+      setWhatInputSource(context.target, 'mouse')
       _.invoke(triggerElement, 'props.onMouseEnter', e, ...args)
-    }
-    triggerProps.onMouseLeave = (e, ...args) => {
-      this.setTooltipOpen(false, e)
+    },
+    onMouseLeave: (e, ...args) => {
+      setTooltipOpen(false, e)
       _.invoke(triggerElement, 'props.onMouseLeave', e, ...args)
-    }
-
-    return triggerProps
-  }
-
-  getContentProps = (predefinedProps?) => {
-    const contentHandlerProps: Props = {}
-
-    contentHandlerProps.onMouseEnter = (e, contentProps) => {
-      this.setTooltipOpen(true, e)
-      _.invoke(predefinedProps, 'onMouseEnter', e, contentProps)
-    }
-    contentHandlerProps.onMouseLeave = (e, contentProps) => {
-      this.setTooltipOpen(false, e)
-      _.invoke(predefinedProps, 'onMouseLeave', e, contentProps)
-    }
-
-    return contentHandlerProps
-  }
-
-  shouldStayOpen = e =>
-    _.invoke(e, 'currentTarget.contains', e.relatedTarget) ||
-    _.invoke(this.contentRef.current, 'contains', e.relatedTarget)
-
-  renderTooltipContent(
-    tooltipPositionClasses: string,
-    rtl: boolean,
-    accessibility: ReactAccessibilityBehavior,
-  ): JSX.Element {
-    const { align, position, target, offset } = this.props
-    const { open } = this.state
-
-    return (
-      <Popper
-        pointerTargetRef={this.pointerTargetRef}
-        align={align}
-        offset={offset}
-        position={position}
-        enabled={open}
-        rtl={rtl}
-        targetRef={target ? toRefObject(target) : this.triggerRef}
-        children={this.renderPopperChildren.bind(this, tooltipPositionClasses, rtl, accessibility)}
-      />
-    )
-  }
-
-  renderPopperChildren = (
-    tooltipPositionClasses: string,
-    rtl: boolean,
-    accessibility: ReactAccessibilityBehavior,
-    { placement }: PopperChildrenProps,
-  ) => {
-    const { content, pointing } = this.props
-
-    const tooltipContentAttributes = {
-      ...(rtl && { dir: 'rtl' }),
-      ...accessibility.attributes.tooltip,
-      ...accessibility.keyHandlers.tooltip,
-      className: tooltipPositionClasses,
-      ...this.getContentProps(),
-    }
-
-    const tooltipContent = Tooltip.Content.create(content, {
-      defaultProps: () => ({
-        ...tooltipContentAttributes,
-        open: this.state.open,
-        placement,
-        pointing,
-        pointerRef: this.pointerTargetRef,
-      }),
-      generateKey: false,
-      overrideProps: this.getContentProps,
-    })
-
-    return <Ref innerRef={this.contentRef}>{tooltipContent}</Ref>
-  }
-
-  trySetOpen(newValue: boolean, eventArgs: any) {
-    this.setState({ open: newValue })
-    _.invoke(this.props, 'onOpenChange', eventArgs, { ...this.props, ...{ open: newValue } })
+    },
   }
 
-  setTooltipOpen(newOpen, e) {
-    clearTimeout(this.closeTimeoutId)
-    newOpen ? this.trySetOpen(true, e) : this.scheduleTooltipClose(e)
-  }
+  const element = (
+    <>
+      {triggerElement && (
+        <Ref innerRef={triggerRef}>
+          {React.cloneElement(triggerElement, getA11Props('trigger', triggerProps))}
+        </Ref>
+      )}
+      <PortalInner mountNode={mountNode}>
+        <Popper
+          pointerTargetRef={pointerTargetRef}
+          align={align}
+          offset={offset}
+          position={position}
+          enabled={open}
+          rtl={context.rtl}
+          targetRef={target || triggerRef}
+          children={renderPopperChildren}
+        />
+      </PortalInner>
+    </>
+  )
+  setEnd()
+
+  return element
+}
 
-  scheduleTooltipClose = e => {
-    const { mouseLeaveDelay } = this.props
+Tooltip.className = 'ui-tooltip'
+Tooltip.displayName = 'Tooltip'
 
-    this.closeTimeoutId = setTimeout(() => {
-      this.trySetOpen(false, e)
-    }, mouseLeaveDelay)
-  }
+Tooltip.slotClassNames = {
+  content: `${Tooltip.className}__content`,
+}
 
-  close = (e, onClose?: Function) => {
-    if (this.state.open) {
-      this.trySetOpen(false, e)
-      onClose && onClose()
-      e.stopPropagation()
-    }
-  }
+Tooltip.defaultProps = {
+  align: 'center',
+  position: 'above',
+  mouseLeaveDelay: 10,
+  pointing: true,
+  accessibility: tooltipAsLabelBehavior,
+}
+Tooltip.propTypes = {
+  ...commonPropTypes.createCommon({
+    as: false,
+    content: false,
+  }),
+  align: PropTypes.oneOf<Alignment>(ALIGNMENTS),
+  children: PropTypes.element,
+  defaultOpen: PropTypes.bool,
+  mountNode: customPropTypes.domNode,
+  mouseLeaveDelay: PropTypes.number,
+  offset: PropTypes.string,
+  open: PropTypes.bool,
+  onOpenChange: PropTypes.func,
+  pointing: PropTypes.bool,
+  position: PropTypes.oneOf<Position>(POSITIONS),
+  target: customPropTypes.domNode,
+  trigger: customPropTypes.every([customPropTypes.disallow(['children']), PropTypes.element]),
+  content: customPropTypes.shorthandAllowingChildren,
 }
+Tooltip.handledProps = Object.keys(Tooltip.propTypes) as any
+
+Tooltip.Content = TooltipContent
 
 Tooltip.create = createShorthandFactory({ Component: Tooltip, mappedProp: 'content' })
+
+export default Tooltip
diff --git a/packages/react/src/components/Tooltip/TooltipContent.tsx b/packages/react/src/components/Tooltip/TooltipContent.tsx
index a1894582de..41af76b4a4 100644
--- a/packages/react/src/components/Tooltip/TooltipContent.tsx
+++ b/packages/react/src/components/Tooltip/TooltipContent.tsx
@@ -1,23 +1,35 @@
-import * as React from 'react'
-import * as PropTypes from 'prop-types'
+import { Accessibility } from '@fluentui/accessibility'
+import {
+  getElementType,
+  getUnhandledProps,
+  useAccessibility,
+  useStyles,
+  useTelemetry,
+} from '@fluentui/react-bindings'
 import * as customPropTypes from '@fluentui/react-proptypes'
+import Popper from 'popper.js'
+import * as PropTypes from 'prop-types'
+import * as React from 'react'
+// @ts-ignore
+import { ThemeContext } from 'react-fela'
 
 import {
   childrenExist,
   createShorthandFactory,
-  UIComponent,
-  RenderResultConfig,
   UIComponentProps,
   ChildrenComponentProps,
   ContentComponentProps,
   commonPropTypes,
   rtlTextContainer,
-  ShorthandFactory,
 } from '../../utils'
-import { Accessibility } from '@fluentui/accessibility'
 
 import { PopperChildrenProps } from '../../utils/positioner'
-import { WithAsProp, withSafeTypeForAs } from '../../types'
+import {
+  FluentComponentStaticProps,
+  ProviderContextPrepared,
+  WithAsProp,
+  withSafeTypeForAs,
+} from '../../types'
 
 export interface TooltipContentProps
   extends UIComponentProps,
@@ -26,7 +38,7 @@ export interface TooltipContentProps
   /**
    * Accessibility behavior if overridden by the user.
    */
-  accessibility?: Accessibility
+  accessibility?: Accessibility<never>
 
   /** An actual placement value from Popper. */
   placement?: PopperChildrenProps['placement']
@@ -41,42 +53,95 @@ export interface TooltipContentProps
   pointerRef?: React.Ref<HTMLDivElement>
 }
 
-class TooltipContent extends UIComponent<WithAsProp<TooltipContentProps>> {
-  static create: ShorthandFactory<TooltipContentProps>
-
-  static displayName = 'TooltipContent'
-  static className = 'ui-tooltip__content'
+const TooltipContent: React.FC<WithAsProp<TooltipContentProps>> &
+  FluentComponentStaticProps<TooltipContentProps> = props => {
+  const context: ProviderContextPrepared = React.useContext(ThemeContext)
+  const { setStart, setEnd } = useTelemetry(TooltipContent.displayName, context.telemetry)
+  setStart()
 
-  static propTypes = {
-    ...commonPropTypes.createCommon(),
-    placement: PropTypes.string,
-    pointing: PropTypes.bool,
-    pointerRef: customPropTypes.ref,
-  }
-
-  renderComponent({
+  const {
     accessibility,
-    ElementType,
-    classes,
-    unhandledProps,
+    children,
+    className,
+    content,
+    design,
+    open,
+    placement,
+    pointing,
+    pointerRef,
     styles,
-  }: RenderResultConfig<TooltipContentProps>): React.ReactNode {
-    const { children, content, open, pointing, pointerRef } = this.props
-
-    return (
-      <ElementType
-        className={classes.root}
-        {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
-        {...accessibility.attributes.root}
-        {...unhandledProps}
-      >
-        {open && pointing && <div className={classes.pointer} ref={pointerRef} />}
-
-        <div className={classes.content}>{childrenExist(children) ? children : content}</div>
-      </ElementType>
-    )
-  }
+    variables,
+  } = props
+
+  const getA11Props = useAccessibility(accessibility, {
+    debugName: TooltipContent.displayName,
+    rtl: context.rtl,
+  })
+  const { classes } = useStyles(TooltipContent.displayName, {
+    className: TooltipContent.className,
+    mapPropsToStyles: () => ({
+      open,
+      placement,
+      pointing,
+    }),
+    mapPropsToInlineStyles: () => ({
+      className,
+      design,
+      styles,
+      variables,
+    }),
+    rtl: context.rtl,
+  })
+
+  const ElementType = getElementType(props)
+  const unhandledProps = getUnhandledProps(TooltipContent.handledProps, props)
+
+  const element = (
+    <ElementType
+      {...getA11Props('root', {
+        className: classes.root,
+        ...rtlTextContainer.getAttributes({ forElements: [children, content] }),
+        ...unhandledProps,
+      })}
+    >
+      {open && pointing && <div className={classes.pointer} ref={pointerRef} />}
+
+      <div {...getA11Props('content', { className: classes.content })}>
+        {childrenExist(children) ? children : content}
+      </div>
+    </ElementType>
+  )
+  setEnd()
+
+  return element
+}
+
+TooltipContent.displayName = 'TooltipContent'
+TooltipContent.className = 'ui-tooltip__content'
+
+TooltipContent.propTypes = {
+  ...commonPropTypes.createCommon(),
+  placement: PropTypes.oneOf<Popper.Placement>([
+    'auto-start',
+    'auto',
+    'auto-end',
+    'top-start',
+    'top',
+    'top-end',
+    'right-start',
+    'right',
+    'right-end',
+    'bottom-end',
+    'bottom',
+    'bottom-start',
+    'left-end',
+    'left',
+    'left-start',
+  ]),
+  pointing: PropTypes.bool,
+  pointerRef: customPropTypes.ref,
 }
+TooltipContent.handledProps = Object.keys(TooltipContent.propTypes) as any
 
 TooltipContent.create = createShorthandFactory({ Component: TooltipContent, mappedProp: 'content' })
 
diff --git a/packages/react/src/themes/teams-dark/colors.ts b/packages/react/src/themes/teams-dark/colors.ts
index 31e0a7ee28..4230d49171 100644
--- a/packages/react/src/themes/teams-dark/colors.ts
+++ b/packages/react/src/themes/teams-dark/colors.ts
@@ -235,6 +235,7 @@ export const colorScheme: ColorSchemeMapping = {
 
     foregroundHover: colors.white,
     backgroundHover: colors.ruby[600],
+    backgroundHover1: colors.red[400],
 
     foregroundPressed: colors.white,
     backgroundPressed: colors.ruby[700],
diff --git a/packages/react/src/themes/teams-dark/componentVariables.ts b/packages/react/src/themes/teams-dark/componentVariables.ts
index 2d8cf3386f..9efb95edff 100644
--- a/packages/react/src/themes/teams-dark/componentVariables.ts
+++ b/packages/react/src/themes/teams-dark/componentVariables.ts
@@ -14,6 +14,6 @@ export { default as Menu } from './components/Menu/menuVariables'
 export { default as Icon } from './components/Icon/iconVariables'
 export { default as Reaction } from './components/Reaction/reactionVariables'
 export { default as Alert } from './components/Alert/alertVariables'
-export { default as ProviderBox } from './components/Provider/providerBoxVariables'
+export { default as Provider } from './components/Provider/providerVariables'
 export { default as Dropdown } from './components/Dropdown/dropdownVariables'
 export { default as Label } from './components/Label/labelVariables'
diff --git a/packages/react/src/themes/teams-dark/components/Provider/providerBoxVariables.ts b/packages/react/src/themes/teams-dark/components/Provider/providerBoxVariables.ts
deleted file mode 100644
index 5294222dad..0000000000
--- a/packages/react/src/themes/teams-dark/components/Provider/providerBoxVariables.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { ProviderBoxVariables } from '../../../teams/components/Provider/providerBoxVariables'
-
-export default (siteVariables): Partial<ProviderBoxVariables> => ({
-  scrollbarThumbBackgroundColor: siteVariables.colors.grey[450],
-  scrollbarThumbHoverBackgroundColor: siteVariables.colors.grey[400],
-})
diff --git a/packages/react/src/themes/teams-dark/components/Provider/providerVariables.ts b/packages/react/src/themes/teams-dark/components/Provider/providerVariables.ts
new file mode 100644
index 0000000000..6474d9b9e4
--- /dev/null
+++ b/packages/react/src/themes/teams-dark/components/Provider/providerVariables.ts
@@ -0,0 +1,6 @@
+import { ProviderVariables } from '../../../teams/components/Provider/providerVariables'
+
+export default (siteVariables): Partial<ProviderVariables> => ({
+  scrollbarThumbBackgroundColor: siteVariables.colors.grey[450],
+  scrollbarThumbHoverBackgroundColor: siteVariables.colors.grey[400],
+})
diff --git a/packages/react/src/themes/teams-high-contrast/colors.ts b/packages/react/src/themes/teams-high-contrast/colors.ts
index 0241340811..eb7626f747 100644
--- a/packages/react/src/themes/teams-high-contrast/colors.ts
+++ b/packages/react/src/themes/teams-high-contrast/colors.ts
@@ -237,6 +237,7 @@ export const colorScheme: ColorSchemeMapping = {
 
     foregroundHover: colors.black,
     backgroundHover: accessibleYellow,
+    backgroundHover1: accessibleYellow,
 
     foregroundPressed: colors.black,
     backgroundPressed: accessibleYellow,
diff --git a/packages/react/src/themes/teams-high-contrast/componentVariables.ts b/packages/react/src/themes/teams-high-contrast/componentVariables.ts
index 5a5a4b3855..4f53420e2d 100644
--- a/packages/react/src/themes/teams-high-contrast/componentVariables.ts
+++ b/packages/react/src/themes/teams-high-contrast/componentVariables.ts
@@ -19,7 +19,7 @@ export { default as HierarchicalTreeTitle } from './components/HierarchicalTree/
 export { default as Status } from './components/Status/statusVariables'
 export { default as Reaction } from './components/Reaction/reactionVariables'
 export { default as Alert } from './components/Alert/alertVariables'
-export { default as ProviderBox } from './components/Provider/providerBoxVariables'
+export { default as Provider } from './components/Provider/providerVariables'
 export { default as Dropdown } from './components/Dropdown/dropdownVariables'
 export { default as Label } from './components/Label/labelVariables'
 export { default as TooltipContent } from './components/Tooltip/tooltipContentVariables'
diff --git a/packages/react/src/themes/teams-high-contrast/components/Provider/providerBoxVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Provider/providerBoxVariables.ts
deleted file mode 100644
index 238cfdb995..0000000000
--- a/packages/react/src/themes/teams-high-contrast/components/Provider/providerBoxVariables.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { ProviderBoxVariables } from '../../../teams/components/Provider/providerBoxVariables'
-
-export default (siteVariables): Partial<ProviderBoxVariables> => ({
-  scrollbarThumbBackgroundColor: siteVariables.colors.white,
-  scrollbarThumbHoverBackgroundColor: siteVariables.colors.white,
-})
diff --git a/packages/react/src/themes/teams-high-contrast/components/Provider/providerVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Provider/providerVariables.ts
new file mode 100644
index 0000000000..95a9e75347
--- /dev/null
+++ b/packages/react/src/themes/teams-high-contrast/components/Provider/providerVariables.ts
@@ -0,0 +1,6 @@
+import { ProviderVariables } from '../../../teams/components/Provider/providerVariables'
+
+export default (siteVariables): Partial<ProviderVariables> => ({
+  scrollbarThumbBackgroundColor: siteVariables.colors.white,
+  scrollbarThumbHoverBackgroundColor: siteVariables.colors.white,
+})
diff --git a/packages/react/src/themes/teams/animations/index.ts b/packages/react/src/themes/teams/animations/index.ts
index bc091d537f..0b593c1ec3 100755
--- a/packages/react/src/themes/teams/animations/index.ts
+++ b/packages/react/src/themes/teams/animations/index.ts
@@ -2,4 +2,12 @@ import scaleAnimations from './scale'
 import fadeAnimations from './fade'
 import slideAnimations from './slide'
 
-export default { ...fadeAnimations, ...scaleAnimations, ...slideAnimations }
+export default {
+  ...fadeAnimations,
+  ...scaleAnimations,
+  ...slideAnimations,
+  'carousel-slide-to-next-enter': slideAnimations.slideLeftEnterMedium,
+  'carousel-slide-to-next-exit': slideAnimations.slideLeftExitMedium,
+  'carousel-slide-to-previous-enter': slideAnimations.slideRightEnterMedium,
+  'carousel-slide-to-previous-exit': slideAnimations.slideRightExitMedium,
+}
diff --git a/packages/react/src/themes/teams/animations/slide.ts b/packages/react/src/themes/teams/animations/slide.ts
index dead01ce14..7babe13a43 100755
--- a/packages/react/src/themes/teams/animations/slide.ts
+++ b/packages/react/src/themes/teams/animations/slide.ts
@@ -188,7 +188,7 @@ const slideAnimations = {
     fillMode: 'forwards',
   },
   // Slides object in from left to right
-  SlideRightEnterMedium: {
+  slideRightEnterMedium: {
     keyframe: ({ distance }) => ({
       '0%': {
         transform: `translateX(-${distance})`,
diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts
index bdb5771c0f..a08441774f 100644
--- a/packages/react/src/themes/teams/colors.ts
+++ b/packages/react/src/themes/teams/colors.ts
@@ -441,8 +441,11 @@ export const colorScheme: ColorSchemeMapping<ColorScheme, TeamsColorNames> = {
     background2: colors.ruby[500],
     background3: colors.red[400],
     border: colors.red[100],
+
     foregroundHover: colors.white,
     backgroundHover: colors.ruby[600],
+    backgroundHover1: colors.red[400],
+
     foregroundPressed: colors.white,
     backgroundPressed: colors.ruby[700],
   }),
diff --git a/packages/react/src/themes/teams/componentStyles.ts b/packages/react/src/themes/teams/componentStyles.ts
index 2da1609a24..d30b024a15 100644
--- a/packages/react/src/themes/teams/componentStyles.ts
+++ b/packages/react/src/themes/teams/componentStyles.ts
@@ -67,10 +67,9 @@ export { default as MenuDivider } from './components/Menu/menuDividerStyles'
 
 export { default as MenuButton } from './components/MenuButton/menuButtonStyles'
 
-export { default as Popup } from './components/Popup/popupStyles'
 export { default as PopupContent } from './components/Popup/popupContentStyles'
 
-export { default as ProviderBox } from './components/Provider/providerBoxStyles'
+export { default as Provider } from './components/Provider/providerStyles'
 
 export { default as RadioGroupItem } from './components/RadioGroup/radioGroupItemStyles'
 
@@ -103,11 +102,8 @@ export { default as Tree } from './components/Tree/treeStyles'
 export { default as TreeItem } from './components/Tree/treeItemStyles'
 export { default as TreeTitle } from './components/Tree/treeTitleStyles'
 
-export { default as Animation } from './components/Animation/animationStyles'
-
 export { default as Video } from './components/Video/videoStyles'
 
-export { default as Tooltip } from './components/Tooltip/tooltipStyles'
 export { default as TooltipContent } from './components/Tooltip/tooltipContentStyles'
 
 export { default as Carousel } from './components/Carousel/carouselStyles'
diff --git a/packages/react/src/themes/teams/componentVariables.ts b/packages/react/src/themes/teams/componentVariables.ts
index 025fd37ba0..60276e2ae7 100644
--- a/packages/react/src/themes/teams/componentVariables.ts
+++ b/packages/react/src/themes/teams/componentVariables.ts
@@ -54,10 +54,9 @@ export { default as Menu } from './components/Menu/menuVariables'
 export { default as MenuItem } from './components/Menu/menuItemVariables'
 export { default as MenuDivider } from './components/Menu/menuDividerVariables'
 
-export { default as Popup } from './components/Popup/popupVariables'
 export { default as PopupContent } from './components/Popup/popupContentVariables'
 
-export { default as ProviderBox } from './components/Provider/providerBoxVariables'
+export { default as Provider } from './components/Provider/providerVariables'
 
 export { default as RadioGroupItem } from './components/RadioGroup/radioGroupItemVariables'
 
@@ -85,11 +84,8 @@ export { default as ToolbarMenuRadioGroup } from './components/Toolbar/toolbarMe
 
 export { default as TreeTitle } from './components/Tree/treeTitleVariables'
 
-export { default as Animation } from './components/Animation/animationVariables'
-
 export { default as Video } from './components/Video/videoVariables'
 
-export { default as Tooltip } from './components/Tooltip/tooltipVariables'
 export { default as TooltipContent } from './components/Tooltip/tooltipContentVariables'
 
 export { default as SplitButton } from './components/SplitButton/splitButtonVariables'
diff --git a/packages/react/src/themes/teams/components/Accordion/accordionTitleStyles.ts b/packages/react/src/themes/teams/components/Accordion/accordionTitleStyles.ts
index 16f1d2239d..038fa040ee 100644
--- a/packages/react/src/themes/teams/components/Accordion/accordionTitleStyles.ts
+++ b/packages/react/src/themes/teams/components/Accordion/accordionTitleStyles.ts
@@ -2,11 +2,11 @@ import { ComponentSlotStylesPrepared } from '@fluentui/styles'
 import { AccordionTitleProps } from '../../../../components/Accordion/AccordionTitle'
 
 const accordionTitleStyles: ComponentSlotStylesPrepared<AccordionTitleProps> = {
-  root: () => ({
+  root: ({ props: p }) => ({
     display: 'inline-block',
     verticalAlign: 'middle',
     padding: '.5rem 0',
-    cursor: 'pointer',
+    cursor: p.disabled ? 'default' : 'pointer',
   }),
   indicator: () => ({
     userSelect: 'none',
diff --git a/packages/react/src/themes/teams/components/Animation/animationStyles.ts b/packages/react/src/themes/teams/components/Animation/animationStyles.ts
deleted file mode 100644
index aeacc8904d..0000000000
--- a/packages/react/src/themes/teams/components/Animation/animationStyles.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import {
-  ComponentAnimationProp,
-  unstable_createAnimationStyles as createAnimationStyles,
-} from '@fluentui/react-bindings'
-
-export default {
-  root: ({ props: p, theme }) => {
-    const animation: ComponentAnimationProp = {
-      name: p.name,
-      keyframeParams: p.keyframeParams,
-      duration: p.duration,
-      delay: p.delay,
-      iterationCount: p.iterationCount,
-      direction: p.direction,
-      fillMode: p.fillMode,
-      playState: p.playState,
-      timingFunction: p.timingFunction,
-    }
-
-    return createAnimationStyles(animation, theme)
-  },
-}
diff --git a/packages/react/src/themes/teams/components/Animation/animationVariables.ts b/packages/react/src/themes/teams/components/Animation/animationVariables.ts
deleted file mode 100644
index ead516c976..0000000000
--- a/packages/react/src/themes/teams/components/Animation/animationVariables.ts
+++ /dev/null
@@ -1 +0,0 @@
-export default () => {}
diff --git a/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts b/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts
index 1db07b8a24..a872b705eb 100644
--- a/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts
+++ b/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts
@@ -75,7 +75,7 @@ const attachmentStyles: ComponentSlotStylesPrepared<AttachmentProps, AttachmentV
       ...getIconFillOrOutlineStyles({ outline: true }),
 
       ':hover': {
-        iconFilledStyles,
+        ...iconFilledStyles,
         background: 'transparent',
       },
 
diff --git a/packages/react/src/themes/teams/components/Carousel/carouselItemStyles.ts b/packages/react/src/themes/teams/components/Carousel/carouselItemStyles.ts
index 3ae54e5df2..1708a2459b 100644
--- a/packages/react/src/themes/teams/components/Carousel/carouselItemStyles.ts
+++ b/packages/react/src/themes/teams/components/Carousel/carouselItemStyles.ts
@@ -9,6 +9,9 @@ const carouselItemStyles: ComponentSlotStylesPrepared<
 > = {
   root: ({ variables: v }): ICSSInJSStyle => ({
     width: pxToRem(v.width),
+    ':focus': {
+      outline: 'none',
+    },
   }),
 }
 
diff --git a/packages/react/src/themes/teams/components/Carousel/carouselStyles.ts b/packages/react/src/themes/teams/components/Carousel/carouselStyles.ts
index 5b6c156956..8c41d66805 100644
--- a/packages/react/src/themes/teams/components/Carousel/carouselStyles.ts
+++ b/packages/react/src/themes/teams/components/Carousel/carouselStyles.ts
@@ -10,18 +10,23 @@ const carouselStyles: ComponentSlotStylesPrepared<
   root: (): ICSSInJSStyle => ({
     display: 'inline-block',
   }),
-  itemsContainerWrapper: ({ variables: v }): ICSSInJSStyle => ({
+  itemsContainerWrapper: ({ variables: v, props: p }): ICSSInJSStyle => ({
     display: 'flex',
     width: pxToRem(v.width),
     overflowX: 'hidden',
+    border: '1px solid transparent',
+
+    ...(p.shouldFocusContainer &&
+      p.isFromKeyboard && {
+        border: `1px solid ${v.focusOuterBorderColor}`,
+        borderRadius: v.focusOuterBorderRadius,
+      }),
   }),
-  itemsContainer: ({ props: p, variables: v }): ICSSInJSStyle => ({
+  itemsContainer: (): ICSSInJSStyle => ({
     padding: 0,
     margin: 0,
     display: 'flex',
     listStyle: 'none',
-    transform: `translateX(${pxToRem(-v.width * p.activeIndex)})`,
-    transitionDuration: '.4s',
     willChange: 'transform',
   }),
   paddleNext: ({ props: p, variables: v }): ICSSInJSStyle => ({
diff --git a/packages/react/src/themes/teams/components/Carousel/carouselVariables.ts b/packages/react/src/themes/teams/components/Carousel/carouselVariables.ts
index 4ba057134d..ae14d0b7d9 100644
--- a/packages/react/src/themes/teams/components/Carousel/carouselVariables.ts
+++ b/packages/react/src/themes/teams/components/Carousel/carouselVariables.ts
@@ -3,6 +3,8 @@ export interface CarouselVariables {
   height: number
   paddlePreviousSize: number
   paddleNextSize: number
+  focusOuterBorderColor: string
+  focusOuterBorderRadius: string
 }
 
 export default (siteVars): CarouselVariables => ({
@@ -10,4 +12,6 @@ export default (siteVars): CarouselVariables => ({
   height: 300,
   paddlePreviousSize: 32,
   paddleNextSize: 32,
+  focusOuterBorderColor: siteVars.focusOuterBorderColor,
+  focusOuterBorderRadius: siteVars.borderRadius,
 })
diff --git a/packages/react/src/themes/teams/components/Chat/chatItemStyles.ts b/packages/react/src/themes/teams/components/Chat/chatItemStyles.ts
index ee337e4c22..3e2f99fbc2 100644
--- a/packages/react/src/themes/teams/components/Chat/chatItemStyles.ts
+++ b/packages/react/src/themes/teams/components/Chat/chatItemStyles.ts
@@ -1,9 +1,9 @@
 import { ICSSInJSStyle, ComponentSlotStylesPrepared } from '@fluentui/styles'
 import { ChatItemVariables } from './chatItemVariables'
-import { ChatItemProps } from '../../../../components/Chat/ChatItem'
+import { ChatItemStylesProps } from '../../../../components/Chat/ChatItem'
 import { pxToRem } from '../../../../utils'
 
-const chatItemStyles: ComponentSlotStylesPrepared<ChatItemProps, ChatItemVariables> = {
+const chatItemStyles: ComponentSlotStylesPrepared<ChatItemStylesProps, ChatItemVariables> = {
   root: ({ props: p, variables: v }): ICSSInJSStyle => ({
     position: 'relative',
     ...((!p.attached || p.attached === 'top') && { paddingTop: pxToRem(16) }),
diff --git a/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts b/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts
index e0b3e7bf9a..99661574da 100644
--- a/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts
+++ b/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts
@@ -2,16 +2,16 @@ import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles'
 import * as _ from 'lodash'
 import {
   default as ChatMessage,
-  ChatMessageProps,
-  ChatMessageState,
+  ChatMessageStylesProps,
 } from '../../../../components/Chat/ChatMessage'
 import { ChatMessageVariables } from './chatMessageVariables'
 import { screenReaderContainerStyles } from '../../../../utils/accessibility/Styles/accessibilityStyles'
 import { pxToRem } from '../../../../utils'
+import initialPopperStyles from '../../../../utils/positioner/initialStyles'
 import getBorderFocusStyles from '../../getBorderFocusStyles'
 
 const chatMessageStyles: ComponentSlotStylesPrepared<
-  ChatMessageProps & ChatMessageState,
+  ChatMessageStylesProps,
   ChatMessageVariables
 > = {
   root: ({ props: p, variables: v, theme: { siteVariables } }): ICSSInJSStyle => ({
@@ -93,7 +93,9 @@ const chatMessageStyles: ComponentSlotStylesPrepared<
     borderRadius: v.borderRadius,
     boxShadow: v.actionMenuBoxShadow,
     // we need higher zIndex for the action menu in order to be displayed above the focus border of the chat message
-    zIndex: 1000,
+    zIndex: v.overlayZIndex,
+
+    ...(initialPopperStyles as ICSSInJSStyle),
 
     ...(_.isNil(v.showActionMenu) && {
       overflow: p.focused ? 'visible' : 'hidden',
@@ -129,7 +131,7 @@ const chatMessageStyles: ComponentSlotStylesPrepared<
       color: v.timestampColorMine,
     }),
     ...((p.attached === 'bottom' || p.attached === true) &&
-      !p.reactionGroup &&
+      !p.hasReactionGroup &&
       (screenReaderContainerStyles as ICSSInJSStyle)),
   }),
 
@@ -143,7 +145,7 @@ const chatMessageStyles: ComponentSlotStylesPrepared<
         textDecoration: 'underline',
       },
     },
-    ...(p.badge &&
+    ...(p.hasBadge &&
       p.badgePosition === 'end' && {
         marginRight: pxToRem(4),
       }),
@@ -160,14 +162,14 @@ const chatMessageStyles: ComponentSlotStylesPrepared<
       width: 'auto',
       borderRadius: '50%',
       top: pxToRem(4),
-      zIndex: 1,
+      zIndex: v.zIndex,
       [sidePosition]: 0,
       transform: p.badgePosition === 'start' ? 'translateX(-50%)' : 'translateX(50%)',
     }
   },
   reactionGroup: ({ props: p, variables: v }) => ({
     marginLeft: v.reactionGroupMarginLeft,
-    ...(p.badge &&
+    ...(p.hasBadge &&
       p.badgePosition === 'end' && {
         marginRight: pxToRem(2),
       }),
diff --git a/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts b/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts
index b1bee0ca75..0e57d41ada 100644
--- a/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts
+++ b/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts
@@ -29,6 +29,8 @@ export interface ChatMessageVariables {
   reactionGroupBorderColor: string
   showActionMenu?: boolean
   timestampColorMine: string
+  zIndex: number
+  overlayZIndex: number
 }
 
 export default (siteVars): ChatMessageVariables => ({
@@ -60,4 +62,6 @@ export default (siteVars): ChatMessageVariables => ({
   reactionGroupBorderColor: 'transparent',
   showActionMenu: undefined,
   timestampColorMine: siteVars.colors.grey[500],
+  zIndex: siteVars.zIndexes.foreground,
+  overlayZIndex: siteVars.zIndexes.overlay,
 })
diff --git a/packages/react/src/themes/teams/components/Chat/chatStyles.ts b/packages/react/src/themes/teams/components/Chat/chatStyles.ts
index 00cb692be6..6c4c2ca0a7 100644
--- a/packages/react/src/themes/teams/components/Chat/chatStyles.ts
+++ b/packages/react/src/themes/teams/components/Chat/chatStyles.ts
@@ -1,9 +1,9 @@
 import { ICSSInJSStyle, ComponentSlotStylesPrepared } from '@fluentui/styles'
 import { ChatVariables } from './chatVariables'
-import { ChatProps } from '../../../../components/Chat/Chat'
+import { ChatStylesProps } from '../../../../components/Chat/Chat'
 import { pxToRem } from '../../../../utils'
 
-const chatStyles: ComponentSlotStylesPrepared<ChatProps, ChatVariables> = {
+const chatStyles: ComponentSlotStylesPrepared<ChatStylesProps, ChatVariables> = {
   root: ({ variables: v }): ICSSInJSStyle => ({
     backgroundColor: v.backgroundColor,
     border: `1px solid ${v.backgroundColor}`,
diff --git a/packages/react/src/themes/teams/components/Checkbox/checkboxStyles.ts b/packages/react/src/themes/teams/components/Checkbox/checkboxStyles.ts
index 55249efc44..2fae56b316 100644
--- a/packages/react/src/themes/teams/components/Checkbox/checkboxStyles.ts
+++ b/packages/react/src/themes/teams/components/Checkbox/checkboxStyles.ts
@@ -1,12 +1,14 @@
 import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles'
-import Checkbox, { CheckboxProps, CheckboxState } from '../../../../components/Checkbox/Checkbox'
+import Checkbox, { CheckboxProps } from '../../../../components/Checkbox/Checkbox'
 import { CheckboxVariables } from './checkboxVariables'
 import getBorderFocusStyles from '../../getBorderFocusStyles'
 
-const checkboxStyles: ComponentSlotStylesPrepared<
-  CheckboxProps & CheckboxState,
-  CheckboxVariables
-> = {
+export type CheckboxStylesProps = Pick<
+  CheckboxProps,
+  'checked' | 'disabled' | 'labelPosition' | 'toggle'
+>
+
+const checkboxStyles: ComponentSlotStylesPrepared<CheckboxStylesProps, CheckboxVariables> = {
   root: ({ props: p, variables: v, theme: t }): ICSSInJSStyle => ({
     position: 'relative',
 
diff --git a/packages/react/src/themes/teams/components/Dialog/dialogVariables.ts b/packages/react/src/themes/teams/components/Dialog/dialogVariables.ts
index 46125fa610..d7edbbd95c 100644
--- a/packages/react/src/themes/teams/components/Dialog/dialogVariables.ts
+++ b/packages/react/src/themes/teams/components/Dialog/dialogVariables.ts
@@ -38,7 +38,7 @@ export default (siteVariables): Partial<DialogVariables> => ({
   headerMargin: `0 0 ${pxToRem(8)} 0`,
 
   overlayBackground: 'rgba(37, 36, 36, .75)', // todo: update to a palette value when daisy has mapped one
-  overlayZIndex: 1000,
+  overlayZIndex: siteVariables.zIndexes.overlay,
 
   headerActionMargin: `${pxToRem(-3)} ${pxToRem(-8)} 0 0`,
 })
diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
index 97b441ebe1..63ae3beee5 100644
--- a/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
+++ b/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
@@ -148,7 +148,7 @@ const dropdownStyles: ComponentSlotStylesPrepared<DropdownPropsAndState, Dropdow
     borderStyle: 'solid',
     borderWidth: p.open ? v.listBorderWidth : '0px',
     borderColor: v.listBorderColor,
-    zIndex: 1000,
+    zIndex: v.overlayZIndex,
     maxHeight: v.listMaxHeight,
     overflowY: 'auto',
     width: getWidth(p, v),
diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts
index fbca04bd67..96f5f5b5fe 100644
--- a/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts
+++ b/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts
@@ -41,6 +41,7 @@ export interface DropdownVariables {
   toggleIndicatorSize: string
   triggerButtonColorHover: string
   width: string
+  overlayZIndex: number
 }
 
 const [cornerRadius, _12px_asRem] = [3, 12].map(v => pxToRem(v))
@@ -82,6 +83,7 @@ export default (siteVars): DropdownVariables => ({
   toggleIndicatorSize: pxToRem(32),
   triggerButtonColorHover: siteVars.bodyColor,
   width: pxToRem(356),
+  overlayZIndex: siteVars.zIndexes.overlay,
 
   // these should only apply when there is content in the image/media slot:
   listItemHeaderFontSize: siteVars.fontSizes.medium,
diff --git a/packages/react/src/themes/teams/components/Embed/embedStyles.ts b/packages/react/src/themes/teams/components/Embed/embedStyles.ts
index 41650535e5..db1e0e4106 100644
--- a/packages/react/src/themes/teams/components/Embed/embedStyles.ts
+++ b/packages/react/src/themes/teams/components/Embed/embedStyles.ts
@@ -29,7 +29,7 @@ export default {
       ':hover': {
         [`& .${Embed.slotClassNames.control}`]: {
           opacity: 1,
-          zIndex: 1,
+          zIndex: v.zIndex,
         },
       },
     }
diff --git a/packages/react/src/themes/teams/components/Embed/embedVariables.ts b/packages/react/src/themes/teams/components/Embed/embedVariables.ts
index a2592cee96..cc9ea5461b 100644
--- a/packages/react/src/themes/teams/components/Embed/embedVariables.ts
+++ b/packages/react/src/themes/teams/components/Embed/embedVariables.ts
@@ -4,6 +4,7 @@ export interface EmbedVariables {
   width: string
   height: string
   focusBorderColor: string
+  zIndex: number
 }
 
 export default (siteVariables): EmbedVariables => ({
@@ -13,4 +14,5 @@ export default (siteVariables): EmbedVariables => ({
   width: undefined,
   height: undefined,
   focusBorderColor: siteVariables.colors.brand[500],
+  zIndex: siteVariables.zIndexes.foreground,
 })
diff --git a/packages/react/src/themes/teams/components/Flex/flexItemStyles.ts b/packages/react/src/themes/teams/components/Flex/flexItemStyles.ts
index b3c8b58266..0c3386b526 100644
--- a/packages/react/src/themes/teams/components/Flex/flexItemStyles.ts
+++ b/packages/react/src/themes/teams/components/Flex/flexItemStyles.ts
@@ -9,7 +9,7 @@ const flexItemStyles: ComponentSlotStylesPrepared<FlexItemProps, FlexItemVariabl
     return {
       ...(p.align && { alignSelf: toFlexAlignment(p.align) }),
 
-      ...(p.size && toFlexItemSizeValues(v[p.size])),
+      ...(p.size && toFlexItemSizeValues(v.hasOwnProperty(p.size) ? v[p.size] : p.size)),
 
       ...(typeof p.shrink === 'number' && { flexShrink: p.shrink }),
       ...(p.shrink === false && { flexShrink: 0 }),
diff --git a/packages/react/src/themes/teams/components/Icon/iconStyles.ts b/packages/react/src/themes/teams/components/Icon/iconStyles.ts
index f4adc639c0..d94bdd81c9 100644
--- a/packages/react/src/themes/teams/components/Icon/iconStyles.ts
+++ b/packages/react/src/themes/teams/components/Icon/iconStyles.ts
@@ -13,6 +13,11 @@ import { IconXSpacing, IconProps } from '../../../../components/Icon/Icon'
 import { getStyle as getSvgStyle } from './svg'
 import { IconVariables, iconColorAreas } from './iconVariables'
 
+export type IconStylesProps = Pick<
+  IconProps,
+  'bordered' | 'circular' | 'color' | 'disabled' | 'outline' | 'rotate' | 'size' | 'xSpacing'
+> & { isFontIcon: boolean; isSvgIcon: boolean; name?: IconProps['name'] }
+
 export const emptyIcon: ThemeIconSpec = { icon: { content: '?' } }
 
 const getPaddedStyle = (): ICSSInJSStyle => ({
@@ -57,16 +62,11 @@ const getXSpacingStyles = (xSpacing: IconXSpacing, horizontalSpace: string): ICS
   }
 }
 
-const iconStyles: ComponentSlotStylesPrepared<IconProps, IconVariables> = {
+const iconStyles: ComponentSlotStylesPrepared<IconStylesProps, IconVariables> = {
   root: ({ props: p, variables: v, theme: t, rtl }): ICSSInJSStyle => {
-    const iconSpec: ThemeIconSpec = t.icons[p.name] || emptyIcon
-    const isFontIcon = !iconSpec.isSvg
-
+    const iconSpec: ThemeIconSpec = (p.name && t.icons[p.name]) || emptyIcon
     const colors = v.colorScheme[p.color]
 
-    const maybeIcon = t.icons[p.name]
-    const isSvgIcon = maybeIcon && maybeIcon.isSvg
-
     return {
       speak: 'none',
       verticalAlign: 'middle',
@@ -83,7 +83,7 @@ const iconStyles: ComponentSlotStylesPrepared<IconProps, IconVariables> = {
       ...((p.bordered || v.borderColor) &&
         getBorderedStyles(v.borderColor || getIconColor(v, colors))),
 
-      ...(isFontIcon && {
+      ...(p.isFontIcon && {
         fontWeight: 900, // required for the fontAwesome to render
         alignItems: 'center',
         boxSizing: 'content-box',
@@ -102,7 +102,7 @@ const iconStyles: ComponentSlotStylesPrepared<IconProps, IconVariables> = {
 
         transform: rtl ? `scaleX(-1) rotate(${-1 * p.rotate}deg)` : `rotate(${p.rotate}deg)`,
       }),
-      ...(isSvgIcon && { backgroundColor: v.backgroundColor }),
+      ...(p.isSvgIcon && { backgroundColor: v.backgroundColor }),
     }
   },
 
diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/collapse.tsx b/packages/react/src/themes/teams/components/Icon/svg/icons/collapse.tsx
new file mode 100644
index 0000000000..ec34f0d55c
--- /dev/null
+++ b/packages/react/src/themes/teams/components/Icon/svg/icons/collapse.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react'
+import cx from 'classnames'
+import { TeamsProcessedSvgIconSpec } from '../types'
+import { teamsIconClassNames } from '../teamsIconClassNames'
+
+export default {
+  icon: ({ classes }) => (
+    <svg viewBox="8 8 16 16" role="presentation" className={classes.svg} focusable="false">
+      <path
+        className={cx(teamsIconClassNames.outline, classes.outlinePart)}
+        d="M16,23c0,0.14-0.05,0.25-0.15,0.35c-0.1,0.1-0.22,0.15-0.35,0.15c-0.14,0-0.25-0.05-0.35-0.15C15.05,23.25,15,23.14,15,23
+        v-4.29l-4.15,4.14c-0.1,0.1-0.22,0.15-0.35,0.15c-0.14,0-0.25-0.05-0.35-0.15c-0.1-0.1-0.15-0.22-0.15-0.35
+        c0-0.13,0.05-0.25,0.15-0.35L14.29,18H9.5c-0.14,0-0.25-0.05-0.35-0.15C9.05,17.75,9,17.64,9,17.5c0-0.13,0.05-0.25,0.15-0.35
+        C9.25,17.05,9.36,17,9.5,17h6c0.14,0,0.25,0.05,0.35,0.15c0.1,0.1,0.15,0.22,0.15,0.35V23z M23.5,14.5c0,0.14-0.05,0.25-0.15,0.35
+        C23.25,14.95,23.13,15,23,15h-5.5c-0.14,0-0.25-0.05-0.35-0.15c-0.1-0.1-0.15-0.22-0.15-0.35V9c0-0.14,0.05-0.25,0.15-0.35
+        c0.1-0.1,0.22-0.15,0.35-0.15c0.13,0,0.25,0.05,0.35,0.15C17.95,8.75,18,8.86,18,9v4.29l4.15-4.14C22.25,9.05,22.36,9,22.5,9
+        c0.13,0,0.25,0.05,0.35,0.15C22.95,9.25,23,9.36,23,9.5c0,0.14-0.05,0.25-0.15,0.35L18.71,14H23c0.13,0,0.25,0.05,0.35,0.15
+        C23.45,14.25,23.5,14.36,23.5,14.5z"
+      />
+      <path
+        className={cx(teamsIconClassNames.filled, classes.filledPart)}
+        d="M16,17.47v5.5c0,0.14-0.03,0.26-0.08,0.38c-0.05,0.12-0.13,0.23-0.22,0.32c-0.09,0.09-0.2,0.16-0.32,0.22
+        c-0.12,0.05-0.25,0.08-0.38,0.08c-0.14,0-0.26-0.03-0.38-0.08c-0.12-0.05-0.23-0.13-0.32-0.22c-0.09-0.09-0.16-0.2-0.22-0.32
+        C14.03,23.23,14,23.1,14,22.97v-3.09l-3.29,3.3c-0.09,0.09-0.2,0.17-0.32,0.21c-0.12,0.05-0.26,0.07-0.39,0.07
+        c-0.14,0-0.26-0.03-0.38-0.08c-0.12-0.05-0.23-0.13-0.32-0.22c-0.09-0.09-0.16-0.2-0.22-0.32C9.03,22.73,9,22.6,9,22.47
+        c0-0.13,0.02-0.27,0.07-0.39c0.05-0.12,0.12-0.23,0.21-0.32l3.3-3.29H9.5c-0.14,0-0.26-0.03-0.38-0.08C9,18.33,8.89,18.26,8.8,18.17
+        c-0.09-0.09-0.16-0.2-0.22-0.32C8.53,17.73,8.5,17.6,8.5,17.47c0-0.13,0.03-0.26,0.08-0.38c0.05-0.12,0.13-0.23,0.22-0.32
+        c0.09-0.09,0.2-0.16,0.32-0.22c0.12-0.05,0.25-0.08,0.38-0.08H15c0.13,0,0.26,0.03,0.38,0.08c0.12,0.05,0.23,0.13,0.32,0.22
+        c0.09,0.09,0.16,0.2,0.22,0.32C15.97,17.21,16,17.34,16,17.47z M24,14.47c0,0.14-0.03,0.26-0.08,0.38
+        c-0.05,0.12-0.13,0.23-0.22,0.32c-0.09,0.09-0.2,0.16-0.32,0.22c-0.12,0.05-0.25,0.08-0.38,0.08h-6c-0.14,0-0.26-0.03-0.38-0.08
+        c-0.12-0.05-0.23-0.13-0.32-0.22c-0.09-0.09-0.16-0.2-0.22-0.32C16.03,14.73,16,14.6,16,14.47v-5.5c0-0.13,0.03-0.26,0.08-0.38
+        c0.05-0.12,0.13-0.23,0.22-0.32c0.09-0.09,0.2-0.16,0.32-0.22C16.74,8,16.86,7.97,17,7.97c0.13,0,0.26,0.03,0.38,0.08
+        c0.12,0.05,0.23,0.13,0.32,0.22c0.09,0.09,0.16,0.2,0.22,0.32C17.97,8.71,18,8.84,18,8.97v3.09l3.29-3.3
+        c0.09-0.09,0.2-0.17,0.32-0.21c0.12-0.05,0.25-0.07,0.39-0.07c0.13,0,0.26,0.03,0.38,0.08c0.12,0.05,0.23,0.13,0.32,0.22
+        c0.09,0.09,0.16,0.2,0.22,0.32C22.97,9.21,23,9.34,23,9.47c0,0.14-0.03,0.27-0.07,0.39c-0.05,0.12-0.12,0.23-0.21,0.32l-3.3,3.29H23
+        c0.13,0,0.26,0.03,0.38,0.08c0.12,0.05,0.23,0.13,0.32,0.22c0.09,0.09,0.16,0.2,0.22,0.32C23.97,14.21,24,14.34,24,14.47z"
+      />
+    </svg>
+  ),
+  styles: {},
+} as TeamsProcessedSvgIconSpec
diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/companion.tsx b/packages/react/src/themes/teams/components/Icon/svg/icons/companion.tsx
new file mode 100644
index 0000000000..f2d26665ca
--- /dev/null
+++ b/packages/react/src/themes/teams/components/Icon/svg/icons/companion.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react'
+import cx from 'classnames'
+import { TeamsProcessedSvgIconSpec } from '../types'
+import { teamsIconClassNames } from '../teamsIconClassNames'
+
+export default {
+  icon: ({ classes }) => (
+    <svg className={classes.svg} viewBox="8 8 16 16" role="presentation" focusable="false">
+      <path
+        className={cx(teamsIconClassNames.outline, classes.outlinePart)}
+        d="M14,21H11.5a.5.5,0,0,0,0,1H14Zm0-2H9.65A.64.64,0,0,1,9,18.35v-6.7A.64.64,0,0,1,9.65,11H14V10H9.65A1.65,1.65,0,0,0,8,11.65v6.7A1.65,1.65,0,0,0,9.65,20H13.9Zm7.6-4.5a2.73,2.73,0,0,1-.5-.05V19H16V11.5a.51.51,0,0,1,.5-.5h1.05a2.52,2.52,0,0,1,0-1H16.5A1.5,1.5,0,0,0,15,11.5v9A1.5,1.5,0,0,0,16.5,22h4A1.5,1.5,0,0,0,22,20.5V14.45A2.73,2.73,0,0,1,21.5,14.5ZM19,21H18a.5.5,0,0,1,0-1h1a.5.5,0,0,1,0,1Zm3-11V8H21v2H19v1h2v2h1V11h2V10Z"
+      />
+      <path
+        className={cx(teamsIconClassNames.filled, classes.filledPart)}
+        d="M14,21H11.5a.5.5,0,0,0,0,1H14Zm0-11H9.65A1.65,1.65,0,0,0,8,11.65v6.7A1.65,1.65,0,0,0,9.65,20H13.9Zm7.55,4.5a2.73,2.73,0,0,1-.5-.05V19H16V11.5a.51.51,0,0,1,.5-.5h1.05a2.52,2.52,0,0,1,0-1H16.5A1.5,1.5,0,0,0,15,11.5v9A1.5,1.5,0,0,0,16.5,22h4A1.5,1.5,0,0,0,22,20.5V14.45A2.73,2.73,0,0,1,21.5,14.5ZM19,21H18a.5.5,0,0,1,0-1h1a.5.5,0,0,1,0,1Zm3-11V8H21v2H19v1h2v2h1V11h2V10Z"
+      />
+    </svg>
+  ),
+  styles: {},
+} as TeamsProcessedSvgIconSpec
diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/expand.tsx b/packages/react/src/themes/teams/components/Icon/svg/icons/expand.tsx
new file mode 100644
index 0000000000..fc59657336
--- /dev/null
+++ b/packages/react/src/themes/teams/components/Icon/svg/icons/expand.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react'
+import cx from 'classnames'
+import { TeamsProcessedSvgIconSpec } from '../types'
+import { teamsIconClassNames } from '../teamsIconClassNames'
+
+export default {
+  icon: ({ classes }) => (
+    <svg viewBox="8 8 16 16" role="presentation" className={classes.svg} focusable="false">
+      <path
+        className={cx(teamsIconClassNames.outline, classes.outlinePart)}
+        d="M15.5,22.5c0,0.14-0.05,0.25-0.15,0.35C15.25,22.95,15.14,23,15,23H9.5c-0.14,0-0.25-0.05-0.35-0.15
+            C9.05,22.75,9,22.64,9,22.5V17c0-0.13,0.05-0.25,0.15-0.35c0.1-0.1,0.22-0.15,0.35-0.15c0.14,0,0.25,0.05,0.35,0.15
+            C9.95,16.75,10,16.87,10,17v4.29l4.15-4.14c0.1-0.1,0.22-0.15,0.35-0.15c0.14,0,0.25,0.05,0.35,0.15c0.1,0.1,0.15,0.22,0.15,0.35
+            c0,0.14-0.05,0.25-0.15,0.35L10.71,22H15c0.14,0,0.25,0.05,0.35,0.15C15.45,22.25,15.5,22.37,15.5,22.5z M23,15
+            c0,0.14-0.05,0.25-0.15,0.35c-0.1,0.1-0.22,0.15-0.35,0.15c-0.14,0-0.25-0.05-0.35-0.15C22.05,15.25,22,15.14,22,15v-4.29
+            l-4.15,4.14c-0.1,0.1-0.22,0.15-0.35,0.15c-0.14,0-0.25-0.05-0.35-0.15c-0.1-0.1-0.15-0.22-0.15-0.35c0-0.14,0.05-0.25,0.15-0.35
+            L21.29,10H16.5c-0.14,0-0.25-0.05-0.35-0.15C16.05,9.75,16,9.64,16,9.5c0-0.14,0.05-0.25,0.15-0.35C16.25,9.05,16.36,9,16.5,9h6
+            c0.13,0,0.25,0.05,0.35,0.15C22.95,9.25,23,9.36,23,9.5V15z"
+      />
+      <path
+        className={cx(teamsIconClassNames.filled, classes.filledPart)}
+        d="M16,22.5c0,0.14-0.03,0.26-0.08,0.38c-0.05,0.12-0.13,0.23-0.22,0.32c-0.09,0.09-0.2,0.16-0.32,0.22
+            c-0.12,0.05-0.25,0.08-0.38,0.08H9.5c-0.14,0-0.26-0.03-0.38-0.08C9,23.36,8.89,23.29,8.8,23.2c-0.09-0.09-0.16-0.2-0.22-0.32
+            C8.53,22.76,8.5,22.64,8.5,22.5V17c0-0.13,0.03-0.26,0.08-0.38c0.05-0.12,0.13-0.23,0.22-0.32c0.09-0.09,0.2-0.16,0.32-0.22
+            C9.24,16.03,9.36,16,9.5,16c0.13,0,0.26,0.03,0.38,0.08c0.12,0.05,0.23,0.13,0.32,0.22c0.09,0.09,0.16,0.2,0.22,0.32
+            c0.05,0.12,0.08,0.25,0.08,0.38v3.09l3.29-3.3c0.09-0.09,0.2-0.17,0.32-0.21c0.12-0.05,0.25-0.07,0.39-0.07
+            c0.13,0,0.26,0.03,0.38,0.08c0.12,0.05,0.23,0.13,0.32,0.22c0.09,0.09,0.16,0.2,0.22,0.32c0.05,0.12,0.08,0.25,0.08,0.38
+            c0,0.14-0.02,0.27-0.07,0.39c-0.05,0.12-0.12,0.23-0.21,0.32l-3.3,3.29H15c0.13,0,0.26,0.03,0.38,0.08
+            c0.12,0.05,0.23,0.13,0.32,0.22c0.09,0.09,0.16,0.2,0.22,0.32C15.97,22.24,16,22.37,16,22.5z M23.5,9.5V15
+            c0,0.14-0.03,0.26-0.08,0.38c-0.05,0.12-0.13,0.23-0.22,0.32c-0.09,0.09-0.2,0.16-0.32,0.22C22.76,15.97,22.63,16,22.5,16
+            c-0.14,0-0.26-0.03-0.38-0.08c-0.12-0.05-0.23-0.13-0.32-0.22c-0.09-0.09-0.16-0.2-0.22-0.32c-0.05-0.12-0.08-0.25-0.08-0.38v-3.09
+            l-3.29,3.3c-0.09,0.09-0.2,0.17-0.32,0.21c-0.12,0.05-0.26,0.07-0.39,0.07c-0.14,0-0.26-0.03-0.38-0.08
+            c-0.12-0.05-0.23-0.13-0.32-0.22c-0.09-0.09-0.16-0.2-0.22-0.32c-0.05-0.12-0.08-0.25-0.08-0.38c0-0.14,0.02-0.27,0.07-0.39
+            c0.05-0.12,0.12-0.23,0.21-0.32l3.3-3.29H16.5c-0.14,0-0.26-0.03-0.38-0.08c-0.12-0.05-0.23-0.13-0.32-0.22
+            c-0.09-0.09-0.16-0.2-0.22-0.32C15.53,9.76,15.5,9.64,15.5,9.5c0-0.13,0.03-0.26,0.08-0.38C15.64,9,15.71,8.89,15.8,8.8
+            c0.09-0.09,0.2-0.16,0.32-0.22c0.12-0.05,0.25-0.08,0.38-0.08h6c0.13,0,0.26,0.03,0.38,0.08C23,8.64,23.11,8.71,23.2,8.8
+            c0.09,0.09,0.16,0.2,0.22,0.32C23.47,9.24,23.5,9.37,23.5,9.5z"
+      />
+    </svg>
+  ),
+  styles: {},
+} as TeamsProcessedSvgIconSpec
diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts b/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts
index a96603c78c..13c0f6a36e 100644
--- a/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts
+++ b/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts
@@ -44,23 +44,8 @@ import clipboardCopiedTo from './clipboardCopiedTo'
 import close from './close'
 import closedCaptions from './closedCaptions'
 import codeSnippet from './codeSnippet'
-import filesAftereffects from './filesAftereffects'
-import filesCode from './filesCode'
-import filesEmpty from './filesEmpty'
-import filesFlash from './filesFlash'
-import filesGif from './filesGif'
-import filesIllustrator from './filesIllustrator'
-import filesImage from './filesImage'
-import filesIndesign from './filesIndesign'
-import filesPdf from './filesPdf'
-import filesPhotoshop from './filesPhotoshop'
-import filesSketch from './filesSketch'
-import filesSound from './filesSound'
-import filesTxt from './filesTxt'
-import filesUpload from './filesUpload'
-import filesVideo from './filesVideo'
-import filesZip from './filesZip'
-import flag from './flag'
+import collapse from './collapse'
+import companion from './companion'
 import download from './download'
 import edit from './edit'
 import email from './email'
@@ -68,19 +53,37 @@ import emoji from './emoji'
 import error from './error'
 import exclamationCircle from './exclamationCircle'
 import exclamationTriangle from './exclamationTriangle'
+import expand from './expand'
 import eye from './eye'
 import eyeFriendlier from './eyeFriendlier'
 import eyeSlash from './eyeSlash'
+import filesAftereffects from './filesAftereffects'
+import filesCode from './filesCode'
+import filesEmpty from './filesEmpty'
 import filesExcel from './filesExcel'
 import filesExcelBrand from './filesExcelBrand'
+import filesFlash from './filesFlash'
+import filesGif from './filesGif'
+import filesIllustrator from './filesIllustrator'
+import filesImage from './filesImage'
+import filesIndesign from './filesIndesign'
 import filesOneNote from './filesOneNote'
 import filesOneNoteBrand from './filesOneNoteBrand'
+import filesPdf from './filesPdf'
+import filesPhotoshop from './filesPhotoshop'
 import filesPowerPoint from './filesPowerPoint'
 import filesPowerPointBrand from './filesPowerPointBrand'
-import filesWord from './filesWord'
-import filesWordBrand from './filesWordBrand'
+import filesSketch from './filesSketch'
+import filesSound from './filesSound'
+import filesTxt from './filesTxt'
+import filesUpload from './filesUpload'
+import filesVideo from './filesVideo'
 import filesVisio from './filesVisio'
 import filesVisioBrand from './filesVisioBrand'
+import filesWord from './filesWord'
+import filesWordBrand from './filesWordBrand'
+import filesZip from './filesZip'
+import flag from './flag'
 import fontColor from './fontColor'
 import fontSize from './fontSize'
 import format from './format'
@@ -89,6 +92,7 @@ import giphy from './giphy'
 import hand from './hand'
 import highlight from './highlight'
 import horizontalRule from './horizontalRule'
+import iconCircle from './iconCircle'
 import imageUnavailable from './image-unavailable'
 import indent from './indent'
 import info from './info'
@@ -112,7 +116,6 @@ import notes from './notes'
 import notificationsMuted from './notificationsMuted'
 import numberList from './numberList'
 import oneDrive from './oneDrive'
-import userPhone from './userPhone'
 import outdent from './outdent'
 import openOutside from './openOutside'
 import pause from './pause'
@@ -137,15 +140,16 @@ import removeFormat from './removeFormat'
 import reply from './reply'
 import retry from './retry'
 import robot from './robot'
-import shareAlt from './shareAlt'
-import skypeLogo from './skypeLogo'
-import snooze from './snooze'
 import search from './search'
 import send from './send'
 import settings from './settings'
+import settingsAudio from './settingsAudio'
+import shareAlt from './shareAlt'
+import shareTo from './shareTo'
+import skypeLogo from './skypeLogo'
+import snooze from './snooze'
 import speakerMute from './speakerMute'
 import star from './star'
-import iconCircle from './iconCircle'
 import sticker from './sticker'
 import strike from './strike'
 import sync from './sync'
@@ -169,6 +173,7 @@ import undo from './undo'
 import urgent from './urgent'
 import userBlur from './userBlur'
 import userFriends from './userFriends'
+import userPhone from './userPhone'
 import videoCameraEmphasis from './videoCameraEmphasis'
 import volume from './volume'
 import volumeDown from './volumeDown'
@@ -224,6 +229,8 @@ export default {
   close,
   'closed-captions': closedCaptions,
   'code-snippet': codeSnippet,
+  collapse,
+  companion,
   'files-aftereffects': filesAftereffects,
   'files-code': filesCode,
   'files-empty': filesEmpty,
@@ -248,6 +255,7 @@ export default {
   error,
   'exclamation-circle': exclamationCircle,
   'exclamation-triangle': exclamationTriangle,
+  expand,
   eye,
   'eye-friendlier': eyeFriendlier,
   'eye-slash': eyeSlash,
@@ -310,7 +318,9 @@ export default {
   search,
   send,
   settings,
+  'settings-audio': settingsAudio,
   'share-alt': shareAlt,
+  'share-to': shareTo,
   star,
   sticker,
   strike,
diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/settingsAudio.tsx b/packages/react/src/themes/teams/components/Icon/svg/icons/settingsAudio.tsx
new file mode 100644
index 0000000000..2673bc9995
--- /dev/null
+++ b/packages/react/src/themes/teams/components/Icon/svg/icons/settingsAudio.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react'
+import cx from 'classnames'
+import { TeamsProcessedSvgIconSpec } from '../types'
+import { teamsIconClassNames } from '../teamsIconClassNames'
+
+export default {
+  icon: ({ classes }) => (
+    <svg className={classes.svg} viewBox="8 8 16 16" role="presentation" focusable="false">
+      <path
+        className={cx(teamsIconClassNames.outline, classes.outlinePart)}
+        d="M16.49,10a.5.5,0,0,1,.5.5V18h1.5a.5.5,0,0,1,0,1h-4a.5.5,0,0,1,0-1H16V10.5A.51.51,0,0,1,16.49,10ZM12,21.5a.5.5,0,0,1-.5.5.51.51,0,0,1-.5-.5V15h1Zm5,0a.5.5,0,0,1-.5.5.51.51,0,0,1-.5-.5V20h1ZM11.49,10a.5.5,0,0,1,.5.5V13h1.5a.5.5,0,1,1,0,1h-4a.5.5,0,0,1,0-1H11V10.5A.51.51,0,0,1,11.49,10ZM22,21.5a.5.5,0,0,1-.5.5.51.51,0,0,1-.5-.5V17h1ZM21.49,10a.5.5,0,0,1,.5.5V15h1.5a.5.5,0,0,1,0,1h-4a.5.5,0,1,1,0-1H21V10.5A.51.51,0,0,1,21.49,10Z"
+      />
+      <path
+        className={cx(teamsIconClassNames.filled, classes.filledPart)}
+        d="M16,10a1,1,0,0,1,1,1v6h.54c.73,0,1.46.11,1.46,1a1,1,0,0,1-1,1H14a1,1,0,0,1-1-1c0-1.15,1.2-1,2-1V11A1,1,0,0,1,16,10ZM12,22a1,1,0,0,1-2,0V16h2Zm5,0a1,1,0,0,1-2,0V21h2ZM11,10c1.15,0,1,1.2,1,2h.54c.73,0,1.46.11,1.46,1a1,1,0,0,1-1,1H9a1,1,0,0,1-1-1c0-1.15,1.2-1,2-1,0-.18,0-.36,0-.54C10,10.73,10.1,10,11,10ZM22,22a1,1,0,0,1-2,0V17h2ZM21,10a1,1,0,0,1,1,1v2h.54c.73,0,1.46.11,1.46,1a1,1,0,0,1-1,1H19a1,1,0,0,1-1-1c0-1.15,1.2-1,2-1V11A1,1,0,0,1,21,10Z"
+      />
+    </svg>
+  ),
+  styles: {},
+} as TeamsProcessedSvgIconSpec
diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/shareTo.tsx b/packages/react/src/themes/teams/components/Icon/svg/icons/shareTo.tsx
new file mode 100644
index 0000000000..63fe059cf2
--- /dev/null
+++ b/packages/react/src/themes/teams/components/Icon/svg/icons/shareTo.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react'
+import cx from 'classnames'
+import { TeamsProcessedSvgIconSpec } from '../types'
+import { teamsIconClassNames } from '../teamsIconClassNames'
+
+export default {
+  icon: ({ classes }) => (
+    <svg className={classes.svg} viewBox="8 8 16 16" role="presentation" focusable="false">
+      <path
+        className={cx(teamsIconClassNames.outline, classes.outlinePart)}
+        d="M21.49,10A1.53,1.53,0,0,1,23,11.5v7a1.53,1.53,0,0,1-1.5,1.5H18v1c.22,0,.44,0,.66,0s.84.08.84.53a.5.5,0,0,1-.5.5H13a.51.51,0,0,1-.5-.5c0-.48.46-.53.84-.53q.33,0,.66,0V20c-.22,0-.44,0-.65,0s-.85-.1-.85-.53A.51.51,0,0,1,13,19h8.5a.5.5,0,0,0,.5-.5v-7a.5.5,0,0,0-.5-.5h-11a.51.51,0,0,0-.5.5V16a.5.5,0,0,1-.5.5A.51.51,0,0,1,9,16V11.5a1.54,1.54,0,0,1,1.5-1.5ZM15,20v1h2V20Zm.5-7a.5.5,0,0,1,.5.5V17a.5.5,0,0,1-.5.5A.51.51,0,0,1,15,17V14.71L9.84,19.85a.45.45,0,0,1-.35.15.5.5,0,0,1-.35-.85L14.28,14H12a.5.5,0,0,1,0-1Z"
+      />
+      <path
+        className={cx(teamsIconClassNames.filled, classes.filledPart)}
+        d="M21.49,10A1.52,1.52,0,0,1,23,11.5v7a1.52,1.52,0,0,1-1.5,1.5H18v1c.22,0,.44,0,.66,0s.84.08.84.53a.5.5,0,0,1-.5.5H13a.51.51,0,0,1-.5-.5c0-.48.46-.53.84-.53q.33,0,.66,0V20c-.22,0-.44,0-.65,0s-.85-.1-.85-.53A.51.51,0,0,1,13,19h8.5a.5.5,0,0,0,.5-.5v-7a.5.5,0,0,0-.5-.5h-11a.51.51,0,0,0-.5.5V16a.5.5,0,0,1-.5.5A.51.51,0,0,1,9,16V11.5a1.52,1.52,0,0,1,1.5-1.5ZM15,20v1h2V20Zm.5-7.5a1,1,0,0,1,1,1V17a1,1,0,0,1-1,1c-1.17,0-1-1.28-1-2.09l-4.29,4.3a.94.94,0,0,1-.71.29,1,1,0,0,1-1-1,1,1,0,0,1,.29-.71l4.3-4.29h-.63c-.7,0-1.46-.14-1.46-1a1,1,0,0,1,1-1Z"
+      />
+    </svg>
+  ),
+  styles: {},
+} as TeamsProcessedSvgIconSpec
diff --git a/packages/react/src/themes/teams/components/Input/inputStyles.ts b/packages/react/src/themes/teams/components/Input/inputStyles.ts
index cdb8b3037c..7bb62a90df 100644
--- a/packages/react/src/themes/teams/components/Input/inputStyles.ts
+++ b/packages/react/src/themes/teams/components/Input/inputStyles.ts
@@ -19,6 +19,8 @@ const inputStyles: ComponentSlotStylesPrepared<InputProps, InputVariables> = {
       backgroundColor: v.backgroundColorInverted,
     }),
 
+    lineHeight: 'unset',
+
     color: v.fontColor,
 
     borderColor: v.borderColor,
diff --git a/packages/react/src/themes/teams/components/Input/inputVariables.ts b/packages/react/src/themes/teams/components/Input/inputVariables.ts
index 447521c242..f894a1bdfc 100644
--- a/packages/react/src/themes/teams/components/Input/inputVariables.ts
+++ b/packages/react/src/themes/teams/components/Input/inputVariables.ts
@@ -24,10 +24,10 @@ export default (siteVars): InputVariables => ({
   iconPosition: 'absolute',
   iconRight: pxToRem(10),
   iconLeft: pxToRem(6),
-  inputPaddingWithIconAtStart: `${pxToRem(7)} ${pxToRem(12)} ${pxToRem(7)} ${pxToRem(24)}`,
-  inputPaddingWithIconAtEnd: `${pxToRem(7)} ${pxToRem(24)} ${pxToRem(7)} ${pxToRem(12)}`,
+  inputPaddingWithIconAtStart: `${pxToRem(5)} ${pxToRem(12)} ${pxToRem(5)} ${pxToRem(24)}`,
+  inputPaddingWithIconAtEnd: `${pxToRem(5)} ${pxToRem(24)} ${pxToRem(5)} ${pxToRem(12)}`,
 
-  inputPadding: `${pxToRem(7)} ${pxToRem(12)}`,
+  inputPadding: `${pxToRem(5)} ${pxToRem(12)}`,
 
   borderColor: 'transparent',
   borderRadius: `${pxToRem(3)} ${pxToRem(3)} ${pxToRem(2)} ${pxToRem(2)}`,
diff --git a/packages/react/src/themes/teams/components/Label/labelStyles.ts b/packages/react/src/themes/teams/components/Label/labelStyles.ts
index 49f1a4a728..e555c59f55 100644
--- a/packages/react/src/themes/teams/components/Label/labelStyles.ts
+++ b/packages/react/src/themes/teams/components/Label/labelStyles.ts
@@ -4,7 +4,12 @@ import { LabelProps } from '../../../../components/Label/Label'
 import { LabelVariables } from './labelVariables'
 import { getColorScheme } from '../../colors'
 
-const labelStyles: ComponentSlotStylesPrepared<LabelProps, LabelVariables> = {
+export type LabelStylesProps = Pick<LabelProps, 'circular' | 'color' | 'imagePosition'> & {
+  hasImage: boolean
+  hasActionableIcon: boolean
+}
+
+const labelStyles: ComponentSlotStylesPrepared<LabelStylesProps, LabelVariables> = {
   root: ({ props: p, variables: v }): ICSSInJSStyle => {
     const colors = getColorScheme(v.colorScheme, p.color)
 
@@ -19,7 +24,7 @@ const labelStyles: ComponentSlotStylesPrepared<LabelProps, LabelVariables> = {
       fontSize: pxToRem(14),
       borderRadius: pxToRem(3),
       padding: v.padding,
-      ...(p.image &&
+      ...(p.hasImage &&
         (p.imagePosition === 'start'
           ? { paddingLeft: v.startPaddingLeft }
           : { paddingRight: v.endPaddingRight })),
@@ -35,9 +40,7 @@ const labelStyles: ComponentSlotStylesPrepared<LabelProps, LabelVariables> = {
   }),
 
   icon: ({ props: p }): ICSSInJSStyle =>
-    p.icon &&
-    typeof p.icon === 'object' &&
-    (p.icon as any).onClick && {
+    p.hasActionableIcon && {
       cursor: 'pointer',
     },
 }
diff --git a/packages/react/src/themes/teams/components/List/listItemStyles.ts b/packages/react/src/themes/teams/components/List/listItemStyles.ts
index a013736dd1..d54efcb050 100644
--- a/packages/react/src/themes/teams/components/List/listItemStyles.ts
+++ b/packages/react/src/themes/teams/components/List/listItemStyles.ts
@@ -72,7 +72,7 @@ const listItemStyles: ComponentSlotStylesPrepared<ListItemStylesProps, ListItemV
         ':focus': borderFocusStyles[':focus'],
         ':focus-visible': {
           ...borderFocusStyles[':focus-visible'],
-          zIndex: 1,
+          zIndex: v.zIndex,
         },
 
         ...(p.selected && selectedStyle(v)),
diff --git a/packages/react/src/themes/teams/components/List/listItemVariables.ts b/packages/react/src/themes/teams/components/List/listItemVariables.ts
index 7941c0e8de..d83f67a113 100644
--- a/packages/react/src/themes/teams/components/List/listItemVariables.ts
+++ b/packages/react/src/themes/teams/components/List/listItemVariables.ts
@@ -6,6 +6,7 @@ export interface ListItemVariables {
 
   headerLineHeight: string
   headerFontSize: string
+  zIndex: number
 
   // Header Media
   headerMediaFontSize: string
@@ -31,6 +32,7 @@ export default (siteVariables: any): ListItemVariables => {
   return {
     minHeight: pxToRem(48),
     rootPadding: `0 ${pxToRem(18)} 0 ${pxToRem(20)}`,
+    zIndex: siteVariables.zIndexes.foreground,
 
     // Header
     // TODO: prod app uses 17.5px here, it should be 16px per the design guide!
diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts
index 081c70bc9c..896cf78122 100644
--- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts
+++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts
@@ -134,14 +134,14 @@ const pointingBeak = ({
       height: pxToRem(10),
       border: 'none',
       ...borders,
-      zIndex: 2,
+      zIndex: v.beakZIndex,
       transition: 'background .1s ease',
     },
   }
 }
 
 const menuItemStyles: ComponentSlotStylesPrepared<MenuItemPropsAndState, MenuVariables> = {
-  wrapper: ({ props, variables: v, theme }): ICSSInJSStyle => {
+  wrapper: ({ props, variables: v }): ICSSInJSStyle => {
     const {
       active,
       disabled,
@@ -425,7 +425,7 @@ const menuItemStyles: ComponentSlotStylesPrepared<MenuItemPropsAndState, MenuVar
     }),
   }),
 
-  menu: () => ({ zIndex: 1000 }),
+  menu: ({ variables: v }) => ({ zIndex: v.menuZIndex }),
 
   indicator: ({ props: p }) => ({
     position: 'relative',
diff --git a/packages/react/src/themes/teams/components/Menu/menuVariables.ts b/packages/react/src/themes/teams/components/Menu/menuVariables.ts
index 8ea319c5c3..d4680ac5dd 100644
--- a/packages/react/src/themes/teams/components/Menu/menuVariables.ts
+++ b/packages/react/src/themes/teams/components/Menu/menuVariables.ts
@@ -57,6 +57,9 @@ export interface MenuVariables {
 
   dividerHeight: string
   borderWidth: string
+
+  menuZIndex: number
+  beakZIndex: number
 }
 
 export default (siteVars: any): MenuVariables => {
@@ -122,5 +125,7 @@ export default (siteVars: any): MenuVariables => {
 
     dividerHeight: pxToRem(1),
     borderWidth: pxToRem(1),
+    menuZIndex: siteVars.zIndexes.overlay,
+    beakZIndex: siteVars.zIndexes.menuItem,
   }
 }
diff --git a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
index 8edba1828e..4182a8430f 100644
--- a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
@@ -2,14 +2,23 @@ import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles'
 import { PopupContentProps } from '../../../../components/Popup/PopupContent'
 import { PopupContentVariables } from './popupContentVariables'
 import getPointerStyles from '../../getPointerStyles'
+import initialPopperStyles from '../../../../utils/positioner/initialStyles'
 
 const popupContentStyles: ComponentSlotStylesPrepared<PopupContentProps, PopupContentVariables> = {
   root: ({ props: p, variables: v, rtl }): ICSSInJSStyle => ({
     border: `${v.borderSize} solid ${v.borderColor}`,
     borderRadius: v.borderRadius,
+
+    background: v.backgroundColor,
+    color: v.color,
     boxShadow: v.boxShadow,
 
     display: 'block',
+    textAlign: 'left',
+    zIndex: v.zIndex,
+
+    ...(initialPopperStyles as ICSSInJSStyle),
+
     ...(p.pointing && getPointerStyles(v.pointerOffset, v.pointerMargin, rtl, p.placement).root),
   }),
 
@@ -27,7 +36,7 @@ const popupContentStyles: ComponentSlotStylesPrepared<PopupContentProps, PopupCo
     ...getPointerStyles(v.pointerOffset, v.pointerMargin, rtl, p.placement).pointer,
   }),
 
-  content: ({ props: p, variables: v }): ICSSInJSStyle => ({
+  content: ({ variables: v }): ICSSInJSStyle => ({
     display: 'block',
     padding: v.padding,
   }),
diff --git a/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts b/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
index f6de209a54..307dec5280 100644
--- a/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
@@ -5,6 +5,8 @@ export interface PopupContentVariables {
   borderRadius: string
   borderSize: string
 
+  backgroundColor: string
+  color: string
   boxShadow: string
 
   padding: string
@@ -12,6 +14,8 @@ export interface PopupContentVariables {
   pointerMargin: string
   pointerOffset: string
   pointerSize: string
+
+  zIndex: number
 }
 
 export default (siteVars: any): PopupContentVariables => {
@@ -20,6 +24,8 @@ export default (siteVars: any): PopupContentVariables => {
     borderRadius: pxToRem(3),
     borderSize: '1px',
 
+    backgroundColor: siteVars.colorScheme.default.background,
+    color: siteVars.colorScheme.default.foreground,
     boxShadow: siteVars.shadowLevel3,
 
     padding: `${pxToRem(10)} ${pxToRem(14)}`,
@@ -27,5 +33,7 @@ export default (siteVars: any): PopupContentVariables => {
     pointerOffset: pxToRem(5),
     pointerMargin: pxToRem(10),
     pointerSize: pxToRem(10),
+
+    zIndex: siteVars.zIndexes.overlay,
   }
 }
diff --git a/packages/react/src/themes/teams/components/Popup/popupStyles.ts b/packages/react/src/themes/teams/components/Popup/popupStyles.ts
deleted file mode 100644
index 8ad693c618..0000000000
--- a/packages/react/src/themes/teams/components/Popup/popupStyles.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles'
-import { PopupProps } from '../../../../components/Popup/Popup'
-import { PopupVariables } from './popupVariables'
-
-const popupStyles: ComponentSlotStylesPrepared<PopupProps, PopupVariables> = {
-  root: (): ICSSInJSStyle => ({}),
-
-  popup: ({ variables: v }): ICSSInJSStyle => ({
-    zIndex: v.zIndex,
-    textAlign: 'left',
-    color: v.contentColor,
-    background: v.contentBackgroundColor,
-
-    // Prevents scroll issue, waiting for Popper.js to add this style once initiated.
-    // https://github.com/mui-org/material-ui/issues/16740
-    position: 'fixed',
-    // Fix Popper.js initial positioning display issue
-    // https://github.com/mui-org/material-ui/issues/17774
-    top: 0,
-    left: '0px /* @noflip */',
-  }),
-}
-
-export default popupStyles
diff --git a/packages/react/src/themes/teams/components/Popup/popupVariables.ts b/packages/react/src/themes/teams/components/Popup/popupVariables.ts
deleted file mode 100644
index 7e311d2280..0000000000
--- a/packages/react/src/themes/teams/components/Popup/popupVariables.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export interface PopupVariables {
-  zIndex: number
-  contentColor: string
-  contentBackgroundColor: string
-}
-
-export default (siteVars: any): PopupVariables => ({
-  zIndex: 1000,
-  contentColor: siteVars.colorScheme.default.foreground,
-  contentBackgroundColor: siteVars.colorScheme.default.background,
-})
diff --git a/packages/react/src/themes/teams/components/Provider/providerBoxStyles.ts b/packages/react/src/themes/teams/components/Provider/providerStyles.ts
similarity index 85%
rename from packages/react/src/themes/teams/components/Provider/providerBoxStyles.ts
rename to packages/react/src/themes/teams/components/Provider/providerStyles.ts
index 58ce4fad9f..ffe336bb7f 100644
--- a/packages/react/src/themes/teams/components/Provider/providerBoxStyles.ts
+++ b/packages/react/src/themes/teams/components/Provider/providerStyles.ts
@@ -1,10 +1,10 @@
 import { ComponentStyleFunctionParam, ICSSInJSStyle } from '@fluentui/styles'
-import { ProviderBoxVariables } from './providerBoxVariables'
+import { ProviderVariables } from './providerVariables'
 
 export default {
   root: ({
     variables: v,
-  }: ComponentStyleFunctionParam<never, ProviderBoxVariables>): ICSSInJSStyle => ({
+  }: ComponentStyleFunctionParam<never, ProviderVariables>): ICSSInJSStyle => ({
     background: v.background,
     color: v.color,
     textAlign: 'left',
diff --git a/packages/react/src/themes/teams/components/Provider/providerBoxVariables.ts b/packages/react/src/themes/teams/components/Provider/providerVariables.ts
similarity index 87%
rename from packages/react/src/themes/teams/components/Provider/providerBoxVariables.ts
rename to packages/react/src/themes/teams/components/Provider/providerVariables.ts
index 2c2ff4c68d..0e0669bdc5 100644
--- a/packages/react/src/themes/teams/components/Provider/providerBoxVariables.ts
+++ b/packages/react/src/themes/teams/components/Provider/providerVariables.ts
@@ -1,6 +1,6 @@
 import { pxToRem } from '../../../../utils'
 
-export interface ProviderBoxVariables {
+export interface ProviderVariables {
   background: string
   color: string
 
@@ -15,7 +15,7 @@ export interface ProviderBoxVariables {
   scrollbarThumbHoverBorderSize: string
 }
 
-export default (siteVariables): Partial<ProviderBoxVariables> => ({
+export default (siteVariables): Partial<ProviderVariables> => ({
   background: siteVariables.bodyBackground,
   color: siteVariables.bodyColor,
 
diff --git a/packages/react/src/themes/teams/components/Slider/sliderStyles.ts b/packages/react/src/themes/teams/components/Slider/sliderStyles.ts
index 67eb97709c..55c248123c 100644
--- a/packages/react/src/themes/teams/components/Slider/sliderStyles.ts
+++ b/packages/react/src/themes/teams/components/Slider/sliderStyles.ts
@@ -1,9 +1,11 @@
 import * as React from 'react'
 import { SliderVariables } from './sliderVariables'
-import Slider, { SliderProps, SliderState } from '../../../../components/Slider/Slider'
+import Slider, { SliderProps } from '../../../../components/Slider/Slider'
 import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles'
 import getBorderFocusStyles from '../../getBorderFocusStyles'
 
+export type SliderStylesProps = Pick<SliderProps, 'fluid' | 'disabled' | 'vertical'>
+
 const selectors = {
   WEBKIT_THUMB: '::-webkit-slider-thumb',
   MOZ_THUMB: '::-moz-range-thumb',
@@ -26,7 +28,7 @@ const thumbFromPreviousSiblingSelector = `&+ .${Slider.slotClassNames.thumb}`
 
 const getFluidStyles = (p: SliderProps) => p.fluid && !p.vertical && { width: '100%' }
 
-const sliderStyles: ComponentSlotStylesPrepared<SliderProps & SliderState, SliderVariables> = {
+const sliderStyles: ComponentSlotStylesPrepared<SliderStylesProps, SliderVariables> = {
   root: ({ props: p, variables: v }): ICSSInJSStyle => ({
     height: v.height,
 
diff --git a/packages/react/src/themes/teams/components/Status/statusStyles.ts b/packages/react/src/themes/teams/components/Status/statusStyles.ts
index 6ac2d2056f..8960f96769 100644
--- a/packages/react/src/themes/teams/components/Status/statusStyles.ts
+++ b/packages/react/src/themes/teams/components/Status/statusStyles.ts
@@ -3,6 +3,8 @@ import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles'
 import { StatusProps } from '../../../../components/Status/Status'
 import { StatusVariables } from './statusVariables'
 
+export type StatusStylesProps = Pick<StatusProps, 'color' | 'size' | 'state'>
+
 const getBackgroundColor = (state: string, variables: StatusVariables) => {
   switch (state) {
     case 'success':
@@ -55,7 +57,7 @@ export const getSizeStyles = (sizeInPx: number, variables: StatusVariables) => {
   }
 }
 
-const statusStyles: ComponentSlotStylesPrepared<StatusProps, StatusVariables> = {
+const statusStyles: ComponentSlotStylesPrepared<StatusStylesProps, StatusVariables> = {
   root: ({ props: { color, size, state }, variables }): ICSSInJSStyle => {
     return {
       display: 'inline-flex',
diff --git a/packages/react/src/themes/teams/components/Text/textStyles.ts b/packages/react/src/themes/teams/components/Text/textStyles.ts
index 4886306882..0db3a091eb 100644
--- a/packages/react/src/themes/teams/components/Text/textStyles.ts
+++ b/packages/react/src/themes/teams/components/Text/textStyles.ts
@@ -3,81 +3,82 @@ import { TeamsTextVariables } from './textVariables'
 import { TextProps } from '../../../../components/Text/Text'
 import { getColorSchemeKey } from '../../colors'
 import translateAlignProp from '../../../../styles/translateAlignProp'
-import { WithAsProp } from '../../../../types'
+
+export type TextStylesProps = Pick<
+  TextProps,
+  | 'atMention'
+  | 'color'
+  | 'important'
+  | 'timestamp'
+  | 'truncated'
+  | 'disabled'
+  | 'error'
+  | 'success'
+  | 'temporary'
+  | 'align'
+  | 'weight'
+  | 'size'
+>
 
 export default {
   root: ({
-    props: {
-      as,
-      atMention,
-      color,
-      important,
-      timestamp,
-      truncated,
-      disabled,
-      error,
-      success,
-      temporary,
-      align,
-      weight,
-      size,
-    },
+    props: p,
     variables: v,
-  }: ComponentStyleFunctionParam<WithAsProp<TextProps>, TeamsTextVariables>): ICSSInJSStyle => {
-    const colors = v.colorScheme[getColorSchemeKey(color)]
+  }: ComponentStyleFunctionParam<TextStylesProps, TeamsTextVariables>): ICSSInJSStyle => {
+    const colors = v.colorScheme[getColorSchemeKey(p.color)]
     return {
-      ...(color && { color: colors.foreground }),
-      ...(atMention === true && { color: v.atMentionOtherColor }),
-      ...(truncated && { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }),
-      ...(disabled && { color: v.disabledColor }),
-      ...(error && { color: v.errorColor }),
-      ...(success && { color: v.successColor }),
-      ...(temporary && { fontStyle: 'italic' }),
-      ...(align && { display: 'block', textAlign: translateAlignProp(align) }), // textAlign makes sense only for block elements
+      ...(p.color && { color: colors.foreground }),
+      ...(p.atMention === true && { color: v.atMentionOtherColor }),
+      ...(p.truncated && { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }),
+      ...(p.disabled && { color: v.disabledColor }),
+      ...(p.error && { color: v.errorColor }),
+      ...(p.success && { color: v.successColor }),
+      ...(p.temporary && { fontStyle: 'italic' }),
+      ...(p.align && { display: 'block', textAlign: translateAlignProp(p.align) }), // textAlign makes sense only for block elements
 
-      ...(weight === 'light' && { fontWeight: v.fontWeightLight }),
-      ...(weight === 'semilight' && { fontWeight: v.fontWeightSemilight }),
-      ...(weight === 'regular' && { fontWeight: v.fontWeightRegular }),
-      ...(weight === 'semibold' && { fontWeight: v.fontWeightSemibold }),
-      ...(weight === 'bold' && { fontWeight: v.fontWeightBold }),
+      ...(p.weight === 'light' && { fontWeight: v.fontWeightLight }),
+      ...(p.weight === 'semilight' && { fontWeight: v.fontWeightSemilight }),
+      ...(p.weight === 'regular' && { fontWeight: v.fontWeightRegular }),
+      ...(p.weight === 'semibold' && { fontWeight: v.fontWeightSemibold }),
+      ...(p.weight === 'bold' && { fontWeight: v.fontWeightBold }),
 
-      ...(size === 'smallest' && {
+      ...(p.size === 'smallest' && {
         fontSize: v.fontSizeSmallest,
         lineHeight: v.fontLineHeightSmallest,
       }),
-      ...(size === 'smaller' && {
+      ...(p.size === 'smaller' && {
         fontSize: v.fontSizeSmaller,
         lineHeight: v.fontLineHeightSmaller,
       }),
-      ...(size === 'small' && {
+      ...(p.size === 'small' && {
         fontSize: v.fontSizeSmall,
         lineHeight: v.fontLineHeightSmall,
       }),
-      ...(size === 'medium' && {
+      ...(p.size === 'medium' && {
         fontSize: v.fontSizeMedium,
         lineHeight: v.fontLineHeightMedium,
       }),
-      ...(size === 'large' && {
+      ...(p.size === 'large' && {
         fontSize: v.fontSizeLarge,
         lineHeight: v.fontLineHeightLarge,
       }),
-      ...(size === 'larger' && {
+      ...(p.size === 'larger' && {
         fontSize: v.fontSizeLarger,
         lineHeight: v.fontLineHeightLarger,
       }),
-      ...(size === 'largest' && {
+      ...(p.size === 'largest' && {
         fontSize: v.fontSizeLargest,
         lineHeight: v.fontLineHeightLargest,
       }),
-      ...(atMention === 'me' && {
+      ...(p.atMention === 'me' && {
         color: v.atMentionMeColor,
         fontWeight: v.atMentionMeFontWeight,
       }),
-      ...(timestamp && {
+      ...(p.timestamp && {
         color: v.timestampColor,
         ':hover': { color: v.timestampHoverColor },
       }),
-      ...(important && {
+      ...(p.important && {
         color: v.importantColor,
         fontWeight: v.importantWeight,
       }),
diff --git a/packages/react/src/themes/teams/components/Toolbar/toolbarMenuItemStyles.ts b/packages/react/src/themes/teams/components/Toolbar/toolbarMenuItemStyles.ts
index 245c1c7aa2..bfe5dac2ca 100644
--- a/packages/react/src/themes/teams/components/Toolbar/toolbarMenuItemStyles.ts
+++ b/packages/react/src/themes/teams/components/Toolbar/toolbarMenuItemStyles.ts
@@ -19,6 +19,7 @@ const toolbarMenuItemStyles = {
       borderColor: 'transparent',
       display: 'flex',
       alignItems: 'center',
+      textAlign: 'left',
       width: '100%',
       maxWidth: '100%',
       padding: v.menuItemPadding,
diff --git a/packages/react/src/themes/teams/components/Toolbar/toolbarMenuStyles.ts b/packages/react/src/themes/teams/components/Toolbar/toolbarMenuStyles.ts
index 9fd3fafd52..d8afa903cb 100644
--- a/packages/react/src/themes/teams/components/Toolbar/toolbarMenuStyles.ts
+++ b/packages/react/src/themes/teams/components/Toolbar/toolbarMenuStyles.ts
@@ -7,7 +7,6 @@ const toolbarMenuStyles = {
 
     return {
       display: 'flex',
-      zIndex: 1000,
       flexDirection: 'column',
       listStyleType: 'none',
       margin: 0,
@@ -19,6 +18,7 @@ const toolbarMenuStyles = {
       borderWidth: v.menuBorderWidth,
       borderRadius: v.menuBorderRadius,
       width: v.menuWidth,
+      zIndex: v.overlayZIndex,
     }
   },
 }
diff --git a/packages/react/src/themes/teams/components/Toolbar/toolbarVariables.ts b/packages/react/src/themes/teams/components/Toolbar/toolbarVariables.ts
index e9b1520a92..339f4ea210 100644
--- a/packages/react/src/themes/teams/components/Toolbar/toolbarVariables.ts
+++ b/packages/react/src/themes/teams/components/Toolbar/toolbarVariables.ts
@@ -65,6 +65,8 @@ export interface ToolbarVariables {
 
   customItemHorizontalPadding: string
   customItemVerticalPadding: string
+
+  overlayZIndex: number
 }
 
 export default (siteVars: any): ToolbarVariables => ({
@@ -120,4 +122,6 @@ export default (siteVars: any): ToolbarVariables => ({
 
   customItemHorizontalPadding: pxToRem(16),
   customItemVerticalPadding: pxToRem(4),
+
+  overlayZIndex: siteVars.zIndexes.overlay,
 })
diff --git a/packages/react/src/themes/teams/components/Tooltip/tooltipContentStyles.ts b/packages/react/src/themes/teams/components/Tooltip/tooltipContentStyles.ts
index 54ca394687..30d20fc137 100644
--- a/packages/react/src/themes/teams/components/Tooltip/tooltipContentStyles.ts
+++ b/packages/react/src/themes/teams/components/Tooltip/tooltipContentStyles.ts
@@ -5,6 +5,8 @@ import getPointerStyles from '../../getPointerStyles'
 import pointerSvg from '../../pointerSvgUrl'
 import { PopperChildrenProps } from '../../../../utils/positioner'
 
+type TooltipContentStylesProps = Pick<TooltipContentProps, 'placement' | 'pointing' | 'open'>
+
 const getPointerOffset = (
   placement: PopperChildrenProps['placement'],
   v: TooltipContentVariables,
@@ -19,7 +21,7 @@ const getPointerOffset = (
     : v.pointerHorizontalOffset
 
 const tooltipContentStyles: ComponentSlotStylesPrepared<
-  TooltipContentProps,
+  TooltipContentStylesProps,
   TooltipContentVariables
 > = {
   root: ({ props: p, variables: v, rtl }): ICSSInJSStyle => {
@@ -37,7 +39,16 @@ const tooltipContentStyles: ComponentSlotStylesPrepared<
       maxWidth: v.maxWidth,
       color: v.color,
       background: v.backgroundColor,
+
+      zIndex: v.zIndex,
+      position: 'absolute',
+      textAlign: 'left',
+
       ...(p.pointing && svgPointerStyles.root),
+
+      ...(!p.open && {
+        opacity: 0,
+      }),
     }
   },
   pointer: ({ props: p, variables: v, rtl }): ICSSInJSStyle => {
@@ -59,7 +70,7 @@ const tooltipContentStyles: ComponentSlotStylesPrepared<
       ...svgPointerStyles.pointer,
     }
   },
-  content: ({ props: p, variables: v }): ICSSInJSStyle => ({
+  content: ({ variables: v }): ICSSInJSStyle => ({
     display: 'block',
     padding: v.padding,
 
diff --git a/packages/react/src/themes/teams/components/Tooltip/tooltipContentVariables.ts b/packages/react/src/themes/teams/components/Tooltip/tooltipContentVariables.ts
index fba45cfb17..da56847be9 100644
--- a/packages/react/src/themes/teams/components/Tooltip/tooltipContentVariables.ts
+++ b/packages/react/src/themes/teams/components/Tooltip/tooltipContentVariables.ts
@@ -17,6 +17,8 @@ export interface TooltipContentVariables {
 
   color: string
   backgroundColor: string
+
+  zIndex: number
 }
 
 export default (siteVars: any): TooltipContentVariables => ({
@@ -35,4 +37,6 @@ export default (siteVars: any): TooltipContentVariables => ({
   pointerHeight: pxToRem(16),
   color: siteVars.colorScheme.default.foreground3,
   backgroundColor: siteVars.colors.grey[500],
+
+  zIndex: siteVars.zIndexes.overlay,
 })
diff --git a/packages/react/src/themes/teams/components/Tooltip/tooltipStyles.ts b/packages/react/src/themes/teams/components/Tooltip/tooltipStyles.ts
deleted file mode 100644
index 3d0393210d..0000000000
--- a/packages/react/src/themes/teams/components/Tooltip/tooltipStyles.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles'
-import { TooltipProps } from '../../../../components/Tooltip/Tooltip'
-import { TooltipVariables } from './tooltipVariables'
-
-const tooltipStyles: ComponentSlotStylesPrepared<TooltipProps, TooltipVariables> = {
-  root: (): ICSSInJSStyle => ({}),
-
-  content: ({ variables: v, props: p }): ICSSInJSStyle => ({
-    ...(!p.open && {
-      opacity: 0,
-    }),
-    zIndex: v.zIndex,
-    position: 'absolute',
-    textAlign: 'left',
-  }),
-}
-
-export default tooltipStyles
diff --git a/packages/react/src/themes/teams/components/Tooltip/tooltipVariables.ts b/packages/react/src/themes/teams/components/Tooltip/tooltipVariables.ts
deleted file mode 100644
index e4ae68c059..0000000000
--- a/packages/react/src/themes/teams/components/Tooltip/tooltipVariables.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export interface TooltipVariables {
-  zIndex: number
-}
-
-export default (siteVars: any): TooltipVariables => ({
-  zIndex: 1000,
-})
diff --git a/packages/react/src/themes/teams/getBorderFocusStyles.ts b/packages/react/src/themes/teams/getBorderFocusStyles.ts
index ce78a1d596..c668a19f17 100644
--- a/packages/react/src/themes/teams/getBorderFocusStyles.ts
+++ b/packages/react/src/themes/teams/getBorderFocusStyles.ts
@@ -55,14 +55,14 @@ const getBorderFocusStyles = (args: BorderFocusStyles): ICSSInJSStyle => {
       borderColor: 'transparent',
 
       ':before': getPseudoElementStyles({
-        zIndex: '1',
+        zIndex: sv.zIndexes.foreground,
         borderEdgeValue: borderPadding == null ? '0' : `-${borderPadding}`,
         borderColor: focusInnerBorderColor,
         ...defaultBorderStyles,
       }),
 
       ':after': getPseudoElementStyles({
-        zIndex: '1',
+        zIndex: sv.zIndexes.foreground,
         borderEdgeValue:
           borderPadding == null
             ? `-${borderWidth}`
diff --git a/packages/react/src/themes/teams/siteVariables.ts b/packages/react/src/themes/teams/siteVariables.ts
index 2703f88f72..46b80466d0 100644
--- a/packages/react/src/themes/teams/siteVariables.ts
+++ b/packages/react/src/themes/teams/siteVariables.ts
@@ -61,6 +61,18 @@ export const lineHeightMedium = 1.4286
 export const lineHeightLarge = 1.3333
 export const lineHeightLarger = 1.3333
 
+//
+// Z-INDEX
+// Used to maintain proper stack order of components
+//
+export const zIndexes: Record<string, number> = {
+  background: 0, // Default value
+  foreground: 1, // Put a component in front
+  menuItem: 2, // Currently used only for menu item beak element
+  overlay: 1000, // Dialog/popup/menu overlays
+  debug: 999999999, // for debug purposes
+}
+
 //
 // SEMANTIC ASSIGNMENTS
 //
diff --git a/packages/react/src/themes/teams/types.ts b/packages/react/src/themes/teams/types.ts
index c5c9615bf5..5d37eb463b 100644
--- a/packages/react/src/themes/teams/types.ts
+++ b/packages/react/src/themes/teams/types.ts
@@ -16,10 +16,10 @@ import { AttachmentProps } from '../../components/Attachment/Attachment'
 import { AvatarStylesProps } from './components/Avatar/avatarStyles'
 import { ButtonGroupProps } from '../../components/Button/ButtonGroup'
 import { ButtonStylesProps } from './components/Button/buttonStyles'
-import { ChatItemProps } from '../../components/Chat/ChatItem'
-import { ChatMessageProps } from '../../components/Chat/ChatMessage'
-import { ChatProps } from '../../components/Chat/Chat'
-import { CheckboxProps } from '../../components/Checkbox/Checkbox'
+import { ChatItemStylesProps } from '../../components/Chat/ChatItem'
+import { ChatMessageStylesProps } from '../../components/Chat/ChatMessage'
+import { ChatStylesProps } from '../../components/Chat/Chat'
+import { CheckboxStylesProps } from './components/Checkbox/checkboxStyles'
 import { DividerProps } from '../../components/Divider/Divider'
 import { DropdownProps } from '../../components/Dropdown/Dropdown'
 import { EmbedProps } from '../../components/Embed/Embed'
@@ -30,11 +30,11 @@ import { FormProps } from '../../components/Form/Form'
 import { GridProps } from '../../components/Grid/Grid'
 import { HeaderDescriptionProps } from '../../components/Header/HeaderDescription'
 import { HeaderProps } from '../../components/Header/Header'
-import { IconProps } from '../../components/Icon/Icon'
+import { IconStylesProps } from './components/Icon/iconStyles'
 import { ImageStylesProps } from './components/Image/imageStyles'
 import { InputProps } from '../../components/Input/Input'
 import { ItemLayoutProps } from '../../components/ItemLayout/ItemLayout'
-import { LabelProps } from '../../components/Label/Label'
+import { LabelStylesProps } from './components/Label/labelStyles'
 import { LayoutProps } from '../../components/Layout/Layout'
 import { ListStylesProps } from './components/List/listStyles'
 import { ListItemStylesProps } from './components/List/listItemStyles'
@@ -42,22 +42,20 @@ import { LoaderProps } from '../../components/Loader/Loader'
 import { MenuItemProps } from '../../components/Menu/MenuItem'
 import { MenuProps } from '../../components/Menu/Menu'
 import { PopupContentProps } from '../../components/Popup/PopupContent'
-import { PopupProps } from '../../components/Popup/Popup'
 import { PortalProps } from '../../components/Portal/Portal'
 import { RadioGroupItemProps } from '../../components/RadioGroup/RadioGroupItem'
 import { RadioGroupProps } from '../../components/RadioGroup/RadioGroup'
 import { ReactionGroupProps } from '../../components/Reaction/ReactionGroup'
 import { ReactionProps } from '../../components/Reaction/Reaction'
 import { SegmentProps } from '../../components/Segment/Segment'
-import { SliderProps } from '../../components/Slider/Slider'
-import { StatusProps } from '../../components/Status/Status'
-import { TextProps } from '../../components/Text/Text'
+import { SliderStylesProps } from './components/Slider/sliderStyles'
+import { StatusStylesProps } from './components/Status/statusStyles'
+import { TextStylesProps } from './components/Text/textStyles'
 import { ToolbarDividerProps } from '../../components/Toolbar/ToolbarDivider'
 import { ToolbarItemProps } from '../../components/Toolbar/ToolbarItem'
 import { ToolbarProps } from '../../components/Toolbar/Toolbar'
 import { ToolbarRadioGroupProps } from '../../components/Toolbar/ToolbarRadioGroup'
 import { TooltipContentProps } from '../../components/Tooltip/TooltipContent'
-import { TooltipProps } from '../../components/Tooltip/Tooltip'
 import { HierarchicalTreeItemProps } from '../../components/HierarchicalTree/HierarchicalTreeItem'
 import { HierarchicalTreeProps } from '../../components/HierarchicalTree/HierarchicalTree'
 import { HierarchicalTreeTitleProps } from '../../components/HierarchicalTree/HierarchicalTreeTitle'
@@ -73,10 +71,10 @@ export type TeamsThemeStylesProps = {
   Avatar?: AvatarStylesProps
   Button?: ButtonStylesProps
   ButtonGroup?: ButtonGroupProps
-  Chat?: ChatProps
-  ChatItem?: ChatItemProps
-  ChatMessage?: ChatMessageProps
-  Checkbox?: CheckboxProps
+  Chat?: ChatStylesProps
+  ChatItem?: ChatItemStylesProps
+  ChatMessage?: ChatMessageStylesProps
+  Checkbox?: CheckboxStylesProps
   Divider?: DividerProps
   Dropdown?: DropdownProps
   Embed?: EmbedProps
@@ -87,11 +85,11 @@ export type TeamsThemeStylesProps = {
   Grid?: GridProps
   Header?: HeaderProps
   HeaderDescription?: HeaderDescriptionProps
-  Icon?: IconProps
+  Icon?: IconStylesProps
   Image?: ImageStylesProps
   Input?: InputProps
   ItemLayout?: ItemLayoutProps
-  Label?: LabelProps
+  Label?: LabelStylesProps
   Layout?: LayoutProps
   List?: ListStylesProps
   ListItem?: ListItemStylesProps
@@ -99,22 +97,20 @@ export type TeamsThemeStylesProps = {
   Menu?: MenuProps
   MenuItem?: MenuItemProps
   Portal?: PortalProps
-  Popup?: PopupProps
   PopupContent?: PopupContentProps
   RadioGroup?: RadioGroupProps
   RadioGroupItem?: RadioGroupItemProps
   Reaction?: ReactionProps
   ReactionGroup?: ReactionGroupProps
   Segment?: SegmentProps
-  Slider?: SliderProps
-  Status?: StatusProps
+  Slider?: SliderStylesProps
+  Status?: StatusStylesProps
   Toolbar?: ToolbarProps
   ToolbarItem?: ToolbarItemProps
   ToolbarDivider?: ToolbarDividerProps
   ToolbarRadioGroup?: ToolbarRadioGroupProps
-  Tooltip?: TooltipProps
   TooltipContent?: TooltipContentProps
-  Text?: TextProps
+  Text?: TextStylesProps
   HierarchicalTree?: HierarchicalTreeProps
   HierarchicalTreeItem?: HierarchicalTreeItemProps
   HierarchicalTreeTitle?: HierarchicalTreeTitleProps
diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
index 576f58259d..c979941e51 100644
--- a/packages/react/src/types.ts
+++ b/packages/react/src/types.ts
@@ -1,8 +1,20 @@
-import { StylesContextInputValue, StylesContextValue, Telemetry } from '@fluentui/react-bindings'
+import {
+  StylesContextInputValue,
+  StylesContextValue,
+  StylesContextPerformance,
+  Telemetry,
+} from '@fluentui/react-bindings'
 import * as React from 'react'
 
 import { ShorthandFactory } from './utils/factories'
 
+// Temporary workaround for @lodash dependency
+
+export type DebounceResultFn<T> = T & {
+  cancel: () => void
+  flush: () => void
+}
+
 // ========================================================
 // Utilities
 // ========================================================
@@ -167,10 +179,12 @@ export interface ProviderContextInput extends StylesContextInputValue {
   rtl?: boolean
   target?: Document
   telemetry?: Telemetry
+  performance?: StylesContextPerformance
 }
 
 export interface ProviderContextPrepared extends StylesContextValue {
   rtl: boolean
-  target: Document
+  // `target` can be undefined for SSR
+  target: Document | undefined
   telemetry: Telemetry | undefined
 }
diff --git a/packages/react/src/utils/UIComponent.tsx b/packages/react/src/utils/UIComponent.tsx
index 168fc73c29..71e9ae13b0 100644
--- a/packages/react/src/utils/UIComponent.tsx
+++ b/packages/react/src/utils/UIComponent.tsx
@@ -4,6 +4,7 @@ import * as _ from 'lodash'
 // @ts-ignore We have this export in package, but it is not present in typings
 import { ThemeContext } from 'react-fela'
 
+import { ProviderContextPrepared } from '../types'
 import renderComponent, { RenderResultConfig } from './renderComponent'
 
 // TODO @Bugaa92: deprecated by createComponent.tsx
@@ -29,6 +30,7 @@ class UIComponent<P, S = {}> extends React.Component<P, S> {
   }
 
   actionHandlers: AccessibilityActionHandlers
+  context: ProviderContextPrepared
 
   // stores debug information
   fluentUIDebug: any = null
diff --git a/packages/react/src/utils/applyAccessibilityKeyHandlers.ts b/packages/react/src/utils/applyAccessibilityKeyHandlers.ts
index 86129ecff2..35e7458cc9 100644
--- a/packages/react/src/utils/applyAccessibilityKeyHandlers.ts
+++ b/packages/react/src/utils/applyAccessibilityKeyHandlers.ts
@@ -9,7 +9,10 @@ import { Props, ShorthandValue } from '../types'
 const applyAccessibilityKeyHandlers = (
   keyHandlers: AccessibilityHandlerProps,
   value: Props | ShorthandValue<Props>,
-) => {
+): Partial<Record<
+  keyof AccessibilityHandlerProps,
+  (e: React.KeyboardEvent, ...args: any[]) => void
+>> => {
   const valIsPropsObject = _.isPlainObject(value)
   const valIsReactElement = React.isValidElement(value)
 
diff --git a/packages/react/src/utils/createComponent.tsx b/packages/react/src/utils/createComponent.tsx
index a58e211639..8da3e62f0a 100644
--- a/packages/react/src/utils/createComponent.tsx
+++ b/packages/react/src/utils/createComponent.tsx
@@ -3,7 +3,7 @@ import {
   ReactAccessibilityBehavior,
   AccessibilityActionHandlers,
 } from '@fluentui/react-bindings'
-import { ComponentSlotStylesPrepared } from '@fluentui/styles'
+import { ComponentSlotStylesResolved } from '@fluentui/styles'
 import * as _ from 'lodash'
 import * as React from 'react'
 
@@ -14,7 +14,7 @@ export interface CreateComponentRenderConfig {
   accessibility: ReactAccessibilityBehavior
   classes: ComponentSlotClasses
   rtl: boolean
-  styles: ComponentSlotStylesPrepared
+  styles: ComponentSlotStylesResolved
 }
 
 export interface CreateComponentConfig<P> {
diff --git a/packages/react/src/utils/mergeProviderContexts.ts b/packages/react/src/utils/mergeProviderContexts.ts
index 1e50d72bff..f3a630d2ba 100644
--- a/packages/react/src/utils/mergeProviderContexts.ts
+++ b/packages/react/src/utils/mergeProviderContexts.ts
@@ -3,19 +3,21 @@ import { mergeThemes } from '@fluentui/styles'
 
 import { ProviderContextPrepared, ProviderContextInput } from '../types'
 import { createRenderer, felaRenderer } from './felaRenderer'
+import isBrowser from './isBrowser'
 
 const registeredRenderers = new WeakMap<Document, Renderer>()
 
-export const mergeRenderers = (
-  current: Renderer,
-  next?: Renderer,
-  target: Document = document, // eslint-disable-line no-undef
-): Renderer => {
+export const mergeRenderers = (current: Renderer, next?: Renderer, target?: Document): Renderer => {
   if (next) {
     return next
   }
 
-  // A valid comparison, default renderer will be used
+  // A valid comparisons, default renderer will be used
+  if (!isBrowser() || typeof target === 'undefined') {
+    return felaRenderer
+  }
+
+  // SSR logic will be handled by condition above
   // eslint-disable-next-line no-undef
   if (target === document) {
     return felaRenderer
@@ -31,6 +33,10 @@ export const mergeRenderers = (
   return createdRenderer
 }
 
+export const mergePerformanceOptions = (target, ...sources) => {
+  return Object.assign(target, ...sources)
+}
+
 export const mergeBooleanValues = (target, ...sources) => {
   return sources.reduce((acc, next) => {
     return typeof next === 'boolean' ? next : acc
@@ -54,9 +60,12 @@ const mergeProviderContexts = (
     },
     rtl: false,
     disableAnimations: false,
-    target: document, // eslint-disable-line no-undef
+    target: isBrowser() ? document : undefined, // eslint-disable-line no-undef
+    performance: {
+      enableStylesCaching: true,
+      enableVariablesCaching: true,
+    },
     telemetry: undefined,
-    _internal_resolvedComponentVariables: {},
     renderer: undefined,
   }
 
@@ -85,6 +94,8 @@ const mergeProviderContexts = (
         acc.disableAnimations = mergedDisableAnimations
       }
 
+      acc.performance = mergePerformanceOptions(acc.performance, next.performance || {})
+
       acc.telemetry = next.telemetry || acc.telemetry
 
       return acc
diff --git a/packages/react/src/utils/positioner/Popper.tsx b/packages/react/src/utils/positioner/Popper.tsx
index fa1a7e6f50..2ae0f6db8f 100644
--- a/packages/react/src/utils/positioner/Popper.tsx
+++ b/packages/react/src/utils/positioner/Popper.tsx
@@ -1,11 +1,32 @@
-import * as React from 'react'
+import { useIsomorphicLayoutEffect } from '@fluentui/react-bindings'
+import { Ref, isRefObject } from '@fluentui/react-component-ref'
 import * as _ from 'lodash'
 import PopperJS, * as _PopperJS from 'popper.js'
-import { Ref, isRefObject } from '@fluentui/react-component-ref'
+import * as React from 'react'
 
-import { getPlacement, applyRtlToOffset } from './positioningHelper'
-import { PopperProps, PopperChildrenFn } from './types'
+import isBrowser from '../isBrowser'
 import getScrollParent from './getScrollParent'
+import { getPlacement, applyRtlToOffset } from './positioningHelper'
+import { PopperProps } from './types'
+
+/**
+ * Memoize a result using deep equality. This hook has two advantages over
+ * React.useMemo: it uses deep equality to compare memo keys, and it guarantees
+ * that the memo function will only be called if the keys are unequal.
+ * React.useMemo cannot be relied on to do this, since it is only a performance
+ * optimization (see https://reactjs.org/docs/hooks-reference.html#usememo).
+ *
+ * Copied from https://github.com/apollographql/react-apollo/blob/master/packages/hooks/src/utils/useDeepMemo.ts.
+ */
+function useDeepMemo<TKey, TValue>(memoFn: () => TValue, key: TKey): TValue {
+  const ref = React.useRef<{ key: TKey; value: TValue }>()
+
+  if (!ref.current || !_.isEqual(key, ref.current.key)) {
+    ref.current = { key, value: memoFn() }
+  }
+
+  return ref.current.value
+}
 
 // `popper.js` has a UMD build without `.default`, it breaks CJS builds:
 // https://github.com/rollup/rollup/issues/1267#issuecomment-446681320
@@ -35,6 +56,7 @@ const createPopper = (
 
   return instance
 }
+
 /**
  * Popper relies on the 3rd party library [Popper.js](https://github.com/FezVrasta/popper.js) for positioning.
  */
@@ -58,18 +80,66 @@ const Popper: React.FunctionComponent<PopperProps> = props => {
 
   const popperRef = React.useRef<PopperJS>()
   const contentRef = React.useRef<HTMLElement>(null)
+
   const latestPlacement = React.useRef<PopperJS.Placement>(proposedPlacement)
   const [computedPlacement, setComputedPlacement] = React.useState<PopperJS.Placement>(
     proposedPlacement,
   )
 
-  const computedModifiers: PopperJS.Modifiers = React.useMemo(
+  const hasDocument = isBrowser()
+  const hasScrollableElement = React.useMemo(() => {
+    if (hasDocument) {
+      const scrollParentElement = getScrollParent(contentRef.current)
+
+      return scrollParentElement !== scrollParentElement.ownerDocument.body
+    }
+
+    return false
+  }, [contentRef, hasDocument])
+  // Is a broken dependency and can cause potential bugs, we should rethink this as all other refs
+  // in this component.
+
+  const computedModifiers: PopperJS.Modifiers = useDeepMemo(
     () =>
-      offset && {
-        offset: { offset: rtl ? applyRtlToOffset(offset, position) : offset },
-        keepTogether: { enabled: false },
-      },
-    [rtl, offset, position],
+      _.merge(
+        /**
+         * This prevents blurrines in chrome, when the coordinates are odd numbers alternative
+         * would be to use `fn` and manipulate the computed style or ask popper to fix it but
+         * since there is presumably only handful of poppers displayed on the page, the
+         * performance impact should be minimal.
+         */
+        { computeStyle: { gpuAcceleration: false } },
+
+        { flip: { padding: 0, flipVariationsByContent: true } },
+        { preventOverflow: { padding: 0 } },
+
+        offset && {
+          offset: { offset: rtl ? applyRtlToOffset(offset, position) : offset },
+          keepTogether: { enabled: false },
+        },
+
+        /**
+         * When the popper box is placed in the context of a scrollable element, we need to set
+         * preventOverflow.escapeWithReference to true and flip.boundariesElement to 'scrollParent'
+         * (default is 'viewport') so that the popper box will stick with the targetRef when we
+         * scroll targetRef out of the viewport.
+         */
+        hasScrollableElement && {
+          preventOverflow: { escapeWithReference: true },
+          flip: { boundariesElement: 'scrollParent' },
+        },
+
+        userModifiers,
+
+        /**
+         * unstable_pinned disables the flip modifier by setting flip.enabled to false; this
+         * disables automatic repositioning of the popper box; it will always be placed according to
+         * the values of `align` and `position` props, regardless of the size of the component, the
+         * reference element or the viewport.
+         */
+        unstable_pinned && { flip: { enabled: false } },
+      ),
+    [hasScrollableElement, position, offset, rtl, unstable_pinned, userModifiers],
   )
 
   const scheduleUpdate = React.useCallback(() => {
@@ -102,48 +172,7 @@ const Popper: React.FunctionComponent<PopperProps> = props => {
       return
     }
 
-    const pointerTargetRefElement = pointerTargetRef && pointerTargetRef.current
-    const scrollParentElement = getScrollParent(contentRef.current)
-    const popperHasScrollableParent = scrollParentElement !== scrollParentElement.ownerDocument.body
-
-    const modifiers: PopperJS.Modifiers = _.merge(
-      { preventOverflow: { padding: 0 } },
-      { flip: { padding: 0, flipVariationsByContent: true } },
-      /**
-       * This prevents blurrines in chrome, when the coordinates are odd numbers
-       * alternative would be to use `fn`, call _PopperJS.default.Defaults.modifiers.computeStyle.fn(data, options)
-       * and manipulate the computeed style or ask popper to fix it
-       * but since there is presumably only handful of poppers displayed on the page, the performance impact should be minimal
-       */
-      { computeStyle: { gpuAcceleration: false } },
-      /**
-       * When the popper box is placed in the context of a scrollable element, we need to set
-       * preventOverflow.escapeWithReference to true and flip.boundariesElement to 'scrollParent' (default is 'viewport')
-       * so that the popper box will stick with the targetRef when we scroll targetRef out of the viewport.
-       */
-      popperHasScrollableParent && {
-        preventOverflow: { escapeWithReference: true },
-        flip: { boundariesElement: 'scrollParent' },
-      },
-      /**
-       * unstable_pinned disables the flip modifier by setting flip.enabled to false; this disables automatic
-       * repositioning of the popper box; it will always be placed according to the values of `align` and
-       * `position` props, regardless of the size of the component, the reference element or the viewport.
-       */
-      unstable_pinned && { flip: { enabled: false } },
-      computedModifiers,
-      userModifiers,
-      /**
-       * This modifier is necessary in order to render the pointer.
-       */
-      {
-        arrow: {
-          enabled: !!pointerTargetRefElement,
-          element: pointerTargetRefElement,
-        },
-      },
-    )
-
+    const hasPointer = !!(pointerTargetRef && pointerTargetRef.current)
     const handleUpdate = (data: PopperJS.Data) => {
       // PopperJS performs computations that might update the computed placement: auto positioning, flipping the
       // placement in case the popper box should be rendered at the edge of the viewport and does not fit
@@ -156,7 +185,20 @@ const Popper: React.FunctionComponent<PopperProps> = props => {
     const options: PopperJS.PopperOptions = {
       placement: proposedPlacement,
       positionFixed,
-      modifiers,
+      modifiers: {
+        ...computedModifiers,
+
+        /**
+         * This modifier is necessary in order to render the pointer. Refs are resolved in effects, so it can't be
+         * placed under computed modifiers. Deep merge is not required as this modifier has only these properties.
+         * `arrow` modifier also requires `keepTogether`.
+         */
+        keepTogether: { enabled: hasPointer },
+        arrow: {
+          enabled: hasPointer,
+          element: pointerTargetRef && pointerTargetRef.current,
+        },
+      },
       onCreate: handleUpdate,
       onUpdate: handleUpdate,
     }
@@ -164,16 +206,16 @@ const Popper: React.FunctionComponent<PopperProps> = props => {
     popperRef.current = createPopper(reference, contentRef.current, options)
   }, [
     // TODO review dependencies for popperHasScrollableParent
-    computedModifiers,
     enabled,
-    userModifiers,
+    computedModifiers,
+    pointerTargetRef,
     positionFixed,
     proposedPlacement,
-    unstable_pinned,
     targetRef,
+    unstable_pinned,
   ])
 
-  React.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     createInstance()
     return destroyInstance
   }, [createInstance])
@@ -182,13 +224,10 @@ const Popper: React.FunctionComponent<PopperProps> = props => {
 
   const child =
     typeof children === 'function'
-      ? (children as PopperChildrenFn)({
-          placement: computedPlacement,
-          scheduleUpdate,
-        })
-      : children
+      ? children({ placement: computedPlacement, scheduleUpdate })
+      : (children as React.ReactElement)
 
-  return <Ref innerRef={contentRef}>{React.Children.only(child) as React.ReactElement}</Ref>
+  return child ? <Ref innerRef={contentRef}>{React.Children.only(child)}</Ref> : null
 }
 
 Popper.defaultProps = {
diff --git a/packages/react/src/utils/positioner/initialStyles.ts b/packages/react/src/utils/positioner/initialStyles.ts
new file mode 100644
index 0000000000..8aad407cbb
--- /dev/null
+++ b/packages/react/src/utils/positioner/initialStyles.ts
@@ -0,0 +1,13 @@
+import * as React from 'react'
+
+const initialStyles: React.CSSProperties = {
+  // Prevents scroll issue, waiting for Popper.js to add this style once initiated.
+  // https://github.com/mui-org/material-ui/issues/16740
+  position: 'fixed',
+  // Fix Popper.js initial positioning display issue
+  // https://github.com/mui-org/material-ui/issues/17774
+  top: 0,
+  left: '0px /* @noflip */',
+}
+
+export default initialStyles
diff --git a/packages/react/src/utils/positioner/types.ts b/packages/react/src/utils/positioner/types.ts
index c2f67c3ab3..694f7e2f22 100644
--- a/packages/react/src/utils/positioner/types.ts
+++ b/packages/react/src/utils/positioner/types.ts
@@ -4,7 +4,7 @@ import PopperJS from 'popper.js'
 export type Position = 'above' | 'below' | 'before' | 'after'
 export type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center'
 
-export type PopperChildrenFn = (props: PopperChildrenProps) => React.ReactNode
+export type PopperChildrenFn = (props: PopperChildrenProps) => React.ReactElement
 
 export interface BasicPositioningProps {
   /**
@@ -47,7 +47,7 @@ export interface PopperProps extends PositioningProps {
   /**
    * The content of the Popper box (the element that is going to be repositioned).
    */
-  children: PopperChildrenFn | React.ReactNode
+  children: PopperChildrenFn | React.ReactElement
 
   /**
    * Enables events (resize, scroll).
diff --git a/packages/react/src/utils/renderComponent.tsx b/packages/react/src/utils/renderComponent.tsx
index 8a0d0d9e30..72198378d7 100644
--- a/packages/react/src/utils/renderComponent.tsx
+++ b/packages/react/src/utils/renderComponent.tsx
@@ -11,7 +11,7 @@ import {
 } from '@fluentui/react-bindings'
 import {
   emptyTheme,
-  ComponentSlotStylesPrepared,
+  ComponentSlotStylesResolved,
   ComponentVariablesObject,
   DebugData,
   PropsWithVarsAndStyles,
@@ -28,7 +28,7 @@ export interface RenderResultConfig<P> {
   classes: ComponentSlotClasses
   unhandledProps: Props
   variables: ComponentVariablesObject
-  styles: ComponentSlotStylesPrepared
+  styles: ComponentSlotStylesResolved
   accessibility: ReactAccessibilityBehavior
   rtl: boolean
   theme: ThemePrepared
@@ -68,6 +68,7 @@ const renderComponent = <P extends {}>(
 
   const { setStart, setEnd } = useTelemetry(displayName, context.telemetry)
   const rtl = context.rtl || false
+  const enableVariablesCaching = context.performance?.enableVariablesCaching
 
   setStart()
 
@@ -91,7 +92,11 @@ const renderComponent = <P extends {}>(
     rtl,
     saveDebug,
     theme: context.theme || emptyTheme,
-    _internal_resolvedComponentVariables: context._internal_resolvedComponentVariables || {},
+    performance: {
+      enableVariablesCaching:
+        typeof enableVariablesCaching === 'boolean' ? enableVariablesCaching : true,
+      enableStylesCaching: false, // we cannot enable caching for class components
+    },
   })
 
   const resolvedConfig: RenderResultConfig<P> = {
diff --git a/packages/react/src/utils/whatInput.ts b/packages/react/src/utils/whatInput.ts
index f1d18fb5a2..600dc4d463 100644
--- a/packages/react/src/utils/whatInput.ts
+++ b/packages/react/src/utils/whatInput.ts
@@ -263,8 +263,12 @@ export const tryCleanupWhatInput = (target: Document) => {
   }
 }
 
-export const setWhatInputSource = (newInput: 'mouse' | 'keyboard' | 'initial') => {
+export const setWhatInputSource = (
+  target: Document,
+  newInput: 'mouse' | 'keyboard' | 'initial',
+) => {
   currentInput = newInput
+  doUpdate(target)
 }
 
 // returns string: the current input type
diff --git a/packages/react/test/specs/commonTests/handlesAccessibility.tsx b/packages/react/test/specs/commonTests/handlesAccessibility.tsx
index 6ac1ce9707..0058b2b098 100644
--- a/packages/react/test/specs/commonTests/handlesAccessibility.tsx
+++ b/packages/react/test/specs/commonTests/handlesAccessibility.tsx
@@ -1,6 +1,7 @@
 import { Accessibility, AriaRole } from '@fluentui/accessibility'
 import * as React from 'react'
 import * as keyboardKey from 'keyboard-key'
+import { act } from 'react-dom/test-utils'
 
 import { mountWithProviderAndGetComponent, mountWithProvider } from 'test/utils'
 import { UIComponent } from 'src/utils'
@@ -133,8 +134,10 @@ export default (
         wrapper.setProps({})
       }
 
-      getEventTargetComponent(component, 'onKeyDown').simulate('keydown', {
-        keyCode: keyboardKey.Enter,
+      act(() => {
+        getEventTargetComponent(component, 'onKeyDown').simulate('keydown', {
+          keyCode: keyboardKey.Enter,
+        })
       })
 
       if (instance && instance.actionHandlers) {
diff --git a/packages/react/test/specs/commonTests/isConformant.tsx b/packages/react/test/specs/commonTests/isConformant.tsx
index 81bb80bdb7..581d2938db 100644
--- a/packages/react/test/specs/commonTests/isConformant.tsx
+++ b/packages/react/test/specs/commonTests/isConformant.tsx
@@ -6,6 +6,7 @@ import * as _ from 'lodash'
 import * as React from 'react'
 import { ReactWrapper } from 'enzyme'
 import * as ReactDOMServer from 'react-dom/server'
+import { act } from 'react-dom/test-utils'
 
 import isExportedAtTopLevel from './isExportedAtTopLevel'
 import {
@@ -390,13 +391,17 @@ export default function isConformant(
         const customHandler: Function = eventTarget.prop(listenerName)
 
         if (customHandler) {
-          customHandler(eventShape)
+          act(() => {
+            customHandler(eventShape)
+          })
         } else {
           if (Component.propTypes[listenerName]) {
             throw new Error(
               `Handler for '${listenerName}' is not passed to child event emitter element <${eventTarget.type()} />`,
             )
           }
+
+          // We are cheking only props handled by component
           return
         }
 
diff --git a/packages/react/test/specs/components/Accordion/AccordionTitle-test.tsx b/packages/react/test/specs/components/Accordion/AccordionTitle-test.tsx
index 1f790fc0df..1c49019190 100644
--- a/packages/react/test/specs/components/Accordion/AccordionTitle-test.tsx
+++ b/packages/react/test/specs/components/Accordion/AccordionTitle-test.tsx
@@ -1,5 +1,8 @@
+import * as React from 'react'
+import * as keyboardKey from 'keyboard-key'
 import AccordionTitle from 'src/components/Accordion/AccordionTitle'
 import { isConformant, handlesAccessibility } from 'test/specs/commonTests'
+import { mountWithProvider } from 'test/utils'
 
 describe('AccordionTitle', () => {
   isConformant(AccordionTitle, {
@@ -21,4 +24,46 @@ describe('AccordionTitle', () => {
       })
     })
   })
+
+  const getContent = wrapper => wrapper.find(`div.${AccordionTitle.slotClassNames.content}`)
+
+  describe('click handler', () => {
+    it('is called on click', () => {
+      const onClick = jest.fn()
+      const wrapper = mountWithProvider(<AccordionTitle onClick={onClick} />)
+
+      getContent(wrapper).simulate('click')
+      expect(onClick).toHaveBeenCalled()
+    })
+
+    it('is not called on click for disabled title', () => {
+      const onClick = jest.fn()
+      const wrapper = mountWithProvider(<AccordionTitle onClick={onClick} disabled={true} />)
+
+      getContent(wrapper).simulate('click')
+      expect(onClick).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Enter key', () => {
+    it('calls onClick', () => {
+      const onClick = jest.fn()
+      const wrapper = mountWithProvider(<AccordionTitle onClick={onClick} />)
+
+      getContent(wrapper).simulate('keydown', {
+        keyCode: keyboardKey.Enter,
+      })
+      expect(onClick).toHaveBeenCalled()
+    })
+
+    it('does not call onClick for disabled title', () => {
+      const onClick = jest.fn()
+      const wrapper = mountWithProvider(<AccordionTitle onClick={onClick} disabled={true} />)
+
+      getContent(wrapper).simulate('keydown', {
+        keyCode: keyboardKey.Enter,
+      })
+      expect(onClick).not.toHaveBeenCalled()
+    })
+  })
 })
diff --git a/packages/react/test/specs/components/Animation/Animation-test.tsx b/packages/react/test/specs/components/Animation/Animation-test.tsx
index 628a7b55bf..cac93d6f74 100644
--- a/packages/react/test/specs/components/Animation/Animation-test.tsx
+++ b/packages/react/test/specs/components/Animation/Animation-test.tsx
@@ -2,11 +2,21 @@ import * as React from 'react'
 import { isConformant } from 'test/specs/commonTests'
 
 import Animation from 'src/components/Animation/Animation'
+import { mountWithProvider } from 'test/utils'
 
 describe('Animation', () => {
   isConformant(Animation, {
+    constructorName: 'Animation',
     hasAccessibilityProp: false,
     requiredProps: { children: <div /> },
     handlesAsProp: false,
   })
+
+  test('does not throw if children is not passed', () => {
+    expect(() => mountWithProvider(<Animation />)).not.toThrowError()
+  })
+
+  test('does not throw if children function returns undefined', () => {
+    expect(() => mountWithProvider(<Animation children={() => undefined} />)).not.toThrowError()
+  })
 })
diff --git a/packages/react/test/specs/components/Carousel/Carousel-test.tsx b/packages/react/test/specs/components/Carousel/Carousel-test.tsx
index aed92d5d7b..b7c7072ce6 100644
--- a/packages/react/test/specs/components/Carousel/Carousel-test.tsx
+++ b/packages/react/test/specs/components/Carousel/Carousel-test.tsx
@@ -262,13 +262,12 @@ describe('Carousel', () => {
     it('should show and focus the appropriate slide when clicked', () => {
       const wrapper = renderCarousel({ navigation })
       const secondNavigationItemWrapper = getNavigationNavigationItemAtIndexWrapper(wrapper, 1)
-      const secondItemWrapper = getItemAtIndexWrapper(wrapper, 1)
 
       secondNavigationItemWrapper.simulate('click')
       jest.runAllTimers()
 
       expect(wrapper.state('activeIndex')).toEqual(1)
-      expect(document.activeElement).toEqual(secondItemWrapper.getDOMNode())
+      expect(document.activeElement.firstElementChild.innerHTML).toEqual('item2')
     })
   })
 })
diff --git a/packages/react/test/specs/components/Chat/Chat-test.ts b/packages/react/test/specs/components/Chat/Chat-test.ts
index 3deeae2242..49f0729d3f 100644
--- a/packages/react/test/specs/components/Chat/Chat-test.ts
+++ b/packages/react/test/specs/components/Chat/Chat-test.ts
@@ -7,7 +7,9 @@ import ChatItem from 'src/components/Chat/ChatItem'
 const chatImplementsCollectionShorthandProp = implementsCollectionShorthandProp(Chat)
 
 describe('Chat', () => {
-  isConformant(Chat)
+  isConformant(Chat, {
+    constructorName: 'Chat',
+  })
   chatImplementsCollectionShorthandProp('items', ChatItem, { mapsValueToProp: 'message' })
 
   describe('accessibility', () => {
diff --git a/packages/react/test/specs/components/Chat/ChatItem-test.tsx b/packages/react/test/specs/components/Chat/ChatItem-test.tsx
index 43d5bcc799..e435ae36c0 100644
--- a/packages/react/test/specs/components/Chat/ChatItem-test.tsx
+++ b/packages/react/test/specs/components/Chat/ChatItem-test.tsx
@@ -5,7 +5,9 @@ import Box from 'src/components/Box/Box'
 const chatItemImplementsShorthandProp = implementsShorthandProp(ChatItem)
 
 describe('ChatItem', () => {
-  isConformant(ChatItem)
+  isConformant(ChatItem, {
+    constructorName: 'ChatItem',
+  })
 
   chatItemImplementsShorthandProp('gutter', Box, { mapsValueToProp: 'children' })
   chatItemImplementsShorthandProp('message', Box, { mapsValueToProp: 'children' })
diff --git a/packages/react/test/specs/components/Chat/ChatMessage-test.tsx b/packages/react/test/specs/components/Chat/ChatMessage-test.tsx
index c7f0725ed9..1e70e8b18d 100644
--- a/packages/react/test/specs/components/Chat/ChatMessage-test.tsx
+++ b/packages/react/test/specs/components/Chat/ChatMessage-test.tsx
@@ -1,7 +1,4 @@
-import * as React from 'react'
-
 import { handlesAccessibility, implementsShorthandProp, isConformant } from 'test/specs/commonTests'
-import { mountWithProvider } from 'test/utils'
 
 import ChatMessage from 'src/components/Chat/ChatMessage'
 import Text from 'src/components/Text/Text'
@@ -10,7 +7,9 @@ import Box from 'src/components/Box/Box'
 const chatMessageImplementsShorthandProp = implementsShorthandProp(ChatMessage)
 
 describe('ChatMessage', () => {
-  isConformant(ChatMessage)
+  isConformant(ChatMessage, {
+    constructorName: 'ChatMessage',
+  })
 
   chatMessageImplementsShorthandProp('author', Text)
   chatMessageImplementsShorthandProp('timestamp', Text)
@@ -19,14 +18,4 @@ describe('ChatMessage', () => {
   describe('accessibility', () => {
     handlesAccessibility(ChatMessage)
   })
-
-  describe('onMouseEnter', () => {
-    it('performs position update', () => {
-      const wrapper = mountWithProvider(<ChatMessage />)
-      const update = jest.spyOn(wrapper.instance() as any, 'updateActionsMenuPosition')
-
-      wrapper.simulate('mouseenter')
-      expect(update).toBeCalledTimes(1)
-    })
-  })
 })
diff --git a/packages/react/test/specs/components/Checkbox/Checkbox-test.tsx b/packages/react/test/specs/components/Checkbox/Checkbox-test.tsx
index 1a626d30a1..a5c7d09593 100644
--- a/packages/react/test/specs/components/Checkbox/Checkbox-test.tsx
+++ b/packages/react/test/specs/components/Checkbox/Checkbox-test.tsx
@@ -7,7 +7,7 @@ import {
 } from 'test/specs/commonTests'
 
 describe('Checkbox', () => {
-  isConformant(Checkbox)
+  isConformant(Checkbox, { constructorName: 'Checkbox' })
   handlesAccessibility(Checkbox, { defaultRootRole: 'checkbox' })
 
   describe('HTML accessibility rules validation', () => {
diff --git a/packages/react/test/specs/components/Icon/Icon-test.tsx b/packages/react/test/specs/components/Icon/Icon-test.tsx
index 942e25f904..06a0aa6754 100644
--- a/packages/react/test/specs/components/Icon/Icon-test.tsx
+++ b/packages/react/test/specs/components/Icon/Icon-test.tsx
@@ -6,7 +6,7 @@ import Icon from '../../../../src/components/Icon/Icon'
 import { mountWithProviderAndGetComponent } from 'test/utils'
 
 describe('Icon', () => {
-  isConformant(Icon, { requiredProps: { name: 'at' } })
+  isConformant(Icon, { constructorName: 'Icon', requiredProps: { name: 'at' } })
 
   describe('accessibility', () => {
     handlesAccessibility(Icon, {
diff --git a/packages/react/test/specs/components/Label/Label-test.tsx b/packages/react/test/specs/components/Label/Label-test.tsx
index e6af7b2089..f58b487d78 100644
--- a/packages/react/test/specs/components/Label/Label-test.tsx
+++ b/packages/react/test/specs/components/Label/Label-test.tsx
@@ -7,7 +7,7 @@ import Image from 'src/components/Image/Image'
 const labelImplementsShorthandProp = implementsShorthandProp(Label)
 
 describe('Label', () => {
-  isConformant(Label)
+  isConformant(Label, { constructorName: 'Label' })
   labelImplementsShorthandProp('icon', Icon, {
     mapsValueToProp: 'name',
     requiredShorthandProps: { name: 'at' },
diff --git a/packages/react/test/specs/components/List/List-test.tsx b/packages/react/test/specs/components/List/List-test.tsx
index 98f00b23cd..f00dbe370b 100644
--- a/packages/react/test/specs/components/List/List-test.tsx
+++ b/packages/react/test/specs/components/List/List-test.tsx
@@ -45,34 +45,54 @@ describe('List', () => {
 
   describe('selectedIndex', () => {
     it('should not be set by default', () => {
-      const listItems = mountWithProvider(<List selectable items={getItems()} />).find('ListItem')
-      expect(listItems.everyWhere(item => !item.props().selected)).toBe(true)
+      const wrapper = mountWithProvider(<List selectable items={getItems()} />)
+
+      expect(
+        wrapper.find('li').filterWhere(item => Boolean(item.prop('aria-selected'))),
+      ).toHaveLength(0)
     })
 
     it('can be set a default value', () => {
-      const listItems = mountWithProvider(
+      const wrapper = mountWithProvider(
         <List selectable defaultSelectedIndex={0} items={getItems()} />,
-      ).find('ListItem')
-      expect(listItems.first().props().selected).toBe(true)
+      )
+      expect(
+        wrapper
+          .find('li')
+          .at(0)
+          .prop('aria-selected'),
+      ).toBe(true)
     })
 
     it('should be set when item is clicked', () => {
       const wrapper = mountWithProvider(
         <List selectable defaultSelectedIndex={0} items={getItems()} />,
       )
-      const listItems = wrapper.find('ListItem')
-      expect(listItems.at(0).props().selected).toBe(true)
 
-      listItems
-        .at(1)
+      expect(
+        wrapper
+          .find('li')
+          .at(0)
+          .prop('aria-selected'),
+      ).toBe(true)
+
+      wrapper
         .find('li')
-        .first()
+        .at(1)
         .simulate('click')
 
-      const updatedItems = wrapper.find('ListItem')
-
-      expect(updatedItems.at(0).props().selected).toBe(false)
-      expect(updatedItems.at(1).props().selected).toBe(true)
+      expect(
+        wrapper
+          .find('li')
+          .at(0)
+          .prop('aria-selected'),
+      ).toBe(false)
+      expect(
+        wrapper
+          .find('li')
+          .at(1)
+          .prop('aria-selected'),
+      ).toBe(true)
     })
 
     it('calls onClick handler for item if `selectable`', () => {
diff --git a/packages/react/test/specs/components/Provider/Provider-test.tsx b/packages/react/test/specs/components/Provider/Provider-test.tsx
index f6a3817919..9d115e8494 100644
--- a/packages/react/test/specs/components/Provider/Provider-test.tsx
+++ b/packages/react/test/specs/components/Provider/Provider-test.tsx
@@ -6,6 +6,27 @@ import * as React from 'react'
 import Provider from 'src/components/Provider/Provider'
 import ProviderConsumer from 'src/components/Provider/ProviderConsumer'
 
+const createDocumentMock = (): Document => {
+  const externalDocument = document.implementation.createDocument(
+    'http://www.w3.org/1999/xhtml',
+    'html',
+    null,
+  )
+  const externalWindow: Partial<Window> = {
+    ontouchstart: () => {}, // whatInput asserts for this method
+
+    addEventListener: () => {},
+    removeEventListener: () => {},
+  }
+
+  externalDocument.documentElement.appendChild(externalDocument.createElement('body'))
+  // `defaultView` is read-only by spec, getter is used as workaround
+  // https://github.com/facebook/jest/issues/2227#issuecomment-430435133
+  jest.spyOn(externalDocument, 'defaultView', 'get').mockReturnValue(externalWindow as any)
+
+  return externalDocument
+}
+
 describe('Provider', () => {
   test('is exported', () => {
     expect(require('src/index.ts').Provider).toEqual(Provider)
@@ -235,18 +256,10 @@ describe('Provider', () => {
 
   describe('target', () => {
     test('performs whatinput init on first Provider mount', () => {
-      const addEventListener = jest.fn()
-      const setAttribute = jest.fn()
-      const externalDocument: any = {
-        defaultView: {
-          addEventListener,
-          removeEventListener: jest.fn(),
-          ontouchstart: jest.fn(),
-        },
-        documentElement: {
-          setAttribute,
-        },
-      }
+      const externalDocument = createDocumentMock()
+
+      const addEventListener = jest.spyOn(externalDocument.defaultView, 'addEventListener')
+      const setAttribute = jest.spyOn(externalDocument.documentElement, 'setAttribute')
 
       mount(
         <Provider id="first-provider" target={externalDocument}>
@@ -262,18 +275,8 @@ describe('Provider', () => {
     })
 
     test('performs whatinput cleanup on last Provider unmount', () => {
-      const removeEventListener = jest.fn()
-      const setAttribute = jest.fn()
-      const externalDocument: any = {
-        defaultView: {
-          addEventListener: jest.fn(),
-          removeEventListener,
-          ontouchstart: jest.fn(),
-        },
-        documentElement: {
-          setAttribute,
-        },
-      }
+      const externalDocument = createDocumentMock()
+      const removeEventListener = jest.spyOn(externalDocument.defaultView, 'removeEventListener')
 
       const wrapper = mount(
         <Provider id="first-provider" target={externalDocument}>
diff --git a/packages/react/test/specs/components/Slider/Slider-test.tsx b/packages/react/test/specs/components/Slider/Slider-test.tsx
index af8f4ee925..d18c1abd93 100644
--- a/packages/react/test/specs/components/Slider/Slider-test.tsx
+++ b/packages/react/test/specs/components/Slider/Slider-test.tsx
@@ -3,6 +3,7 @@ import Slider from 'src/components/Slider/Slider'
 
 describe('Slider', () => {
   isConformant(Slider, {
+    constructorName: 'Slider',
     eventTargets: {
       onChange: 'input',
       onKeyDown: 'input',
diff --git a/packages/react/test/specs/components/Status/Status-test.tsx b/packages/react/test/specs/components/Status/Status-test.tsx
index 019bc0511e..340132640e 100644
--- a/packages/react/test/specs/components/Status/Status-test.tsx
+++ b/packages/react/test/specs/components/Status/Status-test.tsx
@@ -3,5 +3,5 @@ import { isConformant } from 'test/specs/commonTests'
 import Status from 'src/components/Status/Status'
 
 describe('Status', () => {
-  isConformant(Status)
+  isConformant(Status, { constructorName: 'Status' })
 })
diff --git a/packages/react/test/specs/components/Text/Text-test.tsx b/packages/react/test/specs/components/Text/Text-test.tsx
index e179ec4d2b..846fef69b3 100644
--- a/packages/react/test/specs/components/Text/Text-test.tsx
+++ b/packages/react/test/specs/components/Text/Text-test.tsx
@@ -6,7 +6,7 @@ import { mountWithProvider } from 'test/utils'
 import Text from 'src/components/Text/Text'
 
 describe('Text', () => {
-  isConformant(Text)
+  isConformant(Text, { constructorName: 'Text' })
 
   test('renders children', () => {
     expect(mountWithProvider(<Text>children</Text>).text()).toEqual('children')
diff --git a/packages/react/test/specs/components/Tooltip/TooltipContent-test.ts b/packages/react/test/specs/components/Tooltip/TooltipContent-test.ts
index afeda10e6b..10695fa212 100644
--- a/packages/react/test/specs/components/Tooltip/TooltipContent-test.ts
+++ b/packages/react/test/specs/components/Tooltip/TooltipContent-test.ts
@@ -3,5 +3,7 @@ import { isConformant } from 'test/specs/commonTests'
 import TooltipContent from 'src/components/Tooltip/TooltipContent'
 
 describe('TooltipContent', () => {
-  isConformant(TooltipContent)
+  isConformant(TooltipContent, {
+    constructorName: 'TooltipContent',
+  })
 })
diff --git a/packages/react/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap b/packages/react/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap
index 8979e23521..0868088a7d 100644
--- a/packages/react/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap
+++ b/packages/react/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap
@@ -14,7 +14,7 @@ exports[`felaRenderer CSS fallback values are rendered 1`] = `
 exports[`felaRenderer animations are not applied if animations are disabled 1`] = `
 "
 
-<div className=ui-provider__box dir=ltr>
+<div className=ui-provider dir=ltr>
   <div className=ui-box ui-animation />
 </div>;
 "
@@ -62,7 +62,7 @@ exports[`felaRenderer array returned by keyframe results in CSS fallback values
 }
 
 
-<div className=ui-provider__box dir=ltr>
+<div className=ui-provider dir=ltr>
   <div className=ui-box ui-animation a />
 </div>;
 "
@@ -111,7 +111,7 @@ exports[`felaRenderer keyframe colors are rendered 1`] = `
 }
 
 
-<div className=ui-provider__box dir=ltr>
+<div className=ui-provider dir=ltr>
   <div className=ui-box ui-animation a b />
 </div>;
 "
@@ -123,7 +123,7 @@ exports[`felaRenderer marginLeft is rendered into marginLeft due to RTL with \`n
 }
 
 
-<div className=ui-provider__box dir=rtl>
+<div className=ui-provider dir=rtl>
   <span className=ui-text a dir=auto>
     Hello
   </span>
@@ -137,7 +137,7 @@ exports[`felaRenderer marginLeft is rendered into marginRight due to RTL 1`] = `
 }
 
 
-<div className=ui-provider__box dir=rtl>
+<div className=ui-provider dir=rtl>
   <span className=ui-text a dir=auto>
     Hello
   </span>
diff --git a/packages/react/test/specs/utils/felaRenderer-test.tsx b/packages/react/test/specs/utils/felaRenderer-test.tsx
index dce6e30627..524ccafcc7 100644
--- a/packages/react/test/specs/utils/felaRenderer-test.tsx
+++ b/packages/react/test/specs/utils/felaRenderer-test.tsx
@@ -6,31 +6,6 @@ import Animation from 'src/components/Animation/Animation'
 import Provider from 'src/components/Provider/Provider'
 import Text from 'src/components/Text/Text'
 import { felaRenderer } from 'src/utils'
-import {
-  ComponentAnimationProp,
-  unstable_createAnimationStyles as createAnimationStyles,
-} from '@fluentui/react-bindings'
-
-// Animation component depends on theme styles 💣
-// Issue: https://github.com/microsoft/fluent-ui-react/issues/2247
-// This adds required styles when needed.
-const AnimationComponentStyles = {
-  root: ({ props: p, theme }) => {
-    const animation: ComponentAnimationProp = {
-      name: p.name,
-      keyframeParams: p.keyframeParams,
-      duration: p.duration,
-      delay: p.delay,
-      iterationCount: p.iterationCount,
-      direction: p.direction,
-      fillMode: p.fillMode,
-      playState: p.playState,
-      timingFunction: p.timingFunction,
-    }
-
-    return createAnimationStyles(animation, theme)
-  },
-}
 
 describe('felaRenderer', () => {
   test('basic styles are rendered', () => {
@@ -75,7 +50,6 @@ describe('felaRenderer', () => {
     const snapshot = createSnapshot(
       <Provider
         theme={{
-          componentStyles: { Animation: AnimationComponentStyles },
           animations: { colorChanger },
         }}
       >
@@ -106,7 +80,6 @@ describe('felaRenderer', () => {
     const snapshot = createSnapshot(
       <Provider
         theme={{
-          componentStyles: { Animation: AnimationComponentStyles },
           animations: { colorChanger },
         }}
       >
@@ -138,7 +111,6 @@ describe('felaRenderer', () => {
       <Provider
         disableAnimations
         theme={{
-          componentStyles: { Animation: AnimationComponentStyles },
           animations: { spinner },
         }}
       >
diff --git a/packages/react/test/utils/withProvider.tsx b/packages/react/test/utils/withProvider.tsx
index 03ce491b36..30a3ffc919 100644
--- a/packages/react/test/utils/withProvider.tsx
+++ b/packages/react/test/utils/withProvider.tsx
@@ -10,11 +10,11 @@ export const EmptyThemeProvider: React.FunctionComponent = ({ children }) => {
   const theme: ProviderContextPrepared = {
     renderer: felaRenderer,
     target: document,
-    _internal_resolvedComponentVariables: {},
     disableAnimations: false,
     rtl: false,
     theme: emptyTheme,
     telemetry: undefined,
+    performance: {},
   }
 
   return <ThemeProvider theme={theme}>{children}</ThemeProvider>
diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
index 61bd5687e9..ce400f030e 100644
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -17,6 +17,7 @@
     { "path": "../react-component-event-listener" },
     { "path": "../react-component-nesting-registry" },
     { "path": "../react-component-ref" },
+    { "path": "../react-context-selector" },
     { "path": "../react-proptypes" }
   ]
 }
diff --git a/packages/state/package.json b/packages/state/package.json
index dc070e337d..de26917272 100644
--- a/packages/state/package.json
+++ b/packages/state/package.json
@@ -1,14 +1,14 @@
 {
   "name": "@fluentui/state",
   "description": "A set of utils to create framework agnostic and reusable state managers",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "author": "Oleksandr Fediashov <a@fedyashov.com>",
   "bugs": "https://github.com/microsoft/fluent-ui-react/issues",
   "dependencies": {
-    "@babel/runtime": "^7.1.2"
+    "@babel/runtime": "^7.7.6"
   },
   "devDependencies": {
-    "@fluentui/internal-tooling": "^0.43.0",
+    "@fluentui/internal-tooling": "^0.44.0",
     "lerna-alias": "^3.0.3-0"
   },
   "files": [
diff --git a/packages/state/src/index.ts b/packages/state/src/index.ts
index 72dd19ab3e..a326eb9b85 100644
--- a/packages/state/src/index.ts
+++ b/packages/state/src/index.ts
@@ -1,6 +1,7 @@
+export * from './managers/checkboxManager'
 export * from './managers/dialogManager'
 export * from './managers/dropdownManager'
-export * from './managers/listManager'
+export * from './managers/sliderManager'
 
 export { default as createManager } from './createManager'
 export * from './types'
diff --git a/packages/state/src/managers/checkboxManager.ts b/packages/state/src/managers/checkboxManager.ts
new file mode 100644
index 0000000000..d604048e93
--- /dev/null
+++ b/packages/state/src/managers/checkboxManager.ts
@@ -0,0 +1,27 @@
+import createManager from '../createManager'
+import { Manager, ManagerConfig } from '../types'
+
+export type CheckboxActions = {
+  toggle: (checked: boolean) => void
+}
+
+export type CheckboxState = {
+  checked: boolean
+}
+
+export type CheckboxManager = Manager<CheckboxState, CheckboxActions>
+
+export const createCheckboxManager = (
+  config: Partial<ManagerConfig<CheckboxState, CheckboxActions>> = {},
+): CheckboxManager =>
+  createManager<CheckboxState, CheckboxActions>({
+    ...config,
+    state: {
+      checked: false,
+      ...config.state,
+    },
+    actions: {
+      toggle: checked => () => ({ checked }),
+      ...config.actions,
+    },
+  })
diff --git a/packages/state/src/managers/listManager.ts b/packages/state/src/managers/listManager.ts
deleted file mode 100644
index 4ff9c73926..0000000000
--- a/packages/state/src/managers/listManager.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import createManager from '../createManager'
-import { Manager, ManagerConfig } from '../types'
-
-export type ListState = {
-  selectedIndex?: number
-}
-
-export type ListActions = {
-  select: (index: number) => void
-}
-
-export type ListManager = Manager<ListState, ListActions>
-
-export const createListManager = (
-  config: Partial<ManagerConfig<ListState, ListActions>> = {},
-): ListManager =>
-  createManager<ListState, ListActions>({
-    ...config,
-    actions: {
-      select: index => () => ({ selectedIndex: index }),
-    },
-    state: {
-      selectedIndex: -1,
-      ...config.state,
-    },
-  })
diff --git a/packages/state/src/managers/sliderManager.ts b/packages/state/src/managers/sliderManager.ts
new file mode 100644
index 0000000000..30e5ee7e55
--- /dev/null
+++ b/packages/state/src/managers/sliderManager.ts
@@ -0,0 +1,27 @@
+import createManager from '../createManager'
+import { Manager, ManagerConfig } from '../types'
+
+export type SliderActions = {
+  change: (value: string) => void
+}
+
+export type SliderState = {
+  value: string
+}
+
+export type SliderManager = Manager<SliderState, SliderActions>
+
+export const createSliderManager = (
+  config: Partial<ManagerConfig<SliderState, SliderActions>> = {},
+): SliderManager =>
+  createManager<SliderState, SliderActions>({
+    ...config,
+    state: {
+      value: '50',
+      ...config.state,
+    },
+    actions: {
+      change: value => () => ({ value }),
+      ...config.actions,
+    },
+  })
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 51ad1d7e8a..7be4c13656 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -1,16 +1,16 @@
 {
   "name": "@fluentui/styles",
   "description": "A set of styling utilities for CSS-in-JS.",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "author": "Marija Najdova <mnajdova@gmail.com>",
   "bugs": "https://github.com/microsoft/fluent-ui-react/issues",
   "dependencies": {
-    "@babel/runtime": "^7.1.2",
-    "lodash": "^4.17.15",
-    "csstype": "^2.6.7"
+    "@babel/runtime": "^7.7.6",
+    "csstype": "^2.6.7",
+    "lodash": "^4.17.15"
   },
   "devDependencies": {
-    "@fluentui/internal-tooling": "^0.43.0",
+    "@fluentui/internal-tooling": "^0.44.0",
     "lerna-alias": "^3.0.3-0"
   },
   "files": [
diff --git a/packages/styles/src/types.ts b/packages/styles/src/types.ts
index 5fc88bbfd2..b6f3c2cf4a 100644
--- a/packages/styles/src/types.ts
+++ b/packages/styles/src/types.ts
@@ -188,6 +188,8 @@ export interface ComponentSlotStylesInput<TProps = {}, TVars = {}>
 export interface ComponentSlotStylesPrepared<TProps = {}, TVars = {}>
   extends Record<string, ComponentSlotStyleFunction<TProps, TVars>> {}
 
+export interface ComponentSlotStylesResolved extends Record<string, ICSSInJSStyle> {}
+
 export interface ComponentStyleFunctionParam<
   TProps extends PropsWithVarsAndStyles = PropsWithVarsAndStyles,
   TVars extends ComponentVariablesObject = ComponentVariablesObject
diff --git a/perf/package.json b/perf/package.json
index 6a97b12353..7f734d74d1 100644
--- a/perf/package.json
+++ b/perf/package.json
@@ -1,12 +1,12 @@
 {
   "name": "@fluentui/perf",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "private": true,
   "license": "MIT",
   "devDependencies": {
     "@babel/polyfill": "^7.7.0",
-    "@fluentui/internal-tooling": "^0.43.0",
-    "@fluentui/react": "^0.43.0",
+    "@fluentui/internal-tooling": "^0.44.0",
+    "@fluentui/react": "^0.44.0",
     "@types/webpack-env": "^1.14.1",
     "minimatch": "^3.0.4"
   },
diff --git a/scripts/package.json b/scripts/package.json
index aa5a4ca527..29b4976ef3 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/scripts",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "license": "MIT",
   "main": "index.ts",
   "bin": {
@@ -10,7 +10,7 @@
     "projrefs": "just-scripts projrefs"
   },
   "dependencies": {
-    "@babel/core": "^7.6.4",
+    "@babel/core": "^7.7.7",
     "@storybook/addon-a11y": "^5.2.5",
     "@storybook/addon-actions": "^5.2.5",
     "@storybook/addon-info": "^5.2.5",
diff --git a/yarn.lock b/yarn.lock
index 4123bbcc7e..a2ec702472 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16,6 +16,22 @@
   dependencies:
     "@babel/highlight" "^7.0.0"
 
+"@babel/code-frame@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.8.3.tgz#33e25903d7481181534e12ec0a25f16b6fcf419e"
+  integrity sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==
+  dependencies:
+    "@babel/highlight" "^7.8.3"
+
+"@babel/compat-data@^7.8.4":
+  version "7.8.5"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.8.5.tgz#d28ce872778c23551cbb9432fc68d28495b613b9"
+  integrity sha512-jWYUqQX/ObOhG1UiEkbH5SANsE/8oKXiQWjj7p7xgj9Zmnt//aUvyz4dBkK0HNsS8/cbyC5NmmH87VekW+mXFg==
+  dependencies:
+    browserslist "^4.8.5"
+    invariant "^2.2.4"
+    semver "^5.5.0"
+
 "@babel/core@7.6.0":
   version "7.6.0"
   resolved "https://registry.npmjs.org/@babel/core/-/core-7.6.0.tgz#9b00f73554edd67bebc86df8303ef678be3d7b48"
@@ -76,20 +92,21 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/core@^7.6.4":
-  version "7.6.4"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.6.4.tgz#6ebd9fe00925f6c3e177bb726a188b5f578088ff"
-  integrity sha512-Rm0HGw101GY8FTzpWSyRbki/jzq+/PkNQJ+nSulrdY6gFGOsNseCqD6KHRYe2E+EdzuBdr2pxCp6s4Uk6eJ+XQ==
-  dependencies:
-    "@babel/code-frame" "^7.5.5"
-    "@babel/generator" "^7.6.4"
-    "@babel/helpers" "^7.6.2"
-    "@babel/parser" "^7.6.4"
-    "@babel/template" "^7.6.0"
-    "@babel/traverse" "^7.6.3"
-    "@babel/types" "^7.6.3"
-    convert-source-map "^1.1.0"
+"@babel/core@^7.7.7":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.8.4.tgz#d496799e5c12195b3602d0fddd77294e3e38e80e"
+  integrity sha512-0LiLrB2PwrVI+a2/IEskBopDYSd8BCb3rOvH7D5tzoWd696TBEduBvuLVm4Nx6rltrLZqvI3MCalB2K2aVzQjA==
+  dependencies:
+    "@babel/code-frame" "^7.8.3"
+    "@babel/generator" "^7.8.4"
+    "@babel/helpers" "^7.8.4"
+    "@babel/parser" "^7.8.4"
+    "@babel/template" "^7.8.3"
+    "@babel/traverse" "^7.8.4"
+    "@babel/types" "^7.8.3"
+    convert-source-map "^1.7.0"
     debug "^4.1.0"
+    gensync "^1.0.0-beta.1"
     json5 "^2.1.0"
     lodash "^4.17.13"
     resolve "^1.3.2"
@@ -117,16 +134,6 @@
     lodash "^4.17.13"
     source-map "^0.5.0"
 
-"@babel/generator@^7.6.3", "@babel/generator@^7.6.4":
-  version "7.6.4"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.6.4.tgz#a4f8437287bf9671b07f483b76e3bb731bc97671"
-  integrity sha512-jsBuXkFoZxk0yWLyGI9llT9oiQ2FeTASmRFE32U+aaDTfoE92t78eroO7PTpU/OrYq38hlcDM6vbfLDaOLy+7w==
-  dependencies:
-    "@babel/types" "^7.6.3"
-    jsesc "^2.5.1"
-    lodash "^4.17.13"
-    source-map "^0.5.0"
-
 "@babel/generator@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.4.tgz#db651e2840ca9aa66f327dcec1dc5f5fa9611369"
@@ -137,6 +144,16 @@
     lodash "^4.17.13"
     source-map "^0.5.0"
 
+"@babel/generator@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.8.4.tgz#35bbc74486956fe4251829f9f6c48330e8d0985e"
+  integrity sha512-PwhclGdRpNAf3IxZb0YVuITPZmmrXz9zf6fH8lT4XbrmfQKr6ryBzhv593P5C6poJRciFCL/eHGW2NuGrgEyxA==
+  dependencies:
+    "@babel/types" "^7.8.3"
+    jsesc "^2.5.1"
+    lodash "^4.17.13"
+    source-map "^0.5.0"
+
 "@babel/helper-annotate-as-pure@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32"
@@ -158,6 +175,13 @@
   dependencies:
     "@babel/types" "^7.7.4"
 
+"@babel/helper-annotate-as-pure@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.8.3.tgz#60bc0bc657f63a0924ff9a4b4a0b24a13cf4deee"
+  integrity sha512-6o+mJrZBxOoEX77Ezv9zwW7WV8DdluouRKNY/IR5u/YTMuKHgugHOzYWlYvYLpLA9nPsQCAAASpCIbjI9Mv+Uw==
+  dependencies:
+    "@babel/types" "^7.8.3"
+
 "@babel/helper-builder-binary-assignment-operator-visitor@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.1.0.tgz#6b69628dfe4087798e0c4ed98e3d4a6b2fbd2f5f"
@@ -174,6 +198,14 @@
     "@babel/helper-explode-assignable-expression" "^7.7.4"
     "@babel/types" "^7.7.4"
 
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.8.3.tgz#c84097a427a061ac56a1c30ebf54b7b22d241503"
+  integrity sha512-5eFOm2SyFPK4Rh3XMMRDjN7lBH0orh3ss0g3rTYZnBQ+r6YPj7lgDyCvPphynHvUrobJmeMignBr6Acw9mAPlw==
+  dependencies:
+    "@babel/helper-explode-assignable-expression" "^7.8.3"
+    "@babel/types" "^7.8.3"
+
 "@babel/helper-builder-react-jsx@^7.3.0":
   version "7.3.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.3.0.tgz#a1ac95a5d2b3e88ae5e54846bf462eeb81b318a4"
@@ -198,6 +230,14 @@
     "@babel/types" "^7.7.4"
     esutils "^2.0.0"
 
+"@babel/helper-builder-react-jsx@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.8.3.tgz#dee98d7d79cc1f003d80b76fe01c7f8945665ff6"
+  integrity sha512-JT8mfnpTkKNCboTqZsQTdGo3l3Ik3l7QIt9hh0O9DYiwVel37VoJpILKM4YFbP2euF32nkQSb+F9cUk9b7DDXQ==
+  dependencies:
+    "@babel/types" "^7.8.3"
+    esutils "^2.0.0"
+
 "@babel/helper-call-delegate@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-call-delegate/-/helper-call-delegate-7.4.4.tgz#87c1f8ca19ad552a736a7a27b1c1fcf8b1ff1f43"
@@ -216,6 +256,26 @@
     "@babel/traverse" "^7.7.4"
     "@babel/types" "^7.7.4"
 
+"@babel/helper-call-delegate@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-call-delegate/-/helper-call-delegate-7.8.3.tgz#de82619898aa605d409c42be6ffb8d7204579692"
+  integrity sha512-6Q05px0Eb+N4/GTyKPPvnkig7Lylw+QzihMpws9iiZQv7ZImf84ZsZpQH7QoWN4n4tm81SnSzPgHw2qtO0Zf3A==
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.8.3"
+    "@babel/traverse" "^7.8.3"
+    "@babel/types" "^7.8.3"
+
+"@babel/helper-compilation-targets@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.8.4.tgz#03d7ecd454b7ebe19a254f76617e61770aed2c88"
+  integrity sha512-3k3BsKMvPp5bjxgMdrFyq0UaEO48HciVrOVF0+lon8pp95cyJ2ujAh0TrBHNMnJGT2rr0iKOJPFFbSqjDyf/Pg==
+  dependencies:
+    "@babel/compat-data" "^7.8.4"
+    browserslist "^4.8.5"
+    invariant "^2.2.4"
+    levenary "^1.1.1"
+    semver "^5.5.0"
+
 "@babel/helper-create-class-features-plugin@^7.5.5", "@babel/helper-create-class-features-plugin@^7.6.0":
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.6.0.tgz#769711acca889be371e9bc2eb68641d55218021f"
@@ -252,6 +312,18 @@
     "@babel/helper-replace-supers" "^7.7.4"
     "@babel/helper-split-export-declaration" "^7.7.4"
 
+"@babel/helper-create-class-features-plugin@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.8.3.tgz#5b94be88c255f140fd2c10dd151e7f98f4bff397"
+  integrity sha512-qmp4pD7zeTxsv0JNecSBsEmG1ei2MqwJq4YQcK3ZWm/0t07QstWfvuV/vm3Qt5xNMFETn2SZqpMx2MQzbtq+KA==
+  dependencies:
+    "@babel/helper-function-name" "^7.8.3"
+    "@babel/helper-member-expression-to-functions" "^7.8.3"
+    "@babel/helper-optimise-call-expression" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-replace-supers" "^7.8.3"
+    "@babel/helper-split-export-declaration" "^7.8.3"
+
 "@babel/helper-create-regexp-features-plugin@^7.7.0":
   version "7.7.2"
   resolved "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.7.2.tgz#6f20443778c8fce2af2ff4206284afc0ced65db6"
@@ -268,6 +340,14 @@
     "@babel/helper-regex" "^7.4.4"
     regexpu-core "^4.6.0"
 
+"@babel/helper-create-regexp-features-plugin@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.8.3.tgz#c774268c95ec07ee92476a3862b75cc2839beb79"
+  integrity sha512-Gcsm1OHCUr9o9TcJln57xhWHtdXbA2pgQ58S0Lxlks0WMGNXuki4+GLfX0p+L2ZkINUGZvfkz8rzoqJQSthI+Q==
+  dependencies:
+    "@babel/helper-regex" "^7.8.3"
+    regexpu-core "^4.6.0"
+
 "@babel/helper-define-map@^7.7.0":
   version "7.7.0"
   resolved "https://registry.npmjs.org/@babel/helper-define-map/-/helper-define-map-7.7.0.tgz#60b0e9fd60def9de5054c38afde8c8ee409c7529"
@@ -286,6 +366,15 @@
     "@babel/types" "^7.7.4"
     lodash "^4.17.13"
 
+"@babel/helper-define-map@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.8.3.tgz#a0655cad5451c3760b726eba875f1cd8faa02c15"
+  integrity sha512-PoeBYtxoZGtct3md6xZOCWPcKuMuk3IHhgxsRRNtnNShebf4C8YonTSblsK4tvDbm+eJAw2HAPOfCr+Q/YRG/g==
+  dependencies:
+    "@babel/helper-function-name" "^7.8.3"
+    "@babel/types" "^7.8.3"
+    lodash "^4.17.13"
+
 "@babel/helper-explode-assignable-expression@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.1.0.tgz#537fa13f6f1674df745b0c00ec8fe4e99681c8f6"
@@ -302,6 +391,14 @@
     "@babel/traverse" "^7.7.4"
     "@babel/types" "^7.7.4"
 
+"@babel/helper-explode-assignable-expression@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.8.3.tgz#a728dc5b4e89e30fc2dfc7d04fa28a930653f982"
+  integrity sha512-N+8eW86/Kj147bO9G2uclsg5pwfs/fqqY5rwgIL7eTBklgXjcOJ3btzS5iM6AitJcftnY7pm2lGsrJVYLGjzIw==
+  dependencies:
+    "@babel/traverse" "^7.8.3"
+    "@babel/types" "^7.8.3"
+
 "@babel/helper-function-name@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.1.0.tgz#a0ceb01685f73355d4360c1247f582bfafc8ff53"
@@ -329,6 +426,15 @@
     "@babel/template" "^7.7.4"
     "@babel/types" "^7.7.4"
 
+"@babel/helper-function-name@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.8.3.tgz#eeeb665a01b1f11068e9fb86ad56a1cb1a824cca"
+  integrity sha512-BCxgX1BC2hD/oBlIFUgOCQDOPV8nSINxCwM3o93xP4P9Fq6aV5sgv2cOOITDMtCfQ+3PvHp3l689XZvAM9QyOA==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.8.3"
+    "@babel/template" "^7.8.3"
+    "@babel/types" "^7.8.3"
+
 "@babel/helper-get-function-arity@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0.tgz#83572d4320e2a4657263734113c42868b64e49c3"
@@ -350,6 +456,13 @@
   dependencies:
     "@babel/types" "^7.7.4"
 
+"@babel/helper-get-function-arity@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz#b894b947bd004381ce63ea1db9f08547e920abd5"
+  integrity sha512-FVDR+Gd9iLjUMY1fzE2SR0IuaJToR4RkCDARVfsBBPSP53GEqSFjD8gNyxg246VUyc/ALRxFaAK8rVG7UT7xRA==
+  dependencies:
+    "@babel/types" "^7.8.3"
+
 "@babel/helper-hoist-variables@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.4.4.tgz#0298b5f25c8c09c53102d52ac4a98f773eb2850a"
@@ -371,6 +484,13 @@
   dependencies:
     "@babel/types" "^7.7.4"
 
+"@babel/helper-hoist-variables@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.8.3.tgz#1dbe9b6b55d78c9b4183fc8cdc6e30ceb83b7134"
+  integrity sha512-ky1JLOjcDUtSc+xkt0xhYff7Z6ILTAHKmZLHPxAhOP0Nd77O+3nCsd6uSVYur6nJnCI029CrNbYlc0LoPfAPQg==
+  dependencies:
+    "@babel/types" "^7.8.3"
+
 "@babel/helper-member-expression-to-functions@^7.5.5":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.5.5.tgz#1fb5b8ec4453a93c439ee9fe3aeea4a84b76b590"
@@ -392,6 +512,13 @@
   dependencies:
     "@babel/types" "^7.7.4"
 
+"@babel/helper-member-expression-to-functions@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.8.3.tgz#659b710498ea6c1d9907e0c73f206eee7dadc24c"
+  integrity sha512-fO4Egq88utkQFjbPrSHGmGLFqmrshs11d46WI+WZDESt7Wu7wN2G2Iu+NMMZJFDOVRHAMIkB5SNh30NtwCA7RA==
+  dependencies:
+    "@babel/types" "^7.8.3"
+
 "@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.0.0-beta.49":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz#96081b7111e486da4d2cd971ad1a4fe216cc2e3d"
@@ -413,6 +540,13 @@
   dependencies:
     "@babel/types" "^7.7.4"
 
+"@babel/helper-module-imports@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz#7fe39589b39c016331b6b8c3f441e8f0b1419498"
+  integrity sha512-R0Bx3jippsbAEtzkpZ/6FIiuzOURPcMjHp+Z6xPe6DtApDJx+w7UYyOLanZqO8+wKR9G10s/FmHXvxaMd9s6Kg==
+  dependencies:
+    "@babel/types" "^7.8.3"
+
 "@babel/helper-module-transforms@^7.1.0", "@babel/helper-module-transforms@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.4.4.tgz#96115ea42a2f139e619e98ed46df6019b94414b8"
@@ -449,6 +583,18 @@
     "@babel/types" "^7.7.4"
     lodash "^4.17.13"
 
+"@babel/helper-module-transforms@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.8.3.tgz#d305e35d02bee720fbc2c3c3623aa0c316c01590"
+  integrity sha512-C7NG6B7vfBa/pwCOshpMbOYUmrYQDfCpVL/JCRu0ek8B5p8kue1+BCXpg2vOYs7w5ACB9GTOBYQ5U6NwrMg+3Q==
+  dependencies:
+    "@babel/helper-module-imports" "^7.8.3"
+    "@babel/helper-simple-access" "^7.8.3"
+    "@babel/helper-split-export-declaration" "^7.8.3"
+    "@babel/template" "^7.8.3"
+    "@babel/types" "^7.8.3"
+    lodash "^4.17.13"
+
 "@babel/helper-optimise-call-expression@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.0.0.tgz#a2920c5702b073c15de51106200aa8cad20497d5"
@@ -470,11 +616,23 @@
   dependencies:
     "@babel/types" "^7.7.4"
 
+"@babel/helper-optimise-call-expression@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.8.3.tgz#7ed071813d09c75298ef4f208956006b6111ecb9"
+  integrity sha512-Kag20n86cbO2AvHca6EJsvqAd82gc6VMGule4HwebwMlwkpXuVqrNRj6CkCV2sKxgi9MyAUnZVnZ6lJ1/vKhHQ==
+  dependencies:
+    "@babel/types" "^7.8.3"
+
 "@babel/helper-plugin-utils@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250"
   integrity sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==
 
+"@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670"
+  integrity sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==
+
 "@babel/helper-regex@^7.0.0", "@babel/helper-regex@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.4.4.tgz#a47e02bc91fb259d2e6727c2a30013e3ac13c4a2"
@@ -482,6 +640,13 @@
   dependencies:
     lodash "^4.17.11"
 
+"@babel/helper-regex@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.8.3.tgz#139772607d51b93f23effe72105b319d2a4c6965"
+  integrity sha512-BWt0QtYv/cg/NecOAZMdcn/waj/5P26DR4mVLXfFtDokSR6fyuG0Pj+e2FqtSME+MqED1khnSMulkmGl8qWiUQ==
+  dependencies:
+    lodash "^4.17.13"
+
 "@babel/helper-remap-async-to-generator@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.1.0.tgz#361d80821b6f38da75bd3f0785ece20a88c5fe7f"
@@ -515,6 +680,17 @@
     "@babel/traverse" "^7.7.4"
     "@babel/types" "^7.7.4"
 
+"@babel/helper-remap-async-to-generator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.8.3.tgz#273c600d8b9bf5006142c1e35887d555c12edd86"
+  integrity sha512-kgwDmw4fCg7AVgS4DukQR/roGp+jP+XluJE5hsRZwxCYGg+Rv9wSGErDWhlI90FODdYfd4xG4AQRiMDjjN0GzA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.8.3"
+    "@babel/helper-wrap-function" "^7.8.3"
+    "@babel/template" "^7.8.3"
+    "@babel/traverse" "^7.8.3"
+    "@babel/types" "^7.8.3"
+
 "@babel/helper-replace-supers@^7.5.5", "@babel/helper-replace-supers@^7.7.0":
   version "7.7.0"
   resolved "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.7.0.tgz#d5365c8667fe7cbd13b8ddddceb9bd7f2b387512"
@@ -535,6 +711,16 @@
     "@babel/traverse" "^7.7.4"
     "@babel/types" "^7.7.4"
 
+"@babel/helper-replace-supers@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.8.3.tgz#91192d25f6abbcd41da8a989d4492574fb1530bc"
+  integrity sha512-xOUssL6ho41U81etpLoT2RTdvdus4VfHamCuAm4AHxGr+0it5fnwoVdwUJ7GFEqCsQYzJUhcbsN9wB9apcYKFA==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.8.3"
+    "@babel/helper-optimise-call-expression" "^7.8.3"
+    "@babel/traverse" "^7.8.3"
+    "@babel/types" "^7.8.3"
+
 "@babel/helper-simple-access@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.1.0.tgz#65eeb954c8c245beaa4e859da6188f39d71e585c"
@@ -559,6 +745,14 @@
     "@babel/template" "^7.7.4"
     "@babel/types" "^7.7.4"
 
+"@babel/helper-simple-access@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.8.3.tgz#7f8109928b4dab4654076986af575231deb639ae"
+  integrity sha512-VNGUDjx5cCWg4vvCTR8qQ7YJYZ+HBjxOgXEl7ounz+4Sn7+LMD3CFrCTEU6/qXKbA2nKg21CwhhBzO0RpRbdCw==
+  dependencies:
+    "@babel/template" "^7.8.3"
+    "@babel/types" "^7.8.3"
+
 "@babel/helper-split-export-declaration@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz#ff94894a340be78f53f06af038b205c49d993677"
@@ -580,6 +774,13 @@
   dependencies:
     "@babel/types" "^7.7.4"
 
+"@babel/helper-split-export-declaration@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz#31a9f30070f91368a7182cf05f831781065fc7a9"
+  integrity sha512-3x3yOeyBhW851hroze7ElzdkeRXQYQbFIb7gLK1WQYsw2GWDay5gAJNw1sWJ0VFP6z5J1whqeXH/WCdCjZv6dA==
+  dependencies:
+    "@babel/types" "^7.8.3"
+
 "@babel/helper-wrap-function@^7.1.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.2.0.tgz#c4e0012445769e2815b55296ead43a958549f6fa"
@@ -610,6 +811,16 @@
     "@babel/traverse" "^7.7.4"
     "@babel/types" "^7.7.4"
 
+"@babel/helper-wrap-function@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.8.3.tgz#9dbdb2bb55ef14aaa01fe8c99b629bd5352d8610"
+  integrity sha512-LACJrbUET9cQDzb6kG7EeD7+7doC3JNvUgTEQOx2qaO1fKlzE/Bf05qs9w1oXQMmXlPO65lC3Tq9S6gZpTErEQ==
+  dependencies:
+    "@babel/helper-function-name" "^7.8.3"
+    "@babel/template" "^7.8.3"
+    "@babel/traverse" "^7.8.3"
+    "@babel/types" "^7.8.3"
+
 "@babel/helpers@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.4.4.tgz#868b0ef59c1dd4e78744562d5ce1b59c89f2f2a5"
@@ -628,14 +839,14 @@
     "@babel/traverse" "^7.7.0"
     "@babel/types" "^7.7.0"
 
-"@babel/helpers@^7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.6.2.tgz#681ffe489ea4dcc55f23ce469e58e59c1c045153"
-  integrity sha512-3/bAUL8zZxYs1cdX2ilEE0WobqbCmKWr/889lf2SS0PpDcpEIY8pb1CCyz0pEcX3pEb+MCbks1jIokz2xLtGTA==
+"@babel/helpers@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.8.4.tgz#754eb3ee727c165e0a240d6c207de7c455f36f73"
+  integrity sha512-VPbe7wcQ4chu4TDQjimHv/5tj73qz88o12EPkO2ValS2QiQS/1F2SsjyIGNnAD0vF/nZS6Cf9i+vW6HIlnaR8w==
   dependencies:
-    "@babel/template" "^7.6.0"
-    "@babel/traverse" "^7.6.2"
-    "@babel/types" "^7.6.0"
+    "@babel/template" "^7.8.3"
+    "@babel/traverse" "^7.8.4"
+    "@babel/types" "^7.8.3"
 
 "@babel/highlight@^7.0.0":
   version "7.0.0"
@@ -646,12 +857,21 @@
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.8.3.tgz#28f173d04223eaaa59bc1d439a3836e6d1265797"
+  integrity sha512-PX4y5xQUvy0fnEVHrYOarRPXVWafSjTW9T0Hab8gVIawpl2Sj0ORyrygANq+KjcNlSSTw0YCLSNA8OyZ1I4yEg==
+  dependencies:
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.4.4", "@babel/parser@^7.4.5":
   version "7.4.5"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.4.5.tgz#04af8d5d5a2b044a2a1bffacc1e5e6673544e872"
   integrity sha512-9mUqkL1FF5T7f0WDFfAoDdiMVPWsdD1gZYzSnaXsxUCUqzuch/8of9G3VUSNiZmMBoRxT3neyVsqeiL/ZPcjew==
 
-"@babel/parser@^7.6.0", "@babel/parser@^7.6.3", "@babel/parser@^7.6.4":
+"@babel/parser@^7.6.0":
   version "7.6.4"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.6.4.tgz#cb9b36a7482110282d5cb6dd424ec9262b473d81"
   integrity sha512-D8RHPW5qd0Vbyo3qb+YjO5nvUVRTXFLQ/FsDxJU2Nqz4uB5EnUN0ZQSEYpvTIbRuttig1XbHWU5oMeQwQSAA+A==
@@ -666,6 +886,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.4.tgz#75ab2d7110c2cf2fa949959afb05fa346d2231bb"
   integrity sha512-jIwvLO0zCL+O/LmEJQjWA75MQTWwx3c3u2JOTDK5D3/9egrWRRA0/0hk9XXywYnXZVVpzrBYeIQTmhwUaePI9g==
 
+"@babel/parser@^7.8.3", "@babel/parser@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.8.4.tgz#d1dbe64691d60358a974295fa53da074dd2ce8e8"
+  integrity sha512-0fKu/QqildpXmPVaRBoXOlyBb3MC+J0A66x97qEfLOMkn3u6nfY5esWogQwi/K0BjASYy4DbnsEWnpNL6qT5Mw==
+
 "@babel/plugin-proposal-async-generator-functions@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.2.0.tgz#b289b306669dce4ad20b0252889a15768c9d417e"
@@ -693,7 +918,16 @@
     "@babel/helper-remap-async-to-generator" "^7.7.4"
     "@babel/plugin-syntax-async-generators" "^7.7.4"
 
-"@babel/plugin-proposal-class-properties@7.5.5", "@babel/plugin-proposal-class-properties@^7.5.5":
+"@babel/plugin-proposal-async-generator-functions@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.8.3.tgz#bad329c670b382589721b27540c7d288601c6e6f"
+  integrity sha512-NZ9zLv848JsV3hs8ryEh7Uaz/0KsmPLqv0+PdkDJL1cJy0K4kOCFa8zc1E3mp+RHPQcpdfb/6GovEsW4VDrOMw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-remap-async-to-generator" "^7.8.3"
+    "@babel/plugin-syntax-async-generators" "^7.8.0"
+
+"@babel/plugin-proposal-class-properties@7.5.5":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.5.5.tgz#a974cfae1e37c3110e71f3c6a2e48b8e71958cd4"
   integrity sha512-AF79FsnWFxjlaosgdi421vmYG6/jg79bVD0dpD44QdgobzHKuLZ6S3vl8la9qIeSwGi8i1fS0O1mfuDAAdo1/A==
@@ -717,6 +951,14 @@
     "@babel/helper-create-class-features-plugin" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-proposal-class-properties@^7.7.4":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.8.3.tgz#5e06654af5cd04b608915aada9b2a6788004464e"
+  integrity sha512-EqFhbo7IosdgPgZggHaNObkmO1kNUe3slaKu54d5OWvy+p9QIKOzK1GAEpAIsZtWVtPXUHSMcT4smvDrCfY4AA==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-proposal-decorators@7.6.0":
   version "7.6.0"
   resolved "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.6.0.tgz#6659d2572a17d70abd68123e89a12a43d90aa30c"
@@ -742,6 +984,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-dynamic-import" "^7.7.4"
 
+"@babel/plugin-proposal-dynamic-import@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.8.3.tgz#38c4fe555744826e97e2ae930b0fb4cc07e66054"
+  integrity sha512-NyaBbyLFXFLT9FP+zk0kYlUlA8XtCUbehs67F0nnEg7KICgMc2mNkIeu9TYhKzyXMkrapZFwAhXLdnt4IYHy1w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
+
 "@babel/plugin-proposal-json-strings@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.2.0.tgz#568ecc446c6148ae6b267f02551130891e29f317"
@@ -758,6 +1008,22 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-json-strings" "^7.7.4"
 
+"@babel/plugin-proposal-json-strings@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.8.3.tgz#da5216b238a98b58a1e05d6852104b10f9a70d6b"
+  integrity sha512-KGhQNZ3TVCQG/MjRbAUwuH+14y9q0tpxs1nWWs3pbSleRdDro9SAMMDyye8HhY1gqZ7/NqIc8SKhya0wRDgP1Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-json-strings" "^7.8.0"
+
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.7.4", "@babel/plugin-proposal-nullish-coalescing-operator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.8.3.tgz#e4572253fdeed65cddeecfdab3f928afeb2fd5d2"
+  integrity sha512-TS9MlfzXpXKt6YYomudb/KU7nQI6/xnapG6in1uZxoxDghuSMZsPb6D2fyUwNYSAp4l1iR7QtFOjkqcRYcUsfw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+
 "@babel/plugin-proposal-object-rest-spread@7.5.5":
   version "7.5.5"
   resolved "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.5.5.tgz#61939744f71ba76a3ae46b5eea18a54c16d22e58"
@@ -790,6 +1056,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-object-rest-spread" "^7.7.4"
 
+"@babel/plugin-proposal-object-rest-spread@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.8.3.tgz#eb5ae366118ddca67bed583b53d7554cad9951bb"
+  integrity sha512-8qvuPwU/xxUCt78HocNlv0mXXo0wdh9VT1R04WU8HGOfaOob26pF+9P5/lYjN/q7DHOX1bvX60hnhOvuQUJdbA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
+
 "@babel/plugin-proposal-optional-catch-binding@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.2.0.tgz#135d81edb68a081e55e56ec48541ece8065c38f5"
@@ -806,6 +1080,22 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-optional-catch-binding" "^7.7.4"
 
+"@babel/plugin-proposal-optional-catch-binding@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.8.3.tgz#9dee96ab1650eed88646ae9734ca167ac4a9c5c9"
+  integrity sha512-0gkX7J7E+AtAw9fcwlVQj8peP61qhdg/89D5swOkjYbkboA2CVckn3kiyum1DE0wskGb7KJJxBdyEBApDLLVdw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
+
+"@babel/plugin-proposal-optional-chaining@^7.7.5", "@babel/plugin-proposal-optional-chaining@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.8.3.tgz#ae10b3214cb25f7adb1f3bc87ba42ca10b7e2543"
+  integrity sha512-QIoIR9abkVn+seDE3OjA08jWcs3eZ9+wJCKSRgo3WdEU2csFYgdScb+8qHB3+WXsGJD55u+5hWCISI7ejXS+kg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+
 "@babel/plugin-proposal-unicode-property-regex@^7.4.4", "@babel/plugin-proposal-unicode-property-regex@^7.7.0":
   version "7.7.0"
   resolved "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.7.0.tgz#549fe1717a1bd0a2a7e63163841cb37e78179d5d"
@@ -814,15 +1104,6 @@
     "@babel/helper-create-regexp-features-plugin" "^7.7.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-proposal-unicode-property-regex@^7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.6.2.tgz#05413762894f41bfe42b9a5e80919bd575dcc802"
-  integrity sha512-NxHETdmpeSCtiatMRYWVJo7266rrvAC3DTeG5exQBIH/fMIUK7ejDNznBbn3HQl/o9peymRRg7Yqkx6PdUXmMw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-regex" "^7.4.4"
-    regexpu-core "^4.6.0"
-
 "@babel/plugin-proposal-unicode-property-regex@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.7.4.tgz#7c239ccaf09470dbe1d453d50057460e84517ebb"
@@ -831,6 +1112,14 @@
     "@babel/helper-create-regexp-features-plugin" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-proposal-unicode-property-regex@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.8.3.tgz#b646c3adea5f98800c9ab45105ac34d06cd4a47f"
+  integrity sha512-1/1/rEZv2XGweRwwSkLpY+s60za9OZ1hJs4YDqFHCw0kYWYwL5IFljVY1MYBL+weT1l9pokDO2uhSTLVxzoHkQ==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-syntax-async-generators@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.2.0.tgz#69e1f0db34c6f5a0cf7e2b3323bf159a76c8cb7f"
@@ -845,6 +1134,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-async-generators@^7.8.0":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
+  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
 "@babel/plugin-syntax-decorators@^7.2.0":
   version "7.2.0"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.2.0.tgz#c50b1b957dcc69e4b1127b65e1c33eef61570c1b"
@@ -866,6 +1162,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-dynamic-import@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
+  integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
 "@babel/plugin-syntax-flow@^7.2.0":
   version "7.7.0"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.7.0.tgz#5c9465bcd26354d5215294ea90ab1c706a571386"
@@ -887,6 +1190,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-json-strings@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
+  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
 "@babel/plugin-syntax-jsx@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.2.0.tgz#0b85a3b4bc7cdf4cc4b8bf236335b907ca22e7c7"
@@ -901,6 +1211,20 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-jsx@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.8.3.tgz#521b06c83c40480f1e58b4fd33b92eceb1d6ea94"
+  integrity sha512-WxdW9xyLgBdefoo0Ynn3MRSkhe5tFVxxKNVdnZSh318WrG2e2jH+E9wd/++JsqcLJZPfz87njQJ8j2Upjm0M0A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
+  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
 "@babel/plugin-syntax-object-rest-spread@^7.0.0", "@babel/plugin-syntax-object-rest-spread@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.2.0.tgz#3b7a3e733510c57e820b9142a6579ac8b0dfad2e"
@@ -915,6 +1239,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-object-rest-spread@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
+  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
 "@babel/plugin-syntax-optional-catch-binding@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.2.0.tgz#a94013d6eda8908dfe6a477e7f9eda85656ecf5c"
@@ -929,6 +1260,20 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-optional-catch-binding@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
+  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-chaining@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
+  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
 "@babel/plugin-syntax-top-level-await@^7.7.0":
   version "7.7.0"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.7.0.tgz#f5699549f50bbe8d12b1843a4e82f0a37bb65f4d"
@@ -943,6 +1288,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-top-level-await@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.8.3.tgz#3acdece695e6b13aaf57fc291d1a800950c71391"
+  integrity sha512-kwj1j9lL/6Wd0hROD3b/OZZ7MSrZLqqn9RAZ5+cYYsflQ9HZBIKCUkr3+uL1MEJ1NePiUbf98jjiMQSv0NMR9g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-syntax-typescript@^7.2.0":
   version "7.3.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.3.3.tgz#a7cc3f66119a9f7ebe2de5383cce193473d65991"
@@ -950,6 +1302,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-typescript@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.8.3.tgz#c1f659dda97711a569cef75275f7e15dcaa6cabc"
+  integrity sha512-GO1MQ/SGGGoiEXY0e0bSpHimJvxqB7lktLLIq2pv8xG7WZ8IMEle74jIe1FhprHBWjwjZtXHkycDLZXIWM5Wfg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-transform-arrow-functions@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.2.0.tgz#9aeafbe4d6ffc6563bf8f8372091628f00779550"
@@ -964,6 +1323,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-arrow-functions@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.8.3.tgz#82776c2ed0cd9e1a49956daeb896024c9473b8b6"
+  integrity sha512-0MRF+KC8EqH4dbuITCWwPSzsyO3HIWWlm30v8BbbpOrS1B++isGxPnnuq/IZvOX5J2D/p7DQalQm+/2PnlKGxg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-transform-async-to-generator@^7.5.0", "@babel/plugin-transform-async-to-generator@^7.7.0":
   version "7.7.0"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.7.0.tgz#e2b84f11952cf5913fe3438b7d2585042772f492"
@@ -982,6 +1348,15 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/helper-remap-async-to-generator" "^7.7.4"
 
+"@babel/plugin-transform-async-to-generator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.8.3.tgz#4308fad0d9409d71eafb9b1a6ee35f9d64b64086"
+  integrity sha512-imt9tFLD9ogt56Dd5CI/6XgpukMwd/fLGSrix2httihVe7LOGVPhyhMh1BU5kDM7iHD08i8uUtmV2sWaBFlHVQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-remap-async-to-generator" "^7.8.3"
+
 "@babel/plugin-transform-block-scoped-functions@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.2.0.tgz#5d3cc11e8d5ddd752aa64c9148d0db6cb79fd190"
@@ -996,6 +1371,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-block-scoped-functions@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.8.3.tgz#437eec5b799b5852072084b3ae5ef66e8349e8a3"
+  integrity sha512-vo4F2OewqjbB1+yaJ7k2EJFHlTP3jR634Z9Cj9itpqNjuLXvhlVxgnjsHsdRgASR8xYDrx6onw4vW5H6We0Jmg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-transform-block-scoping@^7.6.0", "@babel/plugin-transform-block-scoping@^7.6.3":
   version "7.6.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.6.3.tgz#6e854e51fbbaa84351b15d4ddafe342f3a5d542a"
@@ -1012,6 +1394,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     lodash "^4.17.13"
 
+"@babel/plugin-transform-block-scoping@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.8.3.tgz#97d35dab66857a437c166358b91d09050c868f3a"
+  integrity sha512-pGnYfm7RNRgYRi7bids5bHluENHqJhrV4bCZRwc5GamaWIIs07N4rZECcmJL6ZClwjDz1GbdMZFtPs27hTB06w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    lodash "^4.17.13"
+
 "@babel/plugin-transform-classes@^7.5.5", "@babel/plugin-transform-classes@^7.7.0":
   version "7.7.0"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.7.0.tgz#b411ecc1b8822d24b81e5d184f24149136eddd4a"
@@ -1040,6 +1430,20 @@
     "@babel/helper-split-export-declaration" "^7.7.4"
     globals "^11.1.0"
 
+"@babel/plugin-transform-classes@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.8.3.tgz#46fd7a9d2bb9ea89ce88720477979fe0d71b21b8"
+  integrity sha512-SjT0cwFJ+7Rbr1vQsvphAHwUHvSUPmMjMU/0P59G8U2HLFqSa082JO7zkbDNWs9kH/IUqpHI6xWNesGf8haF1w==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.8.3"
+    "@babel/helper-define-map" "^7.8.3"
+    "@babel/helper-function-name" "^7.8.3"
+    "@babel/helper-optimise-call-expression" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-replace-supers" "^7.8.3"
+    "@babel/helper-split-export-declaration" "^7.8.3"
+    globals "^11.1.0"
+
 "@babel/plugin-transform-computed-properties@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.2.0.tgz#83a7df6a658865b1c8f641d510c6f3af220216da"
@@ -1054,6 +1458,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-computed-properties@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.8.3.tgz#96d0d28b7f7ce4eb5b120bb2e0e943343c86f81b"
+  integrity sha512-O5hiIpSyOGdrQZRQ2ccwtTVkgUDBBiCuK//4RJ6UfePllUTCENOzKxfh6ulckXKc0DixTFLCfb2HVkNA7aDpzA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-transform-destructuring@7.6.0", "@babel/plugin-transform-destructuring@^7.6.0":
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.6.0.tgz#44bbe08b57f4480094d57d9ffbcd96d309075ba6"
@@ -1068,6 +1479,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-destructuring@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.8.3.tgz#20ddfbd9e4676906b1056ee60af88590cc7aaa0b"
+  integrity sha512-H4X646nCkiEcHZUZaRkhE2XVsoz0J/1x3VVujnn96pSoGCtKPA99ZZA+va+gK+92Zycd6OBKCD8tDb/731bhgQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-transform-dotall-regex@^7.4.4", "@babel/plugin-transform-dotall-regex@^7.7.0":
   version "7.7.0"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.7.0.tgz#c5c9ecacab3a5e0c11db6981610f0c32fd698b3b"
@@ -1076,15 +1494,6 @@
     "@babel/helper-create-regexp-features-plugin" "^7.7.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-dotall-regex@^7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.6.2.tgz#44abb948b88f0199a627024e1508acaf8dc9b2f9"
-  integrity sha512-KGKT9aqKV+9YMZSkowzYoYEiHqgaDhGmPNZlZxX6UeHC4z30nC1J9IrZuGqbYFB1jaIGdv91ujpze0exiVK8bA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-regex" "^7.4.4"
-    regexpu-core "^4.6.0"
-
 "@babel/plugin-transform-dotall-regex@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.7.4.tgz#f7ccda61118c5b7a2599a72d5e3210884a021e96"
@@ -1093,6 +1502,14 @@
     "@babel/helper-create-regexp-features-plugin" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-dotall-regex@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.8.3.tgz#c3c6ec5ee6125c6993c5cbca20dc8621a9ea7a6e"
+  integrity sha512-kLs1j9Nn4MQoBYdRXH6AeaXMbEJFaFu/v1nQkvib6QzTj8MZI5OQzqmD83/2jEM1z0DLilra5aWO5YpyC0ALIw==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-transform-duplicate-keys@^7.5.0":
   version "7.5.0"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.5.0.tgz#c5dbf5106bf84cdf691222c0974c12b1df931853"
@@ -1107,6 +1524,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-duplicate-keys@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.8.3.tgz#8d12df309aa537f272899c565ea1768e286e21f1"
+  integrity sha512-s8dHiBUbcbSgipS4SMFuWGqCvyge5V2ZeAWzR6INTVC3Ltjig/Vw1G2Gztv0vU/hRG9X8IvKvYdoksnUfgXOEQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-transform-exponentiation-operator@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.2.0.tgz#a63868289e5b4007f7054d46491af51435766008"
@@ -1123,6 +1547,14 @@
     "@babel/helper-builder-binary-assignment-operator-visitor" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-exponentiation-operator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.8.3.tgz#581a6d7f56970e06bf51560cd64f5e947b70d7b7"
+  integrity sha512-zwIpuIymb3ACcInbksHaNcR12S++0MDLKkiqXHl3AzpgdKlFNhog+z/K0+TGW+b0w5pgTq4H6IwV/WhxbGYSjQ==
+  dependencies:
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-transform-flow-strip-types@7.4.4":
   version "7.4.4"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.4.4.tgz#d267a081f49a8705fc9146de0768c6b58dccd8f7"
@@ -1153,6 +1585,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-for-of@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.8.4.tgz#6fe8eae5d6875086ee185dd0b098a8513783b47d"
+  integrity sha512-iAXNlOWvcYUYoV8YIxwS7TxGRJcxyl8eQCfT+A5j8sKUzRFvJdcyjp97jL2IghWSRDaL2PU2O2tX8Cu9dTBq5A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-transform-function-name@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.4.4.tgz#e1436116abb0610c2259094848754ac5230922ad"
@@ -1177,6 +1616,14 @@
     "@babel/helper-function-name" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-function-name@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.8.3.tgz#279373cb27322aaad67c2683e776dfc47196ed8b"
+  integrity sha512-rO/OnDS78Eifbjn5Py9v8y0aR+aSYhDhqAwVfsTl0ERuMZyr05L1aFSCJnbv2mmsLkit/4ReeQ9N2BgLnOcPCQ==
+  dependencies:
+    "@babel/helper-function-name" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-transform-literals@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.2.0.tgz#690353e81f9267dad4fd8cfd77eafa86aba53ea1"
@@ -1191,6 +1638,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-literals@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.8.3.tgz#aef239823d91994ec7b68e55193525d76dbd5dc1"
+  integrity sha512-3Tqf8JJ/qB7TeldGl+TT55+uQei9JfYaregDcEAyBZ7akutriFrt6C/wLYIer6OYhleVQvH/ntEhjE/xMmy10A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-transform-member-expression-literals@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.2.0.tgz#fa10aa5c58a2cb6afcf2c9ffa8cb4d8b3d489a2d"
@@ -1205,6 +1659,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-member-expression-literals@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.8.3.tgz#963fed4b620ac7cbf6029c755424029fa3a40410"
+  integrity sha512-3Wk2EXhnw+rP+IDkK6BdtPKsUE5IeZ6QOGrPYvw52NwBStw9V1ZVzxgK6fSKSxqUvH9eQPR3tm3cOq79HlsKYA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-transform-modules-amd@^7.5.0":
   version "7.5.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.5.0.tgz#ef00435d46da0a5961aa728a1d2ecff063e4fb91"
@@ -1223,6 +1684,15 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     babel-plugin-dynamic-import-node "^2.3.0"
 
+"@babel/plugin-transform-modules-amd@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.8.3.tgz#65606d44616b50225e76f5578f33c568a0b876a5"
+  integrity sha512-MadJiU3rLKclzT5kBH4yxdry96odTUwuqrZM+GllFI/VhxfPz+k9MshJM+MwhfkCdxxclSbSBbUGciBngR+kEQ==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    babel-plugin-dynamic-import-node "^2.3.0"
+
 "@babel/plugin-transform-modules-commonjs@^7.6.0":
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.6.0.tgz#39dfe957de4420445f1fcf88b68a2e4aa4515486"
@@ -1253,6 +1723,16 @@
     "@babel/helper-simple-access" "^7.7.4"
     babel-plugin-dynamic-import-node "^2.3.0"
 
+"@babel/plugin-transform-modules-commonjs@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.8.3.tgz#df251706ec331bd058a34bdd72613915f82928a5"
+  integrity sha512-JpdMEfA15HZ/1gNuB9XEDlZM1h/gF/YOH7zaZzQu2xCFRfwc01NXBMHHSTT6hRjlXJJs5x/bfODM3LiCk94Sxg==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-simple-access" "^7.8.3"
+    babel-plugin-dynamic-import-node "^2.3.0"
+
 "@babel/plugin-transform-modules-systemjs@^7.5.0", "@babel/plugin-transform-modules-systemjs@^7.7.0":
   version "7.7.0"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.7.0.tgz#9baf471213af9761c1617bb12fd278e629041417"
@@ -1271,6 +1751,16 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     babel-plugin-dynamic-import-node "^2.3.0"
 
+"@babel/plugin-transform-modules-systemjs@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.8.3.tgz#d8bbf222c1dbe3661f440f2f00c16e9bb7d0d420"
+  integrity sha512-8cESMCJjmArMYqa9AO5YuMEkE4ds28tMpZcGZB/jl3n0ZzlsxOAi3mC+SKypTfT8gjMupCnd3YiXCkMjj2jfOg==
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.8.3"
+    "@babel/helper-module-transforms" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    babel-plugin-dynamic-import-node "^2.3.0"
+
 "@babel/plugin-transform-modules-umd@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.2.0.tgz#7678ce75169f0877b8eb2235538c074268dd01ae"
@@ -1295,6 +1785,14 @@
     "@babel/helper-module-transforms" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-modules-umd@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.8.3.tgz#592d578ce06c52f5b98b02f913d653ffe972661a"
+  integrity sha512-evhTyWhbwbI3/U6dZAnx/ePoV7H6OUG+OjiJFHmhr9FPn0VShjwC2kdxqIuQ/+1P50TMrneGzMeyMTFOjKSnAw==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-transform-named-capturing-groups-regex@^7.6.0", "@babel/plugin-transform-named-capturing-groups-regex@^7.7.0":
   version "7.7.0"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.7.0.tgz#358e6fd869b9a4d8f5cbc79e4ed4fc340e60dcaf"
@@ -1302,13 +1800,6 @@
   dependencies:
     "@babel/helper-create-regexp-features-plugin" "^7.7.0"
 
-"@babel/plugin-transform-named-capturing-groups-regex@^7.6.3":
-  version "7.6.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.6.3.tgz#aaa6e409dd4fb2e50b6e2a91f7e3a3149dbce0cf"
-  integrity sha512-jTkk7/uE6H2s5w6VlMHeWuH+Pcy2lmdwFoeWCVnvIrDUnB5gQqTVI8WfmEAhF2CDEarGrknZcmSFg1+bkfCoSw==
-  dependencies:
-    regexpu-core "^4.6.0"
-
 "@babel/plugin-transform-named-capturing-groups-regex@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.7.4.tgz#fb3bcc4ee4198e7385805007373d6b6f42c98220"
@@ -1316,6 +1807,13 @@
   dependencies:
     "@babel/helper-create-regexp-features-plugin" "^7.7.4"
 
+"@babel/plugin-transform-named-capturing-groups-regex@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.8.3.tgz#a2a72bffa202ac0e2d0506afd0939c5ecbc48c6c"
+  integrity sha512-f+tF/8UVPU86TrCb06JoPWIdDpTNSGGcAtaD9mLP0aYGA0OS0j7j7DHJR0GTFrUZPUU6loZhbsVZgTh0N+Qdnw==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.8.3"
+
 "@babel/plugin-transform-new-target@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.4.4.tgz#18d120438b0cc9ee95a47f2c72bc9768fbed60a5"
@@ -1330,6 +1828,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-new-target@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.8.3.tgz#60cc2ae66d85c95ab540eb34babb6434d4c70c43"
+  integrity sha512-QuSGysibQpyxexRyui2vca+Cmbljo8bcRckgzYV4kRIsHpVeyeC3JDO63pY+xFZ6bWOBn7pfKZTqV4o/ix9sFw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-transform-object-super@^7.5.5":
   version "7.5.5"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.5.5.tgz#c70021df834073c65eb613b8679cc4a381d1a9f9"
@@ -1346,6 +1851,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/helper-replace-supers" "^7.7.4"
 
+"@babel/plugin-transform-object-super@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.8.3.tgz#ebb6a1e7a86ffa96858bd6ac0102d65944261725"
+  integrity sha512-57FXk+gItG/GejofIyLIgBKTas4+pEU47IXKDBWFTxdPd7F80H8zybyAY7UoblVfBhBGs2EKM+bJUu2+iUYPDQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-replace-supers" "^7.8.3"
+
 "@babel/plugin-transform-parameters@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.4.4.tgz#7556cf03f318bd2719fe4c922d2d808be5571e16"
@@ -1364,6 +1877,15 @@
     "@babel/helper-get-function-arity" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-parameters@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.8.4.tgz#1d5155de0b65db0ccf9971165745d3bb990d77d3"
+  integrity sha512-IsS3oTxeTsZlE5KqzTbcC2sV0P9pXdec53SU+Yxv7o/6dvGM5AkTotQKhoSffhNgZ/dftsSiOoxy7evCYJXzVA==
+  dependencies:
+    "@babel/helper-call-delegate" "^7.8.3"
+    "@babel/helper-get-function-arity" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-transform-property-literals@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.2.0.tgz#03e33f653f5b25c4eb572c98b9485055b389e905"
@@ -1378,6 +1900,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-property-literals@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.8.3.tgz#33194300d8539c1ed28c62ad5087ba3807b98263"
+  integrity sha512-uGiiXAZMqEoQhRWMK17VospMZh5sXWg+dlh2soffpkAl96KAm+WZuJfa6lcELotSRmooLqg0MWdH6UUq85nmmg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-transform-react-constant-elements@^7.0.0", "@babel/plugin-transform-react-constant-elements@^7.2.0":
   version "7.6.3"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.6.3.tgz#9fc9ea060b983c7c035acbe481cbe1fb1245bfff"
@@ -1408,6 +1937,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-react-display-name@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.8.3.tgz#70ded987c91609f78353dd76d2fb2a0bb991e8e5"
+  integrity sha512-3Jy/PCw8Fe6uBKtEgz3M82ljt+lTg+xJaM4og+eyu83qLT87ZUSckn0wy7r31jflURWLO83TW6Ylf7lyXj3m5A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-transform-react-jsx-self@^7.0.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.2.0.tgz#461e21ad9478f1031dd5e276108d027f1b5240ba"
@@ -1424,6 +1960,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-jsx" "^7.7.4"
 
+"@babel/plugin-transform-react-jsx-self@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.8.3.tgz#c4f178b2aa588ecfa8d077ea80d4194ee77ed702"
+  integrity sha512-01OT7s5oa0XTLf2I8XGsL8+KqV9lx3EZV+jxn/L2LQ97CGKila2YMroTkCEIE0HV/FF7CMSRsIAybopdN9NTdg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-jsx" "^7.8.3"
+
 "@babel/plugin-transform-react-jsx-source@^7.0.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.2.0.tgz#20c8c60f0140f5dd3cd63418d452801cf3f7180f"
@@ -1440,6 +1984,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-jsx" "^7.7.4"
 
+"@babel/plugin-transform-react-jsx-source@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.8.3.tgz#951e75a8af47f9f120db731be095d2b2c34920e0"
+  integrity sha512-PLMgdMGuVDtRS/SzjNEQYUT8f4z1xb2BAT54vM1X5efkVuYBf5WyGUMbpmARcfq3NaglIwz08UVQK4HHHbC6ag==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-jsx" "^7.8.3"
+
 "@babel/plugin-transform-react-jsx@^7.0.0":
   version "7.3.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.3.0.tgz#f2cab99026631c767e2745a5368b331cfe8f5290"
@@ -1467,6 +2019,15 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-jsx" "^7.7.4"
 
+"@babel/plugin-transform-react-jsx@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.8.3.tgz#4220349c0390fdefa505365f68c103562ab2fc4a"
+  integrity sha512-r0h+mUiyL595ikykci+fbwm9YzmuOrUBi0b+FDIKmi3fPQyFokWVEMJnRWHJPPQEjyFJyna9WZC6Viv6UHSv1g==
+  dependencies:
+    "@babel/helper-builder-react-jsx" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-jsx" "^7.8.3"
+
 "@babel/plugin-transform-regenerator@^7.4.5", "@babel/plugin-transform-regenerator@^7.7.0":
   version "7.7.0"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.7.0.tgz#f1b20b535e7716b622c99e989259d7dd942dd9cc"
@@ -1481,6 +2042,13 @@
   dependencies:
     regenerator-transform "^0.14.0"
 
+"@babel/plugin-transform-regenerator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.8.3.tgz#b31031e8059c07495bf23614c97f3d9698bc6ec8"
+  integrity sha512-qt/kcur/FxrQrzFR432FGZznkVAjiyFtCOANjkAKwCbt465L6ZCiUQh2oMYGU3Wo8LRFJxNDFwWn106S5wVUNA==
+  dependencies:
+    regenerator-transform "^0.14.0"
+
 "@babel/plugin-transform-reserved-words@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.2.0.tgz#4792af87c998a49367597d07fedf02636d2e1634"
@@ -1495,6 +2063,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-reserved-words@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.8.3.tgz#9a0635ac4e665d29b162837dd3cc50745dfdf1f5"
+  integrity sha512-mwMxcycN3omKFDjDQUl+8zyMsBfjRFr0Zn/64I41pmjv4NJuqcYlEtezwYtw9TFd9WR1vN5kiM+O0gMZzO6L0A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-transform-runtime@7.6.0":
   version "7.6.0"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.6.0.tgz#85a3cce402b28586138e368fce20ab3019b9713e"
@@ -1505,13 +2080,13 @@
     resolve "^1.8.1"
     semver "^5.5.1"
 
-"@babel/plugin-transform-runtime@^7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.6.2.tgz#2669f67c1fae0ae8d8bf696e4263ad52cb98b6f8"
-  integrity sha512-cqULw/QB4yl73cS5Y0TZlQSjDvNkzDbu0FurTZyHlJpWE5T3PCMdnyV+xXoH1opr1ldyHODe3QAX3OMAii5NxA==
+"@babel/plugin-transform-runtime@^7.7.6":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.8.3.tgz#c0153bc0a5375ebc1f1591cb7eea223adea9f169"
+  integrity sha512-/vqUt5Yh+cgPZXXjmaG9NT8aVfThKk7G4OqkVhrXqwsC5soMn/qTCxs36rZ2QFhpfTJcjw4SNDIZ4RUb8OL4jQ==
   dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-module-imports" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
     resolve "^1.8.1"
     semver "^5.5.1"
 
@@ -1529,6 +2104,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-shorthand-properties@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.8.3.tgz#28545216e023a832d4d3a1185ed492bcfeac08c8"
+  integrity sha512-I9DI6Odg0JJwxCHzbzW08ggMdCezoWcuQRz3ptdudgwaHxTjxw5HgdFJmZIkIMlRymL6YiZcped4TTCB0JcC8w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-transform-spread@^7.2.0", "@babel/plugin-transform-spread@^7.6.2":
   version "7.6.2"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.6.2.tgz#fc77cf798b24b10c46e1b51b1b88c2bf661bb8dd"
@@ -1543,6 +2125,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-spread@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.8.3.tgz#9c8ffe8170fdfb88b114ecb920b82fb6e95fe5e8"
+  integrity sha512-CkuTU9mbmAoFOI1tklFWYYbzX5qCIZVXPVy0jpXgGwkplCndQAa58s2jr66fTeQnA64bDox0HL4U56CFYoyC7g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-transform-sticky-regex@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.2.0.tgz#a1e454b5995560a9c1e0d537dfc15061fd2687e1"
@@ -1559,6 +2148,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/helper-regex" "^7.0.0"
 
+"@babel/plugin-transform-sticky-regex@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.8.3.tgz#be7a1290f81dae767475452199e1f76d6175b100"
+  integrity sha512-9Spq0vGCD5Bb4Z/ZXXSK5wbbLFMG085qd2vhL1JYu1WcQ5bXqZBAYRzU1d+p79GcHs2szYv5pVQCX13QgldaWw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-regex" "^7.8.3"
+
 "@babel/plugin-transform-template-literals@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.4.4.tgz#9d28fea7bbce637fb7612a0750989d8321d4bcb0"
@@ -1575,6 +2172,14 @@
     "@babel/helper-annotate-as-pure" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-template-literals@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.8.3.tgz#7bfa4732b455ea6a43130adc0ba767ec0e402a80"
+  integrity sha512-820QBtykIQOLFT8NZOcTRJ1UNuztIELe4p9DCgvj4NK+PwluSJ49we7s9FB1HIGNIYT7wFUJ0ar2QpCDj0escQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-transform-typeof-symbol@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.2.0.tgz#117d2bcec2fbf64b4b59d1f9819894682d29f2b2"
@@ -1589,6 +2194,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-typeof-symbol@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.8.4.tgz#ede4062315ce0aaf8a657a920858f1a2f35fc412"
+  integrity sha512-2QKyfjGdvuNfHsb7qnBBlKclbD4CfshH2KvDabiijLMGXPHJXGxtDzwIF7bQP+T0ysw8fYTtxPafgfs/c1Lrqg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-transform-typescript@^7.6.0":
   version "7.6.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.6.3.tgz#dddb50cf3b8b2ef70b22e5326e9a91f05a1db13b"
@@ -1598,6 +2210,15 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-typescript" "^7.2.0"
 
+"@babel/plugin-transform-typescript@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.8.3.tgz#be6f01a7ef423be68e65ace1f04fc407e6d88917"
+  integrity sha512-Ebj230AxcrKGZPKIp4g4TdQLrqX95TobLUWKd/CwG7X1XHUH1ZpkpFvXuXqWbtGRWb7uuEWNlrl681wsOArAdQ==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-typescript" "^7.8.3"
+
 "@babel/plugin-transform-unicode-regex@^7.4.4", "@babel/plugin-transform-unicode-regex@^7.7.0":
   version "7.7.0"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.7.0.tgz#743d9bcc44080e3cc7d49259a066efa30f9187a3"
@@ -1606,15 +2227,6 @@
     "@babel/helper-create-regexp-features-plugin" "^7.7.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-unicode-regex@^7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.6.2.tgz#b692aad888a7e8d8b1b214be6b9dc03d5031f698"
-  integrity sha512-orZI6cWlR3nk2YmYdb0gImrgCUwb5cBUwjf6Ks6dvNVvXERkwtJWOQaEOjPiu0Gu1Tq6Yq/hruCZZOOi9F34Dw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-regex" "^7.4.4"
-    regexpu-core "^4.6.0"
-
 "@babel/plugin-transform-unicode-regex@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.7.4.tgz#a3c0f65b117c4c81c5b6484f2a5e7b95346b83ae"
@@ -1623,6 +2235,14 @@
     "@babel/helper-create-regexp-features-plugin" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-unicode-regex@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.8.3.tgz#0cef36e3ba73e5c57273effb182f46b91a1ecaad"
+  integrity sha512-+ufgJjYdmWfSQ+6NS9VGUR2ns8cjJjYbrbi11mZBTaWm+Fui/ncTLFF28Ei1okavY+xkojGr1eJxNsWYeA5aZw==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/polyfill@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.0.0.tgz#c8ff65c9ec3be6a1ba10113ebd40e8750fb90bff"
@@ -1752,62 +2372,6 @@
     js-levenshtein "^1.1.3"
     semver "^5.5.0"
 
-"@babel/preset-env@^7.6.3":
-  version "7.6.3"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.6.3.tgz#9e1bf05a2e2d687036d24c40e4639dc46cef2271"
-  integrity sha512-CWQkn7EVnwzlOdR5NOm2+pfgSNEZmvGjOhlCHBDq0J8/EStr+G+FvPEiz9B56dR6MoiUFjXhfE4hjLoAKKJtIQ==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-proposal-async-generator-functions" "^7.2.0"
-    "@babel/plugin-proposal-dynamic-import" "^7.5.0"
-    "@babel/plugin-proposal-json-strings" "^7.2.0"
-    "@babel/plugin-proposal-object-rest-spread" "^7.6.2"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.2.0"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.6.2"
-    "@babel/plugin-syntax-async-generators" "^7.2.0"
-    "@babel/plugin-syntax-dynamic-import" "^7.2.0"
-    "@babel/plugin-syntax-json-strings" "^7.2.0"
-    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.2.0"
-    "@babel/plugin-transform-arrow-functions" "^7.2.0"
-    "@babel/plugin-transform-async-to-generator" "^7.5.0"
-    "@babel/plugin-transform-block-scoped-functions" "^7.2.0"
-    "@babel/plugin-transform-block-scoping" "^7.6.3"
-    "@babel/plugin-transform-classes" "^7.5.5"
-    "@babel/plugin-transform-computed-properties" "^7.2.0"
-    "@babel/plugin-transform-destructuring" "^7.6.0"
-    "@babel/plugin-transform-dotall-regex" "^7.6.2"
-    "@babel/plugin-transform-duplicate-keys" "^7.5.0"
-    "@babel/plugin-transform-exponentiation-operator" "^7.2.0"
-    "@babel/plugin-transform-for-of" "^7.4.4"
-    "@babel/plugin-transform-function-name" "^7.4.4"
-    "@babel/plugin-transform-literals" "^7.2.0"
-    "@babel/plugin-transform-member-expression-literals" "^7.2.0"
-    "@babel/plugin-transform-modules-amd" "^7.5.0"
-    "@babel/plugin-transform-modules-commonjs" "^7.6.0"
-    "@babel/plugin-transform-modules-systemjs" "^7.5.0"
-    "@babel/plugin-transform-modules-umd" "^7.2.0"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.6.3"
-    "@babel/plugin-transform-new-target" "^7.4.4"
-    "@babel/plugin-transform-object-super" "^7.5.5"
-    "@babel/plugin-transform-parameters" "^7.4.4"
-    "@babel/plugin-transform-property-literals" "^7.2.0"
-    "@babel/plugin-transform-regenerator" "^7.4.5"
-    "@babel/plugin-transform-reserved-words" "^7.2.0"
-    "@babel/plugin-transform-shorthand-properties" "^7.2.0"
-    "@babel/plugin-transform-spread" "^7.6.2"
-    "@babel/plugin-transform-sticky-regex" "^7.2.0"
-    "@babel/plugin-transform-template-literals" "^7.4.4"
-    "@babel/plugin-transform-typeof-symbol" "^7.2.0"
-    "@babel/plugin-transform-unicode-regex" "^7.6.2"
-    "@babel/types" "^7.6.3"
-    browserslist "^4.6.0"
-    core-js-compat "^3.1.1"
-    invariant "^2.2.2"
-    js-levenshtein "^1.1.3"
-    semver "^5.5.0"
-
 "@babel/preset-env@^7.7.1":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.7.4.tgz#ccaf309ae8d1ee2409c85a4e2b5e280ceee830f8"
@@ -1865,6 +2429,69 @@
     js-levenshtein "^1.1.3"
     semver "^5.5.0"
 
+"@babel/preset-env@^7.7.6":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.8.4.tgz#9dac6df5f423015d3d49b6e9e5fa3413e4a72c4e"
+  integrity sha512-HihCgpr45AnSOHRbS5cWNTINs0TwaR8BS8xIIH+QwiW8cKL0llV91njQMpeMReEPVs+1Ao0x3RLEBLtt1hOq4w==
+  dependencies:
+    "@babel/compat-data" "^7.8.4"
+    "@babel/helper-compilation-targets" "^7.8.4"
+    "@babel/helper-module-imports" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-proposal-async-generator-functions" "^7.8.3"
+    "@babel/plugin-proposal-dynamic-import" "^7.8.3"
+    "@babel/plugin-proposal-json-strings" "^7.8.3"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-proposal-object-rest-spread" "^7.8.3"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-proposal-optional-chaining" "^7.8.3"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.8.3"
+    "@babel/plugin-syntax-async-generators" "^7.8.0"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
+    "@babel/plugin-syntax-json-strings" "^7.8.0"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+    "@babel/plugin-syntax-top-level-await" "^7.8.3"
+    "@babel/plugin-transform-arrow-functions" "^7.8.3"
+    "@babel/plugin-transform-async-to-generator" "^7.8.3"
+    "@babel/plugin-transform-block-scoped-functions" "^7.8.3"
+    "@babel/plugin-transform-block-scoping" "^7.8.3"
+    "@babel/plugin-transform-classes" "^7.8.3"
+    "@babel/plugin-transform-computed-properties" "^7.8.3"
+    "@babel/plugin-transform-destructuring" "^7.8.3"
+    "@babel/plugin-transform-dotall-regex" "^7.8.3"
+    "@babel/plugin-transform-duplicate-keys" "^7.8.3"
+    "@babel/plugin-transform-exponentiation-operator" "^7.8.3"
+    "@babel/plugin-transform-for-of" "^7.8.4"
+    "@babel/plugin-transform-function-name" "^7.8.3"
+    "@babel/plugin-transform-literals" "^7.8.3"
+    "@babel/plugin-transform-member-expression-literals" "^7.8.3"
+    "@babel/plugin-transform-modules-amd" "^7.8.3"
+    "@babel/plugin-transform-modules-commonjs" "^7.8.3"
+    "@babel/plugin-transform-modules-systemjs" "^7.8.3"
+    "@babel/plugin-transform-modules-umd" "^7.8.3"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.8.3"
+    "@babel/plugin-transform-new-target" "^7.8.3"
+    "@babel/plugin-transform-object-super" "^7.8.3"
+    "@babel/plugin-transform-parameters" "^7.8.4"
+    "@babel/plugin-transform-property-literals" "^7.8.3"
+    "@babel/plugin-transform-regenerator" "^7.8.3"
+    "@babel/plugin-transform-reserved-words" "^7.8.3"
+    "@babel/plugin-transform-shorthand-properties" "^7.8.3"
+    "@babel/plugin-transform-spread" "^7.8.3"
+    "@babel/plugin-transform-sticky-regex" "^7.8.3"
+    "@babel/plugin-transform-template-literals" "^7.8.3"
+    "@babel/plugin-transform-typeof-symbol" "^7.8.4"
+    "@babel/plugin-transform-unicode-regex" "^7.8.3"
+    "@babel/types" "^7.8.3"
+    browserslist "^4.8.5"
+    core-js-compat "^3.6.2"
+    invariant "^2.2.2"
+    levenary "^1.1.1"
+    semver "^5.5.0"
+
 "@babel/preset-flow@^7.0.0":
   version "7.0.0"
   resolved "https://registry.npmjs.org/@babel/preset-flow/-/preset-flow-7.0.0.tgz#afd764835d9535ec63d8c7d4caf1c06457263da2"
@@ -1895,17 +2522,6 @@
     "@babel/plugin-transform-react-jsx-self" "^7.0.0"
     "@babel/plugin-transform-react-jsx-source" "^7.0.0"
 
-"@babel/preset-react@^7.6.3":
-  version "7.6.3"
-  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.6.3.tgz#d5242c828322520205ae4eda5d4f4f618964e2f6"
-  integrity sha512-07yQhmkZmRAfwREYIQgW0HEwMY9GBJVuPY4Q12UC72AbfaawuupVWa8zQs2tlL+yun45Nv/1KreII/0PLfEsgA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-transform-react-display-name" "^7.0.0"
-    "@babel/plugin-transform-react-jsx" "^7.0.0"
-    "@babel/plugin-transform-react-jsx-self" "^7.0.0"
-    "@babel/plugin-transform-react-jsx-source" "^7.0.0"
-
 "@babel/preset-react@^7.7.0":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.7.4.tgz#3fe2ea698d8fb536d8e7881a592c3c1ee8bf5707"
@@ -1917,7 +2533,18 @@
     "@babel/plugin-transform-react-jsx-self" "^7.7.4"
     "@babel/plugin-transform-react-jsx-source" "^7.7.4"
 
-"@babel/preset-typescript@7.6.0", "@babel/preset-typescript@^7.6.0":
+"@babel/preset-react@^7.7.4":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.8.3.tgz#23dc63f1b5b0751283e04252e78cf1d6589273d2"
+  integrity sha512-9hx0CwZg92jGb7iHYQVgi0tOEHP/kM60CtWJQnmbATSPIQQ2xYzfoCI3EdqAhFBeeJwYMdWQuDUHMsuDbH9hyQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-transform-react-display-name" "^7.8.3"
+    "@babel/plugin-transform-react-jsx" "^7.8.3"
+    "@babel/plugin-transform-react-jsx-self" "^7.8.3"
+    "@babel/plugin-transform-react-jsx-source" "^7.8.3"
+
+"@babel/preset-typescript@7.6.0":
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.6.0.tgz#25768cb8830280baf47c45ab1a519a9977498c98"
   integrity sha512-4xKw3tTcCm0qApyT6PqM9qniseCE79xGHiUnNdKGdxNsGUc2X7WwZybqIpnTmoukg3nhPceI5KPNzNqLNeIJww==
@@ -1925,17 +2552,24 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-transform-typescript" "^7.6.0"
 
-"@babel/register@^7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.4.4.tgz#370a68ba36f08f015a8b35d4864176c6b65d7a23"
-  integrity sha512-sn51H88GRa00+ZoMqCVgOphmswG4b7mhf9VOB0LUBAieykq2GnRFerlN+JQkO/ntT7wz4jaHNSRPg9IdMPEUkA==
+"@babel/preset-typescript@^7.7.7":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.8.3.tgz#90af8690121beecd9a75d0cc26c6be39d1595d13"
+  integrity sha512-qee5LgPGui9zQ0jR1TeU5/fP9L+ovoArklEqY12ek8P/wV5ZeM/VYSQYwICeoT6FfpJTekG9Ilay5PhwsOpMHA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-transform-typescript" "^7.8.3"
+
+"@babel/register@^7.7.7":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.8.3.tgz#5d5d30cfcc918437535d724b8ac1e4a60c5db1f8"
+  integrity sha512-t7UqebaWwo9nXWClIPLPloa5pN33A2leVs8Hf0e9g9YwUP8/H9NeR7DJU+4CXo23QtjChQv5a3DjEtT83ih1rg==
   dependencies:
-    core-js "^3.0.0"
     find-cache-dir "^2.0.0"
-    lodash "^4.17.11"
-    mkdirp "^0.5.1"
+    lodash "^4.17.13"
+    make-dir "^2.1.0"
     pirates "^4.0.0"
-    source-map-support "^0.5.9"
+    source-map-support "^0.5.16"
 
 "@babel/runtime@7.6.0":
   version "7.6.0"
@@ -1965,10 +2599,17 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/standalone@^7.3.2":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.4.4.tgz#a40fbed37254e0a6dd55ea2db142c7b357fc4299"
-  integrity sha512-b1iLEvcOK9SdG+howg7pcbUm9EaHFlZ4yMaj7/3vAz7eDfEnY0gb3o8BByBDCFueqAZyHSodj0AW+yVnK1+/qg==
+"@babel/runtime@^7.7.6":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.4.tgz#d79f5a2040f7caa24d53e563aad49cbc05581308"
+  integrity sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
+"@babel/standalone@^7.7.7":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.8.4.tgz#c50ed8a93c12141e638ea87ca4cdf6b4665a0bac"
+  integrity sha512-c/PomWPyLeCAnldfMGL2wNbu4OcseDObGhpK6WGfwqHWW+t9TNB7ENF/uWw/GtWv1wOnbPOb6U+uj2Q5ki1HLg==
 
 "@babel/template@^7.0.0", "@babel/template@^7.1.0", "@babel/template@^7.4.4":
   version "7.4.4"
@@ -2006,6 +2647,15 @@
     "@babel/parser" "^7.7.4"
     "@babel/types" "^7.7.4"
 
+"@babel/template@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.3.tgz#e02ad04fe262a657809327f578056ca15fd4d1b8"
+  integrity sha512-04m87AcQgAFdvuoyiQ2kgELr2tV8B4fP/xJAVUL3Yb3bkNdMedD3d0rlSQr3PegP0cms3eHjl1F7PWlvWbU8FQ==
+  dependencies:
+    "@babel/code-frame" "^7.8.3"
+    "@babel/parser" "^7.8.3"
+    "@babel/types" "^7.8.3"
+
 "@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.4.4", "@babel/traverse@^7.4.5":
   version "7.4.5"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.4.5.tgz#4e92d1728fd2f1897dafdd321efbff92156c3216"
@@ -2036,21 +2686,6 @@
     globals "^11.1.0"
     lodash "^4.17.13"
 
-"@babel/traverse@^7.6.2", "@babel/traverse@^7.6.3":
-  version "7.6.3"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.6.3.tgz#66d7dba146b086703c0fb10dd588b7364cec47f9"
-  integrity sha512-unn7P4LGsijIxaAJo/wpoU11zN+2IaClkQAxcJWBNCMS6cmVh802IyLHNkAjQ0iYnRS3nnxk5O3fuXW28IMxTw==
-  dependencies:
-    "@babel/code-frame" "^7.5.5"
-    "@babel/generator" "^7.6.3"
-    "@babel/helper-function-name" "^7.1.0"
-    "@babel/helper-split-export-declaration" "^7.4.4"
-    "@babel/parser" "^7.6.3"
-    "@babel/types" "^7.6.3"
-    debug "^4.1.0"
-    globals "^11.1.0"
-    lodash "^4.17.13"
-
 "@babel/traverse@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.7.4.tgz#9c1e7c60fb679fe4fcfaa42500833333c2058558"
@@ -2066,6 +2701,21 @@
     globals "^11.1.0"
     lodash "^4.17.13"
 
+"@babel/traverse@^7.8.3", "@babel/traverse@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.8.4.tgz#f0845822365f9d5b0e312ed3959d3f827f869e3c"
+  integrity sha512-NGLJPZwnVEyBPLI+bl9y9aSnxMhsKz42so7ApAv9D+b4vAFPpY013FTS9LdKxcABoIYFU52HcYga1pPlx454mg==
+  dependencies:
+    "@babel/code-frame" "^7.8.3"
+    "@babel/generator" "^7.8.4"
+    "@babel/helper-function-name" "^7.8.3"
+    "@babel/helper-split-export-declaration" "^7.8.3"
+    "@babel/parser" "^7.8.4"
+    "@babel/types" "^7.8.3"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.13"
+
 "@babel/types@^7.0.0", "@babel/types@^7.0.0-beta.49", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.4.4.tgz#8db9e9a629bb7c29370009b4b779ed93fe57d5f0"
@@ -2075,7 +2725,7 @@
     lodash "^4.17.11"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.5.5", "@babel/types@^7.6.0", "@babel/types@^7.6.3":
+"@babel/types@^7.5.5", "@babel/types@^7.6.0":
   version "7.6.3"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.6.3.tgz#3f07d96f854f98e2fbd45c64b0cb942d11e8ba09"
   integrity sha512-CqbcpTxMcpuQTMhjI37ZHVgjBkysg5icREQIEZ0eG1yCNwg3oy+5AaLiOKmjsCj6nqOsa6Hf0ObjRVwokb7srA==
@@ -2102,6 +2752,15 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.3.tgz#5a383dffa5416db1b73dedffd311ffd0788fb31c"
+  integrity sha512-jBD+G8+LWpMBBWvVcdr4QysjUE4mU/syrhN17o1u3gx0/WzJB1kwiVZAXRtWbsIPOwW8pF/YJV5+nmetPzepXg==
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.13"
+    to-fast-properties "^2.0.0"
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.3.tgz#099139eaec7ebf07a27c1786a3ff64f39464d2ef"
@@ -2231,6 +2890,25 @@
     reflect-metadata "^0.1.12"
     tslib "^1.8.1"
 
+"@gulp-sourcemaps/identity-map@1.X":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@gulp-sourcemaps/identity-map/-/identity-map-1.0.2.tgz#1e6fe5d8027b1f285dc0d31762f566bccd73d5a9"
+  integrity sha512-ciiioYMLdo16ShmfHBXJBOFm3xPC4AuwO4xeRpFeHz7WK9PYsWCmigagG2XyzZpubK4a3qNKoUBDhbzHfa50LQ==
+  dependencies:
+    acorn "^5.0.3"
+    css "^2.2.1"
+    normalize-path "^2.1.1"
+    source-map "^0.6.0"
+    through2 "^2.0.3"
+
+"@gulp-sourcemaps/map-sources@1.X":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@gulp-sourcemaps/map-sources/-/map-sources-1.0.0.tgz#890ae7c5d8c877f6d384860215ace9d7ec945bda"
+  integrity sha1-iQrnxdjId/bThIYCFazp1+yUW9o=
+  dependencies:
+    normalize-path "^2.0.1"
+    through2 "^2.0.3"
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -5042,11 +5720,6 @@ accepts@~1.3.5, accepts@~1.3.7:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
-acorn-dynamic-import@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz#482210140582a36b83c3e342e1cfebcaa9240948"
-  integrity sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw==
-
 acorn-globals@^4.1.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.0.tgz#e3b6f8da3c1552a95ae627571f7dd6923bb54103"
@@ -5065,12 +5738,12 @@ acorn-walk@^6.0.1, acorn-walk@^6.1.1:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.1.1.tgz#d363b66f5fac5f018ff9c3a1e7b6f8e310cc3913"
   integrity sha512-OtUw6JUTgxA2QoqqmrmQ7F2NYqiBPi/L2jqHyFtllhOUvXYQXf0Z1CYUinIfyT4bTCGmrA7gX9FvHA81uzCoVw==
 
-acorn@^5.2.1, acorn@^5.5.3:
+acorn@5.X, acorn@^5.0.3, acorn@^5.2.1, acorn@^5.5.3:
   version "5.7.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
   integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
 
-acorn@^6.0.1, acorn@^6.0.5, acorn@^6.0.7:
+acorn@^6.0.1, acorn@^6.0.7:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.1.1.tgz#7d25ae05bb8ad1f9b699108e1094ecd7884adc1f"
   integrity sha512-jPTiwtOxaHNaAPg/dmrJ/beuzLRnXtB0kQPQ8JpotKJgTB6rX6c8mlf315941pyjBSaPg8NHXS9fhP4u17DpGA==
@@ -5691,7 +6364,7 @@ async@^1.5.2:
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
   integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=
 
-async@^2.1.4, async@^2.6.2:
+async@^2.1.4, async@^2.5.0, async@^2.6.2:
   version "2.6.3"
   resolved "https://registry.npmjs.org/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
   integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
@@ -5710,7 +6383,7 @@ asynckit@^0.4.0:
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
   integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
 
-atob@^2.1.1:
+atob@^2.1.1, atob@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
@@ -6495,6 +7168,15 @@ browserslist@^4.7.3:
     electron-to-chromium "^1.3.306"
     node-releases "^1.1.40"
 
+browserslist@^4.8.3, browserslist@^4.8.5:
+  version "4.8.6"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.8.6.tgz#96406f3f5f0755d272e27a66f4163ca821590a7e"
+  integrity sha512-ZHao85gf0eZ0ESxLfCp73GG9O/VTytYDIkIiZDlURppLTI9wErSM/5yAKEq6rcUdxBLjMELmrYUJGg5sxGKMHg==
+  dependencies:
+    caniuse-lite "^1.0.30001023"
+    electron-to-chromium "^1.3.341"
+    node-releases "^1.1.47"
+
 bs-logger@0.x:
   version "0.2.6"
   resolved "https://registry.npmjs.org/bs-logger/-/bs-logger-0.2.6.tgz#eb7d365307a72cf974cc6cda76b68354ad336bd8"
@@ -6757,6 +7439,11 @@ caniuse-lite@^1.0.30000967, caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.300010
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001016.tgz#16ea48d7d6e8caf3cad3295c2d746fe38c4e7f66"
   integrity sha512-yYQ2QfotceRiH4U+h1Us86WJXtVHDmy3nEKIdYPsZCYnOV5/tMgGbmoIlrMzmh2VXlproqYtVaKeGDBkMZifFA==
 
+caniuse-lite@^1.0.30001023:
+  version "1.0.30001025"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001025.tgz#30336a8aca7f98618eb3cf38e35184e13d4e5fe6"
+  integrity sha512-SKyFdHYfXUZf5V85+PJgLYyit27q4wgvZuf8QTOk1osbypcROihMBlx9GRar2/pIcKH2r4OehdlBr9x6PXetAQ==
+
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -6943,13 +7630,6 @@ chownr@^1.0.1, chownr@^1.1.1:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.1.tgz#54726b8b8fff4df053c42187e801fb4412df1494"
   integrity sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==
 
-chrome-trace-event@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.0.tgz#45a91bd2c20c9411f0963b5aaeb9a1b95e09cc48"
-  integrity sha512-xDbVgyfDTT2piup/h8dK/y4QZfJRSa73bw1WZ8b4XM1o7fsFubUVGYcE+1ANtOzJJELGpYoG2961z0Z6OAld9A==
-  dependencies:
-    tslib "^1.9.0"
-
 chrome-trace-event@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4"
@@ -7594,6 +8274,13 @@ conventional-recommended-bump@^4.0.4:
     meow "^4.0.0"
     q "^1.5.1"
 
+convert-source-map@1.X, convert-source-map@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
+  integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
+  dependencies:
+    safe-buffer "~5.1.1"
+
 convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.6.0.tgz#51b537a8c43e0f04dec1993bffcdd504e758ac20"
@@ -7601,13 +8288,6 @@ convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0:
   dependencies:
     safe-buffer "~5.1.1"
 
-convert-source-map@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
-  integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
-  dependencies:
-    safe-buffer "~5.1.1"
-
 cookie-signature@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
@@ -7672,6 +8352,14 @@ core-js-compat@^3.1.1:
     browserslist "^4.7.2"
     semver "^6.3.0"
 
+core-js-compat@^3.6.2:
+  version "3.6.4"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.6.4.tgz#938476569ebb6cda80d339bcf199fae4f16fff17"
+  integrity sha512-zAa3IZPvsJ0slViBQ2z+vgyyTuhd3MFn1rBQjZSKVEgB0UMYhUkCj9jJUVPgGTGqWvsBVmfnruXgTcNyTlEiSA==
+  dependencies:
+    browserslist "^4.8.3"
+    semver "7.0.0"
+
 core-js-pure@^3.0.1:
   version "3.4.1"
   resolved "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.4.1.tgz#483dbc687016b45cab4c185cf998c2c59e772c2a"
@@ -7692,11 +8380,6 @@ core-js@^2.6.5:
   resolved "https://registry.npmjs.org/core-js/-/core-js-2.6.10.tgz#8a5b8391f8cc7013da703411ce5b585706300d7f"
   integrity sha512-I39t74+4t+zau64EN1fE5v2W31Adtc/REhzWN+gWRRXg6WH5qAsZm62DHpQ1+Yhe4047T55jvzz7MUqF/dBBlA==
 
-core-js@^3.0.0:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.1.2.tgz#2549a2cfb3ca1a5d851c9f7838e8b282cef2f3ba"
-  integrity sha512-3poRGjbu56leCtZCZCzCgQ7GcKOflDFnjWIepaPFUsM0IXUBrne10sl3aa2Bkcz3+FjRdIxBe9dAMhIJmEnQNA==
-
 core-js@^3.0.1, core-js@^3.0.4:
   version "3.4.1"
   resolved "https://registry.npmjs.org/core-js/-/core-js-3.4.1.tgz#76dd6828412900ab27c8ce0b22e6114d7ce21b18"
@@ -7938,6 +8621,16 @@ css-what@^3.2.1:
   resolved "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz#f4a8f12421064621b456755e34a03a2c22df5da1"
   integrity sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==
 
+css@2.X, css@^2.2.1:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
+  integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==
+  dependencies:
+    inherits "^2.0.3"
+    source-map "^0.6.1"
+    source-map-resolve "^0.5.2"
+    urix "^0.1.0"
+
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@@ -8108,6 +8801,14 @@ d@1:
   dependencies:
     es5-ext "^0.10.9"
 
+d@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
+  integrity sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==
+  dependencies:
+    es5-ext "^0.10.50"
+    type "^1.0.1"
+
 damerau-levenshtein@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.4.tgz#03191c432cb6eea168bb77f3a55ffdccb8978514"
@@ -8194,6 +8895,15 @@ dateformat@^3.0.0:
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
   integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
 
+debug-fabulous@1.X:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/debug-fabulous/-/debug-fabulous-1.1.0.tgz#af8a08632465224ef4174a9f06308c3c2a1ebc8e"
+  integrity sha512-GZqvGIgKNlUnHUPQhepnUZFIMoi3dgZKQBzKDeL2g7oJF9SNAji/AAu36dusFUas0O+pae74lNeoIPHqXWDkLg==
+  dependencies:
+    debug "3.X"
+    memoizee "0.4.X"
+    object-assign "4.X"
+
 debug@2.6.9, debug@^2.1.3, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -8208,7 +8918,7 @@ debug@3.1.0:
   dependencies:
     ms "2.0.0"
 
-debug@^3.0.0, debug@^3.1.0, debug@^3.1.1, debug@^3.2.5, debug@^3.2.6:
+debug@3.X, debug@^3.0.0, debug@^3.1.0, debug@^3.1.1, debug@^3.2.5, debug@^3.2.6:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
   integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
@@ -8415,7 +9125,7 @@ detect-libc@^1.0.2:
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
   integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
 
-detect-newline@^2.1.0:
+detect-newline@2.X, detect-newline@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
   integrity sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=
@@ -8797,6 +9507,11 @@ electron-to-chromium@^1.3.295:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.299.tgz#9113b733247c68b87e07cb7c940a22913fb74d38"
   integrity sha512-aH3lKMQFPuNk4w7W3hQDqnjfYKJQLzbp5Adn6xgTz5547kKSGOmAU7cQWxH953L4ntZL4HsZ8XWqfcMTvTcEMw==
 
+electron-to-chromium@^1.3.341:
+  version "1.3.345"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.345.tgz#2569d0d54a64ef0f32a4b7e8c80afa5fe57c5d98"
+  integrity sha512-f8nx53+Z9Y+SPWGg3YdHrbYYfIJAtbUjpFfW4X1RwTZ94iUG7geg9tV8HqzAXX7XTNgyWgAFvce4yce8ZKxKmg==
+
 elegant-spinner@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
@@ -8870,22 +9585,22 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
-enhanced-resolve@^4.0.0:
-  version "4.1.1"
-  resolved "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.1.1.tgz#2937e2b8066cd0fe7ce0990a98f0d71a35189f66"
-  integrity sha512-98p2zE+rL7/g/DzMHMTF4zZlCgeVdJ7yr6xzEpJRYwFYrGi9ANdn5DnJURg6RpBkyk60XYDnWIv51VfIhfNGuA==
+enhanced-resolve@4.1.0, enhanced-resolve@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz#41c7e0bfdfe74ac1ffe1e57ad6a5c6c9f3742a7f"
+  integrity sha512-F/7vkyTtyc/llOIn8oWclcB25KdRaiPBpZYDgJHgh/UHtpgT2p2eldQgtQnLtUvfMKPKxbRaQM/hHkvLHt1Vng==
   dependencies:
     graceful-fs "^4.1.2"
-    memory-fs "^0.5.0"
+    memory-fs "^0.4.0"
     tapable "^1.0.0"
 
-enhanced-resolve@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz#41c7e0bfdfe74ac1ffe1e57ad6a5c6c9f3742a7f"
-  integrity sha512-F/7vkyTtyc/llOIn8oWclcB25KdRaiPBpZYDgJHgh/UHtpgT2p2eldQgtQnLtUvfMKPKxbRaQM/hHkvLHt1Vng==
+enhanced-resolve@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.1.1.tgz#2937e2b8066cd0fe7ce0990a98f0d71a35189f66"
+  integrity sha512-98p2zE+rL7/g/DzMHMTF4zZlCgeVdJ7yr6xzEpJRYwFYrGi9ANdn5DnJURg6RpBkyk60XYDnWIv51VfIhfNGuA==
   dependencies:
     graceful-fs "^4.1.2"
-    memory-fs "^0.4.0"
+    memory-fs "^0.5.0"
     tapable "^1.0.0"
 
 entities@^1.1.1, entities@~1.1.1:
@@ -9066,12 +9781,21 @@ es5-ext@^0.10.14, es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.14:
     es6-symbol "~3.1.1"
     next-tick "1"
 
+es5-ext@^0.10.45, es5-ext@^0.10.46, es5-ext@^0.10.50, es5-ext@~0.10.2, es5-ext@~0.10.46:
+  version "0.10.53"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.53.tgz#93c5a3acfdbef275220ad72644ad02ee18368de1"
+  integrity sha512-Xs2Stw6NiNHWypzRTY1MtaG/uJlwCk8kH81920ma8mvN8Xq1gsfhZvpkImLQArw8AHnv8MT2I45J3c0R8slE+Q==
+  dependencies:
+    es6-iterator "~2.0.3"
+    es6-symbol "~3.1.3"
+    next-tick "~1.0.0"
+
 es5-shim@^4.5.13:
   version "4.5.13"
   resolved "https://registry.npmjs.org/es5-shim/-/es5-shim-4.5.13.tgz#5d88062de049f8969f83783f4a4884395f21d28b"
   integrity sha512-xi6hh6gsvDE0MaW4Vp1lgNEBpVcCXRWfPXj5egDvtgLz4L9MEvNwYEMdJH+JJinWkwa8c3c3o5HduV7dB/e1Hw==
 
-es6-iterator@^2.0.1, es6-iterator@~2.0.3:
+es6-iterator@^2.0.1, es6-iterator@^2.0.3, es6-iterator@~2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
   integrity sha1-p96IkUGgWpSwhUQDstCg+/qY87c=
@@ -9105,6 +9829,14 @@ es6-symbol@^3.1.1, es6-symbol@~3.1.1:
     d "1"
     es5-ext "~0.10.14"
 
+es6-symbol@~3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.3.tgz#bad5d3c1bcdac28269f4cb331e431c78ac705d18"
+  integrity sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==
+  dependencies:
+    d "^1.0.1"
+    ext "^1.1.2"
+
 es6-weak-map@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.2.tgz#5e3ab32251ffd1538a1f8e5ffa1357772f92d96f"
@@ -9115,6 +9847,16 @@ es6-weak-map@^2.0.1:
     es6-iterator "^2.0.1"
     es6-symbol "^3.1.1"
 
+es6-weak-map@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.3.tgz#b6da1f16cc2cc0d9be43e6bdbfc5e7dfcdf31d53"
+  integrity sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==
+  dependencies:
+    d "1"
+    es5-ext "^0.10.46"
+    es6-iterator "^2.0.3"
+    es6-symbol "^3.1.1"
+
 escape-html@^1.0.3, escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
@@ -9382,6 +10124,14 @@ etag@~1.8.1:
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
   integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
 
+event-emitter@^0.3.5:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39"
+  integrity sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=
+  dependencies:
+    d "1"
+    es5-ext "~0.10.14"
+
 eventemitter3@1.x.x:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
@@ -9564,6 +10314,13 @@ express@^4.15.4, express@^4.16.3, express@^4.17.0:
     utils-merge "1.0.1"
     vary "~1.1.2"
 
+ext@^1.1.2:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ext/-/ext-1.4.0.tgz#89ae7a07158f79d35517882904324077e4379244"
+  integrity sha512-Key5NIsUxdqKg3vIsdw9dSuXpPCQ297y6wBjL30edxwPgt2E44WcWBZey/ZvUc6sERLTxKdyCu4gZFmUbk1Q7A==
+  dependencies:
+    type "^2.0.0"
+
 extend-shallow@^1.1.2:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-1.1.4.tgz#19d6bf94dfc09d76ba711f39b872d21ff4dd9071"
@@ -10079,23 +10836,23 @@ find-up@^4.0.0:
     locate-path "^5.0.0"
     path-exists "^4.0.0"
 
-findup-sync@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-2.0.0.tgz#9326b1488c22d1a6088650a86901b2d9a90a2cbc"
-  integrity sha1-kyaxSIwi0aYIhlCoaQGy2akKLLw=
+findup-sync@3.0.0, findup-sync@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-3.0.0.tgz#17b108f9ee512dfb7a5c7f3c8b27ea9e1a9c08d1"
+  integrity sha512-YbffarhcicEhOrm4CtrwdKBdCuz576RLdhJDsIfvNtxUuhdRet1qZcsMjqbePtAseKdAnDyM/IyXbu7PRPRLYg==
   dependencies:
     detect-file "^1.0.0"
-    is-glob "^3.1.0"
+    is-glob "^4.0.0"
     micromatch "^3.0.4"
     resolve-dir "^1.0.1"
 
-findup-sync@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-3.0.0.tgz#17b108f9ee512dfb7a5c7f3c8b27ea9e1a9c08d1"
-  integrity sha512-YbffarhcicEhOrm4CtrwdKBdCuz576RLdhJDsIfvNtxUuhdRet1qZcsMjqbePtAseKdAnDyM/IyXbu7PRPRLYg==
+findup-sync@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-2.0.0.tgz#9326b1488c22d1a6088650a86901b2d9a90a2cbc"
+  integrity sha1-kyaxSIwi0aYIhlCoaQGy2akKLLw=
   dependencies:
     detect-file "^1.0.0"
-    is-glob "^4.0.0"
+    is-glob "^3.1.0"
     micromatch "^3.0.4"
     resolve-dir "^1.0.1"
 
@@ -10425,6 +11182,11 @@ genfun@^5.0.0:
   resolved "https://registry.yarnpkg.com/genfun/-/genfun-5.0.0.tgz#9dd9710a06900a5c4a5bf57aca5da4e52fe76537"
   integrity sha512-KGDOARWVga7+rnB3z9Sd2Letx515owfk0hSxHGuqjANb1M+x2bGZGqHLiozPsYMdM2OubeMni/Hpwmjq6qIUhA==
 
+gensync@^1.0.0-beta.1:
+  version "1.0.0-beta.1"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269"
+  integrity sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==
+
 get-caller-file@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
@@ -10842,16 +11604,16 @@ graceful-fs@4.1.11:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
   integrity sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=
 
+graceful-fs@4.X, graceful-fs@^4.1.9, graceful-fs@^4.2.2:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
+  integrity sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==
+
 graceful-fs@^4.0.0, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.1.tgz#1c1f0c364882c868f5bff6512146328336a11b1d"
   integrity sha512-b9usnbDGnD928gJB3LrCmxoibr3VE4U2SMo5PBuBnokWyDADTqDPXg4YpwKF1trpH+UbGp7QLicO3+aWEy0+mw==
 
-graceful-fs@^4.1.9, graceful-fs@^4.2.2:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
-  integrity sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==
-
 "graceful-readlink@>= 1.0.0":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
@@ -10922,6 +11684,23 @@ gulp-remember@^1.0.1:
     plugin-error "^0.1.2"
     through2 "^0.5.0"
 
+gulp-sourcemaps@^2.6.5:
+  version "2.6.5"
+  resolved "https://registry.yarnpkg.com/gulp-sourcemaps/-/gulp-sourcemaps-2.6.5.tgz#a3f002d87346d2c0f3aec36af7eb873f23de8ae6"
+  integrity sha512-SYLBRzPTew8T5Suh2U8jCSDKY+4NARua4aqjj8HOysBh2tSgT9u4jc1FYirAdPx1akUxxDeK++fqw6Jg0LkQRg==
+  dependencies:
+    "@gulp-sourcemaps/identity-map" "1.X"
+    "@gulp-sourcemaps/map-sources" "1.X"
+    acorn "5.X"
+    convert-source-map "1.X"
+    css "2.X"
+    debug-fabulous "1.X"
+    detect-newline "2.X"
+    graceful-fs "4.X"
+    source-map "~0.6.0"
+    strip-bom-string "1.X"
+    through2 "2.X"
+
 gulp-util@^3.0.8:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-3.0.8.tgz#0054e1e744502e27c04c187c3ecc505dd54bbb4f"
@@ -11613,6 +12392,14 @@ import-lazy@^2.1.0:
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
   integrity sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=
 
+import-local@2.0.0, import-local@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
+  integrity sha512-b6s04m3O+s3CGSbqDIyP4R6aAwAeYlVq9+WUWep6iHa8ETRf9yei1U48C5MmfJmV9AiLYYBKPMq/W+/WRpQmCQ==
+  dependencies:
+    pkg-dir "^3.0.0"
+    resolve-cwd "^2.0.0"
+
 import-local@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/import-local/-/import-local-1.0.0.tgz#5e4ffdc03f4fe6c009c6729beb29631c2f8227bc"
@@ -11621,14 +12408,6 @@ import-local@^1.0.0:
     pkg-dir "^2.0.0"
     resolve-cwd "^2.0.0"
 
-import-local@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
-  integrity sha512-b6s04m3O+s3CGSbqDIyP4R6aAwAeYlVq9+WUWep6iHa8ETRf9yei1U48C5MmfJmV9AiLYYBKPMq/W+/WRpQmCQ==
-  dependencies:
-    pkg-dir "^3.0.0"
-    resolve-cwd "^2.0.0"
-
 imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
@@ -11663,11 +12442,6 @@ indexes-of@^1.0.1:
   resolved "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
   integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
 
-indexof@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
-  integrity sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=
-
 infer-owner@^1.0.3:
   version "1.0.4"
   resolved "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
@@ -11784,7 +12558,7 @@ inquirer@^7.0.0:
     strip-ansi "^5.1.0"
     through "^2.3.6"
 
-interpret@^1.0.0, interpret@^1.1.0, interpret@^1.2.0:
+interpret@1.2.0, interpret@^1.0.0, interpret@^1.1.0, interpret@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
   integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==
@@ -12144,7 +12918,7 @@ is-plain-object@^3.0.0:
   dependencies:
     isobject "^4.0.0"
 
-is-promise@^2.1.0:
+is-promise@^2.1, is-promise@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
   integrity sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=
@@ -13539,6 +14313,13 @@ leven@^3.1.0:
   resolved "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
   integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
 
+levenary@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/levenary/-/levenary-1.1.1.tgz#842a9ee98d2075aa7faeedbe32679e9205f46f77"
+  integrity sha512-mkAdOIt79FD6irqjYSs4rdbnlT5vRonMEvBVPVb3XmevfS8kgRXwfes0dhPdEtzTWD/1eNE/Bm/G1iRt6DcnQQ==
+  dependencies:
+    leven "^3.1.0"
+
 levn@^0.3.0, levn@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
@@ -13715,7 +14496,7 @@ load-json-file@^4.0.0:
     pify "^3.0.0"
     strip-bom "^3.0.0"
 
-loader-runner@^2.3.0, loader-runner@^2.4.0:
+loader-runner@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
   integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
@@ -14111,6 +14892,13 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
+lru-queue@0.1:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/lru-queue/-/lru-queue-0.1.0.tgz#2738bd9f0d3cf4f84490c5736c48699ac632cda3"
+  integrity sha1-Jzi9nw089PhEkMVzbEhpmsYyzaM=
+  dependencies:
+    es5-ext "~0.10.2"
+
 lz-string@^1.4.4:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
@@ -14128,7 +14916,7 @@ make-dir@^1.0.0, make-dir@^1.3.0:
   dependencies:
     pify "^3.0.0"
 
-make-dir@^2.0.0:
+make-dir@^2.0.0, make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
   integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
@@ -14380,6 +15168,20 @@ memoize-one@^5.0.0:
   resolved "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
   integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
 
+memoizee@0.4.X:
+  version "0.4.14"
+  resolved "https://registry.yarnpkg.com/memoizee/-/memoizee-0.4.14.tgz#07a00f204699f9a95c2d9e77218271c7cd610d57"
+  integrity sha512-/SWFvWegAIYAO4NQMpcX+gcra0yEZu4OntmUdrBaWrJncxOqAziGFlHxc7yjKVK2uu3lpPW27P27wkR82wA8mg==
+  dependencies:
+    d "1"
+    es5-ext "^0.10.45"
+    es6-weak-map "^2.0.2"
+    event-emitter "^0.3.5"
+    is-promise "^2.1"
+    lru-queue "0.1"
+    next-tick "1"
+    timers-ext "^0.1.5"
+
 memoizerific@^1.11.3:
   version "1.11.3"
   resolved "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a"
@@ -14387,7 +15189,7 @@ memoizerific@^1.11.3:
   dependencies:
     map-or-similar "^1.5.0"
 
-memory-fs@^0.4.0, memory-fs@^0.4.1, memory-fs@~0.4.1:
+memory-fs@^0.4.0, memory-fs@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
   integrity sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=
@@ -14532,7 +15334,7 @@ mime@1.6.0, mime@^1.6.0:
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
-mime@^2.0.3, mime@^2.4.2:
+mime@^2.0.3:
   version "2.4.3"
   resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.3.tgz#229687331e86f68924e6cb59e1cdd937f18275fe"
   integrity sha512-QgrPRJfE+riq5TPZMcHZOtm8c6K/yYrMbKIoRfapfiGLxS8OTeIfRhUGW5LU7MlRa52KOAGCfUNruqLrIBvWZw==
@@ -14823,7 +15625,7 @@ nested-object-assign@^1.0.3:
   resolved "https://registry.npmjs.org/nested-object-assign/-/nested-object-assign-1.0.3.tgz#5aca69390d9affe5a612152b5f0843ae399ac597"
   integrity sha512-kgq1CuvLyUcbcIuTiCA93cQ2IJFSlRwXcN+hLcb2qLJwC2qrePHGZZa7IipyWqaWF6tQjdax2pQnVxdq19Zzwg==
 
-next-tick@1:
+next-tick@1, next-tick@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
   integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
@@ -14909,35 +15711,6 @@ node-int64@^0.4.0:
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
   integrity sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=
 
-node-libs-browser@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.2.0.tgz#c72f60d9d46de08a940dedbb25f3ffa2f9bbaa77"
-  integrity sha512-5MQunG/oyOaBdttrL40dA7bUfPORLRWMUJLQtMg7nluxUvk5XwnLdL9twQHFAjRx/y7mIMkLKT9++qPbbk6BZA==
-  dependencies:
-    assert "^1.1.1"
-    browserify-zlib "^0.2.0"
-    buffer "^4.3.0"
-    console-browserify "^1.1.0"
-    constants-browserify "^1.0.0"
-    crypto-browserify "^3.11.0"
-    domain-browser "^1.1.1"
-    events "^3.0.0"
-    https-browserify "^1.0.0"
-    os-browserify "^0.3.0"
-    path-browserify "0.0.0"
-    process "^0.11.10"
-    punycode "^1.2.4"
-    querystring-es3 "^0.2.0"
-    readable-stream "^2.3.3"
-    stream-browserify "^2.0.1"
-    stream-http "^2.7.2"
-    string_decoder "^1.0.0"
-    timers-browserify "^2.0.4"
-    tty-browserify "0.0.0"
-    url "^0.11.0"
-    util "^0.11.0"
-    vm-browserify "0.0.4"
-
 node-libs-browser@^2.2.1:
   version "2.2.1"
   resolved "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.2.1.tgz#b64f513d18338625f90346d27b0d235e631f6425"
@@ -15025,6 +15798,13 @@ node-releases@^1.1.38:
   dependencies:
     semver "^6.3.0"
 
+node-releases@^1.1.47:
+  version "1.1.47"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.47.tgz#c59ef739a1fd7ecbd9f0b7cf5b7871e8a8b591e4"
+  integrity sha512-k4xjVPx5FpwBUj0Gw7uvFOTF4Ep8Hok1I6qjwL3pLfwe7Y0REQSAqOwwv9TWBCUtMHxcXfY4PgRLRozcChvTcA==
+  dependencies:
+    semver "^6.3.0"
+
 nomnom@~1.6.2:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/nomnom/-/nomnom-1.6.2.tgz#84a66a260174408fc5b77a18f888eccc44fb6971"
@@ -15065,7 +15845,7 @@ normalize-package-data@^2.0.0, normalize-package-data@^2.3.0, normalize-package-
     semver "2 || 3 || 4 || 5"
     validate-npm-package-license "^3.0.1"
 
-normalize-path@^2.1.1:
+normalize-path@^2.0.1, normalize-path@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
   integrity sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=
@@ -15239,6 +16019,11 @@ oauth-sign@~0.9.0:
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
   integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
 
+object-assign@4.X, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+
 object-assign@^2.0.0:
   version "2.1.1"
   resolved "https://registry.npmjs.org/object-assign/-/object-assign-2.1.1.tgz#43c36e5d569ff8e4816c4efa8be02d26967c18aa"
@@ -15249,11 +16034,6 @@ object-assign@^3.0.0:
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2"
   integrity sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I=
 
-object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
-
 object-copy@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
@@ -15534,7 +16314,7 @@ os-locale@^2.0.0:
     lcid "^1.0.0"
     mem "^1.1.0"
 
-os-locale@^3.0.0:
+os-locale@^3.0.0, os-locale@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-3.1.0.tgz#a802a6ee17f24c10483ab9935719cef4ed16bf1a"
   integrity sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==
@@ -15907,11 +16687,6 @@ pascalcase@^0.1.1:
   resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
   integrity sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=
 
-path-browserify@0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
-  integrity sha1-oLhwcpquIUAFt9UDLsLLuw+0RRo=
-
 path-browserify@0.0.1:
   version "0.0.1"
   resolved "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.1.tgz#e6c4ddd7ed3aa27c68a20cc4e50e1a4ee83bbc4a"
@@ -16851,17 +17626,7 @@ react-document-title@^2.0.3:
     prop-types "^15.5.6"
     react-side-effect "^1.0.2"
 
-react-dom@^16.8.0, react-dom@^16.8.3:
-  version "16.12.0"
-  resolved "https://registry.npmjs.org/react-dom/-/react-dom-16.12.0.tgz#0da4b714b8d13c2038c9396b54a92baea633fe11"
-  integrity sha512-LMxFfAGrcS3kETtQaCkTKjMiifahaMySFDn71fZUNpPHZQEzmk/GiAeIT8JSOrHB23fnuCOMruL2a8NYlw+8Gw==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.18.0"
-
-react-dom@^16.8.6:
+react-dom@^16.8.0, react-dom@^16.8.3, react-dom@^16.8.6:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
   integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==
@@ -17218,16 +17983,7 @@ react@^0.14.0:
     envify "^3.0.0"
     fbjs "^0.6.1"
 
-react@^16.8.0, react@^16.8.3:
-  version "16.12.0"
-  resolved "https://registry.npmjs.org/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"
-  integrity sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJgzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-
-react@^16.8.6:
+react@^16.8.0, react@^16.8.3, react@^16.8.6:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
   integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
@@ -18200,14 +18956,6 @@ scheduler@^0.13.6:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-scheduler@^0.18.0:
-  version "0.18.0"
-  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.18.0.tgz#5901ad6659bc1d8f3fdaf36eb7a67b0d6746b1c4"
-  integrity sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
@@ -18295,6 +19043,11 @@ semver@6.2.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.2.0.tgz#4d813d9590aaf8a9192693d6c85b9344de5901db"
   integrity sha512-jdFC1VdUGT/2Scgbimf7FSx9iJLXoqfglSF+gJeuNWVpiE37OIbc1jywR/GJyFdz3mnkz2/id0L0J/cr0izR5A==
 
+semver@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
+  integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
+
 semver@^5.5:
   version "5.7.1"
   resolved "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
@@ -18342,6 +19095,11 @@ serialize-javascript@^1.4.0, serialize-javascript@^1.7.0:
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.7.0.tgz#d6e0dfb2a3832a8c94468e6eb1db97e55a192a65"
   integrity sha512-ke8UG8ulpFOxO8f8gRYabHQe/ZntKlcig2Mp+8+URDP1D8vJZ0KUt7LYo07q25Z/+JVSgpr/cui9PIp5H6/+nA==
 
+serialize-javascript@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
+  integrity sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==
+
 serve-favicon@^2.5.0:
   version "2.5.0"
   resolved "https://registry.npmjs.org/serve-favicon/-/serve-favicon-2.5.0.tgz#935d240cdfe0f5805307fdfe967d88942a2cbcf0"
@@ -18632,6 +19390,14 @@ source-list-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
+source-map-loader@^0.2.4:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-0.2.4.tgz#c18b0dc6e23bf66f6792437557c569a11e072271"
+  integrity sha512-OU6UJUty+i2JDpTItnizPrlpOIBLmQbWMuBg9q5bVtnHACqw1tn9nNwqJLbv0/00JjnJb/Ee5g5WS5vrRv7zIQ==
+  dependencies:
+    async "^2.5.0"
+    loader-utils "^1.1.0"
+
 source-map-resolve@^0.5.0:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259"
@@ -18643,15 +19409,18 @@ source-map-resolve@^0.5.0:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
-source-map-support@^0.5.6, source-map-support@^0.5.9, source-map-support@~0.5.10:
-  version "0.5.13"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.13.tgz#31b24a9c2e73c2de85066c0feb7d44767ed52932"
-  integrity sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==
+source-map-resolve@^0.5.2:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
+  integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==
   dependencies:
-    buffer-from "^1.0.0"
-    source-map "^0.6.0"
+    atob "^2.1.2"
+    decode-uri-component "^0.2.0"
+    resolve-url "^0.2.1"
+    source-map-url "^0.4.0"
+    urix "^0.1.0"
 
-source-map-support@~0.5.12:
+source-map-support@^0.5.16, source-map-support@~0.5.12:
   version "0.5.16"
   resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.16.tgz#0ae069e7fe3ba7538c64c98515e35339eac5a042"
   integrity sha512-efyLRJDr68D9hBBNIPWFjhpFzURh+KJykQwvMyW5UiZzYwoF6l4YMMDIJJEyFWxWCqfyxLzz6tSfUFR+kXXsVQ==
@@ -18659,6 +19428,14 @@ source-map-support@~0.5.12:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
+source-map-support@^0.5.6:
+  version "0.5.13"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.13.tgz#31b24a9c2e73c2de85066c0feb7d44767ed52932"
+  integrity sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
 source-map-url@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
@@ -19051,6 +19828,11 @@ strip-ansi@^6.0.0:
   dependencies:
     ansi-regex "^5.0.0"
 
+strip-bom-string@1.X:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom-string/-/strip-bom-string-1.0.0.tgz#e5211e9224369fbb81d633a2f00044dc8cedad92"
+  integrity sha1-5SEekiQ2n7uB1jOi8ABE3IztrZI=
+
 strip-bom@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
@@ -19133,6 +19915,13 @@ style-to-object@^0.2.1:
   dependencies:
     inline-style-parser "0.1.1"
 
+supports-color@6.1.0, supports-color@^6.0.0, supports-color@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
+  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
+  dependencies:
+    has-flag "^3.0.0"
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -19145,13 +19934,6 @@ supports-color@^5.0.0, supports-color@^5.3.0:
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@^6.0.0, supports-color@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
-  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
-  dependencies:
-    has-flag "^3.0.0"
-
 supports-hyperlinks@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-1.0.1.tgz#71daedf36cc1060ac5100c351bb3da48c29c0ef7"
@@ -19310,45 +20092,36 @@ term-size@^1.2.0:
   dependencies:
     execa "^0.7.0"
 
-terser-webpack-plugin@^1.1.0:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.2.4.tgz#56f87540c28dd5265753431009388f473b5abba3"
-  integrity sha512-64IiILNQlACWZLzFlpzNaG0bpQ4ytaB7fwOsbpsdIV70AfLUmIGGeuKL0YV2WmtcrURjE2aOvHD4/lrFV3Rg+Q==
+terser-webpack-plugin@^1.2.4:
+  version "1.4.1"
+  resolved "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.1.tgz#61b18e40eaee5be97e771cdbb10ed1280888c2b4"
+  integrity sha512-ZXmmfiwtCLfz8WKZyYUuuHf3dMYEjg8NrjHMb0JqHVHVOSkzp3cW2/XG1fP3tRhqEqSzMwzzRQGtAPbs4Cncxg==
   dependencies:
-    cacache "^11.3.2"
-    find-cache-dir "^2.0.0"
+    cacache "^12.0.2"
+    find-cache-dir "^2.1.0"
     is-wsl "^1.1.0"
     schema-utils "^1.0.0"
     serialize-javascript "^1.7.0"
     source-map "^0.6.1"
-    terser "^3.17.0"
-    webpack-sources "^1.3.0"
+    terser "^4.1.2"
+    webpack-sources "^1.4.0"
     worker-farm "^1.7.0"
 
-terser-webpack-plugin@^1.2.4, terser-webpack-plugin@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.1.tgz#61b18e40eaee5be97e771cdbb10ed1280888c2b4"
-  integrity sha512-ZXmmfiwtCLfz8WKZyYUuuHf3dMYEjg8NrjHMb0JqHVHVOSkzp3cW2/XG1fP3tRhqEqSzMwzzRQGtAPbs4Cncxg==
+terser-webpack-plugin@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.3.tgz#5ecaf2dbdc5fb99745fd06791f46fc9ddb1c9a7c"
+  integrity sha512-QMxecFz/gHQwteWwSo5nTc6UaICqN1bMedC5sMtUc7y3Ha3Q8y6ZO0iCR8pq4RJC8Hjf0FEPEHZqcMB/+DFCrA==
   dependencies:
     cacache "^12.0.2"
     find-cache-dir "^2.1.0"
     is-wsl "^1.1.0"
     schema-utils "^1.0.0"
-    serialize-javascript "^1.7.0"
+    serialize-javascript "^2.1.2"
     source-map "^0.6.1"
     terser "^4.1.2"
     webpack-sources "^1.4.0"
     worker-farm "^1.7.0"
 
-terser@^3.17.0:
-  version "3.17.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-3.17.0.tgz#f88ffbeda0deb5637f9d24b0da66f4e15ab10cb2"
-  integrity sha512-/FQzzPJmCpjAH9Xvk2paiWrFq+5M6aVOf+2KRbwhByISDX/EujxsK+BAvrhb6H+2rtrLCHK9N01wO014vrIwVQ==
-  dependencies:
-    commander "^2.19.0"
-    source-map "~0.6.1"
-    source-map-support "~0.5.10"
-
 terser@^4.1.2, terser@^4.3.9:
   version "4.4.0"
   resolved "https://registry.npmjs.org/terser/-/terser-4.4.0.tgz#22c46b4817cf4c9565434bfe6ad47336af259ac3"
@@ -19396,6 +20169,14 @@ through2-filter@^2.0.0:
     through2 "~2.0.0"
     xtend "~4.0.0"
 
+through2@2.X, through2@^2.0.0, through2@^2.0.2, through2@^2.0.3, through2@~2.0.0:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
+  integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
+  dependencies:
+    readable-stream "~2.3.6"
+    xtend "~4.0.1"
+
 through2@^0.5.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/through2/-/through2-0.5.1.tgz#dfdd012eb9c700e2323fd334f38ac622ab372da7"
@@ -19404,14 +20185,6 @@ through2@^0.5.0:
     readable-stream "~1.0.17"
     xtend "~3.0.0"
 
-through2@^2.0.0, through2@^2.0.2, through2@^2.0.3, through2@~2.0.0:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
-  integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
-  dependencies:
-    readable-stream "~2.3.6"
-    xtend "~4.0.1"
-
 through@2, "through@>=2.2.7 <3", through@^2.3.4, through@^2.3.6, through@~2.3.4:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
@@ -19434,6 +20207,14 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
+timers-ext@^0.1.5:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/timers-ext/-/timers-ext-0.1.7.tgz#6f57ad8578e07a3fb9f91d9387d65647555e25c6"
+  integrity sha512-b85NUNzTSdodShTIbky6ZF02e8STtVVfD+fu4aXXShEELpozH+bCpJLYMPZbsABN2wDH7fJpqIoXxJpzbf0NqQ==
+  dependencies:
+    es5-ext "~0.10.46"
+    next-tick "1"
+
 timsort@~0.3.0:
   version "0.3.0"
   resolved "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
@@ -19873,6 +20654,16 @@ type-is@~1.6.17, type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
+type@^1.0.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/type/-/type-1.2.0.tgz#848dd7698dafa3e54a6c479e759c4bc3f18847a0"
+  integrity sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==
+
+type@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/type/-/type-2.0.0.tgz#5f16ff6ef2eb44f260494dae271033b29c09a9c3"
+  integrity sha512-KBt58xCHry4Cejnc2ISQAF7QY+ORngsWfxezO68+12hKV6lQY8P/psIkcbjeHWn7MqcgciWJyCCevFMJdIXpow==
+
 typed-styles@^0.0.7:
   version "0.0.7"
   resolved "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9"
@@ -20325,6 +21116,11 @@ uuid@^3.0.0, uuid@^3.0.1, uuid@^3.1.0, uuid@^3.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
   integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==
 
+v8-compile-cache@2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.0.3.tgz#00f7494d2ae2b688cfe2899df6ed2c54bef91dbe"
+  integrity sha512-CNmdbwQMBjwr9Gsmohvm0pbL954tJrNzf6gWL3K+QMQf00PF7ERGrEiLgjuU3mKreLC2MeGhUsNV9ybTbLgd3w==
+
 v8-compile-cache@^2.0.3:
   version "2.1.0"
   resolved "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"
@@ -20482,13 +21278,6 @@ vinyl@^2.0.0, vinyl@^2.1.0:
     remove-trailing-separator "^1.0.1"
     replace-ext "^1.0.0"
 
-vm-browserify@0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
-  integrity sha1-XX6kW7755Kb/ZflUOOCofDV9WnM=
-  dependencies:
-    indexof "0.0.1"
-
 vm-browserify@^1.0.1:
   version "1.1.2"
   resolved "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
@@ -20552,7 +21341,7 @@ warning@^4.0.2, warning@^4.0.3:
   dependencies:
     loose-envify "^1.0.0"
 
-watchpack@^1.5.0, watchpack@^1.6.0:
+watchpack@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"
   integrity sha512-i6dHe3EyLjMmDlU1/bGQpEw25XSjkJULPuAVKCbNRefQVq48yXKUpwg538F7AZTf9kyr57zj++pQFltUa5H7yA==
@@ -20578,10 +21367,10 @@ webidl-conversions@^4.0.2:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
   integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
 
-webpack-bundle-analyzer@^3.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.3.2.tgz#3da733a900f515914e729fcebcd4c40dde71fc6f"
-  integrity sha512-7qvJLPKB4rRWZGjVp5U1KEjwutbDHSKboAl0IfafnrdXMrgC0tOtZbQD6Rw0u4cmpgRN4O02Fc0t8eAT+FgGzA==
+webpack-bundle-analyzer@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.6.0.tgz#39b3a8f829ca044682bc6f9e011c95deb554aefd"
+  integrity sha512-orUfvVYEfBMDXgEKAKVvab5iQ2wXneIEorGNsyuOyVYpjYrI7CUOhhXNDd3huMwQ3vNNWWlGP+hzflMFYNzi2g==
   dependencies:
     acorn "^6.0.7"
     acorn-walk "^6.1.1"
@@ -20592,24 +21381,31 @@ webpack-bundle-analyzer@^3.3.2:
     express "^4.16.3"
     filesize "^3.6.1"
     gzip-size "^5.0.0"
-    lodash "^4.17.10"
+    lodash "^4.17.15"
     mkdirp "^0.5.1"
     opener "^1.5.1"
     ws "^6.0.0"
 
-webpack-dev-middleware@^3.6.2:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.7.0.tgz#ef751d25f4e9a5c8a35da600c5fda3582b5c6cff"
-  integrity sha512-qvDesR1QZRIAZHOE3iQ4CXLZZSQ1lAUsSpnQmlB1PBfoN/xdRjmge3Dok0W4IdaVLJOGJy3sGI4sZHwjRU0PCA==
+webpack-cli@^3.3.10:
+  version "3.3.10"
+  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.3.10.tgz#17b279267e9b4fb549023fae170da8e6e766da13"
+  integrity sha512-u1dgND9+MXaEt74sJR4PR7qkPxXUSQ0RXYq8x1L6Jg1MYVEmGPrH6Ah6C4arD4r0J1P5HKjRqpab36k0eIzPqg==
   dependencies:
-    memory-fs "^0.4.1"
-    mime "^2.4.2"
-    range-parser "^1.2.1"
-    webpack-log "^2.0.0"
+    chalk "2.4.2"
+    cross-spawn "6.0.5"
+    enhanced-resolve "4.1.0"
+    findup-sync "3.0.0"
+    global-modules "2.0.0"
+    import-local "2.0.0"
+    interpret "1.2.0"
+    loader-utils "1.2.3"
+    supports-color "6.1.0"
+    v8-compile-cache "2.0.3"
+    yargs "13.2.4"
 
-webpack-dev-middleware@^3.7.0:
+webpack-dev-middleware@^3.6.2, webpack-dev-middleware@^3.7.0:
   version "3.7.2"
-  resolved "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.7.2.tgz#0019c3db716e3fa5cecbf64f2ab88a74bab331f3"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.7.2.tgz#0019c3db716e3fa5cecbf64f2ab88a74bab331f3"
   integrity sha512-1xC42LxbYoqLNAhV6YzTYacicgMZQTqRd27Sim9wn5hJrX3I5nxYy1SxSd4+gjUFsz1dQFj+yEe6zEVmSkeJjw==
   dependencies:
     memory-fs "^0.4.1"
@@ -20661,7 +21457,7 @@ webpack-sources@^1.0.1, webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack-sources@^1.2.0, webpack-sources@^1.3.0:
+webpack-sources@^1.2.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.3.0.tgz#2a28dcb9f1f45fe960d8f1493252b5ee6530fa85"
   integrity sha512-OiVgSrbGu7NEnEvQJJgdSFPl2qWKkWq5lHMhgiToIiN9w34EBnjYzSYs+VbL5KoYiLNtFFa7BZIKxRED3I32pA==
@@ -20669,10 +21465,10 @@ webpack-sources@^1.2.0, webpack-sources@^1.3.0:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack@^4.33.0, webpack@^4.38.0:
-  version "4.41.2"
-  resolved "https://registry.npmjs.org/webpack/-/webpack-4.41.2.tgz#c34ec76daa3a8468c9b61a50336d8e3303dce74e"
-  integrity sha512-Zhw69edTGfbz9/8JJoyRQ/pq8FYUoY0diOXqW0T6yhgdhCv6wr0hra5DwwWexNRns2Z2+gsnrNcbe9hbGBgk/A==
+webpack@^4.33.0, webpack@^4.35.0, webpack@^4.38.0:
+  version "4.41.5"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.41.5.tgz#3210f1886bce5310e62bb97204d18c263341b77c"
+  integrity sha512-wp0Co4vpyumnp3KlkmpM5LWuzvZYayDwM2n17EHFr4qxBBbRokC7DJawPJC7TfSFZ9HZ6GsdH40EBj4UV0nmpw==
   dependencies:
     "@webassemblyjs/ast" "1.8.5"
     "@webassemblyjs/helper-module-context" "1.8.5"
@@ -20694,40 +21490,10 @@ webpack@^4.33.0, webpack@^4.38.0:
     node-libs-browser "^2.2.1"
     schema-utils "^1.0.0"
     tapable "^1.1.3"
-    terser-webpack-plugin "^1.4.1"
+    terser-webpack-plugin "^1.4.3"
     watchpack "^1.6.0"
     webpack-sources "^1.4.1"
 
-webpack@^4.35.0:
-  version "4.35.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.35.0.tgz#ad3f0f8190876328806ccb7a36f3ce6e764b8378"
-  integrity sha512-M5hL3qpVvtr8d4YaJANbAQBc4uT01G33eDpl/psRTBCfjxFTihdhin1NtAKB1ruDwzeVdcsHHV3NX+QsAgOosw==
-  dependencies:
-    "@webassemblyjs/ast" "1.8.5"
-    "@webassemblyjs/helper-module-context" "1.8.5"
-    "@webassemblyjs/wasm-edit" "1.8.5"
-    "@webassemblyjs/wasm-parser" "1.8.5"
-    acorn "^6.0.5"
-    acorn-dynamic-import "^4.0.0"
-    ajv "^6.1.0"
-    ajv-keywords "^3.1.0"
-    chrome-trace-event "^1.0.0"
-    enhanced-resolve "^4.1.0"
-    eslint-scope "^4.0.0"
-    json-parse-better-errors "^1.0.2"
-    loader-runner "^2.3.0"
-    loader-utils "^1.1.0"
-    memory-fs "~0.4.1"
-    micromatch "^3.1.8"
-    mkdirp "~0.5.0"
-    neo-async "^2.5.0"
-    node-libs-browser "^2.0.0"
-    schema-utils "^1.0.0"
-    tapable "^1.1.0"
-    terser-webpack-plugin "^1.1.0"
-    watchpack "^1.5.0"
-    webpack-sources "^1.3.0"
-
 websocket-driver@>=0.5.1:
   version "0.7.3"
   resolved "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.3.tgz#a2d4e0d4f4f116f1e6297eba58b05d430100e9f9"
@@ -21042,6 +21808,23 @@ yargs-parser@^9.0.2:
   dependencies:
     camelcase "^4.1.0"
 
+yargs@13.2.4:
+  version "13.2.4"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.2.4.tgz#0b562b794016eb9651b98bd37acf364aa5d6dc83"
+  integrity sha512-HG/DWAJa1PAnHT9JAhNa8AbAv3FPaiLzioSjCcmuXXhP8MlpHO5vwls4g4j6n30Z74GVQj8Xa62dWVx1QCGklg==
+  dependencies:
+    cliui "^5.0.0"
+    find-up "^3.0.0"
+    get-caller-file "^2.0.1"
+    os-locale "^3.1.0"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^3.0.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^13.1.0"
+
 yargs@^11.0.0:
   version "11.1.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-11.1.0.tgz#90b869934ed6e871115ea2ff58b03f4724ed2d77"

From 553cbbe154ec1c792b95c95fb48015511057b60b Mon Sep 17 00:00:00 2001
From: Milan Turon <mituron@microsoft.com>
Date: Tue, 18 Feb 2020 18:59:11 +0100
Subject: [PATCH 14/17] Revert "merging with latest master"

This reverts commit fc6abdaab08f0d1ba039f84d199e1c589992d2fc.
---
 .circleci/config.yml                          |    7 +-
 CHANGELOG.md                                  |   69 +-
 build/babel/index.js                          |    2 -
 build/dangerjs/checkPerfRegressions.ts        |   89 +-
 build/gulp/tasks/bundle.ts                    |    5 -
 build/gulp/tasks/test-projects.ts             |   30 -
 .../gulp/tasks/test-projects/nextjs/index.js  |   11 -
 .../tasks/test-projects/typings/tsconfig.json |    3 +-
 build/package.json                            |   33 +-
 build/webpack.config.ts                       |    2 +-
 dangerfile.ts                                 |    4 +-
 docs/package.json                             |    4 +-
 .../ComponentExample/ComponentExample.tsx     |    2 +-
 .../ComponentPerfChart.tsx                    |    2 +-
 .../src/components/Playground/renderConfig.ts |    3 +-
 docs/src/components/Sidebar/Sidebar.tsx       |   22 -
 .../AnimationExampleVisible.shorthand.tsx     |    8 +
 .../CarouselExampleWithFocusableElements.tsx  |    2 +-
 .../ChatExampleActions.shorthand.steps.ts     |   16 -
 .../ChatExampleInScrollable.shorthand.tsx     |   18 +-
 .../DialogExampleScroll.shorthand.steps.ts    |    8 -
 .../DialogExampleScroll.shorthand.tsx         |   32 -
 docs/src/examples/components/Dialog/index.tsx |    6 -
 .../List/Content/ListExampleContent.tsx       |   12 +-
 .../List/Content/ListExampleContentMedia.tsx  |    3 -
 .../List/Content/ListExampleEndMedia.tsx      |    3 -
 .../List/Content/ListExampleHeader.tsx        |    6 +-
 .../List/Content/ListExampleHeaderContent.tsx |    3 -
 .../List/Content/ListExampleHeaderMedia.tsx   |    6 +-
 .../List/Content/ListExampleMedia.tsx         |    3 -
 .../List/Performance/ListNested.perf.tsx      |  865 ---------
 .../Performance/ListWith60ListItems.perf.tsx  |   35 -
 .../components/List/Performance/index.tsx     |   10 -
 .../components/List/Types/ListExample.tsx     |    3 -
 .../List/Types/ListExampleNavigable.tsx       |    3 -
 .../List/Types/ListExampleSelectable.tsx      |    6 +-
 .../components/List/Usage/ListExampleMemo.tsx |   59 -
 .../examples/components/List/Usage/index.tsx  |   19 -
 .../List/Variations/ListExampleTruncate.tsx   |    3 -
 docs/src/examples/components/List/index.tsx   |    2 -
 .../BestPractices/LoaderBestPractices.tsx     |   14 -
 ...opupCustomTargetExample.shorthand.steps.ts |    7 -
 .../PopupCustomTargetExample.shorthand.tsx    |   52 +-
 .../Popup/Types/PopupCustomTargetExample.tsx  |   52 +-
 .../Types/PopupExamplePointerOffset.steps.ts  |    7 -
 .../Popup/Types/PopupExamplePointerOffset.tsx |   23 -
 .../examples/components/Popup/Types/index.tsx |    5 -
 .../Provider/Types/ProviderExampleStyles.tsx  |   31 -
 .../components/Provider/Types/index.tsx       |    3 +-
 .../TooltipExamplePointing.shorthand.steps.ts |   15 -
 .../Performance/TreeWith60ListItems.perf.tsx  |   76 -
 .../components/Tree/Performance/index.tsx     |   16 -
 docs/src/examples/components/Tree/index.tsx   |    2 -
 docs/src/pages/ComponentArchitecture.mdx      |   47 -
 docs/src/pages/ThemingSpecification.mdx       |  282 ---
 .../EditorToolbar/EditorToolbar.tsx           |    5 +-
 .../ChatWithPopover.tsx                       |   10 +-
 .../ChatMessageWithPopover/ReactionPopup.tsx  |   19 +-
 .../controlMessagesGroupBehavior.ts           |    4 +-
 .../ThreadedMessages/threadChatBehavior.ts    |    4 +-
 .../threadedMessageBehavior.ts                |    9 +-
 docs/src/routes.tsx                           |    8 -
 e2e/package.json                              |    6 +-
 lerna.json                                    |    2 +-
 package.json                                  |    3 +-
 packages/ability-attributes/package.json      |    2 +-
 packages/accessibility/package.json           |    6 +-
 .../Accordion/accordionTitleBehavior.ts       |    7 +-
 .../src/behaviors/Alert/alertBaseBehavior.ts  |   17 -
 .../src/behaviors/Alert/alertBehavior.ts      |    3 +-
 .../src/behaviors/Chat/chatBehavior.ts        |    4 +-
 .../src/behaviors/Chat/chatMessageBehavior.ts |    4 +-
 .../behaviors/Checkbox/checkboxBehavior.ts    |    4 +-
 .../src/behaviors/Icon/iconBehavior.ts        |    3 +-
 .../src/behaviors/Loader/loaderBehavior.ts    |   32 +-
 .../src/behaviors/Slider/sliderBehavior.ts    |    2 +-
 .../Tooltip/tooltipAsDescriptionBehavior.ts   |    4 +-
 packages/accessibility/src/behaviors/index.ts |    7 -
 .../test/behaviors/alertBehavior-test.tsx     |   10 -
 .../test/behaviors/behavior-test.tsx          |    2 -
 .../test/behaviors/loaderBehavior-test.tsx    |   33 -
 .../test/behaviors/testHelper.tsx             |    1 -
 packages/code-sandbox/package.json            |    6 +-
 packages/digest/package.json                  |    2 +-
 packages/docs-components/package.json         |    4 +-
 .../docs-components/src/knobs/KnobContexts.ts |    8 +-
 .../src/knobs/KnobProvider.tsx                |   17 +-
 .../src/knobs/LogInspector.tsx                |    6 +-
 packages/docs-components/src/knobs/types.ts   |    6 +-
 .../docs-components/src/knobs/useLogKnob.ts   |   11 +-
 packages/eslint-plugin/package.json           |    2 +-
 packages/local-sandbox/.browserslistrc        |    1 -
 packages/local-sandbox/README.md              |   16 -
 packages/local-sandbox/babel.config.js        |    1 -
 packages/local-sandbox/package.json           |   32 -
 packages/local-sandbox/public/index.html      |    6 -
 packages/local-sandbox/server.js              |   16 -
 packages/local-sandbox/src/index.tsx          |   12 -
 packages/local-sandbox/tsconfig.json          |   18 -
 packages/local-sandbox/webpack.config.ts      |   73 -
 packages/perf-test/just.config.ts             |    5 +-
 packages/perf-test/package.json               |   10 +-
 packages/perf-test/tasks/perf-test.ts         |   31 +-
 packages/playground/package.json              |    6 +-
 packages/react-bindings/README.md             |   39 +-
 packages/react-bindings/package.json          |   12 +-
 .../src/FocusZone/FocusZone.tsx               |    3 -
 .../src/hooks/useAutoControlled.ts            |   27 -
 .../src/hooks/useIsomorphicLayoutEffect.ts    |    8 -
 .../src/hooks/useStateManager.ts              |   24 +-
 .../react-bindings/src/hooks/useStyles.ts     |   18 +-
 packages/react-bindings/src/index.ts          |    5 +-
 .../src/styles/calculateAnimationTimeout.ts   |   10 -
 .../src/styles/convertCssTimeToNumber.ts      |   20 -
 .../react-bindings/src/styles/getStyles.ts    |  125 +-
 .../src/styles/resolveStyles.ts               |  227 ---
 .../src/styles/resolveStylesAndClasses.tsx    |   82 +
 .../src/styles/resolveVariables.ts            |   54 -
 packages/react-bindings/src/styles/types.ts   |   27 +-
 .../test/hooks/useAutoControlled-test.tsx     |  110 --
 .../test/hooks/useStateManager-test.tsx       |   45 +-
 .../test/hooks/useStyles-test.tsx             |    1 +
 .../styles/convertCssTimeToNumber-test.ts     |   25 -
 .../test/styles/resolveStyles-test.ts         |  269 ---
 .../styles/resolveStylesAndClasses-test.ts    |   68 +
 .../test/styles/resolveVariables-test.ts      |   86 -
 .../package.json                              |    6 +-
 .../src/EventListener.ts                      |    5 +-
 .../src/types.ts                              |    8 +-
 .../src/useEventListener.ts                   |   41 +-
 .../test/EventListener-test.tsx               |   83 -
 .../package.json                              |    6 +-
 packages/react-component-ref/package.json     |    6 +-
 .../react-component-ref/src/RefFindNode.tsx   |    2 -
 packages/react-component-ref/src/index.ts     |    1 +
 .../react-component-ref/src/toRefObject.ts    |   25 +
 .../test/toRefObject-test.ts                  |   19 +
 packages/react-context-selector/.gulp.js      |    1 -
 packages/react-context-selector/README.md     |   41 -
 .../react-context-selector/babel.config.js    |    1 -
 packages/react-context-selector/gulpfile.ts   |    1 -
 .../react-context-selector/jest.config.js     |    5 -
 packages/react-context-selector/package.json  |   40 -
 .../src/createContext.ts                      |   78 -
 packages/react-context-selector/src/index.ts  |    4 -
 packages/react-context-selector/src/types.ts  |   19 -
 .../src/useContextSelector.ts                 |   63 -
 .../src/useContextSelectors.ts                |   82 -
 packages/react-context-selector/src/utils.ts  |    6 -
 .../test/createContext-test.tsx               |   73 -
 .../test/useContextSelector-test.tsx          |   88 -
 .../test/useContextSelectors-test.tsx         |   87 -
 packages/react-context-selector/tsconfig.json |   14 -
 packages/react-proptypes/package.json         |    6 +-
 packages/react-proptypes/src/index.ts         |   14 +-
 packages/react-theming/package.json           |    4 +-
 packages/react/package.json                   |   21 +-
 .../components/Accordion/AccordionTitle.tsx   |    8 +-
 .../src/components/Animation/Animation.tsx    |  257 +--
 .../src/components/Carousel/Carousel.tsx      |  104 +-
 packages/react/src/components/Chat/Chat.tsx   |  140 +-
 .../react/src/components/Chat/ChatItem.tsx    |  209 +--
 .../react/src/components/Chat/ChatMessage.tsx |  391 ++--
 .../src/components/Checkbox/Checkbox.tsx      |  239 +--
 packages/react/src/components/Debug/Debug.tsx |   11 +-
 .../react/src/components/Dialog/Dialog.tsx    |    9 +-
 .../src/components/Dropdown/Dropdown.tsx      |    7 +-
 .../react/src/components/Flex/FlexItem.tsx    |   11 +-
 packages/react/src/components/Icon/Icon.tsx   |  166 +-
 packages/react/src/components/Label/Label.tsx |  242 +--
 packages/react/src/components/List/List.tsx   |   79 +-
 .../react/src/components/List/ListItem.tsx    |   30 +-
 .../react/src/components/List/listContext.ts  |   43 -
 .../react/src/components/Loader/Loader.tsx    |   17 +-
 .../react/src/components/Menu/MenuItem.tsx    |    9 +-
 packages/react/src/components/Popup/Popup.tsx |   48 +-
 .../react/src/components/Portal/Portal.tsx    |    9 +-
 .../src/components/Portal/PortalInner.tsx     |   11 +-
 .../src/components/Provider/Provider.tsx      |  370 ++--
 .../src/components/Provider/ProviderBox.tsx   |   45 +
 .../src/components/Provider/usePortalBox.ts   |   48 -
 .../react/src/components/Slider/Slider.tsx    |  299 ++-
 .../react/src/components/Status/Status.tsx    |  123 +-
 packages/react/src/components/Text/Text.tsx   |  156 +-
 .../react/src/components/Toolbar/Toolbar.tsx  |   10 +-
 .../src/components/Toolbar/ToolbarItem.tsx    |    5 +-
 .../components/Toolbar/ToolbarMenuItem.tsx    |    6 +-
 .../react/src/components/Tooltip/Tooltip.tsx  |  421 ++---
 .../src/components/Tooltip/TooltipContent.tsx |  145 +-
 .../react/src/themes/teams-dark/colors.ts     |    1 -
 .../themes/teams-dark/componentVariables.ts   |    2 +-
 .../Provider/providerBoxVariables.ts          |    6 +
 .../components/Provider/providerVariables.ts  |    6 -
 .../src/themes/teams-high-contrast/colors.ts  |    1 -
 .../teams-high-contrast/componentVariables.ts |    2 +-
 .../Provider/providerBoxVariables.ts          |    6 +
 .../components/Provider/providerVariables.ts  |    6 -
 .../src/themes/teams/animations/index.ts      |   10 +-
 .../src/themes/teams/animations/slide.ts      |    2 +-
 packages/react/src/themes/teams/colors.ts     |    3 -
 .../react/src/themes/teams/componentStyles.ts |    6 +-
 .../src/themes/teams/componentVariables.ts    |    6 +-
 .../Accordion/accordionTitleStyles.ts         |    4 +-
 .../components/Animation/animationStyles.ts   |   22 +
 .../Animation/animationVariables.ts           |    1 +
 .../components/Attachment/attachmentStyles.ts |    2 +-
 .../components/Carousel/carouselItemStyles.ts |    3 -
 .../components/Carousel/carouselStyles.ts     |   13 +-
 .../components/Carousel/carouselVariables.ts  |    4 -
 .../teams/components/Chat/chatItemStyles.ts   |    4 +-
 .../components/Chat/chatMessageStyles.ts      |   18 +-
 .../components/Chat/chatMessageVariables.ts   |    4 -
 .../teams/components/Chat/chatStyles.ts       |    4 +-
 .../components/Checkbox/checkboxStyles.ts     |   12 +-
 .../components/Dialog/dialogVariables.ts      |    2 +-
 .../components/Dropdown/dropdownStyles.ts     |    2 +-
 .../components/Dropdown/dropdownVariables.ts  |    2 -
 .../teams/components/Embed/embedStyles.ts     |    2 +-
 .../teams/components/Embed/embedVariables.ts  |    2 -
 .../teams/components/Flex/flexItemStyles.ts   |    2 +-
 .../teams/components/Icon/iconStyles.ts       |   18 +-
 .../components/Icon/svg/icons/collapse.tsx    |   41 -
 .../components/Icon/svg/icons/companion.tsx   |   20 -
 .../components/Icon/svg/icons/expand.tsx      |   42 -
 .../teams/components/Icon/svg/icons/index.ts  |   58 +-
 .../Icon/svg/icons/settingsAudio.tsx          |   20 -
 .../components/Icon/svg/icons/shareTo.tsx     |   20 -
 .../teams/components/Input/inputStyles.ts     |    2 -
 .../teams/components/Input/inputVariables.ts  |    6 +-
 .../teams/components/Label/labelStyles.ts     |   13 +-
 .../teams/components/List/listItemStyles.ts   |    2 +-
 .../components/List/listItemVariables.ts      |    2 -
 .../teams/components/Menu/menuItemStyles.ts   |    6 +-
 .../teams/components/Menu/menuVariables.ts    |    5 -
 .../components/Popup/popupContentStyles.ts    |   11 +-
 .../components/Popup/popupContentVariables.ts |    8 -
 .../teams/components/Popup/popupStyles.ts     |   24 +
 .../teams/components/Popup/popupVariables.ts  |   11 +
 ...providerStyles.ts => providerBoxStyles.ts} |    4 +-
 ...erVariables.ts => providerBoxVariables.ts} |    4 +-
 .../teams/components/Slider/sliderStyles.ts   |    6 +-
 .../teams/components/Status/statusStyles.ts   |    4 +-
 .../teams/components/Text/textStyles.ts       |   83 +-
 .../Toolbar/toolbarMenuItemStyles.ts          |    1 -
 .../components/Toolbar/toolbarMenuStyles.ts   |    2 +-
 .../components/Toolbar/toolbarVariables.ts    |    4 -
 .../Tooltip/tooltipContentStyles.ts           |   15 +-
 .../Tooltip/tooltipContentVariables.ts        |    4 -
 .../teams/components/Tooltip/tooltipStyles.ts |   18 +
 .../components/Tooltip/tooltipVariables.ts    |    7 +
 .../src/themes/teams/getBorderFocusStyles.ts  |    4 +-
 .../react/src/themes/teams/siteVariables.ts   |   12 -
 packages/react/src/themes/teams/types.ts      |   40 +-
 packages/react/src/types.ts                   |   18 +-
 packages/react/src/utils/UIComponent.tsx      |    2 -
 .../utils/applyAccessibilityKeyHandlers.ts    |    5 +-
 packages/react/src/utils/createComponent.tsx  |    4 +-
 .../react/src/utils/mergeProviderContexts.ts  |   27 +-
 .../react/src/utils/positioner/Popper.tsx     |  165 +-
 .../src/utils/positioner/initialStyles.ts     |   13 -
 packages/react/src/utils/positioner/types.ts  |    4 +-
 packages/react/src/utils/renderComponent.tsx  |   11 +-
 packages/react/src/utils/whatInput.ts         |    6 +-
 .../commonTests/handlesAccessibility.tsx      |    7 +-
 .../test/specs/commonTests/isConformant.tsx   |    7 +-
 .../Accordion/AccordionTitle-test.tsx         |   45 -
 .../components/Animation/Animation-test.tsx   |   10 -
 .../components/Carousel/Carousel-test.tsx     |    3 +-
 .../test/specs/components/Chat/Chat-test.ts   |    4 +-
 .../specs/components/Chat/ChatItem-test.tsx   |    4 +-
 .../components/Chat/ChatMessage-test.tsx      |   17 +-
 .../components/Checkbox/Checkbox-test.tsx     |    2 +-
 .../test/specs/components/Icon/Icon-test.tsx  |    2 +-
 .../specs/components/Label/Label-test.tsx     |    2 +-
 .../test/specs/components/List/List-test.tsx  |   48 +-
 .../components/Provider/Provider-test.tsx     |   51 +-
 .../specs/components/Slider/Slider-test.tsx   |    1 -
 .../specs/components/Status/Status-test.tsx   |    2 +-
 .../test/specs/components/Text/Text-test.tsx  |    2 +-
 .../components/Tooltip/TooltipContent-test.ts |    4 +-
 .../__snapshots__/felaRenderer-test.tsx.snap  |   10 +-
 .../test/specs/utils/felaRenderer-test.tsx    |   28 +
 packages/react/test/utils/withProvider.tsx    |    2 +-
 packages/react/tsconfig.json                  |    1 -
 packages/state/package.json                   |    6 +-
 packages/state/src/index.ts                   |    3 +-
 .../state/src/managers/checkboxManager.ts     |   27 -
 packages/state/src/managers/listManager.ts    |   26 +
 packages/state/src/managers/sliderManager.ts  |   27 -
 packages/styles/package.json                  |   10 +-
 packages/styles/src/types.ts                  |    2 -
 perf/package.json                             |    6 +-
 scripts/package.json                          |    4 +-
 yarn.lock                                     | 1617 +++++------------
 294 files changed, 2908 insertions(+), 8358 deletions(-)
 delete mode 100644 build/gulp/tasks/test-projects/nextjs/index.js
 delete mode 100644 docs/src/examples/components/Chat/Content/ChatExampleActions.shorthand.steps.ts
 delete mode 100644 docs/src/examples/components/Dialog/Variations/DialogExampleScroll.shorthand.steps.ts
 delete mode 100644 docs/src/examples/components/Dialog/Variations/DialogExampleScroll.shorthand.tsx
 delete mode 100644 docs/src/examples/components/List/Performance/ListNested.perf.tsx
 delete mode 100644 docs/src/examples/components/List/Performance/ListWith60ListItems.perf.tsx
 delete mode 100644 docs/src/examples/components/List/Usage/ListExampleMemo.tsx
 delete mode 100644 docs/src/examples/components/List/Usage/index.tsx
 delete mode 100644 docs/src/examples/components/Loader/BestPractices/LoaderBestPractices.tsx
 delete mode 100644 docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.steps.ts
 delete mode 100644 docs/src/examples/components/Popup/Types/PopupExamplePointerOffset.steps.ts
 delete mode 100644 docs/src/examples/components/Popup/Types/PopupExamplePointerOffset.tsx
 delete mode 100644 docs/src/examples/components/Provider/Types/ProviderExampleStyles.tsx
 delete mode 100644 docs/src/examples/components/Tooltip/Types/TooltipExamplePointing.shorthand.steps.ts
 delete mode 100644 docs/src/examples/components/Tree/Performance/TreeWith60ListItems.perf.tsx
 delete mode 100644 docs/src/examples/components/Tree/Performance/index.tsx
 delete mode 100644 docs/src/pages/ComponentArchitecture.mdx
 delete mode 100644 docs/src/pages/ThemingSpecification.mdx
 delete mode 100644 packages/accessibility/src/behaviors/Alert/alertBaseBehavior.ts
 delete mode 100644 packages/accessibility/test/behaviors/loaderBehavior-test.tsx
 delete mode 100644 packages/local-sandbox/.browserslistrc
 delete mode 100644 packages/local-sandbox/README.md
 delete mode 100644 packages/local-sandbox/babel.config.js
 delete mode 100644 packages/local-sandbox/package.json
 delete mode 100644 packages/local-sandbox/public/index.html
 delete mode 100644 packages/local-sandbox/server.js
 delete mode 100644 packages/local-sandbox/src/index.tsx
 delete mode 100644 packages/local-sandbox/tsconfig.json
 delete mode 100644 packages/local-sandbox/webpack.config.ts
 delete mode 100644 packages/react-bindings/src/hooks/useAutoControlled.ts
 delete mode 100644 packages/react-bindings/src/hooks/useIsomorphicLayoutEffect.ts
 delete mode 100644 packages/react-bindings/src/styles/calculateAnimationTimeout.ts
 delete mode 100644 packages/react-bindings/src/styles/convertCssTimeToNumber.ts
 delete mode 100644 packages/react-bindings/src/styles/resolveStyles.ts
 create mode 100644 packages/react-bindings/src/styles/resolveStylesAndClasses.tsx
 delete mode 100644 packages/react-bindings/src/styles/resolveVariables.ts
 delete mode 100644 packages/react-bindings/test/hooks/useAutoControlled-test.tsx
 delete mode 100644 packages/react-bindings/test/styles/convertCssTimeToNumber-test.ts
 delete mode 100644 packages/react-bindings/test/styles/resolveStyles-test.ts
 create mode 100644 packages/react-bindings/test/styles/resolveStylesAndClasses-test.ts
 delete mode 100644 packages/react-bindings/test/styles/resolveVariables-test.ts
 create mode 100644 packages/react-component-ref/src/toRefObject.ts
 create mode 100644 packages/react-component-ref/test/toRefObject-test.ts
 delete mode 100644 packages/react-context-selector/.gulp.js
 delete mode 100644 packages/react-context-selector/README.md
 delete mode 100644 packages/react-context-selector/babel.config.js
 delete mode 100644 packages/react-context-selector/gulpfile.ts
 delete mode 100644 packages/react-context-selector/jest.config.js
 delete mode 100644 packages/react-context-selector/package.json
 delete mode 100644 packages/react-context-selector/src/createContext.ts
 delete mode 100644 packages/react-context-selector/src/index.ts
 delete mode 100644 packages/react-context-selector/src/types.ts
 delete mode 100644 packages/react-context-selector/src/useContextSelector.ts
 delete mode 100644 packages/react-context-selector/src/useContextSelectors.ts
 delete mode 100644 packages/react-context-selector/src/utils.ts
 delete mode 100644 packages/react-context-selector/test/createContext-test.tsx
 delete mode 100644 packages/react-context-selector/test/useContextSelector-test.tsx
 delete mode 100644 packages/react-context-selector/test/useContextSelectors-test.tsx
 delete mode 100644 packages/react-context-selector/tsconfig.json
 delete mode 100644 packages/react/src/components/List/listContext.ts
 create mode 100644 packages/react/src/components/Provider/ProviderBox.tsx
 delete mode 100644 packages/react/src/components/Provider/usePortalBox.ts
 create mode 100644 packages/react/src/themes/teams-dark/components/Provider/providerBoxVariables.ts
 delete mode 100644 packages/react/src/themes/teams-dark/components/Provider/providerVariables.ts
 create mode 100644 packages/react/src/themes/teams-high-contrast/components/Provider/providerBoxVariables.ts
 delete mode 100644 packages/react/src/themes/teams-high-contrast/components/Provider/providerVariables.ts
 create mode 100644 packages/react/src/themes/teams/components/Animation/animationStyles.ts
 create mode 100644 packages/react/src/themes/teams/components/Animation/animationVariables.ts
 delete mode 100644 packages/react/src/themes/teams/components/Icon/svg/icons/collapse.tsx
 delete mode 100644 packages/react/src/themes/teams/components/Icon/svg/icons/companion.tsx
 delete mode 100644 packages/react/src/themes/teams/components/Icon/svg/icons/expand.tsx
 delete mode 100644 packages/react/src/themes/teams/components/Icon/svg/icons/settingsAudio.tsx
 delete mode 100644 packages/react/src/themes/teams/components/Icon/svg/icons/shareTo.tsx
 create mode 100644 packages/react/src/themes/teams/components/Popup/popupStyles.ts
 create mode 100644 packages/react/src/themes/teams/components/Popup/popupVariables.ts
 rename packages/react/src/themes/teams/components/Provider/{providerStyles.ts => providerBoxStyles.ts} (85%)
 rename packages/react/src/themes/teams/components/Provider/{providerVariables.ts => providerBoxVariables.ts} (87%)
 create mode 100644 packages/react/src/themes/teams/components/Tooltip/tooltipStyles.ts
 create mode 100644 packages/react/src/themes/teams/components/Tooltip/tooltipVariables.ts
 delete mode 100644 packages/react/src/utils/positioner/initialStyles.ts
 delete mode 100644 packages/state/src/managers/checkboxManager.ts
 create mode 100644 packages/state/src/managers/listManager.ts
 delete mode 100644 packages/state/src/managers/sliderManager.ts

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 16330ee4e5..48794f1c58 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -77,12 +77,7 @@ jobs:
           command: yarn test:circulars
       - run:
           name: Flamegrill
-          command: |
-            if [ $CIRCLE_BRANCH == 'master' ]; then
-              yarn perf:test:base
-            else
-              yarn perf:test
-            fi
+          command: yarn perf:test
       - run:
           name: Bundle Statistics (master only)
           command: |
diff --git a/CHANGELOG.md b/CHANGELOG.md
index f42474fe2a..7232676b20 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,44 +17,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
-### BREAKING CHANGES
-- Restricted prop sets in the `Checkbox`, `Icon`, `Label`, `Slider`, `Status`, `Text` components which are passed to styles functions @layershifter ([#2307](https://github.com/microsoft/fluent-ui-react/pull/2307))
-- Styles caching when no inline overrides are defined is enabled by default; use the `performance` prop on the `Provider` to opt out of this if needed @mnajdova ([#2309](https://github.com/microsoft/fluent-ui-react/pull/2309))
-- Styles for the `Animation` component are removed from Teams theme @layershifter ([#2258](https://github.com/microsoft/fluent-ui-react/pull/2258))
-- Styles from `Popup` were moved `PopupContent` component @layershifter ([#2333](https://github.com/microsoft/fluent-ui-react/pull/2333))
-- Styles from `Tooltip` were moved `TooltipContent` component @layershifter ([#2333](https://github.com/microsoft/fluent-ui-react/pull/2333))
-- `ProviderBox` component was removed @layershifter ([#2192](https://github.com/microsoft/fluent-ui-react/pull/2192))
-- Styles and variables from `ProviderBox` are moved to `Provider` @layershifter ([#2192](https://github.com/microsoft/fluent-ui-react/pull/2192))
-- Fix an issue with `offset` and `pointing` in `Popup` @layershifter ([#2361](https://github.com/microsoft/fluent-ui-react/pull/2361))
-- Restricted prop set in the `TooltipContent` component which is passed to styles functions @layershifter ([#2357](https://github.com/microsoft/fluent-ui-react/pull/2357))
-- Restricted prop sets in the `Chat`, `ChatItem`, `ChatMessage` components which are passed to styles functions @layershifter ([#2366](https://github.com/microsoft/fluent-ui-react/pull/2366))
-
-### Fixes
-- Remove dependency on Lodash in TypeScript typings @layershifter ([#2323](https://github.com/microsoft/fluent-ui-react/pull/2323))
-- Fix missing aria-describedby in AlertBehavior @delprzemo ([#2208](https://github.com/microsoft/fluent-ui-react/pull/2208))
-- Fix page crash when `Tooltip` content is null @delprzemo ([#2332](https://github.com/microsoft/fluent-ui-react/pull/2332))
-- Fix `document` usage in `mergeProviderContexts` to get SSR working @layershifter ([#2330](https://github.com/microsoft/fluent-ui-react/pull/2330))
-- Fix `input` descenders being cropped in the Teams theme @bcalvery ([#2335](https://github.com/microsoft/fluent-ui-react/pull/2335))
-- Use referentially equal objects for `actions` in `useStateManager` @layershifter ([#2347](https://github.com/microsoft/fluent-ui-react/pull/2347))
-- Fix `Animation` component not to throw when `children` is not provided @mnajdova ([#2345](https://github.com/microsoft/fluent-ui-react/pull/2345))
-- Fix `loader` - adding labeling when loader get focus @kolaps33 ([#2352](https://github.com/microsoft/fluent-ui-react/pull/2352))
-- `setWhatInputSource()` changes DOM attribute in `whatInput` @layershifter ([#2359](https://github.com/microsoft/fluent-ui-react/pull/2359))
-- Styles from `Provider` are applied to components that rendered out of it in DOM @layershifter ([#2192](https://github.com/microsoft/fluent-ui-react/pull/2192))
-- Fix `Carousel` remove `CarouselItem` elements which are not visible @mnajdova ([#2356](https://github.com/microsoft/fluent-ui-react/pull/2356))
-
-### Features
-- Added sourcemaps to the dist output to simplify debugging @miroslavstastny ([#2329](https://github.com/microsoft/fluent-ui-react/pull/2329))
-- Adding 'expand', 'collapse', 'companion', 'share-to' and 'settings-audio' icons @TanelVari ([#2343](https://github.com/microsoft/fluent-ui-react/pull/2343))
-- Add support for Children API in `List` component @layershifter ([#2207](https://github.com/microsoft/fluent-ui-react/pull/2207))
-
-### Performance
-- Add styles caching when there aren't inline overrides defined @mnajdova ([#2309](https://github.com/microsoft/fluent-ui-react/pull/2309))
-- Styles for `Animation` component are computed again only on prop changes @layershifter ([#2258](https://github.com/microsoft/fluent-ui-react/pull/2258))
-
-<!--------------------------------[ v0.44.0 ]------------------------------- -->
-## [v0.44.0](https://github.com/microsoft/fluent-ui-react/tree/v0.44.0) (2020-02-05)
-[Compare changes](https://github.com/microsoft/fluent-ui-react/compare/v0.43.2..v0.44.0)
-
 ### BREAKING CHANGES
 - Add `@fluentui/styles` package for all styles' related utilities and TS types @layershifter, @mnajdova ([#2222](https://github.com/microsoft/fluent-ui-react/pull/2222))
 - Remove `animation` prop from all components @joschect ([#2239](https://github.com/microsoft/fluent-ui-react/pull/2239))
@@ -65,13 +27,14 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Restricted prop set in the `Button`, `Avatar`, `Box` and `Image` styles; changed `avatarBorderWidth` and `statusBorderWidth` avatar variables types from number to string and updated styles in Teams theme @mnajdova ([#2238](https://github.com/microsoft/fluent-ui-react/pull/2238))
 - Restricted prop set in the `List` & `ListItem` @layershifter ([#2238](https://github.com/microsoft/fluent-ui-react/pull/2238))
 - Remove `mountDocument` prop in `Popup` & `MenuButton` components @layershifter ([#2286](https://github.com/microsoft/fluent-ui-react/pull/2286))
-- Add typing `ComponentSlotStylesResolved`, that replaces the incorrect `ComponentSlotStylesPrepared` in the return value of `useStyles`, `renderComponent`, `createComponent` @mnajdova ([#2312](https://github.com/microsoft/fluent-ui-react/pull/2312))
 
 ### Fixes
+- Fix event listener leak in `FocusZone` @miroslavstastny ([#2227](https://github.com/microsoft/fluent-ui-react/pull/2227))
 - Fix styleParam to always be required in the styles functions @layershifter, @mnajdova ([#2235](https://github.com/microsoft/fluent-ui-react/pull/2235))
 - Check input and button refs exist before focus in `Dropdown` @silviuavram ([#2248](https://github.com/microsoft/fluent-ui-react/pull/2248))
 - Update iconOnly button hover, focus styles and add new `background5` and `backgroundHover2` design tokens in Teams theme @codepretty ([#2211](https://github.com/microsoft/fluent-ui-react/pull/2211))
 - Fix `forceUpdate` to get synced updates in React's Concurrent mode @layershifter ([#2268](https://github.com/microsoft/fluent-ui-react/pull/2268))
+- Fix element reference memory leaks @jurokapsiar ([#2270](https://github.com/microsoft/fluent-ui-react/pull/2270))
 - Adding actionable items into `Carousel` @kolaps33 ([#2271](https://github.com/microsoft/fluent-ui-react/pull/2271))
 
 ### Features
@@ -79,38 +42,10 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `useStyles()` hook to use theming capabilities in custom components @layershifter, @mnajdova ([#2217](https://github.com/microsoft/fluent-ui-react/pull/2217))
 - Add optional wrapper function to `List` which can be used to inject custom scrollbars to `Dropdown` @jurokapsiar ([#2092](https://github.com/microsoft/fluent-ui-react/pull/2092))
 - Add `useTelemetry()` hook for adding telemetry information for the Fluent components and improve return types for the `useStyles` and `useStateManager` hooks @mnajdova ([#2257](https://github.com/microsoft/fluent-ui-react/pull/2257))
-- Add new `backgroundHover1` Red design tokens in Teams theme @codepretty ([#2297](https://github.com/microsoft/fluent-ui-react/pull/2297))
-- Add `target` prop to `EventListener` component and `useEventListener()` hook @layershifter ([#2287](https://github.com/microsoft/fluent-ui-react/pull/2287))
-- Add `disabled` prop accordion title @jurokapsiar ([#2290](https://github.com/microsoft/fluent-ui-react/pull/2290))
-- Allow custom values for `size` in `FlexItem` @silviuavram ([#2313](https://github.com/microsoft/fluent-ui-react/pull/2313))
-- Move `zIndex` values from default variable values and styles to siteVariables object in Teams theme @pompomon ([#2311](https://github.com/microsoft/fluent-ui-react/pull/2311)) 
 
 ### Documentation
 - Add per-component performance charts @miroslavstastny ([#2240](https://github.com/microsoft/fluent-ui-react/pull/2240))
 
-<!--------------------------------[ v0.43.2 ]------------------------------- -->
-## [v0.43.2](https://github.com/microsoft/fluent-ui-react/tree/v0.43.2) (2020-02-05)
-[Compare changes](https://github.com/microsoft/fluent-ui-react/compare/v0.43.1..v0.43.2)
-
-### BREAKING CHANGES
-- Remove `toRefObject` function @layershifter ([#2287](https://github.com/microsoft/fluent-ui-react/pull/2287))
-
-### Fixes
-- Fix positioning fixes for `actions` in `ChatMessage` @layershifter ([#2300](https://github.com/microsoft/fluent-ui-react/pull/2300))
-- `FocusZone`: Cleanup DOM element references when the component is unmounted @johannao76 ([#2306](https://github.com/microsoft/fluent-ui-react/pull/2306))
-
-### Documentation
-- Fix dependencies in project exported to codesandbox @miroslavstastny ([#2314](https://github.com/microsoft/fluent-ui-react/pull/2314))
-
-<!--------------------------------[ v0.43.1 ]------------------------------- -->
-## [v0.43.1](https://github.com/microsoft/fluent-ui-react/tree/v0.43.1) (2020-01-30)
-[Compare changes](https://github.com/microsoft/fluent-ui-react/compare/v0.43.0..v0.43.1)
-
-### Fixes
-- Fix event listener leak in `FocusZone` @miroslavstastny ([#2227](https://github.com/microsoft/fluent-ui-react/pull/2227))
-- Fix element reference memory leaks @jurokapsiar ([#2270](https://github.com/microsoft/fluent-ui-react/pull/2270))
-- Fix element leak in `refFindNode` @miroslavstastny ([#2288](https://github.com/microsoft/fluent-ui-react/pull/2288))
-
 <!--------------------------------[ v0.43.0 ]------------------------------- -->
 ## [v0.43.0](https://github.com/microsoft/fluent-ui-react/tree/v0.43.0) (2020-01-08)
 [Compare changes](https://github.com/microsoft/fluent-ui-react/compare/v0.42.0..v0.43.0)
diff --git a/build/babel/index.js b/build/babel/index.js
index 54bff2b3c9..3948f5bf8b 100644
--- a/build/babel/index.js
+++ b/build/babel/index.js
@@ -31,9 +31,7 @@ module.exports = api => {
   ]
   const plugins = [
     '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-proposal-nullish-coalescing-operator',
     ['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }],
-    '@babel/plugin-proposal-optional-chaining',
     '@babel/plugin-syntax-dynamic-import',
     ['@babel/plugin-transform-runtime', { useESModules }],
 
diff --git a/build/dangerjs/checkPerfRegressions.ts b/build/dangerjs/checkPerfRegressions.ts
index 5ca679efd5..a21a4488d2 100644
--- a/build/dangerjs/checkPerfRegressions.ts
+++ b/build/dangerjs/checkPerfRegressions.ts
@@ -18,7 +18,14 @@ function linkToFlamegraph(value, filename) {
   )})`
 }
 
-function fluentFabricComparison(perfCounts, danger, markdown, warn) {
+function fluentFabricComparision(danger, markdown, warn) {
+  let perfCounts
+  try {
+    perfCounts = require(config.paths.packageDist('perf-test', 'perfCounts.json'))
+  } catch {
+    warn('No perf measurements available')
+    return
+  }
   const results = _.mapValues(
     _.pickBy(perfCounts, (value, key) => key.endsWith('.Fluent')),
     stats => {
@@ -59,85 +66,7 @@ function fluentFabricComparison(perfCounts, danger, markdown, warn) {
     ].join('\n'),
   )
 }
-function currentToMasterComparison(perfCounts, danger, markdown, warn) {
-  const results = _.map(
-    _.pickBy(perfCounts, value => _.has(value, 'analysis.regression')),
-    (stats, name) => {
-      const currentTicks = _.get(stats, 'analysis.numTicks')
-      const baselineTicks = _.get(stats, 'analysis.baseline.numTicks')
-
-      return {
-        name,
-        numTicks: currentTicks,
-        flamegraphFile: _.get(stats, 'processed.output.flamegraphFile'),
-        baseline: {
-          numTicks: baselineTicks,
-          flamegraphFile: _.get(stats, 'processed.baseline.output.flamegraphFile'),
-        },
-        isRegression: _.get(stats, 'analysis.regression.isRegression'),
-        currentToBaseline: Math.round((currentTicks / baselineTicks) * 100) / 100,
-      }
-    },
-  )
-
-  const regressions = _.sortBy(
-    _.filter(results, 'isRegression'),
-    stats => stats.currentToBaseline * -1,
-  )
-
-  if (regressions.length > 0) {
-    warn(`${regressions.length} perf regressions detected`)
-    markdown(
-      [
-        '## Potential regressions comparing to master',
-        '',
-        'Scenario | Current PR Ticks | Baseline Ticks | Ratio',
-        ':--- | ---:| ---:| ---:',
-        ..._.map(regressions, (value, key) =>
-          [
-            value.name,
-            linkToFlamegraph(value.numTicks, value.flamegraphFile),
-            linkToFlamegraph(value.baseline.numTicks, value.baseline.flamegraphFile),
-            `${value.currentToBaseline}:1`,
-          ].join(' | '),
-        ),
-      ].join('\n'),
-    )
-  }
-
-  const noRegressions = _.sortBy(
-    _.filter(results, stats => !stats.isRegression),
-    stats => stats.currentToBaseline * -1,
-  )
-  markdown(
-    [
-      '<details><summary>Perf tests with no regressions</summary>',
-      '',
-      'Scenario | Current PR Ticks | Baseline Ticks | Ratio',
-      ':--- | ---:| ---:| ---:',
-      ..._.map(noRegressions, (value, key) =>
-        [
-          value.name,
-          linkToFlamegraph(value.numTicks, value.flamegraphFile),
-          linkToFlamegraph(value.baseline.numTicks, value.baseline.flamegraphFile),
-          `${value.currentToBaseline}:1`,
-        ].join(' | '),
-      ),
-      '',
-      '</details>',
-    ].join('\n'),
-  )
-}
 
 export default ({ danger, markdown, warn }: DangerJS) => {
-  let perfCounts
-  try {
-    perfCounts = require(config.paths.packageDist('perf-test', 'perfCounts.json'))
-  } catch {
-    warn('No perf measurements available')
-    return
-  }
-
-  fluentFabricComparison(perfCounts, danger, markdown, warn)
-  currentToMasterComparison(perfCounts, danger, markdown, warn)
+  fluentFabricComparision(danger, markdown, warn)
 }
diff --git a/build/gulp/tasks/bundle.ts b/build/gulp/tasks/bundle.ts
index cbdf189db2..fcd9fd2049 100644
--- a/build/gulp/tasks/bundle.ts
+++ b/build/gulp/tasks/bundle.ts
@@ -1,6 +1,5 @@
 import { task, series, parallel, src, dest } from 'gulp'
 import babel from 'gulp-babel'
-import sourcemaps from 'gulp-sourcemaps'
 import { log, PluginError } from 'gulp-util'
 import del from 'del'
 import webpack from 'webpack'
@@ -35,17 +34,13 @@ const componentsSrc = [
 
 task('bundle:package:commonjs', () =>
   src(componentsSrc)
-    .pipe(sourcemaps.init())
     .pipe(babel())
-    .pipe(sourcemaps.write('.'))
     .pipe(dest(paths.packageDist(packageName, 'commonjs'))),
 )
 
 task('bundle:package:es', () =>
   src(componentsSrc)
-    .pipe(sourcemaps.init())
     .pipe(babel({ caller: { useESModules: true } } as any))
-    .pipe(sourcemaps.write('.'))
     .pipe(dest(paths.packageDist(packageName, 'es'))),
 )
 
diff --git a/build/gulp/tasks/test-projects.ts b/build/gulp/tasks/test-projects.ts
index 8cc74d1a1b..db86817347 100644
--- a/build/gulp/tasks/test-projects.ts
+++ b/build/gulp/tasks/test-projects.ts
@@ -205,35 +205,6 @@ task('test:projects:rollup', async () => {
   logger(`✔️Browser test was passed`)
 })
 
-task('test:projects:nextjs', async () => {
-  const logger = log('test:projects:nextjs')
-
-  const scaffoldPath = paths.base.bind(null, 'build/gulp/tasks/test-projects/nextjs')
-  const tmpDirectory = tmp.dirSync({ prefix: 'project-' }).name
-
-  logger(`✔️Temporary directory was created: ${tmpDirectory}`)
-
-  const dependencies = ['next', 'react', 'react-dom'].join(' ')
-  await runIn(tmpDirectory)(`yarn add ${dependencies}`)
-  logger(`✔️Dependencies were installed`)
-
-  const packedPackages = await packProjectPackages(logger)
-  await addResolutionPathsForProjectPackages(tmpDirectory, packedPackages)
-  await runIn(tmpDirectory)(`yarn add ${packedPackages['@fluentui/react']}`)
-  logger(`✔️Fluent UI packages were added to dependencies`)
-
-  fs.mkdirSync(path.resolve(tmpDirectory, 'pages'))
-  fs.copyFileSync(scaffoldPath('index.js'), path.resolve(tmpDirectory, 'pages', 'index.js'))
-  logger(`✔️Source and bundler's config were created`)
-
-  await runIn(tmpDirectory)(`yarn next build`)
-  await runIn(tmpDirectory)(`yarn next export`)
-  logger(`✔️Example project was successfully built: ${tmpDirectory}`)
-
-  await performBrowserTest(path.resolve(tmpDirectory, 'out'), await portfinder.getPortPromise())
-  logger(`✔️Browser test was passed`)
-})
-
 task('test:projects:typings', async () => {
   const logger = log('test:projects:typings')
 
@@ -271,7 +242,6 @@ task(
   series(
     'bundle:all-packages',
     'test:projects:cra-ts',
-    'test:projects:nextjs',
     'test:projects:rollup',
     'test:projects:typings',
   ),
diff --git a/build/gulp/tasks/test-projects/nextjs/index.js b/build/gulp/tasks/test-projects/nextjs/index.js
deleted file mode 100644
index 38bf6638cb..0000000000
--- a/build/gulp/tasks/test-projects/nextjs/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Button, Dropdown, Provider, themes } from '@fluentui/react'
-import React from 'react'
-
-const Page = () => (
-  <Provider theme={themes.teams}>
-    <Dropdown items={['Foo', 'Bar', 'Baz', 'Qux']} />
-    <Button>Welcome to Next.js!</Button>
-  </Provider>
-)
-
-export default Page
diff --git a/build/gulp/tasks/test-projects/typings/tsconfig.json b/build/gulp/tasks/test-projects/typings/tsconfig.json
index 91273a3039..44589f338f 100644
--- a/build/gulp/tasks/test-projects/typings/tsconfig.json
+++ b/build/gulp/tasks/test-projects/typings/tsconfig.json
@@ -2,8 +2,7 @@
   "compilerOptions": {
     "jsx": "react",
     "lib": ["dom", "dom.iterable", "esnext"],
-    "target": "es5",
-    "strict": true
+    "target": "es5"
   },
   "include": ["src"]
 }
diff --git a/build/package.json b/build/package.json
index de1940f5af..467bf9ab93 100644
--- a/build/package.json
+++ b/build/package.json
@@ -1,31 +1,29 @@
 {
   "name": "@fluentui/internal-tooling",
-  "version": "0.44.0",
+  "version": "0.43.0",
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "@babel/core": "^7.7.7",
-    "@babel/plugin-proposal-class-properties": "^7.7.4",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.7.4",
-    "@babel/plugin-proposal-optional-chaining": "^7.7.5",
-    "@babel/plugin-syntax-dynamic-import": "^7.7.4",
-    "@babel/plugin-transform-runtime": "^7.7.6",
-    "@babel/preset-env": "^7.7.6",
-    "@babel/preset-react": "^7.7.4",
-    "@babel/preset-typescript": "^7.7.7",
-    "@babel/register": "^7.7.7",
-    "@babel/standalone": "^7.7.7",
-    "@fluentui/eslint-plugin": "^0.44.0",
+    "@babel/core": "^7.6.4",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.6.2",
+    "@babel/preset-env": "^7.6.3",
+    "@babel/preset-react": "^7.6.3",
+    "@babel/preset-typescript": "^7.6.0",
+    "@babel/register": "^7.4.4",
+    "@babel/standalone": "^7.3.2",
+    "@fluentui/eslint-plugin": "^0.43.0",
     "@mdx-js/loader": "^1.0.21",
     "@types/babel__traverse": "^7.0.4",
     "@types/express": "^4.16.1",
     "@types/gulp": "^4.0.6",
     "@types/gulp-babel": "6.1.29",
     "@types/gulp-cache": "^0.4.4",
-    "@types/gulp-remember": "^0.0.31",
     "@types/gulp-util": "^3.0.34",
-    "@types/jest": "^24.0.19",
+    "@types/gulp-remember": "^0.0.31",
     "@types/jest-axe": "^3.2.1",
+    "@types/jest": "^24.0.19",
     "@types/lerna-alias": "^3.0.0",
     "@types/node": "^10.3.2",
     "@types/puppeteer": "^1.11.1",
@@ -49,8 +47,8 @@
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jest": "^22.4.1",
     "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-react": "^7.16.0",
     "eslint-plugin-react-hooks": "^2.1.2",
+    "eslint-plugin-react": "^7.16.0",
     "express": "^4.15.4",
     "extract-comments": "^1.0.0",
     "fork-ts-checker-webpack-plugin": "^1.3.3",
@@ -59,7 +57,6 @@
     "gulp-babel": "^8.0.0",
     "gulp-cache": "^1.0.2",
     "gulp-remember": "^1.0.1",
-    "gulp-sourcemaps": "^2.6.5",
     "gulp-util": "^3.0.8",
     "html-webpack-plugin": "^4.0.0-beta.5",
     "jest": "^24.9.0",
@@ -81,7 +78,7 @@
     "tmp": "^0.0.33",
     "tsconfig-paths": "^3.7.0",
     "webpack": "^4.35.0",
-    "webpack-bundle-analyzer": "^3.6.0",
+    "webpack-bundle-analyzer": "^3.3.2",
     "webpack-dev-middleware": "^3.6.2",
     "webpack-hot-middleware": "^2.24.3"
   },
diff --git a/build/webpack.config.ts b/build/webpack.config.ts
index 7d9b6bcb7f..8c3932eaaa 100644
--- a/build/webpack.config.ts
+++ b/build/webpack.config.ts
@@ -141,7 +141,7 @@ const webpackConfig: webpack.Configuration = {
 // Environment Configuration
 // ------------------------------------
 if (__DEV__) {
-  const webpackHotPath = `${config.compiler_public_path}__webpack_hmr`
+  const webpackHotPath = `${config.compiler_public_path}__compiler_hmr`
   const webpackHotMiddlewareEntry = `webpack-hot-middleware/client?${_.map(
     {
       path: webpackHotPath, // The path which the middleware is serving the event stream on
diff --git a/dangerfile.ts b/dangerfile.ts
index e15ce53a37..9e70c5c2ec 100644
--- a/dangerfile.ts
+++ b/dangerfile.ts
@@ -1,4 +1,4 @@
-import { danger, fail, warn, markdown, message } from 'danger'
+import { danger, fail, warn, markdown } from 'danger'
 import checkChangelog from './build/dangerjs/checkChangelog'
 import detectChangedDependencies from './build/dangerjs/detectChangedDependencies'
 import detectNonApprovedDependencies from './build/dangerjs/detectNonApprovedDependencies'
@@ -8,7 +8,7 @@ import checkPerfRegressions from './build/dangerjs/checkPerfRegressions'
  * This trick (of explicitly passing Danger JS utils as function arg, instead of importing them at places where needed)
  * is necessary due to the magic DangerJS is doing with imports: https://spectrum.chat/danger/javascript/danger-js-actually-runs-your-imports-as-globals~0a005b56-31ec-4919-9a28-ced623949d4d
  */
-const dangerJS = { danger, fail, warn, markdown, message }
+const dangerJS = { danger, fail, warn, markdown }
 
 export default async () => {
   await checkChangelog(dangerJS)
diff --git a/docs/package.json b/docs/package.json
index 60c39bdf94..753a95976b 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/docs",
-  "version": "0.44.0",
+  "version": "0.43.0",
   "private": true,
   "license": "MIT",
   "dependencies": {
@@ -21,7 +21,7 @@
     "react-vis": "^1.11.6"
   },
   "devDependencies": {
-    "@fluentui/internal-tooling": "^0.44.0",
+    "@fluentui/internal-tooling": "^0.43.0",
     "@types/color": "^3.0.0",
     "@types/faker": "^4.1.3",
     "@types/gulp": "^4.0.6",
diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
index 0c340ce3ce..40de177c14 100644
--- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
+++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
@@ -461,7 +461,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
     const newTheme: ThemeInput = {
       componentVariables: {
         ...componentVariables,
-        Provider: { background: showTransparent ? 'initial' : undefined },
+        ProviderBox: { background: showTransparent ? 'initial' : undefined },
       },
     }
     const exampleStyles = {
diff --git a/docs/src/components/ComponentDoc/ComponentPerfExample/ComponentPerfChart.tsx b/docs/src/components/ComponentDoc/ComponentPerfExample/ComponentPerfChart.tsx
index 3e2012c9b5..a2b84d1935 100644
--- a/docs/src/components/ComponentDoc/ComponentPerfExample/ComponentPerfChart.tsx
+++ b/docs/src/components/ComponentDoc/ComponentPerfExample/ComponentPerfChart.tsx
@@ -27,7 +27,7 @@ export const ComponentPerfChart = ({ perfTestName }) => {
     case FILTER_BY.RELEASE:
       filteredData = data.filter(entry => entry.tag)
 
-      if (!data[0]?.tag) {
+      if (!data[0].tag) {
         const unreleased = { ...data[0], tag: 'UNRELEASED' }
         filteredData.unshift(unreleased)
       }
diff --git a/docs/src/components/Playground/renderConfig.ts b/docs/src/components/Playground/renderConfig.ts
index 1eec4462e6..34ba8d3029 100644
--- a/docs/src/components/Playground/renderConfig.ts
+++ b/docs/src/components/Playground/renderConfig.ts
@@ -8,7 +8,6 @@ import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import * as Classnames from 'classnames'
 
-const accessibilityPackageJson = require('@fluentui/accessibility/package.json')
 const docsComponentsPackageJson = require('@fluentui/docs-components/package.json')
 const projectPackageJson = require('@fluentui/react/package.json')
 
@@ -24,7 +23,7 @@ export const babelConfig = {
 
 export const imports: Record<string, { version: string; module: any }> = {
   '@fluentui/accessibility': {
-    version: accessibilityPackageJson.version,
+    version: projectPackageJson.version,
     module: Accessibility,
   },
 
diff --git a/docs/src/components/Sidebar/Sidebar.tsx b/docs/src/components/Sidebar/Sidebar.tsx
index a034b6e1cc..cd98f45bee 100644
--- a/docs/src/components/Sidebar/Sidebar.tsx
+++ b/docs/src/components/Sidebar/Sidebar.tsx
@@ -164,28 +164,6 @@ class Sidebar extends React.Component<any, any> {
               to: '/shorthand-props',
             },
           },
-          {
-            key: 'component-architecture',
-            title: {
-              as: NavLink,
-              content: 'Component Architecture',
-              activeClassName: 'active',
-              to: '/component-architecture',
-            },
-          },
-          ...(process.env.NODE_ENV !== 'production'
-            ? [
-                {
-                  key: 'theming-specification',
-                  title: {
-                    as: NavLink,
-                    content: 'Theming Specification',
-                    activeClassName: 'active',
-                    to: '/theming-specification',
-                  },
-                },
-              ]
-            : []),
         ],
       },
       {
diff --git a/docs/src/examples/components/Animation/Usage/AnimationExampleVisible.shorthand.tsx b/docs/src/examples/components/Animation/Usage/AnimationExampleVisible.shorthand.tsx
index 1bbecbc0e0..8df9128842 100644
--- a/docs/src/examples/components/Animation/Usage/AnimationExampleVisible.shorthand.tsx
+++ b/docs/src/examples/components/Animation/Usage/AnimationExampleVisible.shorthand.tsx
@@ -42,6 +42,10 @@ const AnimationExampleVisible = () => {
       {/* Children as function */}
       <Animation
         visible={visible}
+        timeout={{
+          enter: 1000,
+          exit: 2000,
+        }}
         onEnter={onEnter}
         onEntering={onEntering}
         onEntered={onEntered}
@@ -57,6 +61,10 @@ const AnimationExampleVisible = () => {
       {/* Children as element */}
       <Animation
         visible={visible}
+        timeout={{
+          enter: 1000,
+          exit: 2000,
+        }}
         onEnter={onEnter}
         onEntering={onEntering}
         onEntered={onEntered}
diff --git a/docs/src/examples/components/Carousel/Variations/CarouselExampleWithFocusableElements.tsx b/docs/src/examples/components/Carousel/Variations/CarouselExampleWithFocusableElements.tsx
index 0114a21a0e..046d5d6fc4 100644
--- a/docs/src/examples/components/Carousel/Variations/CarouselExampleWithFocusableElements.tsx
+++ b/docs/src/examples/components/Carousel/Variations/CarouselExampleWithFocusableElements.tsx
@@ -23,7 +23,7 @@ const carouselTextContent = (
   </Text>
 )
 
-const buttonStyles = { margin: '40px 0px 0px 10px' }
+const buttonStyles = { margin: '40px 0px 10px 10px' }
 const imageStyles = { maxWidth: '70px', maxHeight: '70px', margin: '15px 0px 0px 5px' }
 
 const carouselToolbarContent = (
diff --git a/docs/src/examples/components/Chat/Content/ChatExampleActions.shorthand.steps.ts b/docs/src/examples/components/Chat/Content/ChatExampleActions.shorthand.steps.ts
deleted file mode 100644
index bbd5b7798f..0000000000
--- a/docs/src/examples/components/Chat/Content/ChatExampleActions.shorthand.steps.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { ChatMessage } from '@fluentui/react'
-
-const selectors = {
-  message: `.${ChatMessage.className}`,
-}
-
-const config: ScreenerTestsConfig = {
-  themes: ['teams', 'teamsDark', 'teamsHighContrast'],
-  steps: [
-    builder => builder.hover(selectors.message).snapshot('Hovers the first message'),
-    builder => builder.click(selectors.message).snapshot('Focus the first message via mouse click'),
-    (builder, keys) => builder.keys('body', keys.tab).snapshot('Focuses a message via keyboard'),
-  ],
-}
-
-export default config
diff --git a/docs/src/examples/components/Chat/Usage/ChatExampleInScrollable.shorthand.tsx b/docs/src/examples/components/Chat/Usage/ChatExampleInScrollable.shorthand.tsx
index 006939644a..768fb9df11 100644
--- a/docs/src/examples/components/Chat/Usage/ChatExampleInScrollable.shorthand.tsx
+++ b/docs/src/examples/components/Chat/Usage/ChatExampleInScrollable.shorthand.tsx
@@ -27,7 +27,7 @@ const ChatExampleInScrollableShorthand = () => {
   })
   const [width] = useRangeKnob({
     name: 'width',
-    initialValue: '500px',
+    initialValue: '400px',
     min: '100px',
     max: '500px',
     step: 10,
@@ -81,22 +81,6 @@ const ChatExampleInScrollableShorthand = () => {
       ),
       key: 'message-3',
     },
-    {
-      message: (
-        <Chat.Message actionMenu={actionMenu} content="How are you?" unstable_overflow={overflow} />
-      ),
-      key: 'message-4',
-    },
-    {
-      message: (
-        <Chat.Message
-          actionMenu={actionMenu}
-          content="Do you want something?"
-          unstable_overflow={overflow}
-        />
-      ),
-      key: 'message-5',
-    },
   ]
 
   return (
diff --git a/docs/src/examples/components/Dialog/Variations/DialogExampleScroll.shorthand.steps.ts b/docs/src/examples/components/Dialog/Variations/DialogExampleScroll.shorthand.steps.ts
deleted file mode 100644
index 5262188359..0000000000
--- a/docs/src/examples/components/Dialog/Variations/DialogExampleScroll.shorthand.steps.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import getScreenerSteps from '../commonScreenerSteps'
-
-const config: ScreenerTestsConfig = {
-  themes: ['teams', 'teamsDark', 'teamsHighContrast'],
-  steps: getScreenerSteps(),
-}
-
-export default config
diff --git a/docs/src/examples/components/Dialog/Variations/DialogExampleScroll.shorthand.tsx b/docs/src/examples/components/Dialog/Variations/DialogExampleScroll.shorthand.tsx
deleted file mode 100644
index 004ef5c384..0000000000
--- a/docs/src/examples/components/Dialog/Variations/DialogExampleScroll.shorthand.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Button, Dialog } from '@fluentui/react'
-import * as React from 'react'
-import * as _ from 'lodash'
-
-const DialogExampleScroll = () => (
-  <Dialog
-    content={{
-      content: (
-        <>
-          {_.times(10, i => (
-            <p key={i}>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare, neque eget
-              egestas fermentum, massa risus mollis orci, et ullamcorper purus turpis at risus.
-              Fusce pharetra mollis sapien nec commodo. Quisque ut congue sem, vel aliquam augue.
-              Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
-              Curae; Duis porttitor, nunc quis dapibus imperdiet, ligula sem egestas orci, sed
-              volutpat ipsum felis vitae velit. Sed maximus egestas dui elementum aliquam. In hac
-              habitasse platea dictumst. Proin maximus nibh velit, ut ornare dui mollis viverra.
-            </p>
-          ))}
-        </>
-      ),
-      styles: {
-        height: '500px',
-        overflow: 'scroll',
-      },
-    }}
-    trigger={<Button content="Open a dialog" />}
-  />
-)
-
-export default DialogExampleScroll
diff --git a/docs/src/examples/components/Dialog/index.tsx b/docs/src/examples/components/Dialog/index.tsx
index e088897d13..4e8c1eb86f 100644
--- a/docs/src/examples/components/Dialog/index.tsx
+++ b/docs/src/examples/components/Dialog/index.tsx
@@ -6,9 +6,6 @@ import Rtl from './Rtl'
 import Variations from './Variations'
 import Usage from './Usage'
 
-import NonPublicSection from 'docs/src/components/ComponentDoc/NonPublicSection'
-import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample/ComponentExample'
-
 const DialogExamples = () => (
   <>
     <Types />
@@ -16,9 +13,6 @@ const DialogExamples = () => (
     <Content />
     <Usage />
     <Rtl />
-    <NonPublicSection title="Visual tests">
-      <ComponentExample examplePath="components/Dialog/Variations/DialogExampleScroll" />
-    </NonPublicSection>
   </>
 )
 
diff --git a/docs/src/examples/components/List/Content/ListExampleContent.tsx b/docs/src/examples/components/List/Content/ListExampleContent.tsx
index 0af74a9f5b..d1287a2b6e 100644
--- a/docs/src/examples/components/List/Content/ListExampleContent.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleContent.tsx
@@ -3,15 +3,9 @@ import { List } from '@fluentui/react'
 
 const ListExample = () => (
   <List>
-    <List.Item
-      header="Program the sensor to the SAS alarm through the haptic SQL card!"
-      index={0}
-    />
-    <List.Item
-      header="Use the online FTP application to input the multi-byte application!"
-      index={1}
-    />
-    <List.Item header="The GB pixel is down, navigate the virtual interface!" index={2} />
+    <List.Item header="Program the sensor to the SAS alarm through the haptic SQL card!" />
+    <List.Item header="Use the online FTP application to input the multi-byte application!" />
+    <List.Item header="The GB pixel is down, navigate the virtual interface!" />
   </List>
 )
 
diff --git a/docs/src/examples/components/List/Content/ListExampleContentMedia.tsx b/docs/src/examples/components/List/Content/ListExampleContentMedia.tsx
index 777b5c0131..b7b58bf498 100644
--- a/docs/src/examples/components/List/Content/ListExampleContentMedia.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleContentMedia.tsx
@@ -6,17 +6,14 @@ const ListExample = () => (
     <List.Item
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
       contentMedia="7:26:56 AM"
-      index={0}
     />
     <List.Item
       content="Use the online FTP application to input the multi-byte application!"
       contentMedia="11:30:17 PM"
-      index={1}
     />
     <List.Item
       content="The GB pixel is down, navigate the virtual interface!"
       contentMedia="5:22:40 PM"
-      index={2}
     />
   </List>
 )
diff --git a/docs/src/examples/components/List/Content/ListExampleEndMedia.tsx b/docs/src/examples/components/List/Content/ListExampleEndMedia.tsx
index e0b855c182..2aa902d2ce 100644
--- a/docs/src/examples/components/List/Content/ListExampleEndMedia.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleEndMedia.tsx
@@ -9,19 +9,16 @@ const ListExample = () => (
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
       endMedia={ellipsis}
       selectable
-      index={0}
     />
     <List.Item
       content="Use the online FTP application to input the multi-byte application!"
       endMedia={ellipsis}
       selectable
-      index={1}
     />
     <List.Item
       content="The GB pixel is down, navigate the virtual interface!"
       endMedia={ellipsis}
       selectable
-      index={2}
     />
   </List>
 )
diff --git a/docs/src/examples/components/List/Content/ListExampleHeader.tsx b/docs/src/examples/components/List/Content/ListExampleHeader.tsx
index 54d707793b..0839a297d1 100644
--- a/docs/src/examples/components/List/Content/ListExampleHeader.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleHeader.tsx
@@ -3,9 +3,9 @@ import { List } from '@fluentui/react'
 
 const ListExample = () => (
   <List>
-    <List.Item header="Irving Kuhic" index={0} />
-    <List.Item header="Skyler Parks" index={1} />
-    <List.Item header="Dante Schneider" index={2} />
+    <List.Item header="Irving Kuhic" />
+    <List.Item header="Skyler Parks" />
+    <List.Item header="Dante Schneider" />
   </List>
 )
 
diff --git a/docs/src/examples/components/List/Content/ListExampleHeaderContent.tsx b/docs/src/examples/components/List/Content/ListExampleHeaderContent.tsx
index a9bbceea56..b1822eb1fe 100644
--- a/docs/src/examples/components/List/Content/ListExampleHeaderContent.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleHeaderContent.tsx
@@ -6,17 +6,14 @@ const ListExample = () => (
     <List.Item
       header="Irving Kuhic"
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
-      index={0}
     />
     <List.Item
       header="Skyler Parks"
       content="Use the online FTP application to input the multi-byte application!"
-      index={1}
     />
     <List.Item
       header="Dante Schneider"
       content="The GB pixel is down, navigate the virtual interface!"
-      index={2}
     />
   </List>
 )
diff --git a/docs/src/examples/components/List/Content/ListExampleHeaderMedia.tsx b/docs/src/examples/components/List/Content/ListExampleHeaderMedia.tsx
index 971cd68712..91b19c8d95 100644
--- a/docs/src/examples/components/List/Content/ListExampleHeaderMedia.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleHeaderMedia.tsx
@@ -3,9 +3,9 @@ import { List } from '@fluentui/react'
 
 const ListExample = () => (
   <List>
-    <List.Item header="Irving Kuhic" headerMedia="7:26:56 AM" index={0} />
-    <List.Item header="Skyler Parks" headerMedia="11:30:17 PM" index={1} />
-    <List.Item header="Dante Schneider" headerMedia="5:22:40 PM" index={2} />
+    <List.Item header="Irving Kuhic" headerMedia="7:26:56 AM" />
+    <List.Item header="Skyler Parks" headerMedia="11:30:17 PM" />
+    <List.Item header="Dante Schneider" headerMedia="5:22:40 PM" />
   </List>
 )
 
diff --git a/docs/src/examples/components/List/Content/ListExampleMedia.tsx b/docs/src/examples/components/List/Content/ListExampleMedia.tsx
index 3da3a4c7d9..6028eef957 100644
--- a/docs/src/examples/components/List/Content/ListExampleMedia.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleMedia.tsx
@@ -8,21 +8,18 @@ const ListExampleMedia = () => (
       header="Irving Kuhic"
       headerMedia="7:26:56 AM"
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
-      index={0}
     />
     <List.Item
       media={<Image src="public/images/avatar/small/steve.jpg" avatar />}
       header="Skyler Parks"
       headerMedia="11:30:17 PM"
       content="Use the online FTP application to input the multi-byte application!"
-      index={1}
     />
     <List.Item
       media={<Image src="public/images/avatar/small/nom.jpg" avatar />}
       header="Dante Schneider"
       headerMedia="5:22:40 PM"
       content="The GB pixel is down, navigate the virtual interface!"
-      index={2}
     />
   </List>
 )
diff --git a/docs/src/examples/components/List/Performance/ListNested.perf.tsx b/docs/src/examples/components/List/Performance/ListNested.perf.tsx
deleted file mode 100644
index 22497bc11c..0000000000
--- a/docs/src/examples/components/List/Performance/ListNested.perf.tsx
+++ /dev/null
@@ -1,865 +0,0 @@
-import { List } from '@fluentui/react'
-import * as React from 'react'
-
-const items = [
-  {
-    key: 'item-0',
-    media: 'ecd4:f115:0db5:e490:4680:e0bb:ed31:ef38',
-    header: 'Golden19',
-    headerMedia: '2/11/2019',
-    content: 'Veritatis labore tenetur eius similique voluptatem qui labore consequuntur eaque.',
-    contentMedia: 'Molestiae modi qui ipsam odio unde praesentium.',
-  },
-  {
-    key: 'item-1',
-    media: '812d:173e:02c2:3c33:d0a8:d86c:327b:4356',
-    header: 'Christine.Feeney',
-    headerMedia: '3/8/2019',
-    content: 'Sequi voluptas corporis vel deleniti exercitationem ipsam rem hic.',
-    contentMedia: 'Nulla quae minima.',
-  },
-  {
-    key: 'item-2',
-    media: '2f5e:5dab:e88c:b583:b512:b2c3:ecf6:f860',
-    header: 'Amaya.Ritchie',
-    headerMedia: '6/22/2019',
-    content: 'Neque nobis totam rerum.',
-    contentMedia: 'Aut tempora eaque rem blanditiis.',
-  },
-  {
-    key: 'item-3',
-    media: 'b072:ad2d:9ee1:f790:5e46:7b8c:75d1:4140',
-    header: 'Cora.Rippin22',
-    headerMedia: '7/13/2019',
-    content: 'Alias error tempore dolorem laudantium sapiente.',
-    contentMedia: 'Quis ducimus explicabo quia quia rerum dolor deserunt unde.',
-  },
-  {
-    key: 'item-4',
-    media: '9fbb:5c11:582f:e8dd:4e79:f56a:0acb:6bf9',
-    header: 'Melyssa_Walker3',
-    headerMedia: '9/26/2019',
-    content: 'Eum quo non eum repellendus facere sint.',
-    contentMedia: 'Fuga explicabo et ad labore voluptas voluptatibus et perspiciatis.',
-  },
-  {
-    key: 'item-5',
-    media: 'a6ba:8322:b8e2:98ad:f86d:9e87:6322:4058',
-    header: 'Martina.Cronin',
-    headerMedia: '11/27/2019',
-    content: 'Dolorem eveniet dolores repellat officia temporibus sequi.',
-    contentMedia: 'Odio commodi laborum nobis quia.',
-  },
-  {
-    key: 'item-6',
-    media: '5fcd:fa53:c6f1:3bc0:9add:2fd4:d01d:4bf7',
-    header: 'Trinity16',
-    headerMedia: '1/16/2020',
-    content: 'Debitis culpa sit consequatur corrupti.',
-    contentMedia: 'Vero placeat id.',
-  },
-  {
-    key: 'item-7',
-    media: 'f5fe:4259:50e5:72cd:67b3:650b:27c8:5ebc',
-    header: 'Emmet14',
-    headerMedia: '5/10/2019',
-    content: 'Ratione omnis nesciunt repellendus voluptatem aut sint amet voluptatem.',
-    contentMedia: 'Enim aliquam error quaerat.',
-  },
-  {
-    key: 'item-8',
-    media: 'fd29:194a:d44c:dfc0:fce1:bc6c:a75c:c873',
-    header: 'Chet87',
-    headerMedia: '7/30/2019',
-    content: 'Dolor dolor inventore illum eum nulla.',
-    contentMedia: 'Ut debitis aut.',
-  },
-  {
-    key: 'item-9',
-    media: '3f6c:62fe:deea:e526:e242:4e79:0883:8eb3',
-    header: 'Horacio39',
-    headerMedia: '5/6/2019',
-    content: 'Laborum fugit ut debitis voluptatum enim ea voluptas quas fugiat.',
-    contentMedia: 'Sint minus ut.',
-  },
-  {
-    key: 'item-10',
-    media: '5b44:9c9d:bb62:50a9:77b0:3a61:a133:818c',
-    header: 'Aletha.Heaney28',
-    headerMedia: '7/12/2019',
-    content: 'Magnam velit et quo.',
-    contentMedia: 'Distinctio delectus modi et.',
-  },
-  {
-    key: 'item-11',
-    media: '922b:68b1:432b:1c11:6734:e7de:baf6:d202',
-    header: 'Lempi85',
-    headerMedia: '6/3/2019',
-    content: 'Consequatur pariatur vel.',
-    contentMedia: 'Quis quibusdam at repellendus vero fuga accusamus atque provident aperiam.',
-  },
-  {
-    key: 'item-12',
-    media: '9c88:6bcf:1534:d98b:9dfa:170e:0fe4:6f99',
-    header: 'Dayton19',
-    headerMedia: '9/9/2019',
-    content: 'Tempora sint corrupti.',
-    contentMedia: 'Ea est id aut facilis ex possimus.',
-  },
-  {
-    key: 'item-13',
-    media: '931c:709c:7c0c:4142:8cb5:1e7d:a205:5ce5',
-    header: 'Jerel_Dooley95',
-    headerMedia: '4/7/2019',
-    content: 'Ullam nostrum est et necessitatibus possimus distinctio dolorum impedit dolor.',
-    contentMedia: 'Vitae tempore minima dolores tempora ea.',
-  },
-  {
-    key: 'item-14',
-    media: '6309:59b2:6fed:d765:077b:94fa:e22d:2a6a',
-    header: 'Tate.Kuhic',
-    headerMedia: '8/8/2019',
-    content: 'In rerum molestiae.',
-    contentMedia: 'Omnis voluptate nesciunt voluptatem.',
-  },
-  {
-    key: 'item-15',
-    media: 'a1b3:9bf4:3b64:4e8f:6a21:16c3:d208:551d',
-    header: 'Rosalee56',
-    headerMedia: '11/19/2019',
-    content: 'Mollitia quia saepe ut nihil et iure expedita repellendus.',
-    contentMedia: 'Consequuntur ea quia recusandae ratione.',
-  },
-  {
-    key: 'item-16',
-    media: '50d1:2a0c:5997:506a:e748:02f4:c9d2:0e45',
-    header: 'Dorothy_Osinski96',
-    headerMedia: '6/28/2019',
-    content: 'Eum temporibus dicta impedit quas.',
-    contentMedia: 'Consequatur autem minus ut eveniet quo suscipit illo.',
-  },
-  {
-    key: 'item-17',
-    media: '97e3:a2a2:8287:63a5:d1f6:5672:d711:7e8e',
-    header: 'Connie65',
-    headerMedia: '4/1/2019',
-    content: 'In ad beatae debitis.',
-    contentMedia: 'Quia quaerat ut aut in aspernatur et.',
-  },
-  {
-    key: 'item-18',
-    media: '05ce:4ecf:1041:8415:b358:be0e:a65c:c275',
-    header: 'Raphael44',
-    headerMedia: '3/6/2019',
-    content: 'Perferendis soluta hic sint eum.',
-    contentMedia: 'Ut voluptas et consectetur est.',
-  },
-  {
-    key: 'item-19',
-    media: 'cc8d:f10c:cf4f:82fa:64a2:1a36:2461:3434',
-    header: 'Roberta36',
-    headerMedia: '5/5/2019',
-    content: 'Molestiae nihil laborum hic pariatur deserunt ullam similique quibusdam quia.',
-    contentMedia: 'Qui qui id aut deserunt quidem temporibus voluptas.',
-  },
-  {
-    key: 'item-20',
-    media: '63ac:0869:ef30:fd2e:e7ce:71d0:2519:20c1',
-    header: 'Amara45',
-    headerMedia: '5/13/2019',
-    content: 'Placeat a sed quam vel ipsa et quisquam aspernatur.',
-    contentMedia: 'Aut vero accusamus veritatis atque laboriosam harum ab fugit aut.',
-  },
-  {
-    key: 'item-21',
-    media: '7f85:444a:43b9:c878:c5f8:02ac:796d:1006',
-    header: 'Cassandra86',
-    headerMedia: '1/21/2020',
-    content: 'Ut eaque id deserunt consequatur cupiditate.',
-    contentMedia: 'Ducimus aliquam voluptatem sed dolores reiciendis.',
-  },
-  {
-    key: 'item-22',
-    media: '1c44:7233:decf:3ba9:fc2f:6c14:3358:10eb',
-    header: 'Kasandra.Jacobson',
-    headerMedia: '6/4/2019',
-    content: 'Ut culpa nobis enim.',
-    contentMedia: 'Repellat ut nesciunt quis consequuntur ea.',
-  },
-  {
-    key: 'item-23',
-    media: '45da:675d:839f:4aad:c839:f771:16a3:433c',
-    header: 'Orrin65',
-    headerMedia: '1/9/2020',
-    content: 'Sit facilis nihil enim sint.',
-    contentMedia: 'Atque quia dolorem porro delectus libero optio ea ut.',
-  },
-  {
-    key: 'item-24',
-    media: 'f5bd:fd04:d136:e7cb:dfb6:3f0f:418b:fc51',
-    header: 'Imelda79',
-    headerMedia: '1/28/2019',
-    content: 'Aliquam odio repudiandae quia qui tenetur accusantium officia.',
-    contentMedia: 'Ullam accusamus facere sed iure omnis fuga.',
-  },
-  {
-    key: 'item-25',
-    media: '0ed1:d677:780f:1af8:689b:a134:f0b3:a715',
-    header: 'Gerson81',
-    headerMedia: '4/29/2019',
-    content: 'Quo quam dolores consequuntur autem nisi unde placeat eum.',
-    contentMedia: 'Harum eos repellat nihil.',
-  },
-  {
-    key: 'item-26',
-    media: 'd473:7c5c:e688:d3e9:d168:34e3:68ab:cb34',
-    header: 'Ladarius7',
-    headerMedia: '12/9/2019',
-    content: 'Doloremque corporis vero explicabo est similique in.',
-    contentMedia: 'Voluptas consequatur voluptates.',
-  },
-  {
-    key: 'item-27',
-    media: '4a2d:dc17:5ef1:d813:f1d7:73a9:d3ae:3b4f',
-    header: 'Dedric68',
-    headerMedia: '2/4/2019',
-    content: 'Pariatur ab aspernatur minus.',
-    contentMedia: 'Asperiores vel aliquam doloribus quam maxime cumque nisi distinctio autem.',
-  },
-  {
-    key: 'item-28',
-    media: '094c:8254:1146:55d1:6d90:b41d:270a:c993',
-    header: 'Noemie_Nicolas50',
-    headerMedia: '12/24/2019',
-    content: 'Ipsam inventore est omnis eveniet.',
-    contentMedia: 'Animi tempore consequatur voluptatem eaque rerum sit ut et.',
-  },
-  {
-    key: 'item-29',
-    media: 'a903:400f:c7ab:8547:4cf4:0cea:ad85:2f84',
-    header: 'Natalie_Kessler12',
-    headerMedia: '9/13/2019',
-    content: 'Officiis aperiam sed et beatae animi.',
-    contentMedia: 'Et impedit numquam.',
-  },
-  {
-    key: 'item-30',
-    media: '14a0:7da0:6561:bf6e:7b72:6afe:175d:6725',
-    header: 'Liza.Tromp92',
-    headerMedia: '2/25/2019',
-    content: 'Occaecati a exercitationem dolor.',
-    contentMedia: 'Tempora eaque quo consectetur.',
-  },
-  {
-    key: 'item-31',
-    media: '3d66:0500:1c4a:b289:eab9:a3d8:fc1d:8036',
-    header: 'Corrine.Ondricka',
-    headerMedia: '9/17/2019',
-    content: 'Quia sint omnis saepe exercitationem et necessitatibus minima.',
-    contentMedia: 'Necessitatibus eum neque totam accusamus iste.',
-  },
-  {
-    key: 'item-32',
-    media: '3ef6:2e67:4d8a:e0fb:c614:0b87:b046:ee02',
-    header: 'Xzavier.Torphy',
-    headerMedia: '8/15/2019',
-    content: 'Sed saepe et.',
-    contentMedia: 'Nihil similique sunt ducimus.',
-  },
-  {
-    key: 'item-33',
-    media: '8d1b:6a57:b845:deeb:41bd:1f88:6f7b:804f',
-    header: 'Odell89',
-    headerMedia: '2/10/2019',
-    content: 'Ut in voluptatem laudantium adipisci deleniti fugiat nam natus.',
-    contentMedia: 'Molestiae id dolorem sit.',
-  },
-  {
-    key: 'item-34',
-    media: 'f48c:d246:d89a:213b:a252:03a3:7b23:c5e1',
-    header: 'Shakira.Wuckert51',
-    headerMedia: '1/19/2020',
-    content: 'Recusandae maiores laborum voluptas excepturi numquam.',
-    contentMedia: 'Alias et earum exercitationem rerum sed.',
-  },
-  {
-    key: 'item-35',
-    media: 'fd13:2bf9:b739:5216:5a5a:1697:ec14:f388',
-    header: 'Stephan30',
-    headerMedia: '8/8/2019',
-    content: 'Laborum numquam dolores deserunt incidunt accusamus ipsam.',
-    contentMedia: 'Iusto voluptas nobis.',
-  },
-  {
-    key: 'item-36',
-    media: '4df1:1c3e:3519:e661:570a:95e4:7d42:2a9f',
-    header: 'Kenton_Vandervort68',
-    headerMedia: '11/19/2019',
-    content: 'Blanditiis nemo possimus autem et sunt exercitationem inventore dolorum.',
-    contentMedia: 'Odio aspernatur at sapiente voluptatem qui reiciendis suscipit non aut.',
-  },
-  {
-    key: 'item-37',
-    media: 'b0fd:820f:8349:bbe6:709d:bb31:dbcd:04e8',
-    header: 'Milton39',
-    headerMedia: '4/16/2019',
-    content: 'Ratione nihil omnis enim aut rerum molestias nulla sit rem.',
-    contentMedia: 'Rem dolorem ab cupiditate consequatur cum incidunt et vero eveniet.',
-  },
-  {
-    key: 'item-38',
-    media: '2e80:c46e:0b5e:e390:0f07:75a7:ef51:f03a',
-    header: 'Domenic.Bernier63',
-    headerMedia: '7/20/2019',
-    content: 'Amet et soluta rerum vero totam non consequatur sit dolorum.',
-    contentMedia: 'Explicabo in voluptas esse et sint.',
-  },
-  {
-    key: 'item-39',
-    media: '7bed:44f3:d339:6da5:17bb:ac34:9d31:3ef5',
-    header: 'Deshawn68',
-    headerMedia: '9/20/2019',
-    content: 'Mollitia ut sapiente ex eaque ducimus sit culpa et corrupti.',
-    contentMedia: 'Amet voluptatem vero et est dicta est.',
-  },
-  {
-    key: 'item-40',
-    media: '5c39:27f2:3d18:a5ed:805d:98c0:eca1:441d',
-    header: 'Eda_Willms',
-    headerMedia: '6/19/2019',
-    content: 'Nihil quasi et voluptatem dolore et.',
-    contentMedia: 'Rerum dolores reiciendis asperiores fuga nostrum vitae et.',
-  },
-  {
-    key: 'item-41',
-    media: 'ae15:839e:803b:0e90:0382:1502:254c:ff49',
-    header: 'Eliza44',
-    headerMedia: '10/18/2019',
-    content: 'Veniam ab ducimus ut repellat.',
-    contentMedia: 'Et voluptatibus error nihil numquam similique.',
-  },
-  {
-    key: 'item-42',
-    media: 'cd53:e6ce:1aff:8b32:3786:fefa:c00e:a801',
-    header: 'Garry.Connelly',
-    headerMedia: '9/25/2019',
-    content: 'Accusamus esse impedit ratione id sit vero veniam odit nemo.',
-    contentMedia: 'Eveniet vel dolor dolores quam animi rerum temporibus.',
-  },
-  {
-    key: 'item-43',
-    media: 'bb43:d3e5:2f02:e726:0edb:5029:9c59:40b0',
-    header: 'Sigrid4',
-    headerMedia: '10/4/2019',
-    content: 'Quis ut est sunt sit sed facilis rerum debitis iusto.',
-    contentMedia: 'Quos assumenda quam ab sed ea assumenda explicabo suscipit vero.',
-  },
-  {
-    key: 'item-44',
-    media: '63c0:e35e:8a1a:a3b2:90ae:bda1:4466:aac7',
-    header: 'Armando.Durgan',
-    headerMedia: '5/12/2019',
-    content: 'Et numquam non hic et occaecati suscipit.',
-    contentMedia: 'Fugiat voluptatum quia amet aut ut ea nam.',
-  },
-  {
-    key: 'item-45',
-    media: '6d4a:3868:1ac0:7edc:3461:fe0e:df54:0d0d',
-    header: 'Theresia.Thiel',
-    headerMedia: '12/30/2019',
-    content: 'Enim animi sit beatae nisi rerum vitae velit maiores quia.',
-    contentMedia: 'Ut quisquam est doloremque voluptatem iure similique ab sit.',
-  },
-  {
-    key: 'item-46',
-    media: 'e494:2079:8bac:cafb:b075:4718:3791:065a',
-    header: 'Yazmin_Kertzmann',
-    headerMedia: '10/27/2019',
-    content: 'Deleniti iste ab est ut nihil soluta aut rem ex.',
-    contentMedia: 'Distinctio fugit fugiat commodi consequatur laudantium aut quod.',
-  },
-  {
-    key: 'item-47',
-    media: 'e8e8:d347:be4c:90ac:aabf:8fc4:fac2:0c75',
-    header: 'Terry.Schuppe42',
-    headerMedia: '8/1/2019',
-    content: 'Repellendus necessitatibus minima fugit autem odio vel accusantium accusamus quas.',
-    contentMedia: 'Nihil aliquam tenetur veritatis atque.',
-  },
-  {
-    key: 'item-48',
-    media: '9b6f:cc70:91dd:2fae:cab3:892f:b12e:84b4',
-    header: 'Gilda_Kuhlman41',
-    headerMedia: '5/22/2019',
-    content: 'Eum aut assumenda quia aperiam culpa aliquid pariatur qui sit.',
-    contentMedia: 'Voluptatem delectus odit.',
-  },
-  {
-    key: 'item-49',
-    media: 'a479:0ac9:94bd:eda7:2105:9b91:003e:ff0f',
-    header: 'Mathew_Bashirian',
-    headerMedia: '11/27/2019',
-    content: 'Iusto rerum voluptas.',
-    contentMedia: 'Ea molestiae quos cupiditate laborum.',
-  },
-  {
-    key: 'item-50',
-    media: '86e6:9dab:6835:7cb3:39aa:009b:e1ee:3d3f',
-    header: 'Roma84',
-    headerMedia: '7/6/2019',
-    content: 'Deleniti sunt doloremque perferendis quod assumenda ipsa.',
-    contentMedia: 'Est commodi illo incidunt provident alias ab aut ut placeat.',
-  },
-  {
-    key: 'item-51',
-    media: 'c9c0:e84c:b2e7:9687:9089:f2d3:3c24:ee17',
-    header: 'Hans_Hayes',
-    headerMedia: '4/29/2019',
-    content: 'Dolores quibusdam nihil et modi earum officia earum incidunt et.',
-    contentMedia: 'Et officiis ea velit tempore enim at commodi dolores.',
-  },
-  {
-    key: 'item-52',
-    media: '8738:61a1:bc19:1958:c7cb:f878:1ddc:a847',
-    header: 'Sam80',
-    headerMedia: '11/14/2019',
-    content: 'Eaque quam distinctio.',
-    contentMedia: 'Vel numquam asperiores ut assumenda veniam est dolorum officiis.',
-  },
-  {
-    key: 'item-53',
-    media: '5295:1bbf:5778:011e:207a:d67b:517a:a02e',
-    header: 'Madaline53',
-    headerMedia: '5/6/2019',
-    content: 'Et error rerum odio ex molestiae.',
-    contentMedia: 'In quidem numquam omnis voluptas nam et ratione.',
-  },
-  {
-    key: 'item-54',
-    media: 'dc6b:7b5a:739b:9ce7:3bf0:0801:f19f:e5ca',
-    header: 'Ardith46',
-    headerMedia: '7/18/2019',
-    content: 'Qui possimus quae hic ea ex voluptatum culpa.',
-    contentMedia: 'Cupiditate sequi vel.',
-  },
-  {
-    key: 'item-55',
-    media: 'da52:440c:e8ce:65aa:2492:6bb7:f34c:fe8d',
-    header: 'Linnea22',
-    headerMedia: '2/22/2019',
-    content: 'Rerum quis in ad ad maiores possimus error optio.',
-    contentMedia: 'Eaque quo explicabo sunt et rerum.',
-  },
-  {
-    key: 'item-56',
-    media: '0a4f:bfa5:8c03:e5f8:75b3:0751:6763:912b',
-    header: 'Mervin.Hickle85',
-    headerMedia: '10/6/2019',
-    content: 'Quo nesciunt culpa aliquam consequuntur.',
-    contentMedia: 'Iure eos perferendis.',
-  },
-  {
-    key: 'item-57',
-    media: 'ae6a:016b:11ca:4c9e:203e:045d:b0e4:12cf',
-    header: 'Abel78',
-    headerMedia: '8/22/2019',
-    content: 'Voluptatem saepe est sit illo nihil enim iure ut quia.',
-    contentMedia: 'Rerum officia ut eveniet aut consequatur.',
-  },
-  {
-    key: 'item-58',
-    media: 'ebcd:0202:ef1b:94f7:7003:dbae:53cb:e035',
-    header: 'Lexi.Pacocha18',
-    headerMedia: '7/11/2019',
-    content: 'Autem qui voluptatem.',
-    contentMedia: 'Quis nostrum repellat maxime.',
-  },
-  {
-    key: 'item-59',
-    media: '0ea2:847a:c88b:a67b:a525:b0d1:5801:3383',
-    header: 'Braeden44',
-    headerMedia: '9/29/2019',
-    content: 'Quae consequatur pariatur et ea.',
-    contentMedia: 'Quisquam odit ipsa quo.',
-  },
-  {
-    key: 'item-60',
-    media: '39d9:38bc:a073:8df5:e24c:8061:a0b2:5797',
-    header: 'Dena44',
-    headerMedia: '11/4/2019',
-    content: 'Odio enim corrupti doloribus neque velit eum quaerat modi.',
-    contentMedia: 'Quo totam dolorum officia nihil corporis earum doloremque voluptas quod.',
-  },
-  {
-    key: 'item-61',
-    media: 'd2d8:af56:3f45:fd15:befb:e30b:73df:c011',
-    header: 'Donato12',
-    headerMedia: '9/7/2019',
-    content: 'Et expedita vero recusandae soluta autem assumenda.',
-    contentMedia: 'Ullam fuga minima laboriosam facilis velit.',
-  },
-  {
-    key: 'item-62',
-    media: 'f6c3:9c9f:9c45:7439:c286:e8ac:91b2:f3b0',
-    header: 'Walker.Heidenreich5',
-    headerMedia: '11/30/2019',
-    content: 'Beatae dolorem eveniet.',
-    contentMedia: 'Et voluptas ullam beatae corporis quaerat et sint quasi.',
-  },
-  {
-    key: 'item-63',
-    media: '3df8:81ab:9f29:d0a1:4360:0b1c:c4ac:9ef6',
-    header: 'Rosalinda_Kuphal75',
-    headerMedia: '5/27/2019',
-    content: 'Atque animi consectetur laborum.',
-    contentMedia: 'Aut quisquam rem.',
-  },
-  {
-    key: 'item-64',
-    media: 'c249:12c6:642c:49be:4a08:d66a:8d0d:1a98',
-    header: 'Bella_Becker46',
-    headerMedia: '12/6/2019',
-    content: 'Similique placeat et possimus voluptates quia non non.',
-    contentMedia: 'Sit et reiciendis ad unde est porro quibusdam.',
-  },
-  {
-    key: 'item-65',
-    media: '6b01:d676:8c9a:7559:5639:493e:d3f8:e529',
-    header: 'Zechariah.Zulauf75',
-    headerMedia: '12/9/2019',
-    content: 'Optio dolorem aut.',
-    contentMedia: 'Blanditiis voluptas quia corrupti laborum.',
-  },
-  {
-    key: 'item-66',
-    media: '61a1:e08f:3b2c:6775:a768:79ef:fbc5:1d2b',
-    header: 'Amina_Reilly',
-    headerMedia: '4/2/2019',
-    content: 'Sed earum fuga pariatur ipsam officia amet.',
-    contentMedia: 'Minus facilis quam.',
-  },
-  {
-    key: 'item-67',
-    media: '32d8:895f:7f5f:f3f8:3f71:ddee:0e80:6da8',
-    header: 'Jackson.Bauch17',
-    headerMedia: '12/31/2019',
-    content: 'Non corrupti quisquam et.',
-    contentMedia: 'Nulla soluta explicabo esse ea in nemo id reiciendis.',
-  },
-  {
-    key: 'item-68',
-    media: 'e51d:a9e9:c018:ab6b:78aa:ce10:d01e:ba61',
-    header: 'Marcelo99',
-    headerMedia: '9/19/2019',
-    content: 'Odit nobis dicta vero impedit expedita voluptates aliquid.',
-    contentMedia: 'Ipsum consequatur accusantium.',
-  },
-  {
-    key: 'item-69',
-    media: 'bca7:7384:2454:e457:f029:5f2b:23b6:e8e9',
-    header: 'Leonora_Wolf35',
-    headerMedia: '10/17/2019',
-    content: 'Beatae ut cum et occaecati excepturi molestiae sequi aut esse.',
-    contentMedia: 'Ipsa laboriosam rerum.',
-  },
-  {
-    key: 'item-70',
-    media: '01a2:9bbd:3a4f:1c02:c4f8:f232:dfa7:452d',
-    header: 'Haleigh.Williamson',
-    headerMedia: '9/23/2019',
-    content: 'Animi fuga in omnis.',
-    contentMedia: 'Eos reiciendis quidem nam corrupti vero atque dolores ut.',
-  },
-  {
-    key: 'item-71',
-    media: '1642:ec3a:415b:a5a6:4873:853f:6052:f601',
-    header: 'Elian_Lang',
-    headerMedia: '11/12/2019',
-    content: 'Autem nesciunt quia magnam qui.',
-    contentMedia: 'Repudiandae atque ipsum perspiciatis possimus tempora deleniti a.',
-  },
-  {
-    key: 'item-72',
-    media: 'c135:5daa:737b:aba0:2241:c19f:42ce:8a91',
-    header: 'Filiberto_Runolfsdottir',
-    headerMedia: '6/16/2019',
-    content: 'Itaque nesciunt sit ducimus error adipisci et est vitae.',
-    contentMedia: 'Doloribus praesentium ut ut qui sint mollitia quasi rem non.',
-  },
-  {
-    key: 'item-73',
-    media: '4e2d:cda6:9c1e:f561:a416:ce2d:4ed4:1807',
-    header: 'Darwin_Price',
-    headerMedia: '1/18/2020',
-    content: 'Sit delectus corrupti omnis et alias reprehenderit praesentium nihil.',
-    contentMedia: 'Aut minus sunt ut.',
-  },
-  {
-    key: 'item-74',
-    media: 'a8db:749a:e801:5d86:929a:f04f:0fe0:7f3c',
-    header: 'River.Shields',
-    headerMedia: '4/12/2019',
-    content: 'Nobis voluptatem ipsum.',
-    contentMedia: 'Deserunt non ex eos deserunt.',
-  },
-  {
-    key: 'item-75',
-    media: '65ca:2e7d:5a73:ab88:3d47:6e95:8ce0:c0be',
-    header: 'Marcelina97',
-    headerMedia: '11/12/2019',
-    content: 'Dolores ex aut.',
-    contentMedia: 'Ad dolorem ullam libero ipsam vel eum id molestiae qui.',
-  },
-  {
-    key: 'item-76',
-    media: '28b5:6f91:ba1a:a099:bd84:1805:3c4e:6d3a',
-    header: 'Hector_Jacobs',
-    headerMedia: '6/19/2019',
-    content: 'Assumenda nostrum aut eum.',
-    contentMedia: 'Accusamus quae rerum molestias reprehenderit ducimus in.',
-  },
-  {
-    key: 'item-77',
-    media: '5a9b:2b1c:0c64:978e:d0d8:a205:f1ba:d022',
-    header: 'Hank.Gutkowski',
-    headerMedia: '11/28/2019',
-    content: 'Nam itaque et.',
-    contentMedia: 'Esse aut ducimus illo sint error doloremque consequatur sunt assumenda.',
-  },
-  {
-    key: 'item-78',
-    media: '22e4:aa44:2ca1:3505:06a8:6eb8:fbfd:738c',
-    header: 'Bianka_Bode',
-    headerMedia: '10/14/2019',
-    content: 'Hic incidunt officia.',
-    contentMedia: 'Vitae sunt nostrum nobis occaecati sed molestiae est impedit.',
-  },
-  {
-    key: 'item-79',
-    media: 'fbee:c95c:d813:44ac:3925:7642:8e1c:7e16',
-    header: 'Neil81',
-    headerMedia: '2/23/2019',
-    content: 'Excepturi et corporis sed autem unde qui doloribus.',
-    contentMedia: 'Distinctio consequatur dignissimos enim.',
-  },
-  {
-    key: 'item-80',
-    media: 'a3f7:3619:438a:b723:1666:403f:864d:e8f1',
-    header: 'Finn.Abshire29',
-    headerMedia: '2/20/2019',
-    content: 'Explicabo magni omnis eum consequatur numquam tenetur.',
-    contentMedia: 'Quas exercitationem delectus quasi sequi ut repellat maiores recusandae aut.',
-  },
-  {
-    key: 'item-81',
-    media: '3a7a:9528:8159:40aa:4e91:1a05:886d:59e6',
-    header: 'Bartholome_Bartoletti44',
-    headerMedia: '8/11/2019',
-    content: 'Adipisci et ducimus et pariatur consequatur quibusdam.',
-    contentMedia: 'Omnis architecto odit illo enim.',
-  },
-  {
-    key: 'item-82',
-    media: 'e5fe:d840:e9ee:467f:a631:a5ee:26ea:f5e4',
-    header: 'Amanda_Eichmann',
-    headerMedia: '10/6/2019',
-    content: 'Libero vitae laborum omnis consectetur beatae aut quas architecto quis.',
-    contentMedia: 'Est iusto tempore quaerat.',
-  },
-  {
-    key: 'item-83',
-    media: '4398:93a6:1de1:94f3:903e:954c:77cd:d013',
-    header: 'Izaiah30',
-    headerMedia: '5/5/2019',
-    content: 'Voluptate provident omnis sequi enim dolorem quod.',
-    contentMedia: 'Assumenda aut officia deleniti velit corporis.',
-  },
-  {
-    key: 'item-84',
-    media: 'defd:93e0:086c:c54c:91f8:3cd3:f906:2399',
-    header: 'Emmanuelle_Hodkiewicz',
-    headerMedia: '10/20/2019',
-    content: 'Quis quasi reiciendis cupiditate necessitatibus deleniti.',
-    contentMedia: 'Nam debitis voluptate labore ea non vel eveniet sint consequuntur.',
-  },
-  {
-    key: 'item-85',
-    media: '5500:c4a6:1062:fb2b:1ec0:7a2f:2ff6:00a6',
-    header: 'Bailee_Metz4',
-    headerMedia: '9/11/2019',
-    content: 'Cumque ut et ut voluptates aliquam dolore occaecati quisquam rem.',
-    contentMedia: 'Consequatur deleniti sed illum cupiditate aliquam.',
-  },
-  {
-    key: 'item-86',
-    media: '28ff:bcb7:ba28:6f30:9193:8d67:fd3a:a95f',
-    header: 'Roel14',
-    headerMedia: '1/9/2020',
-    content: 'Facere omnis itaque facere eligendi iusto corporis.',
-    contentMedia: 'Et autem pariatur iste magnam esse ab.',
-  },
-  {
-    key: 'item-87',
-    media: '793d:32e6:3b90:1e5c:2974:4a05:9d15:a687',
-    header: 'Liliane.Welch',
-    headerMedia: '4/7/2019',
-    content: 'Aut unde nostrum quis corrupti placeat quibusdam.',
-    contentMedia: 'Saepe sit quis ullam.',
-  },
-  {
-    key: 'item-88',
-    media: 'ab9f:016b:aabe:45cd:6457:a5be:1449:9ac3',
-    header: 'Emmet_Fritsch58',
-    headerMedia: '11/5/2019',
-    content: 'Sint culpa et corporis consequatur doloremque placeat fugiat nemo rerum.',
-    contentMedia: 'Deserunt deleniti et consequuntur consequuntur nemo molestias excepturi rerum.',
-  },
-  {
-    key: 'item-89',
-    media: '5426:e139:7c43:360c:e540:305d:0dd3:c3d4',
-    header: 'Alba9',
-    headerMedia: '10/17/2019',
-    content: 'Expedita commodi qui.',
-    contentMedia: 'Quasi non sunt suscipit nesciunt enim ipsam quaerat.',
-  },
-  {
-    key: 'item-90',
-    media: '64fc:571b:ad34:65cb:deab:4ce8:220b:8e67',
-    header: 'Colton_Stroman9',
-    headerMedia: '11/6/2019',
-    content: 'Impedit dolorum ut facilis neque qui.',
-    contentMedia: 'At amet hic.',
-  },
-  {
-    key: 'item-91',
-    media: '7788:9eec:848d:468b:0264:2c4b:dd36:cec7',
-    header: 'Baylee.Leffler9',
-    headerMedia: '7/14/2019',
-    content: 'Aut dolores aperiam.',
-    contentMedia: 'Voluptatem aut aut molestias labore optio deserunt harum quos reprehenderit.',
-  },
-  {
-    key: 'item-92',
-    media: 'b4f5:008d:9fe0:cef5:e1a0:f291:8a2e:50c8',
-    header: 'Emmanuel.Crona',
-    headerMedia: '2/6/2019',
-    content: 'Facere repudiandae rem voluptatem saepe rerum est velit porro.',
-    contentMedia: 'Molestiae aut eum reiciendis et voluptatibus quasi ut quasi consectetur.',
-  },
-  {
-    key: 'item-93',
-    media: '77e2:f427:7f58:5e7e:7e70:c3b0:80cd:4495',
-    header: 'Aurelia.Olson4',
-    headerMedia: '10/17/2019',
-    content: 'Tempore aut facilis laboriosam minus.',
-    contentMedia: 'Id omnis est voluptatem sit non quo quaerat.',
-  },
-  {
-    key: 'item-94',
-    media: '0079:dea3:8261:4801:d2d5:7dea:0dc2:4c2c',
-    header: 'Morris_Morar',
-    headerMedia: '10/27/2019',
-    content: 'Qui explicabo non.',
-    contentMedia: 'Dolore consequatur totam modi et.',
-  },
-  {
-    key: 'item-95',
-    media: '6f85:fda7:38b4:e019:606d:6ed6:56c4:a4bf',
-    header: 'Ray.Berge',
-    headerMedia: '8/8/2019',
-    content: 'Et amet ut rerum debitis consequatur.',
-    contentMedia: 'Omnis voluptatum ut quisquam ut quidem.',
-  },
-  {
-    key: 'item-96',
-    media: 'f498:acb8:7241:3d26:3fa3:a63f:3fd9:da18',
-    header: 'Freida.Keeling99',
-    headerMedia: '7/7/2019',
-    content: 'Et eveniet quae sapiente.',
-    contentMedia: 'Ea optio voluptatem maxime sunt aliquam nesciunt quia dicta sint.',
-  },
-  {
-    key: 'item-97',
-    media: 'ca0a:c574:e92f:fc64:679b:27f6:930e:9379',
-    header: 'Frederic_Schuppe',
-    headerMedia: '2/10/2019',
-    content: 'Aliquam incidunt est aut sit esse.',
-    contentMedia: 'Non voluptatem quae adipisci et voluptatem voluptas velit ut.',
-  },
-  {
-    key: 'item-98',
-    media: 'd909:4f8a:12bc:921d:b8f2:b9d5:b036:e5f9',
-    header: 'Selena.Schultz16',
-    headerMedia: '5/21/2019',
-    content: 'Quam dolorem rerum quo nulla.',
-    contentMedia: 'Laudantium ut quia iusto.',
-  },
-  {
-    key: 'item-99',
-    media: 'd049:44b4:1d31:c7d1:62fd:db1c:2d79:b4c9',
-    header: 'Chloe_Shields0',
-    headerMedia: '2/10/2019',
-    content: 'Optio quas culpa eum unde debitis laudantium et excepturi.',
-    contentMedia: 'Molestias officia est delectus harum inventore dolor.',
-  },
-]
-
-const ListNestedPerf = () => (
-  <List
-    selectable
-    items={[
-      ...items,
-      {
-        key: 'list-1',
-        content: (
-          <List
-            selectable
-            items={[
-              ...items,
-              {
-                key: 'list-1',
-                content: <List items={items} style={{ backgroundColor: 'green' }} />,
-              },
-              {
-                key: 'list-2',
-                content: <List items={items} style={{ backgroundColor: 'yellow' }} />,
-              },
-              {
-                key: 'list-3',
-                content: <List items={items} style={{ backgroundColor: 'red' }} />,
-              },
-            ]}
-          />
-        ),
-      },
-      {
-        key: 'list-2',
-        content: (
-          <List
-            selectable
-            items={[
-              ...items,
-              {
-                key: 'list-1',
-                content: <List items={items} style={{ backgroundColor: 'green' }} />,
-              },
-              {
-                key: 'list-2',
-                content: <List items={items} style={{ backgroundColor: 'yellow' }} />,
-              },
-              {
-                key: 'list-3',
-                content: <List items={items} style={{ backgroundColor: 'red' }} />,
-              },
-            ]}
-          />
-        ),
-      },
-    ]}
-  />
-)
-
-ListNestedPerf.iterations = 1
-ListNestedPerf.filename = 'ListNested.perf.tsx'
-
-export default ListNestedPerf
diff --git a/docs/src/examples/components/List/Performance/ListWith60ListItems.perf.tsx b/docs/src/examples/components/List/Performance/ListWith60ListItems.perf.tsx
deleted file mode 100644
index da8fbcd8d1..0000000000
--- a/docs/src/examples/components/List/Performance/ListWith60ListItems.perf.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { List, Avatar } from '@fluentui/react'
-import * as _ from 'lodash'
-import * as React from 'react'
-
-const avatars = {
-  ade:
-    '/9j/4AAQSkZJRgABAQAAAQABAAD/4gxYSUNDX1BST0ZJTEUAAQEAAAxITGlubwIQAABtbnRyUkdCIFhZWiAHzgACAAkABgAxAABhY3NwTVNGVAAAAABJRUMgc1JHQgAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLUhQICAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABFjcHJ0AAABUAAAADNkZXNjAAABhAAAAGx3dHB0AAAB8AAAABRia3B0AAACBAAAABRyWFlaAAACGAAAABRnWFlaAAACLAAAABRiWFlaAAACQAAAABRkbW5kAAACVAAAAHBkbWRkAAACxAAAAIh2dWVkAAADTAAAAIZ2aWV3AAAD1AAAACRsdW1pAAAD+AAAABRtZWFzAAAEDAAAACR0ZWNoAAAEMAAAAAxyVFJDAAAEPAAACAxnVFJDAAAEPAAACAxiVFJDAAAEPAAACAx0ZXh0AAAAAENvcHlyaWdodCAoYykgMTk5OCBIZXdsZXR0LVBhY2thcmQgQ29tcGFueQAAZGVzYwAAAAAAAAASc1JHQiBJRUM2MTk2Ni0yLjEAAAAAAAAAAAAAABJzUkdCIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWFlaIAAAAAAAAPNRAAEAAAABFsxYWVogAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z2Rlc2MAAAAAAAAAFklFQyBodHRwOi8vd3d3LmllYy5jaAAAAAAAAAAAAAAAFklFQyBodHRwOi8vd3d3LmllYy5jaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABkZXNjAAAAAAAAAC5JRUMgNjE5NjYtMi4xIERlZmF1bHQgUkdCIGNvbG91ciBzcGFjZSAtIHNSR0IAAAAAAAAAAAAAAC5JRUMgNjE5NjYtMi4xIERlZmF1bHQgUkdCIGNvbG91ciBzcGFjZSAtIHNSR0IAAAAAAAAAAAAAAAAAAAAAAAAAAAAAZGVzYwAAAAAAAAAsUmVmZXJlbmNlIFZpZXdpbmcgQ29uZGl0aW9uIGluIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAALFJlZmVyZW5jZSBWaWV3aW5nIENvbmRpdGlvbiBpbiBJRUM2MTk2Ni0yLjEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHZpZXcAAAAAABOk/gAUXy4AEM8UAAPtzAAEEwsAA1yeAAAAAVhZWiAAAAAAAEwJVgBQAAAAVx/nbWVhcwAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAo8AAAACc2lnIAAAAABDUlQgY3VydgAAAAAAAAQAAAAABQAKAA8AFAAZAB4AIwAoAC0AMgA3ADsAQABFAEoATwBUAFkAXgBjAGgAbQByAHcAfACBAIYAiwCQAJUAmgCfAKQAqQCuALIAtwC8AMEAxgDLANAA1QDbAOAA5QDrAPAA9gD7AQEBBwENARMBGQEfASUBKwEyATgBPgFFAUwBUgFZAWABZwFuAXUBfAGDAYsBkgGaAaEBqQGxAbkBwQHJAdEB2QHhAekB8gH6AgMCDAIUAh0CJgIvAjgCQQJLAlQCXQJnAnECegKEAo4CmAKiAqwCtgLBAssC1QLgAusC9QMAAwsDFgMhAy0DOANDA08DWgNmA3IDfgOKA5YDogOuA7oDxwPTA+AD7AP5BAYEEwQgBC0EOwRIBFUEYwRxBH4EjASaBKgEtgTEBNME4QTwBP4FDQUcBSsFOgVJBVgFZwV3BYYFlgWmBbUFxQXVBeUF9gYGBhYGJwY3BkgGWQZqBnsGjAadBq8GwAbRBuMG9QcHBxkHKwc9B08HYQd0B4YHmQesB78H0gflB/gICwgfCDIIRghaCG4IggiWCKoIvgjSCOcI+wkQCSUJOglPCWQJeQmPCaQJugnPCeUJ+woRCicKPQpUCmoKgQqYCq4KxQrcCvMLCwsiCzkLUQtpC4ALmAuwC8gL4Qv5DBIMKgxDDFwMdQyODKcMwAzZDPMNDQ0mDUANWg10DY4NqQ3DDd4N+A4TDi4OSQ5kDn8Omw62DtIO7g8JDyUPQQ9eD3oPlg+zD88P7BAJECYQQxBhEH4QmxC5ENcQ9RETETERTxFtEYwRqhHJEegSBxImEkUSZBKEEqMSwxLjEwMTIxNDE2MTgxOkE8UT5RQGFCcUSRRqFIsUrRTOFPAVEhU0FVYVeBWbFb0V4BYDFiYWSRZsFo8WshbWFvoXHRdBF2UXiReuF9IX9xgbGEAYZRiKGK8Y1Rj6GSAZRRlrGZEZtxndGgQaKhpRGncanhrFGuwbFBs7G2MbihuyG9ocAhwqHFIcexyjHMwc9R0eHUcdcB2ZHcMd7B4WHkAeah6UHr4e6R8THz4faR+UH78f6iAVIEEgbCCYIMQg8CEcIUghdSGhIc4h+yInIlUigiKvIt0jCiM4I2YjlCPCI/AkHyRNJHwkqyTaJQklOCVoJZclxyX3JicmVyaHJrcm6CcYJ0kneierJ9woDSg/KHEooijUKQYpOClrKZ0p0CoCKjUqaCqbKs8rAis2K2krnSvRLAUsOSxuLKIs1y0MLUEtdi2rLeEuFi5MLoIuty7uLyQvWi+RL8cv/jA1MGwwpDDbMRIxSjGCMbox8jIqMmMymzLUMw0zRjN/M7gz8TQrNGU0njTYNRM1TTWHNcI1/TY3NnI2rjbpNyQ3YDecN9c4FDhQOIw4yDkFOUI5fzm8Ofk6Njp0OrI67zstO2s7qjvoPCc8ZTykPOM9Ij1hPaE94D4gPmA+oD7gPyE/YT+iP+JAI0BkQKZA50EpQWpBrEHuQjBCckK1QvdDOkN9Q8BEA0RHRIpEzkUSRVVFmkXeRiJGZ0arRvBHNUd7R8BIBUhLSJFI10kdSWNJqUnwSjdKfUrESwxLU0uaS+JMKkxyTLpNAk1KTZNN3E4lTm5Ot08AT0lPk0/dUCdQcVC7UQZRUFGbUeZSMVJ8UsdTE1NfU6pT9lRCVI9U21UoVXVVwlYPVlxWqVb3V0RXklfgWC9YfVjLWRpZaVm4WgdaVlqmWvVbRVuVW+VcNVyGXNZdJ114XcleGl5sXr1fD19hX7NgBWBXYKpg/GFPYaJh9WJJYpxi8GNDY5dj62RAZJRk6WU9ZZJl52Y9ZpJm6Gc9Z5Nn6Wg/aJZo7GlDaZpp8WpIap9q92tPa6dr/2xXbK9tCG1gbbluEm5rbsRvHm94b9FwK3CGcOBxOnGVcfByS3KmcwFzXXO4dBR0cHTMdSh1hXXhdj52m3b4d1Z3s3gReG54zHkqeYl553pGeqV7BHtje8J8IXyBfOF9QX2hfgF+Yn7CfyN/hH/lgEeAqIEKgWuBzYIwgpKC9INXg7qEHYSAhOOFR4Wrhg6GcobXhzuHn4gEiGmIzokziZmJ/opkisqLMIuWi/yMY4zKjTGNmI3/jmaOzo82j56QBpBukNaRP5GokhGSepLjk02TtpQglIqU9JVflcmWNJaflwqXdZfgmEyYuJkkmZCZ/JpomtWbQpuvnByciZz3nWSd0p5Anq6fHZ+Ln/qgaaDYoUehtqImopajBqN2o+akVqTHpTilqaYapoum/adup+CoUqjEqTepqaocqo+rAqt1q+msXKzQrUStuK4trqGvFq+LsACwdbDqsWCx1rJLssKzOLOutCW0nLUTtYq2AbZ5tvC3aLfguFm40blKucK6O7q1uy67p7whvJu9Fb2Pvgq+hL7/v3q/9cBwwOzBZ8Hjwl/C28NYw9TEUcTOxUvFyMZGxsPHQce/yD3IvMk6ybnKOMq3yzbLtsw1zLXNNc21zjbOts83z7jQOdC60TzRvtI/0sHTRNPG1EnUy9VO1dHWVdbY11zX4Nhk2OjZbNnx2nba+9uA3AXcit0Q3ZbeHN6i3ynfr+A24L3hROHM4lPi2+Nj4+vkc+T85YTmDeaW5x/nqegy6LzpRunQ6lvq5etw6/vshu0R7ZzuKO6070DvzPBY8OXxcvH/8ozzGfOn9DT0wvVQ9d72bfb794r4Gfio+Tj5x/pX+uf7d/wH/Jj9Kf26/kv+3P9t////2wBDAAMCAgICAgMCAgMFAwMDBQUEAwMEBQYFBQUFBQYIBgcHBwcGCAgJCgoKCQgMDAwMDAwODg4ODhAQEBAQEBAQEBD/2wBDAQMEBAYGBgwICAwSDgwOEhQQEBAQFBEQEBAQEBEREBAQEBAQERAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAyADIDAREAAhEBAxEB/8QAHQAAAgICAwEAAAAAAAAAAAAABwgABgEDBAUJAv/EADwQAAEDAgQCBwMICwAAAAAAAAECAwQFBgAHERIhMQgTFCIyQVEJIzQWMzZSYWJxgRUXJENFY3JzkcHy/8QAHAEAAgIDAQEAAAAAAAAAAAAAAAcGCAIDBAEF/8QAQBEAAQIDBAUIBggHAQAAAAAAAQIDAAQRBRIhMQYHMkFREyIzUmFxkbEUQmJjgcEVI0NygrLR8DQ2kqGz4fLC/9oADAMBAAIRAxEAPwBmMU0h8RUs2cyqLlBl3Wcxa80qTHpTaBHgtq2rly31hthhKtDt3rI1VodqdT5Y+tZNmuT82iXbNCrM9VIxJ+A8THBPTaZZkuHdHm9evS46Q961B6Y5eEmgRVq1YpNB0hRmUk8EApBdWfLctZJxYyS0SsmWQByIWes5zifkO4CFg9a826qt8juwp842WL0uOkHl/WW5ki55dyRGXNJ9v19XaGnkpOi2960h1lz0Uk908weWC0NEbLmUFHJBtXWQLpSe0ZHtBEeS9sTTZCgu8DxNajsPzEelWX980HMyyaLf9sKUqm1yOmSwhzTrGV6lDrLmnDe04koV+GuK2T8i7JzK5d3aQad/AjsIxhqSkwl9pLicjFgxwR1xMEETBBCwe0SedZyIpSQvYyu4IXaeOgIRHkKTqfQK44Zur0D6TXXMNq80xEtJSfRR94eRhZ+j/lbTHpvyvuotrqMHq36Zbjw2vxkuDVqbJYWAoBQ4sajafF6YuVovZDS1ekOkFScUo3jgpQ/L4xU7TvSJ9pHobAUlC8Fu0ICuLaFf5Dn6uVY52eWWLN2VOrXVYCVVOv0Zjtt7USC05IdbiJGvbnOqSpLa0p4uJUQVJ72moOMdKpKWLpdaUkODbRXE+1TrcRvGPfloDac6lgS7zaix9k7Tmp92fY6pySebkRB69nLcjtSyqui2XHesbolZS/DGuoS1UoyXVAfYVtk/nin+sSXCZ1p0euih70GnkYtToy6SypHA+f7MNfhVRM4mCCJgggGdLtuhOWhYQumMibRvlvb6arDcdEdD0ZZeQtKnTrsTxBKvIYZmrwj6WNcuTV5piIaU19BwzvDyMdvnRl9UYBnX3XKa5HnIntRGKrUa6iqS2aOYobFHbCW0lxHbErlJcUdUA7BwxcTRlt1NoBVcCk17s/OKwaaLYcskpAxC0lNetvI/DX4RZbUyrvO1X5a7dguhdXiudofpdwClIqNWeWOyVJ9tLe73Mbax1JCkniTu11PwH0PLfW4o5qJPjEsljLtSrbSU0CUpA4ZfswGOh9Trfo2ZmfNEtVttul06tQYjSY+vUl9hL7UhTYPJCnkrKR5A6cMV21mAB5int/8An5w49ESS0sn2fnDPYS8T+JggiYIIVP2js9hrJi3aM8oD9JV1CynXQ7IsN5ajr9m8ccNLV20VWg4rg3+ZQiHaTOUYSnioeRglZa3XmpmH0c8uTVbnp1sXnPhhxT1YgsyEVWCx7mK8pUoLQ2+pkoWvh39QQRh8SNpzlomYas/pJZQS4TWigobimpFFAgimY4QvGRYVmzLarZa5Vp9JLab126pJFag0SqoUKc4UBOBgkv1y6oeX9WtGjXXHuDMWNSZQiVuJFabZYmqZUmOopbJbUtKgNPMnRRSOWNWkdszNhSDDkym+p5dy9S6kU5y1cTROWHOPARxSbdm2xaj6JEck02L/ACd7lCATRKb2QxzSCbqcATCaezWrzbVUzCtOcpYqctmn1ZSXiS8tUdx2PJ37uJUlxwFWvmcKnWQwSiXeGKQVJ/qooeNDDB0YcAU4g5mh8Kgw8mEhDAiYIImCCAfm7kZ+u3MKlV/MxaYeX1iMPvw6I25ulVuUsB6Q7IKeDEcJbS2BqXFgK8IVic2NbJkJYsyuMy+oJveq2K3UgdZVTU+qMM6RG5yQVNPhTmDaMhx/1/vKKPUc9qRnTIcp1LtqbbqbaDaFNzlRy283LSCz1AjkpCEpa4ceWg8sWx1T6KTViLnUzC0qUso2a+rfqanOtYrBrnnuVXKN3SkpDh+BuYjwj4jZoVjKVk12iUyPVXZSkxnIsqSuKEND3i3kFtC1KUjaBt4eLniVaxtFUW/JMMFzkyh29epewKSlWFR2GPjanJiYRazwbTVBaN9Xqp5ybtcDnilI3+MXKV0coSc2aT0j8mqs1btYnhMyu0GW0tylVVme2DJ4skLZcdSrVRAUnrAF6A64pUq31olHLLnUFaUEoSsHnoKFEJzwUBTDI3TSsW2XZVHxMMm6TmDka/uu/HdB5OhPd1A8tef54gESaJggjCilCStZCUpBKlEgAAcSSTyAx6kEkAAkk0AGJJOQA3k8I8JAFTlA+vy74dbt2r2xQ1qDlSjPQxUyPdNF0bSpKfEsafhh/wCimredammZydUlsNqC+R2lmmICjso7RiYhk5pGyKpaBV25D4cfKFeYhVvL+tNQ62z1cKWQyXkd9h1OuiVtr+sknkdDzxayz5wtvA15qsD+vwheaaWFL2/ZKy107ILjfWwFVtn2VgYbrwB4xmr0+sXfdT9IozPahA/ZisHRhsA99a1ngAVfn6YztSYvzBxwTgPn/eObV5ZzNl6PtuuYLmPrVdYg4Np+Cce9Rhl7CvBu27Wo1sVxK5DtLjNxHKiwNyXOr4BXVnRQ0HDFXdJtWk1Nzj03Juo+sUV8kuqaE5gLxTnxpDIltJWhzXEEDiMfEfpWCJCnQ6jGTMgPJfZXwS4g8NRzB8wR6HCBn5CZknyxMtltxOaVeY3EHcoVETFh9t5AW2oKSd4jfjgjfFdzB+iknx+Jr5rl4v3v3PXDP1afzEzsbK9rPZ+y971eysRvSH+BVnmMu/1vZ4wLsW+hWx1d3fRWpfDeD+IfDf8Af1PtxknaEdMr0yc/w5/88eyOFl79D4/w3zi/hP6j8R/O9cbH+kOee/ONbuafuJy2ch0fu+r2RYcaY1Rdcr/iKn4+TX9nmef3/wDWEHre6GT2c159LkNn3XH24m2i227nu+7/ANfKL/8A4xW+GBH/2Q==',
-}
-const janeAvatar = {
-  image: `data:image/jpeg;base64,${avatars.ade}`,
-  status: { color: 'green', icon: 'icon-checkmark' },
-}
-const headers = ['Irving Kuhic', 'Skyler Parks', 'Dante Schneider']
-const headerMedias = ['7:26:56 AM', '11:30:17 PM', '5:22:40 PM']
-const contents = [
-  'Program the sensor to the SAS alarm through the haptic SQL card!',
-  'Use the online FTP application to input the multi-byte application!',
-  'The GB pixel is down, navigate the virtual interface!',
-]
-
-const items = _.times(60, i => ({
-  id: `test${i}`,
-  key: `key${i}`,
-  content: `${contents[i % contents.length]}`,
-  media: <Avatar {...janeAvatar} />,
-  headerMedia: `${headerMedias[i % headerMedias.length]}`,
-  header: `${headers[i % headers.length]}`,
-}))
-
-const ListWith60ListItems = () => <List items={items} />
-
-ListWith60ListItems.iterations = 1
-ListWith60ListItems.filename = 'ListWith60ListItems.perf.tsx'
-
-export default ListWith60ListItems
diff --git a/docs/src/examples/components/List/Performance/index.tsx b/docs/src/examples/components/List/Performance/index.tsx
index eff0447d12..0f98895912 100644
--- a/docs/src/examples/components/List/Performance/index.tsx
+++ b/docs/src/examples/components/List/Performance/index.tsx
@@ -10,16 +10,6 @@ const Performance = () => (
       description="A typical list with common slots filled."
       examplePath="components/List/Performance/ListCommon.perf"
     />
-    <ComponentPerfExample
-      title="With 60 items"
-      description="A list to be benchmarked against a Tree with List Items."
-      examplePath="components/List/Performance/ListWith60ListItems.perf"
-    />
-    <ComponentPerfExample
-      title="Nested"
-      description="A list with nested lists."
-      examplePath="components/List/Performance/ListNested.perf"
-    />
   </ExampleSection>
 )
 
diff --git a/docs/src/examples/components/List/Types/ListExample.tsx b/docs/src/examples/components/List/Types/ListExample.tsx
index 52e49d1a97..72685b974d 100644
--- a/docs/src/examples/components/List/Types/ListExample.tsx
+++ b/docs/src/examples/components/List/Types/ListExample.tsx
@@ -12,21 +12,18 @@ const ListExampleSelectable = () => {
         header="Irving Kuhic"
         headerMedia="7:26:56 AM"
         content="Program the sensor to the SAS alarm through the haptic SQL card!"
-        index={0}
       />
       <List.Item
         media={<Image src="public/images/avatar/small/steve.jpg" avatar />}
         header="Skyler Parks"
         headerMedia="11:30:17 PM"
         content="Use the online FTP application to input the multi-byte application!"
-        index={1}
       />
       <List.Item
         media={<Image src="public/images/avatar/small/nom.jpg" avatar />}
         header="Dante Schneider"
         headerMedia="5:22:40 PM"
         content="The GB pixel is down, navigate the virtual interface!"
-        index={2}
       />
     </List>
   )
diff --git a/docs/src/examples/components/List/Types/ListExampleNavigable.tsx b/docs/src/examples/components/List/Types/ListExampleNavigable.tsx
index 8ff504ff42..1ff3071564 100644
--- a/docs/src/examples/components/List/Types/ListExampleNavigable.tsx
+++ b/docs/src/examples/components/List/Types/ListExampleNavigable.tsx
@@ -9,7 +9,6 @@ const ListExampleNavigable = () => (
       headerMedia="7:26:56 AM"
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
       navigable
-      index={0}
     />
     <List.Item
       media={<Image src="public/images/avatar/small/steve.jpg" avatar />}
@@ -17,7 +16,6 @@ const ListExampleNavigable = () => (
       headerMedia="11:30:17 PM"
       content="Use the online FTP application to input the multi-byte application!"
       navigable
-      index={1}
     />
     <List.Item
       media={<Image src="public/images/avatar/small/nom.jpg" avatar />}
@@ -25,7 +23,6 @@ const ListExampleNavigable = () => (
       headerMedia="5:22:40 PM"
       content="The GB pixel is down, navigate the virtual interface!"
       navigable
-      index={2}
     />
   </List>
 )
diff --git a/docs/src/examples/components/List/Types/ListExampleSelectable.tsx b/docs/src/examples/components/List/Types/ListExampleSelectable.tsx
index 28f6db6108..f8d97a0202 100644
--- a/docs/src/examples/components/List/Types/ListExampleSelectable.tsx
+++ b/docs/src/examples/components/List/Types/ListExampleSelectable.tsx
@@ -7,22 +7,22 @@ const ListExampleSelectable = () => (
       media={<Image src="public/images/avatar/small/matt.jpg" avatar />}
       header="Irving Kuhic"
       headerMedia="7:26:56 AM"
-      index={0}
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
+      selectable
     />
     <List.Item
       media={<Image src="public/images/avatar/small/steve.jpg" avatar />}
       header="Skyler Parks"
       headerMedia="11:30:17 PM"
-      index={1}
       content="Use the online FTP application to input the multi-byte application!"
+      selectable
     />
     <List.Item
       media={<Image src="public/images/avatar/small/nom.jpg" avatar />}
       header="Dante Schneider"
       headerMedia="5:22:40 PM"
-      index={2}
       content="The GB pixel is down, navigate the virtual interface!"
+      selectable
     />
   </List>
 )
diff --git a/docs/src/examples/components/List/Usage/ListExampleMemo.tsx b/docs/src/examples/components/List/Usage/ListExampleMemo.tsx
deleted file mode 100644
index 6cbbd12c63..0000000000
--- a/docs/src/examples/components/List/Usage/ListExampleMemo.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { useLogKnob } from '@fluentui/docs-components'
-import { List, ListItem } from '@fluentui/react'
-import * as React from 'react'
-
-type MemoItemProps = {
-  children?: string
-  index: number
-  onRender: (index: number) => void
-}
-
-const RenderLogger: React.FC<MemoItemProps & { 'data-id': number }> = props => {
-  const { 'data-id': id, onRender, ...rest } = props
-  onRender(id)
-
-  return <ul {...rest} />
-}
-
-const MemoItem = React.memo<MemoItemProps>(props => {
-  const { children, index, onRender } = props
-
-  return (
-    <ListItem
-      as={RenderLogger}
-      content={children}
-      data-id={index}
-      index={index}
-      onRender={onRender}
-    />
-  )
-})
-
-const ListExampleSelectable = () => {
-  // (!) `handleRender` and `RenderLogger` are used only for logging purposes and are not required
-  //     for an actual implementation
-  const handleRender = useLogKnob(
-    'MemoItem:render',
-    undefined,
-    (id: string, index: number) => `${new Date().toLocaleTimeString()}: ${id}({ id: ${index} })`,
-  )
-
-  return (
-    <List selectable>
-      <MemoItem index={0} onRender={handleRender}>
-        This is an item 0
-      </MemoItem>
-      <MemoItem index={1} onRender={handleRender}>
-        This is an item 1
-      </MemoItem>
-      <MemoItem index={2} onRender={handleRender}>
-        This is an item 2
-      </MemoItem>
-      <MemoItem index={3} onRender={handleRender}>
-        This is an item 3
-      </MemoItem>
-    </List>
-  )
-}
-
-export default ListExampleSelectable
diff --git a/docs/src/examples/components/List/Usage/index.tsx b/docs/src/examples/components/List/Usage/index.tsx
deleted file mode 100644
index cd7447d0fe..0000000000
--- a/docs/src/examples/components/List/Usage/index.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from 'react'
-import ComponentExample from '../../../../components/ComponentDoc/ComponentExample'
-import ExampleSection from '../../../../components/ComponentDoc/ExampleSection'
-
-const Usage = () => (
-  <ExampleSection title="Usage">
-    <ComponentExample
-      title={
-        <>
-          List with <code>React.memo()</code>
-        </>
-      }
-      description="React.memo() can be used to avoid rerenders."
-      examplePath="components/List/Usage/ListExampleMemo"
-    />
-  </ExampleSection>
-)
-
-export default Usage
diff --git a/docs/src/examples/components/List/Variations/ListExampleTruncate.tsx b/docs/src/examples/components/List/Variations/ListExampleTruncate.tsx
index 5046acfb47..2fd2387f22 100644
--- a/docs/src/examples/components/List/Variations/ListExampleTruncate.tsx
+++ b/docs/src/examples/components/List/Variations/ListExampleTruncate.tsx
@@ -17,7 +17,6 @@ const ListExample = () => {
           headerMedia="7:26:56 AM"
           content="Program the sensor to the SAS alarm through the haptic SQL card!"
           contentMedia="!!"
-          index={0}
         />
         <List.Item
           media={<Image src="public/images/avatar/small/steve.jpg" avatar />}
@@ -25,7 +24,6 @@ const ListExample = () => {
           headerMedia="11:30:17 PM"
           content="Use the online FTP application to input the multi-byte application!"
           contentMedia="!!"
-          index={1}
         />
         <List.Item
           media={<Image src="public/images/avatar/small/nom.jpg" avatar />}
@@ -33,7 +31,6 @@ const ListExample = () => {
           headerMedia="5:22:40 PM"
           content="The GB pixel is down, navigate the virtual interface!"
           contentMedia="!!"
-          index={2}
         />
       </List>
     </div>
diff --git a/docs/src/examples/components/List/index.tsx b/docs/src/examples/components/List/index.tsx
index fae919b8e2..47ad2ce4a6 100644
--- a/docs/src/examples/components/List/index.tsx
+++ b/docs/src/examples/components/List/index.tsx
@@ -5,7 +5,6 @@ import Types from './Types'
 import Content from './Content'
 import Variations from './Variations'
 import Performance from './Performance'
-import Usage from './Usage'
 
 const ListExamples = () => (
   <>
@@ -14,7 +13,6 @@ const ListExamples = () => (
     <Variations />
     <Rtl />
     <Performance />
-    <Usage />
   </>
 )
 
diff --git a/docs/src/examples/components/Loader/BestPractices/LoaderBestPractices.tsx b/docs/src/examples/components/Loader/BestPractices/LoaderBestPractices.tsx
deleted file mode 100644
index f9713d3396..0000000000
--- a/docs/src/examples/components/Loader/BestPractices/LoaderBestPractices.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as React from 'react'
-
-import ComponentBestPractices from '../../../../components/ComponentBestPractices'
-
-const doList = [
-  'Use react-aria-live or similar component to announce the loading state.',
-  'If loader is only the element in the screen or region, consider making it focusable by setting `tabIndex` prop to the `Loader`. In most of these cases value of `tabIndex` should be 0.',
-]
-
-const LoaderBestPractices: React.FunctionComponent<{}> = () => {
-  return <ComponentBestPractices doList={doList} />
-}
-
-export default LoaderBestPractices
diff --git a/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.steps.ts b/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.steps.ts
deleted file mode 100644
index 6302da7b15..0000000000
--- a/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.steps.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Button } from '@fluentui/react'
-
-const config: ScreenerTestsConfig = {
-  steps: [builder => builder.click(`.${Button.className}`).snapshot('Shows popup')],
-}
-
-export default config
diff --git a/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.tsx b/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.tsx
index 8a47ce3f6a..1182c806f5 100644
--- a/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.tsx
@@ -1,33 +1,37 @@
 import * as React from 'react'
-import { Popup, Button, Divider, Text, Grid, Ref } from '@fluentui/react'
+import { Popup, Button, Divider, Text, Grid } from '@fluentui/react'
+import { findDOMNode } from 'react-dom'
 
-const PopupCustomTargetExample: React.FC = () => {
-  const [textRef, setTextRef] = React.useState<HTMLSpanElement | null>(null)
+class PopupExample extends React.Component {
+  ref = React.createRef<any>()
+  state = { popupTarget: undefined }
 
-  return (
-    <Grid columns="auto 1fr">
-      {/* CUSTOM DOM ELEMENT is used as target for Popup */}
-      <Popup
-        target={textRef}
-        trigger={<Button icon="qna" circular styles={{ cursor: 'pointer' }} title="Q&amp;A" />}
-        content="well, yes, I am just a garbish text ¯\_(ツ)_/¯"
-        position="below"
-      >
-        <Button icon="qna" circular styles={{ cursor: 'pointer' }} title="Q&amp;A" />
-      </Popup>
+  componentDidMount() {
+    this.setState({ popupTarget: findDOMNode(this.ref.current) })
+  }
 
-      <div style={{ marginLeft: 10 }}>
-        <Text>Could you guess what does this text means? :)</Text>
-        <Divider />
-        <Ref innerRef={setTextRef}>
-          <Text>
+  render() {
+    return (
+      <Grid columns="auto 1fr">
+        {/* CUSTOM DOM ELEMENT is used as target for Popup */}
+        <Popup
+          target={this.state.popupTarget}
+          trigger={<Button icon="qna" circular styles={{ cursor: 'pointer' }} title="Q&amp;A" />}
+          content="well, yes, I am just a garbish text ¯\_(ツ)_/¯"
+          position="below"
+        />
+
+        <div style={{ marginLeft: 10 }}>
+          <Text>Could you guess what does this text means? :)</Text>
+          <Divider />
+          <Text ref={this.ref}>
             "To the lascivious looking-glass I, that love's majesty to strut before a want love's
             majesto, to the souls of York."
           </Text>
-        </Ref>
-      </div>
-    </Grid>
-  )
+        </div>
+      </Grid>
+    )
+  }
 }
 
-export default PopupCustomTargetExample
+export default PopupExample
diff --git a/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.tsx b/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.tsx
index d58fad3ab1..b8fcf0506a 100644
--- a/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.tsx
@@ -1,32 +1,38 @@
 import * as React from 'react'
-import { Popup, Button, Divider, Text, Grid, Ref } from '@fluentui/react'
+import { Popup, Button, Divider, Text, Grid } from '@fluentui/react'
+import { findDOMNode } from 'react-dom'
 
-const PopupCustomTargetExample: React.FC = () => {
-  const [textRef, setTextRef] = React.useState<HTMLSpanElement | null>(null)
+class PopupExample extends React.Component {
+  ref = React.createRef<any>()
+  state = { popupTarget: undefined }
 
-  return (
-    <Grid columns="auto 1fr">
-      {/* CUSTOM DOM ELEMENT is used as target for Popup */}
-      <Popup
-        target={textRef}
-        content="well, yes, I am just a garbish text ¯\_(ツ)_/¯"
-        position="below"
-      >
-        <Button icon="qna" circular styles={{ cursor: 'pointer' }} title="Q&amp;A" />
-      </Popup>
+  componentDidMount() {
+    this.setState({ popupTarget: findDOMNode(this.ref.current) })
+  }
 
-      <div style={{ marginLeft: 10 }}>
-        <Text>Could you guess what does this text means? :)</Text>
-        <Divider />
-        <Ref innerRef={setTextRef}>
-          <Text>
+  render() {
+    return (
+      <Grid columns="auto 1fr">
+        {/* CUSTOM DOM ELEMENT is used as target for Popup */}
+        <Popup
+          target={this.state.popupTarget}
+          content="well, yes, I am just a garbish text ¯\_(ツ)_/¯"
+          position="below"
+        >
+          <Button icon="qna" circular styles={{ cursor: 'pointer' }} title="Q&amp;A" />
+        </Popup>
+
+        <div style={{ marginLeft: 10 }}>
+          <Text>Could you guess what does this text means? :)</Text>
+          <Divider />
+          <Text ref={this.ref}>
             "To the lascivious looking-glass I, that love's majesty to strut before a want love's
             majesto, to the souls of York."
           </Text>
-        </Ref>
-      </div>
-    </Grid>
-  )
+        </div>
+      </Grid>
+    )
+  }
 }
 
-export default PopupCustomTargetExample
+export default PopupExample
diff --git a/docs/src/examples/components/Popup/Types/PopupExamplePointerOffset.steps.ts b/docs/src/examples/components/Popup/Types/PopupExamplePointerOffset.steps.ts
deleted file mode 100644
index 6302da7b15..0000000000
--- a/docs/src/examples/components/Popup/Types/PopupExamplePointerOffset.steps.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Button } from '@fluentui/react'
-
-const config: ScreenerTestsConfig = {
-  steps: [builder => builder.click(`.${Button.className}`).snapshot('Shows popup')],
-}
-
-export default config
diff --git a/docs/src/examples/components/Popup/Types/PopupExamplePointerOffset.tsx b/docs/src/examples/components/Popup/Types/PopupExamplePointerOffset.tsx
deleted file mode 100644
index bee5a59741..0000000000
--- a/docs/src/examples/components/Popup/Types/PopupExamplePointerOffset.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Button, Popup } from '@fluentui/react'
-import * as React from 'react'
-
-const PopupExamplePointerOffset = () => (
-  <div style={{ marginLeft: 50, marginTop: 75 }}>
-    <Popup
-      align="center"
-      position="above"
-      offset="20px"
-      pointing
-      trigger={<Button>Click</Button>}
-      content={
-        <p>
-          The popup is rendered at above-start
-          <br />
-          corner of the trigger.
-        </p>
-      }
-    />
-  </div>
-)
-
-export default PopupExamplePointerOffset
diff --git a/docs/src/examples/components/Popup/Types/index.tsx b/docs/src/examples/components/Popup/Types/index.tsx
index 09f10e95cb..c2c8994390 100644
--- a/docs/src/examples/components/Popup/Types/index.tsx
+++ b/docs/src/examples/components/Popup/Types/index.tsx
@@ -2,7 +2,6 @@ import * as React from 'react'
 
 import ComponentExample from '../../../../components/ComponentDoc/ComponentExample'
 import ExampleSection from '../../../../components/ComponentDoc/ExampleSection'
-import NonPublicSection from '../../../../components/ComponentDoc/NonPublicSection'
 
 const Types = () => (
   <ExampleSection title="Types">
@@ -36,10 +35,6 @@ const Types = () => (
       description="The content of the popup can be rendered next to the trigger element instead of the body."
       examplePath="components/Popup/Types/PopupExampleInline"
     />
-
-    <NonPublicSection title="Types for visual tests">
-      <ComponentExample examplePath="components/Popup/Types/PopupExamplePointerOffset" />
-    </NonPublicSection>
   </ExampleSection>
 )
 
diff --git a/docs/src/examples/components/Provider/Types/ProviderExampleStyles.tsx b/docs/src/examples/components/Provider/Types/ProviderExampleStyles.tsx
deleted file mode 100644
index 8dfd3567ee..0000000000
--- a/docs/src/examples/components/Provider/Types/ProviderExampleStyles.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from 'react'
-import { mergeThemes, Provider, themes } from '@fluentui/react'
-
-const ProviderExampleShorthand = () => (
-  <Provider
-    variables={{ background: 'red' }}
-    design={{ padding: '20px' }}
-    styles={{ borderBottom: '3px solid blue' }}
-    theme={mergeThemes(themes.teamsDark, {
-      siteVariables: {
-        bodyBackground: 'salmon',
-      },
-      componentVariables: {
-        Provider: {
-          color: 'yellow',
-        },
-      },
-      componentStyles: {
-        Provider: {
-          root: {
-            borderTop: '3px solid green',
-          },
-        },
-      },
-    })}
-  >
-    <p>with custom overrides</p>
-  </Provider>
-)
-
-export default ProviderExampleShorthand
diff --git a/docs/src/examples/components/Provider/Types/index.tsx b/docs/src/examples/components/Provider/Types/index.tsx
index 576c53a321..a26553e569 100644
--- a/docs/src/examples/components/Provider/Types/index.tsx
+++ b/docs/src/examples/components/Provider/Types/index.tsx
@@ -25,7 +25,8 @@ const Types = () => (
     </ExampleSection>
     <NonPublicSection title="Types for visual tests">
       <ComponentExample examplePath="components/Provider/Types/ProviderExampleScrollbar" />
-      <ComponentExample examplePath="components/Provider/Types/ProviderExampleStyles" />
+    </NonPublicSection>
+    <NonPublicSection title="Types for visual tests">
       <ComponentExample examplePath="components/Provider/Types/ProviderExampleRendererFelaPluginFallbackValue" />
     </NonPublicSection>
   </>
diff --git a/docs/src/examples/components/Tooltip/Types/TooltipExamplePointing.shorthand.steps.ts b/docs/src/examples/components/Tooltip/Types/TooltipExamplePointing.shorthand.steps.ts
deleted file mode 100644
index 17170bf6ee..0000000000
--- a/docs/src/examples/components/Tooltip/Types/TooltipExamplePointing.shorthand.steps.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Button } from '@fluentui/react'
-
-const config: ScreenerTestsConfig = {
-  steps: [
-    builder => builder.hover(`.${Button.className}`).snapshot('Shows tooltip'),
-    (builder, keys) =>
-      builder
-        .keys('body', keys.tab)
-        .snapshot('Has outline on keyboard')
-        .click(`.${Button.className}`)
-        .snapshot('No outline after click'),
-  ],
-}
-
-export default config
diff --git a/docs/src/examples/components/Tree/Performance/TreeWith60ListItems.perf.tsx b/docs/src/examples/components/Tree/Performance/TreeWith60ListItems.perf.tsx
deleted file mode 100644
index 55ba6d2f1e..0000000000
--- a/docs/src/examples/components/Tree/Performance/TreeWith60ListItems.perf.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { Tree, Avatar, List } from '@fluentui/react'
-import * as _ from 'lodash'
-import * as React from 'react'
-
-const avatars = {
-  ade:
-    '/9j/4AAQSkZJRgABAQAAAQABAAD/4gxYSUNDX1BST0ZJTEUAAQEAAAxITGlubwIQAABtbnRyUkdCIFhZWiAHzgACAAkABgAxAABhY3NwTVNGVAAAAABJRUMgc1JHQgAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLUhQICAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABFjcHJ0AAABUAAAADNkZXNjAAABhAAAAGx3dHB0AAAB8AAAABRia3B0AAACBAAAABRyWFlaAAACGAAAABRnWFlaAAACLAAAABRiWFlaAAACQAAAABRkbW5kAAACVAAAAHBkbWRkAAACxAAAAIh2dWVkAAADTAAAAIZ2aWV3AAAD1AAAACRsdW1pAAAD+AAAABRtZWFzAAAEDAAAACR0ZWNoAAAEMAAAAAxyVFJDAAAEPAAACAxnVFJDAAAEPAAACAxiVFJDAAAEPAAACAx0ZXh0AAAAAENvcHlyaWdodCAoYykgMTk5OCBIZXdsZXR0LVBhY2thcmQgQ29tcGFueQAAZGVzYwAAAAAAAAASc1JHQiBJRUM2MTk2Ni0yLjEAAAAAAAAAAAAAABJzUkdCIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWFlaIAAAAAAAAPNRAAEAAAABFsxYWVogAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z2Rlc2MAAAAAAAAAFklFQyBodHRwOi8vd3d3LmllYy5jaAAAAAAAAAAAAAAAFklFQyBodHRwOi8vd3d3LmllYy5jaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABkZXNjAAAAAAAAAC5JRUMgNjE5NjYtMi4xIERlZmF1bHQgUkdCIGNvbG91ciBzcGFjZSAtIHNSR0IAAAAAAAAAAAAAAC5JRUMgNjE5NjYtMi4xIERlZmF1bHQgUkdCIGNvbG91ciBzcGFjZSAtIHNSR0IAAAAAAAAAAAAAAAAAAAAAAAAAAAAAZGVzYwAAAAAAAAAsUmVmZXJlbmNlIFZpZXdpbmcgQ29uZGl0aW9uIGluIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAALFJlZmVyZW5jZSBWaWV3aW5nIENvbmRpdGlvbiBpbiBJRUM2MTk2Ni0yLjEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHZpZXcAAAAAABOk/gAUXy4AEM8UAAPtzAAEEwsAA1yeAAAAAVhZWiAAAAAAAEwJVgBQAAAAVx/nbWVhcwAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAo8AAAACc2lnIAAAAABDUlQgY3VydgAAAAAAAAQAAAAABQAKAA8AFAAZAB4AIwAoAC0AMgA3ADsAQABFAEoATwBUAFkAXgBjAGgAbQByAHcAfACBAIYAiwCQAJUAmgCfAKQAqQCuALIAtwC8AMEAxgDLANAA1QDbAOAA5QDrAPAA9gD7AQEBBwENARMBGQEfASUBKwEyATgBPgFFAUwBUgFZAWABZwFuAXUBfAGDAYsBkgGaAaEBqQGxAbkBwQHJAdEB2QHhAekB8gH6AgMCDAIUAh0CJgIvAjgCQQJLAlQCXQJnAnECegKEAo4CmAKiAqwCtgLBAssC1QLgAusC9QMAAwsDFgMhAy0DOANDA08DWgNmA3IDfgOKA5YDogOuA7oDxwPTA+AD7AP5BAYEEwQgBC0EOwRIBFUEYwRxBH4EjASaBKgEtgTEBNME4QTwBP4FDQUcBSsFOgVJBVgFZwV3BYYFlgWmBbUFxQXVBeUF9gYGBhYGJwY3BkgGWQZqBnsGjAadBq8GwAbRBuMG9QcHBxkHKwc9B08HYQd0B4YHmQesB78H0gflB/gICwgfCDIIRghaCG4IggiWCKoIvgjSCOcI+wkQCSUJOglPCWQJeQmPCaQJugnPCeUJ+woRCicKPQpUCmoKgQqYCq4KxQrcCvMLCwsiCzkLUQtpC4ALmAuwC8gL4Qv5DBIMKgxDDFwMdQyODKcMwAzZDPMNDQ0mDUANWg10DY4NqQ3DDd4N+A4TDi4OSQ5kDn8Omw62DtIO7g8JDyUPQQ9eD3oPlg+zD88P7BAJECYQQxBhEH4QmxC5ENcQ9RETETERTxFtEYwRqhHJEegSBxImEkUSZBKEEqMSwxLjEwMTIxNDE2MTgxOkE8UT5RQGFCcUSRRqFIsUrRTOFPAVEhU0FVYVeBWbFb0V4BYDFiYWSRZsFo8WshbWFvoXHRdBF2UXiReuF9IX9xgbGEAYZRiKGK8Y1Rj6GSAZRRlrGZEZtxndGgQaKhpRGncanhrFGuwbFBs7G2MbihuyG9ocAhwqHFIcexyjHMwc9R0eHUcdcB2ZHcMd7B4WHkAeah6UHr4e6R8THz4faR+UH78f6iAVIEEgbCCYIMQg8CEcIUghdSGhIc4h+yInIlUigiKvIt0jCiM4I2YjlCPCI/AkHyRNJHwkqyTaJQklOCVoJZclxyX3JicmVyaHJrcm6CcYJ0kneierJ9woDSg/KHEooijUKQYpOClrKZ0p0CoCKjUqaCqbKs8rAis2K2krnSvRLAUsOSxuLKIs1y0MLUEtdi2rLeEuFi5MLoIuty7uLyQvWi+RL8cv/jA1MGwwpDDbMRIxSjGCMbox8jIqMmMymzLUMw0zRjN/M7gz8TQrNGU0njTYNRM1TTWHNcI1/TY3NnI2rjbpNyQ3YDecN9c4FDhQOIw4yDkFOUI5fzm8Ofk6Njp0OrI67zstO2s7qjvoPCc8ZTykPOM9Ij1hPaE94D4gPmA+oD7gPyE/YT+iP+JAI0BkQKZA50EpQWpBrEHuQjBCckK1QvdDOkN9Q8BEA0RHRIpEzkUSRVVFmkXeRiJGZ0arRvBHNUd7R8BIBUhLSJFI10kdSWNJqUnwSjdKfUrESwxLU0uaS+JMKkxyTLpNAk1KTZNN3E4lTm5Ot08AT0lPk0/dUCdQcVC7UQZRUFGbUeZSMVJ8UsdTE1NfU6pT9lRCVI9U21UoVXVVwlYPVlxWqVb3V0RXklfgWC9YfVjLWRpZaVm4WgdaVlqmWvVbRVuVW+VcNVyGXNZdJ114XcleGl5sXr1fD19hX7NgBWBXYKpg/GFPYaJh9WJJYpxi8GNDY5dj62RAZJRk6WU9ZZJl52Y9ZpJm6Gc9Z5Nn6Wg/aJZo7GlDaZpp8WpIap9q92tPa6dr/2xXbK9tCG1gbbluEm5rbsRvHm94b9FwK3CGcOBxOnGVcfByS3KmcwFzXXO4dBR0cHTMdSh1hXXhdj52m3b4d1Z3s3gReG54zHkqeYl553pGeqV7BHtje8J8IXyBfOF9QX2hfgF+Yn7CfyN/hH/lgEeAqIEKgWuBzYIwgpKC9INXg7qEHYSAhOOFR4Wrhg6GcobXhzuHn4gEiGmIzokziZmJ/opkisqLMIuWi/yMY4zKjTGNmI3/jmaOzo82j56QBpBukNaRP5GokhGSepLjk02TtpQglIqU9JVflcmWNJaflwqXdZfgmEyYuJkkmZCZ/JpomtWbQpuvnByciZz3nWSd0p5Anq6fHZ+Ln/qgaaDYoUehtqImopajBqN2o+akVqTHpTilqaYapoum/adup+CoUqjEqTepqaocqo+rAqt1q+msXKzQrUStuK4trqGvFq+LsACwdbDqsWCx1rJLssKzOLOutCW0nLUTtYq2AbZ5tvC3aLfguFm40blKucK6O7q1uy67p7whvJu9Fb2Pvgq+hL7/v3q/9cBwwOzBZ8Hjwl/C28NYw9TEUcTOxUvFyMZGxsPHQce/yD3IvMk6ybnKOMq3yzbLtsw1zLXNNc21zjbOts83z7jQOdC60TzRvtI/0sHTRNPG1EnUy9VO1dHWVdbY11zX4Nhk2OjZbNnx2nba+9uA3AXcit0Q3ZbeHN6i3ynfr+A24L3hROHM4lPi2+Nj4+vkc+T85YTmDeaW5x/nqegy6LzpRunQ6lvq5etw6/vshu0R7ZzuKO6070DvzPBY8OXxcvH/8ozzGfOn9DT0wvVQ9d72bfb794r4Gfio+Tj5x/pX+uf7d/wH/Jj9Kf26/kv+3P9t////2wBDAAMCAgICAgMCAgMFAwMDBQUEAwMEBQYFBQUFBQYIBgcHBwcGCAgJCgoKCQgMDAwMDAwODg4ODhAQEBAQEBAQEBD/2wBDAQMEBAYGBgwICAwSDgwOEhQQEBAQFBEQEBAQEBEREBAQEBAQERAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAyADIDAREAAhEBAxEB/8QAHQAAAgICAwEAAAAAAAAAAAAABwgABgEDBAUJAv/EADwQAAEDAgQCBwMICwAAAAAAAAECAwQFBgAHERIhMQgTFCIyQVEJIzQWMzZSYWJxgRUXJENFY3JzkcHy/8QAHAEAAgIDAQEAAAAAAAAAAAAAAAcGCAIDBAEF/8QAQBEAAQIDBAUIBggHAQAAAAAAAQIDAAQRBRIhMQYHMkFREyIzUmFxkbEUQmJjgcEVI0NygrLR8DQ2kqGz4fLC/9oADAMBAAIRAxEAPwBmMU0h8RUs2cyqLlBl3Wcxa80qTHpTaBHgtq2rly31hthhKtDt3rI1VodqdT5Y+tZNmuT82iXbNCrM9VIxJ+A8THBPTaZZkuHdHm9evS46Q961B6Y5eEmgRVq1YpNB0hRmUk8EApBdWfLctZJxYyS0SsmWQByIWes5zifkO4CFg9a826qt8juwp842WL0uOkHl/WW5ki55dyRGXNJ9v19XaGnkpOi2960h1lz0Uk908weWC0NEbLmUFHJBtXWQLpSe0ZHtBEeS9sTTZCgu8DxNajsPzEelWX980HMyyaLf9sKUqm1yOmSwhzTrGV6lDrLmnDe04koV+GuK2T8i7JzK5d3aQad/AjsIxhqSkwl9pLicjFgxwR1xMEETBBCwe0SedZyIpSQvYyu4IXaeOgIRHkKTqfQK44Zur0D6TXXMNq80xEtJSfRR94eRhZ+j/lbTHpvyvuotrqMHq36Zbjw2vxkuDVqbJYWAoBQ4sajafF6YuVovZDS1ekOkFScUo3jgpQ/L4xU7TvSJ9pHobAUlC8Fu0ICuLaFf5Dn6uVY52eWWLN2VOrXVYCVVOv0Zjtt7USC05IdbiJGvbnOqSpLa0p4uJUQVJ72moOMdKpKWLpdaUkODbRXE+1TrcRvGPfloDac6lgS7zaix9k7Tmp92fY6pySebkRB69nLcjtSyqui2XHesbolZS/DGuoS1UoyXVAfYVtk/nin+sSXCZ1p0euih70GnkYtToy6SypHA+f7MNfhVRM4mCCJgggGdLtuhOWhYQumMibRvlvb6arDcdEdD0ZZeQtKnTrsTxBKvIYZmrwj6WNcuTV5piIaU19BwzvDyMdvnRl9UYBnX3XKa5HnIntRGKrUa6iqS2aOYobFHbCW0lxHbErlJcUdUA7BwxcTRlt1NoBVcCk17s/OKwaaLYcskpAxC0lNetvI/DX4RZbUyrvO1X5a7dguhdXiudofpdwClIqNWeWOyVJ9tLe73Mbax1JCkniTu11PwH0PLfW4o5qJPjEsljLtSrbSU0CUpA4ZfswGOh9Trfo2ZmfNEtVttul06tQYjSY+vUl9hL7UhTYPJCnkrKR5A6cMV21mAB5int/8An5w49ESS0sn2fnDPYS8T+JggiYIIVP2js9hrJi3aM8oD9JV1CynXQ7IsN5ajr9m8ccNLV20VWg4rg3+ZQiHaTOUYSnioeRglZa3XmpmH0c8uTVbnp1sXnPhhxT1YgsyEVWCx7mK8pUoLQ2+pkoWvh39QQRh8SNpzlomYas/pJZQS4TWigobimpFFAgimY4QvGRYVmzLarZa5Vp9JLab126pJFag0SqoUKc4UBOBgkv1y6oeX9WtGjXXHuDMWNSZQiVuJFabZYmqZUmOopbJbUtKgNPMnRRSOWNWkdszNhSDDkym+p5dy9S6kU5y1cTROWHOPARxSbdm2xaj6JEck02L/ACd7lCATRKb2QxzSCbqcATCaezWrzbVUzCtOcpYqctmn1ZSXiS8tUdx2PJ37uJUlxwFWvmcKnWQwSiXeGKQVJ/qooeNDDB0YcAU4g5mh8Kgw8mEhDAiYIImCCAfm7kZ+u3MKlV/MxaYeX1iMPvw6I25ulVuUsB6Q7IKeDEcJbS2BqXFgK8IVic2NbJkJYsyuMy+oJveq2K3UgdZVTU+qMM6RG5yQVNPhTmDaMhx/1/vKKPUc9qRnTIcp1LtqbbqbaDaFNzlRy283LSCz1AjkpCEpa4ceWg8sWx1T6KTViLnUzC0qUso2a+rfqanOtYrBrnnuVXKN3SkpDh+BuYjwj4jZoVjKVk12iUyPVXZSkxnIsqSuKEND3i3kFtC1KUjaBt4eLniVaxtFUW/JMMFzkyh29epewKSlWFR2GPjanJiYRazwbTVBaN9Xqp5ybtcDnilI3+MXKV0coSc2aT0j8mqs1btYnhMyu0GW0tylVVme2DJ4skLZcdSrVRAUnrAF6A64pUq31olHLLnUFaUEoSsHnoKFEJzwUBTDI3TSsW2XZVHxMMm6TmDka/uu/HdB5OhPd1A8tef54gESaJggjCilCStZCUpBKlEgAAcSSTyAx6kEkAAkk0AGJJOQA3k8I8JAFTlA+vy74dbt2r2xQ1qDlSjPQxUyPdNF0bSpKfEsafhh/wCimredammZydUlsNqC+R2lmmICjso7RiYhk5pGyKpaBV25D4cfKFeYhVvL+tNQ62z1cKWQyXkd9h1OuiVtr+sknkdDzxayz5wtvA15qsD+vwheaaWFL2/ZKy107ILjfWwFVtn2VgYbrwB4xmr0+sXfdT9IozPahA/ZisHRhsA99a1ngAVfn6YztSYvzBxwTgPn/eObV5ZzNl6PtuuYLmPrVdYg4Np+Cce9Rhl7CvBu27Wo1sVxK5DtLjNxHKiwNyXOr4BXVnRQ0HDFXdJtWk1Nzj03Juo+sUV8kuqaE5gLxTnxpDIltJWhzXEEDiMfEfpWCJCnQ6jGTMgPJfZXwS4g8NRzB8wR6HCBn5CZknyxMtltxOaVeY3EHcoVETFh9t5AW2oKSd4jfjgjfFdzB+iknx+Jr5rl4v3v3PXDP1afzEzsbK9rPZ+y971eysRvSH+BVnmMu/1vZ4wLsW+hWx1d3fRWpfDeD+IfDf8Af1PtxknaEdMr0yc/w5/88eyOFl79D4/w3zi/hP6j8R/O9cbH+kOee/ONbuafuJy2ch0fu+r2RYcaY1Rdcr/iKn4+TX9nmef3/wDWEHre6GT2c159LkNn3XH24m2i227nu+7/ANfKL/8A4xW+GBH/2Q==',
-}
-const janeAvatar = {
-  image: `data:image/jpeg;base64,${avatars.ade}`,
-  status: { color: 'green', icon: 'icon-checkmark' },
-}
-
-const headers = ['Irving Kuhic', 'Skyler Parks', 'Dante Schneider']
-const headerMedias = ['7:26:56 AM', '11:30:17 PM', '5:22:40 PM']
-const contents = [
-  'Program the sensor to the SAS alarm through the haptic SQL card!',
-  'Use the online FTP application to input the multi-byte application!',
-  'The GB pixel is down, navigate the virtual interface!',
-]
-
-const itemData = id =>
-  _.times(20, i => ({
-    id: `${id}${i}`,
-    key: `key${id}${i}`,
-    title: {
-      content: `${contents[i % contents.length]}`,
-      media: <Avatar {...janeAvatar} />,
-      headerMedia: `${headerMedias[i % headerMedias.length]}`,
-      header: `${headers[i % headers.length]}`,
-    },
-  }))
-
-const items = [
-  {
-    id: '1',
-    title: 'House Lannister',
-    items: itemData('list-1'),
-  },
-  {
-    id: '2',
-    title: 'House Targaryen',
-    items: itemData('list-2'),
-  },
-
-  {
-    id: '3',
-    title: 'House Stark',
-    items: itemData('list-3'),
-  },
-]
-
-// This renders titles depending on their level. The level one titles are rendered as default
-// TreeTitle with just text, while the level 2 titles are rendered as ListItems.
-const titleRenderer = (Component, { content, header, headerMedia, media, ...restProps }) => {
-  return !header ? (
-    <Component {...restProps}>{content}</Component>
-  ) : (
-    <List.Item
-      {...restProps}
-      content={content}
-      header={header}
-      headerMedia={headerMedia}
-      media={media}
-    />
-  )
-}
-
-const TreeWith60ListItems = () => (
-  <Tree items={items} defaultActiveItemIds={['1', '2', '3']} renderItemTitle={titleRenderer} />
-)
-
-TreeWith60ListItems.iterations = 1
-TreeWith60ListItems.filename = 'TreeWith60ListItems.perf.tsx'
-
-export default TreeWith60ListItems
diff --git a/docs/src/examples/components/Tree/Performance/index.tsx b/docs/src/examples/components/Tree/Performance/index.tsx
deleted file mode 100644
index 1b9a4c8374..0000000000
--- a/docs/src/examples/components/Tree/Performance/index.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-
-import ComponentPerfExample from '../../../../components/ComponentDoc/ComponentPerfExample'
-import ExampleSection from '../../../../components/ComponentDoc/ExampleSection'
-
-const Performance = () => (
-  <ExampleSection title="Performance">
-    <ComponentPerfExample
-      title="Default"
-      description="A test with list items as titles."
-      examplePath="components/Tree/Performance/TreeWith60ListItems.perf"
-    />
-  </ExampleSection>
-)
-
-export default Performance
diff --git a/docs/src/examples/components/Tree/index.tsx b/docs/src/examples/components/Tree/index.tsx
index 84305160a3..a142fadb13 100644
--- a/docs/src/examples/components/Tree/index.tsx
+++ b/docs/src/examples/components/Tree/index.tsx
@@ -1,13 +1,11 @@
 import * as React from 'react'
 import Types from './Types'
 import Usage from './Usage'
-import Performance from './Performance'
 
 const TreeExamples = () => (
   <>
     <Types />
     <Usage />
-    <Performance />
   </>
 )
 
diff --git a/docs/src/pages/ComponentArchitecture.mdx b/docs/src/pages/ComponentArchitecture.mdx
deleted file mode 100644
index cac0bcf2b6..0000000000
--- a/docs/src/pages/ComponentArchitecture.mdx
+++ /dev/null
@@ -1,47 +0,0 @@
-export const meta = {
-  title: 'Component Architecture',
-}
-
-The design and architecture of components should follow from a set of first principles.
-
-- There is 1 right way to do things, and it's easy to do the right thing.
-- Consumers should not be penalized for code they don't use (through bundle size, perf, etc).
-- Don't overgeneralize until we have a clear need (abstracting should solve a bundle size goal, or DRY goal, or partner use case)
-
-#### The consumer should be able to override, extend, or replace any opinions of the library.
-
-TODO: expand on what this means for the following aspects of the library:
-
-- State
-- Styling
-- Acessibility
-- Slots
-- Styling approach (css, css-in-js, etc)
-
-#### Components should be composable
-
-#### There should be one JSX element in the tree per rendered component
-
-#### Applications which load their own CSS in other means should not pay the penalty of loading a runtime CSS-in-JS package, especially if the class names are known at time of authoring.
-
-#### Applications which want to override specific aspects of a component should not incur a penalty of loading a concretely referenced component that will not be rendered in the final output.
-
-#### Any external dependencies mean negative parsing time, bundle size and runtime impact for consumers that don't intend to use them.
-
-#### There is a limited set of accessibility options that work well together, and each combination should be tested cohesively.
-
-#### Consumers should be able to import one component and have an appropriately minimal bundle size.
-
-#### We want to offer a delightful first-run experience, and bundle size will not be negatively impacted by including the default theme.
-
-#### As a component library cannot anticipate all needs to applications' design systems, allowances should be made to extend the design system while maintaining rich levels of type safety.
-
-#### Components should leverage a platform library's function to pass all relevant native props to appropriate controls whenever available.
-
-#### A component should be able to render any theme (including tokens, styles, icons and animations).
-
-#### Themes should cascade and merge allowing subtree themes to be updated at runtime and have the ability to adjust the incoming theme.
-
-#### RTL/LTR mode should be configurable for the entire application or a subtree of the application.
-
-#### Animations should be configurable for the entire application or a subtree of the application.
diff --git a/docs/src/pages/ThemingSpecification.mdx b/docs/src/pages/ThemingSpecification.mdx
deleted file mode 100644
index e231101658..0000000000
--- a/docs/src/pages/ThemingSpecification.mdx
+++ /dev/null
@@ -1,282 +0,0 @@
-export const meta = {
-  title: 'Theming specification',
-}
-
-## Goals and requirements
-
-Components should have support for both CSS stylesheets and CSSinJS approaches. The theming mechanism as part of Fluent UI should be flexible and provide support for CSSinJS theme and all existing customization scenarios. Users can opt-out if the theming approach does not meet their needs.
-
-##### Support for CSS stylesheets
-
-Тhe users should be able to specify mappings from properties to classnames.
-
-**IMPORTANT**: applications which load their own CSS in other means should not pay the penalty of loading a runtime CSS-in-JS package, especially if the class names are known at time of authoring.
-
-##### Support for CSSinJS
-
-CSSinJS support that will not tie the users to just one CSS in JS framework. The users should be able to define their styles and specify the engine that they want to use, which will be aligned to some defined interface. The users are responsible for making sure that their styles are compatible with the CSSinJS engine that they use. Fluent will not support any compatibility between different engines.
-
-#### Application developers can get small bundles when only using a subset of components
-
-If the client's application contains only a subset of the Fluent components, we should provide a mechanism for the application developers to register the theme only for the components used.
-
-#### A component should be able to render any theme (including tokens, styles, icons and animations)
-
-The client should be able to reuse the components between different themes. Supporting new theme in the application should not require building new components.
-
-If new variants are added in the new theme, then the clients should be able to compose the existing component, by adding new design terms (via the props API). If the new theme doesn't need to support any new variant, nothing should be required from the client's side.
-
-##### Variants
-
-Variants are a way of allowing the users to specify new design terms for their components (among other customizations).
-
-In the CSS scenario, it is basically a way of allowing user to specify mapping to className for a new prop.
-
-In the CSSinJS scenario, it is allowing user to have new properties (design terms) inside the styles functions.
-
-#### Themes should cascade and merge allowing subtree themes to be updated at runtime and have the ability to adjust the incoming theme.
-
-If some parameters/tokens are changed on the root of the application, the changes should be propagated to all nested subtrees.
-
-#### RTL and disable animation modes should be configurable for the entire application or a subtree of the application.
-
-It is important to allow the users to specify the RTL/LTR mode for the entire application once, but if necessary they can specify it only in a subtree of the application (for example one chat message).
-
-The same is true for the disable animations mode. It is important to allow the users to specify it for the entire application once, but if necessary they can specify it only in a subtree of the application (for example the `Loader` component should always be animated).
-
-#### Parent components should be able to customize the styles for the child components
-
-The parent component should be able to customize the styles for it's children/slots, usually for positioning scenarios, or contextual changes that should be applied when some design term is applied on the parent component. This is especially required for "recursive component"'s scenarios
-
-## Technical proposal
-
-In the rest of the specification, there will be some proposals of how the themes, mappings and utilities can be structured.
-
-#### CSS stylesheets usage
-
-Users should be able to define mapping from props to classNames per component level.
-
-For inspiration we can get some ideas from [React Semantic UI's className builders](https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/lib/classNameBuilders.js)
-
-#### CSSinJS usage
-
-If users decide to use CSSinJS we have to propose some structure of how they can define all things required for theming their components.
-
-Here is one proposal of how the theme object can look like:
-
-##### Global tokens
-
-These are tokens that can be reused in many components, things like density, font sizes, font families, colors, shadows etc. Having these global tokens, can help designers to have more consistent look and feel on the components which are part of one application/theme.
-
-The global tokens can be defined as a plain javascript object. We can offer some utilities for generating color palettes if there is an agreement of how those should be generated, but anyway, the global tokens should be defined by the users in any format they would like to structure them, and our framework should not depend on something that is defined (or not defined) there.
-
-##### Component tokens
-
-These are tokens which are specific for a component. They can use some of the global tokens for their values.
-
-**Open for a debate here**
-
-We have the components tokens in Teams theme and those were shown as a good abstraction. On the other hand, people overused them for adding inline overrides, because these tokens can be overridden on any instance of a component. So, maybe the best option will be to restrict the ways of where these tokens can be defined (only in the theme and not on instance level), so we can avoid similar misusages in future.
-
-##### Component styles
-
-The component styles should be functions that return CSSinJS definition that is compatible with the CSSinJS engine used. The input parameters of these functions are:
-
-- **design terms** - in the react implementation, these are basically subset of the component's properties. It is important to note here that for better performance we need to restrict these to be primitive values like: booleans, strings, numbers, so we can easily hash based on them.
-- **design tokens** - these are basically the component's tokens. If we support inline overrides on these tokens, it will have some performance degradation
-
-As we mention before, parents component should be able to specify styles for their slots. We can have two ways of how this can be implemented
-
-- define slots' styles inside the styles of the parent component
-
-```
-const buttonStyles = {
-  root: ({ terms, tokens }) => ({
-    // some css in js definition
-  }),
-  icon: ({ terms, tokens }) => ({
-    // some css in js definition
-  }),
-}
-```
-
-- create composed components for the slots if they require some additional styles
-
-```
-const buttonStyles = {
-  root: ({ terms, tokens }) => ({
-    // some css in js definition
-  }),
-}
-
-const buttonIconStyles = {
-  root: ({ terms, tokens }) => ({
-    // some css in js definition
-  }),
-}
-```
-
-There are props and cons to both approaches, so I will just try to list them all and we can discuss them:
-
-| Description                                                                                                       | Define slots' styles in the parent's styles | Why                                                                                                                                            | Create composed components for the slots | Why                                                                                                                     |
-| ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
-| All styles for a component are easily discoverable                                                                | YES                                         | They are defined in one object/one component styles object                                                                                     | NO                                       | The styles are spreaded across different components for the parent and slots components                                 |
-| Changing the look and feel of a component will require composing only one component                               | YES                                         | We can override the styles for the component and it's slots in one place                                                                       | NO                                       | We will have to override the styles of the parent component, and all slots components used inside                       |
-| Children theme needs to know what are all the component's variants used in order to override correctly the styles | NO                                          | Because the slots styles were defined via the styles in the parent, not via new composed components                                            | YES                                      | Because we are using composed components for the slots                                                                  |
-| The styles defined for a "slot" component can be reused in different places                                       | NO                                          | The slot's styles are defined only in the context of the parent component                                                                      | YES                                      | They can be reused easily, by using the composed component as a slot in different components                            |
-| Simple caching based on the styles defined always on the root                                                     | NO                                          | We have to consider for the slots the styles of the base component plus the slot's styles                                                      | YES                                      | The styles are defined in one place (always the root)                                                                   |
-| Simple definition of tokens per parent component                                                                  | YES                                         | The parent component can define tokens for all children                                                                                        | NO                                       | Each component can define it's own token, which can be problematic when we want to override something on parent's lavel |
-| Adding new design term in the parent requires re-composing all slots components                                   | NO                                          | We can just override styles in the slot's styles inside the parents                                                                            | YES                                      | We need to re-compose if we want new design terms in the slots components                                               |
-| Requires knowledge of the internals of another component, which creates coupling                                  | PARTIALLY                                   | The parent can define styles only for the root (no other slots), but it needs to know some details for the root's styles of the slot component | NO                                       | All styles are defined in the composed component                                                                        |
-| Easy to swap a slot into another component which might want all its own styles.                                   | NO                                          |                                                                                                                                                | YES                                      |
-
-##### Variants
-
-Variants are just mechanism for allowing users do add or remove some design terms from their components.
-
-In order to enable this, the compose mechanism should provide to the users adding/removing some of the design terms. This can be easily done, by allowing the user to define mapping from props to design terms when they define the composed components.
-
-```
-export interface FluentButton extends ButtonProps {
-  primary?: boolean
-  circular?: boolean
-}
-
-// these code snippet is just illustrating a possible
-// mechanism of how the design tokens can be created
-// based on the props
-const FluentButton = compose(Button, {
-  displayName: 'FluentButton',
-  mapPropsToTerms: props => ({
-    primary: props.primary,
-    circular: props.circular,
-    hasIcon: !!props.icon,
-  }),
-})
-```
-
-##### Animations
-
-Animation should be defined as part of the theme, but they should not be all loaded if they are not used. Child themes should be able to customize them.
-
-```
-// TBD
-```
-
-##### Icons
-
-Icons should be defined as part of the theme, but they should not loaded if not used. Child themes should be able to customize them.
-
-```
-// TBD
-```
-
-##### Files and packaging
-
-```
-// themes/fluent/globalTokens.ts
-
-const globalTokens = {
-  colors: {
-    brandForeground: 'white',
-    brandBackground: 'red',
-
-    defaultBackground: 'white',
-    defaultForeground: 'black',
-  }
-}
-
-export default globalTokens
-
-// themes/fluent/buttonTokens.ts
-
-const buttonTokens = globalTokens => ({
-  defaultBackgroundColor: globalTokens.defaultBackground,
-  defaultForegroundColor: globalTokens.defaultForeground,
-
-  primaryBackgroundColor: globalTokens.brandBackground,
-  primaryForegroundColor: globalTokens.brandForeground,
-})
-
-export default buttonTokens
-
-// themes/fluent/buttonStyles.ts
-
-// avoiding types for simplicity
-
-const buttonStyles = {
-  root: ({terms, tokens}) => ({
-    color: tokens.defaultForegroundColor,
-    backgroundColor: tokens.defaultBackgroundColor,
-
-    ...(terms.primary && {
-      color: tokens.brandForegroundColor,
-      backgroundColor: tokens.brandBackgroundColor,
-    }),
-  }),
-  icon: ({terms, tokens}) => ({
-    color: tokens.defaultForegroundColor,
-    backgroundColor: tokens.defaultBackgroundColor,
-
-    ...(terms.primary && {
-      color: tokens.brandForegroundColor,
-      backgroundColor: tokens.brandBackgroundColor,
-    }),
-  }),
-}
-
-// react/components/Button.tsx
-
-const Button = props => {
-  // Not a real implementation
-  // avoiding details as it is not the main point in this spec
-  return <button>{props.children}</button>
-}
-
-export default Button
-
-// fluent/components/Button.tsx
-
-import { Button as BaseButton } from 'react/components'
-
-const Button = compose(BaseButton, {
-  displayName: 'Button',
-  mapPropsToTerms: props => ({
-    primary: props.primary,
-  })
-})
-
-export default Button
-```
-
-Possible folder structure
-
-```
-packages
-├── themes
-│   ├── fluent
-│   │   ├── index.ts
-│   │   ├── globalTokens.ts
-│   │   ├── components
-│   │   └── Button
-│   │       ├── buttonStyles.ts
-│   │       └── buttonTokens.ts
-│   ├── teams
-│   │   ├── index.ts
-│   │   ├── globalTokens.ts
-│   │   ├── components
-│   │   └── Button
-│   │       ├── buttonStyles.ts
-│   │       └── buttonTokens.ts
-│   └── outlook
-│       ├── index.ts
-│       └── globalTokens.ts
-│
-├── react
-│   └── components
-│       └── Button.tsx
-│
-└── fluent
-    └── components
-        └── Button.tsx
-```
diff --git a/docs/src/prototypes/EditorToolbar/EditorToolbar.tsx b/docs/src/prototypes/EditorToolbar/EditorToolbar.tsx
index af78414f3c..fa3722e676 100644
--- a/docs/src/prototypes/EditorToolbar/EditorToolbar.tsx
+++ b/docs/src/prototypes/EditorToolbar/EditorToolbar.tsx
@@ -16,6 +16,7 @@ import {
   ToolbarMenuItemShorthandKinds,
 } from '@fluentui/react'
 import { useEventListener } from '@fluentui/react-component-event-listener'
+import { toRefObject } from '@fluentui/react-component-ref'
 import * as keyboardKey from 'keyboard-key'
 import * as _ from 'lodash'
 import * as React from 'react'
@@ -242,7 +243,7 @@ const EditorToolbar: React.FC<EditorToolbarProps> = props => {
       }
     },
     type: 'keydown',
-    target: props.target,
+    targetRef: toRefObject(props.target),
   })
   useEventListener({
     listener: () => {
@@ -257,7 +258,7 @@ const EditorToolbar: React.FC<EditorToolbarProps> = props => {
       }
     },
     type: 'resize',
-    target: props.target.defaultView,
+    targetRef: toRefObject(props.target.defaultView),
   })
 
   return (
diff --git a/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx b/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx
index 2bc5c1a635..74b4266d8f 100644
--- a/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx
+++ b/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx
@@ -17,16 +17,18 @@ const reactions: ShorthandCollection<ReactionProps> = [
     content: '1K',
     key: 'likes',
     variables: { meReacting: true },
-    children: (Component, props) => <ReactionPopup {...props} />,
   },
   {
     icon: 'emoji',
     content: 2,
     key: 'smiles',
-    children: (Component, props) => <ReactionPopup {...props} />,
   },
 ]
 
+const reactionsWithPopup = reactions.map(reaction => render =>
+  render(reaction, (Component, props) => <ReactionPopup {...props} />),
+)
+
 const janeAvatar = {
   image: 'public/images/avatar/small/ade.jpg',
   status: { color: 'green', icon: 'check' },
@@ -93,7 +95,7 @@ const ChatWithPopover = () => {
                   </div>
                 }
                 reactionGroup={{
-                  items: reactions,
+                  items: reactionsWithPopup,
                 }}
                 timestamp="Yesterday, 10:15 PM"
               />
@@ -111,7 +113,7 @@ const ChatWithPopover = () => {
                   </div>
                 }
                 reactionGroup={{
-                  items: reactions,
+                  items: reactionsWithPopup,
                 }}
                 timestamp="Yesterday, 10:15 PM"
               />
diff --git a/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ReactionPopup.tsx b/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ReactionPopup.tsx
index ea096538f6..6aec0b05f7 100644
--- a/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ReactionPopup.tsx
+++ b/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ReactionPopup.tsx
@@ -36,19 +36,16 @@ class ReactionPopup extends React.Component<ReactionProps, { open: boolean }> {
             aria-label={getAriaLabel(this.props)}
           />
         }
-        content={{
-          children: () => (
-            <Menu
-              items={['Jane Doe', 'John Doe']}
-              vertical
-              variables={{ borderColor: 'transparent' }}
-              onKeyDown={this.handleKeyDownOnMenu}
-            />
-          ),
-        }}
+        content={
+          <Menu
+            items={['Jane Doe', 'John Doe']}
+            vertical
+            variables={{ borderColor: 'transparent' }}
+            onKeyDown={this.handleKeyDownOnMenu}
+          />
+        }
         inline
         on="hover"
-        position="below"
         open={this.state.open}
         onOpenChange={this.handleOpenChange}
       />
diff --git a/docs/src/prototypes/chatMessages/ControlMessages/controlMessagesGroupBehavior.ts b/docs/src/prototypes/chatMessages/ControlMessages/controlMessagesGroupBehavior.ts
index 08901cde67..5392356c60 100644
--- a/docs/src/prototypes/chatMessages/ControlMessages/controlMessagesGroupBehavior.ts
+++ b/docs/src/prototypes/chatMessages/ControlMessages/controlMessagesGroupBehavior.ts
@@ -1,6 +1,6 @@
-import { chatBehavior, Accessibility, ChatBehaviorProps } from '@fluentui/react'
+import { chatBehavior, Accessibility } from '@fluentui/react'
 
-const controlMessagesGroupBehavior: Accessibility<ChatBehaviorProps> = props => {
+const controlMessagesGroupBehavior: Accessibility<any> = props => {
   const behaviorData = chatBehavior(props)
 
   behaviorData.attributes.root = {
diff --git a/docs/src/prototypes/chatMessages/ThreadedMessages/threadChatBehavior.ts b/docs/src/prototypes/chatMessages/ThreadedMessages/threadChatBehavior.ts
index ec04365a0f..b9d4e1cdaf 100644
--- a/docs/src/prototypes/chatMessages/ThreadedMessages/threadChatBehavior.ts
+++ b/docs/src/prototypes/chatMessages/ThreadedMessages/threadChatBehavior.ts
@@ -1,7 +1,7 @@
-import { chatBehavior, Accessibility, ChatBehaviorProps } from '@fluentui/react'
+import { chatBehavior, Accessibility } from '@fluentui/react'
 import classNames from './classNames'
 
-const threadChatBehavior: Accessibility<ChatBehaviorProps> = props => {
+const threadChatBehavior: Accessibility = props => {
   const behaviorData = chatBehavior(props)
 
   behaviorData.focusZone.props = {
diff --git a/docs/src/prototypes/chatMessages/ThreadedMessages/threadedMessageBehavior.ts b/docs/src/prototypes/chatMessages/ThreadedMessages/threadedMessageBehavior.ts
index 6f8069817b..7b9aecdc6e 100644
--- a/docs/src/prototypes/chatMessages/ThreadedMessages/threadedMessageBehavior.ts
+++ b/docs/src/prototypes/chatMessages/ThreadedMessages/threadedMessageBehavior.ts
@@ -1,12 +1,7 @@
-import {
-  chatMessageBehavior,
-  Accessibility,
-  FocusZoneTabbableElements,
-  ChatMessageBehaviorProps,
-} from '@fluentui/react'
+import { chatMessageBehavior, Accessibility, FocusZoneTabbableElements } from '@fluentui/react'
 import * as keyboardKey from 'keyboard-key'
 
-const threadedMessageBehavior: Accessibility<ChatMessageBehaviorProps> = props => {
+const threadedMessageBehavior: Accessibility = props => {
   const behaviorData = chatMessageBehavior(props)
 
   behaviorData.focusZone.props = {
diff --git a/docs/src/routes.tsx b/docs/src/routes.tsx
index 7c4c84abd1..52954d7b85 100644
--- a/docs/src/routes.tsx
+++ b/docs/src/routes.tsx
@@ -9,7 +9,6 @@ import MarkdownPage from './components/MarkdownPage'
 
 import * as Composition from './pages/Composition.mdx'
 import * as Layout from './pages/Layout.mdx'
-import * as ComponentArchitecture from './pages/ComponentArchitecture.mdx'
 import Accessibility from './views/Accessibility'
 import Colors from './views/Colors'
 import ColorPalette from './views/ColorPalette'
@@ -20,7 +19,6 @@ import CategoryColorSchemes from './views/CategoryColorSchemes'
 import FAQ from './views/FAQ'
 import Performance from './views/Performance'
 import * as ShorthandProps from './pages/ShorthandProps.mdx'
-import * as ThemingSpecification from './pages/ThemingSpecification.mdx'
 import Introduction from './views/Introduction'
 import PageNotFound from './views/PageNotFound'
 import QuickStart from './views/QuickStart'
@@ -105,12 +103,6 @@ const Routes = () => (
           <Route exact path="/shorthand-props">
             <MarkdownPage page={ShorthandProps} />
           </Route>
-          <Route exact path="/component-architecture">
-            <MarkdownPage page={ComponentArchitecture} />
-          </Route>
-          <Route exact path="/theming-specification">
-            <MarkdownPage page={ThemingSpecification} />
-          </Route>
           <Route exact path="/integrate-custom-components" component={IntegrateCustomComponents} />
           <Route exact path="/performance" component={Performance} />
           <Route exact path="/composition">
diff --git a/e2e/package.json b/e2e/package.json
index 40bb2e4e4b..596d353cf7 100644
--- a/e2e/package.json
+++ b/e2e/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@fluentui/e2e",
-  "version": "0.44.0",
+  "version": "0.43.0",
   "private": true,
   "license": "MIT",
   "devDependencies": {
-    "@fluentui/internal-tooling": "^0.44.0",
-    "@fluentui/react": "^0.44.0",
+    "@fluentui/internal-tooling": "^0.43.0",
+    "@fluentui/react": "^0.43.0",
     "@types/puppeteer": "^1.11.1",
     "@types/react-router-dom": "^4.3.4",
     "puppeteer": "^1.13.0",
diff --git a/lerna.json b/lerna.json
index 68d0f8cde9..5a0ed8df85 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "packages": ["packages/*", "scripts", "build", "docs", "e2e", "perf"],
-  "version": "0.44.0",
+  "version": "0.43.0",
   "npmClient": "yarn",
   "useWorkspaces": true
 }
diff --git a/package.json b/package.json
index 0c54881c5f..1fd1d395f7 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "build": "gulp build",
     "build:bundle": "gulp bundle:all-packages",
     "build:docs": "gulp build:docs",
-    "ci": "yarn lint && yarn prettier && yarn test -- -- --strict",
+    "ci": "yarn lint && yarn prettier && yarn test --strict",
     "clean": "yarn clean:cache && yarn clean:docs && lerna run --stream clean",
     "clean:cache": "gulp clean:cache",
     "clean:docs": "gulp clean:docs",
@@ -20,7 +20,6 @@
     "perf": "cross-env PERF=true gulp perf --times=100",
     "perf:debug": "cross-env PERF=true gulp perf:debug --debug",
     "perf:test": "yarn lerna run --stream --scope @fluentui/perf-test perf:test",
-    "perf:test:base": "yarn lerna run --stream --scope @fluentui/perf-test perf:test:base",
     "prettier": "prettier --list-different \"**/*.{ts,tsx}\"",
     "prettier:fix": "prettier --write \"**/*.{ts,tsx}\"",
     "precommit": "lint-staged",
diff --git a/packages/ability-attributes/package.json b/packages/ability-attributes/package.json
index 2de4fb9dab..2b73a20d93 100644
--- a/packages/ability-attributes/package.json
+++ b/packages/ability-attributes/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@fluentui/ability-attributes",
   "description": "Accessibility attributes schema for Fluent UI",
-  "version": "0.44.0",
+  "version": "0.43.0",
   "author": "Marat Abdullin <marata@microsoft.com>",
   "bugs": "https://github.com/microsoft/fluent-ui-react/issues",
   "dependencies": {
diff --git a/packages/accessibility/package.json b/packages/accessibility/package.json
index de5a5bb1ea..738605ea76 100644
--- a/packages/accessibility/package.json
+++ b/packages/accessibility/package.json
@@ -1,16 +1,16 @@
 {
   "name": "@fluentui/accessibility",
   "description": "A set of reusable framework accessibility behaviours.",
-  "version": "0.44.0",
+  "version": "0.43.0",
   "author": "Oleksandr Fediashov <olfedias@microsoft.com>",
   "bugs": "https://github.com/microsoft/fluent-ui-react/issues",
   "dependencies": {
-    "@babel/runtime": "^7.7.6",
+    "@babel/runtime": "^7.1.2",
     "keyboard-key": "^1.0.1",
     "lodash": "^4.17.15"
   },
   "devDependencies": {
-    "@fluentui/internal-tooling": "^0.44.0",
+    "@fluentui/internal-tooling": "^0.43.0",
     "lerna-alias": "^3.0.3-0"
   },
   "files": [
diff --git a/packages/accessibility/src/behaviors/Accordion/accordionTitleBehavior.ts b/packages/accessibility/src/behaviors/Accordion/accordionTitleBehavior.ts
index 88cfa9ce8c..cd8793c8ff 100644
--- a/packages/accessibility/src/behaviors/Accordion/accordionTitleBehavior.ts
+++ b/packages/accessibility/src/behaviors/Accordion/accordionTitleBehavior.ts
@@ -4,7 +4,7 @@ import { Accessibility } from '../../types'
 /**
  * @description
  * Adds accessibility attributed to implement the Accordion design pattern.
- * Adds 'aria-disabled' to the 'content' slot with a value based on disabled, active and canBeCollapsed props.
+ * Adds 'aria-disabled' to the 'content' slot with a value based on active and canBeCollapsed props.
  * Adds role='heading' and aria-level='3' if the element type is not a header.
  *
  * @specification
@@ -16,7 +16,6 @@ import { Accessibility } from '../../types'
  */
 const accordionTitleBehavior: Accessibility<AccordionTitleBehaviorProps> = props => {
   const isHeading = /(h\d{1})$/.test(props.as)
-  const forcedOpen = props.active && !props.canBeCollapsed
   return {
     attributes: {
       root: {
@@ -25,7 +24,7 @@ const accordionTitleBehavior: Accessibility<AccordionTitleBehaviorProps> = props
       },
       content: {
         'aria-expanded': !!props.active,
-        'aria-disabled': !!(forcedOpen || props.disabled),
+        'aria-disabled': !!(props.active && !props.canBeCollapsed),
         'aria-controls': props.accordionContentId,
         role: 'button',
         tabIndex: 0,
@@ -50,8 +49,6 @@ type AccordionTitleBehaviorProps = {
   active?: boolean
   /** If at least one panel needs to stay active and this title does not correspond to the last active one. */
   canBeCollapsed?: boolean
-  /** An accordion title can show it is currently unable to be interacted with. */
-  disabled?: boolean
   /** Id of the content it owns. */
   accordionContentId?: string
 }
diff --git a/packages/accessibility/src/behaviors/Alert/alertBaseBehavior.ts b/packages/accessibility/src/behaviors/Alert/alertBaseBehavior.ts
deleted file mode 100644
index 625e55c10f..0000000000
--- a/packages/accessibility/src/behaviors/Alert/alertBaseBehavior.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Accessibility } from '../../types'
-import { AlertProps } from './alertWarningBehavior'
-
-/**
- * @description
- * Use attribute 'aria-describedby' for dismiss action.
- */
-
-const alertBaseBehavior: Accessibility<AlertProps> = props => ({
-  attributes: {
-    dismissAction: {
-      'aria-describedby': props.bodyId,
-    },
-  },
-})
-
-export default alertBaseBehavior
diff --git a/packages/accessibility/src/behaviors/Alert/alertBehavior.ts b/packages/accessibility/src/behaviors/Alert/alertBehavior.ts
index 51c9a80ca9..23a589ebd6 100644
--- a/packages/accessibility/src/behaviors/Alert/alertBehavior.ts
+++ b/packages/accessibility/src/behaviors/Alert/alertBehavior.ts
@@ -1,12 +1,11 @@
 import { Accessibility } from '../../types'
 import alertWarningBehavior, { AlertProps } from './alertWarningBehavior'
-import alertBaseBehavior from './alertBaseBehavior'
 
 /**
  * @description
  * Uses `alertWarningBehavior` for 'danger' and 'warning' variants.
  */
 const alertBehavior: Accessibility<AlertProps> = props =>
-  props.warning || props.danger ? alertWarningBehavior(props) : alertBaseBehavior(props)
+  props.warning || props.danger ? alertWarningBehavior(props) : {}
 
 export default alertBehavior
diff --git a/packages/accessibility/src/behaviors/Chat/chatBehavior.ts b/packages/accessibility/src/behaviors/Chat/chatBehavior.ts
index 4fd005cd84..50093828e4 100644
--- a/packages/accessibility/src/behaviors/Chat/chatBehavior.ts
+++ b/packages/accessibility/src/behaviors/Chat/chatBehavior.ts
@@ -16,7 +16,7 @@ const CHAT_FOCUSZONE_ATTRIBUTE = 'chat-focuszone'
  * Focused active element of the component is reset when TAB from the component.
  * Focus can be moved inside a child component with embeded inner FocusZone by pressing a specified key.
  */
-const ChatBehavior: Accessibility<ChatBehaviorProps> = () => ({
+const ChatBehavior: Accessibility = () => ({
   attributes: {
     root: {},
   },
@@ -43,6 +43,4 @@ const getLastTabbableElement = (root: HTMLElement): HTMLElement => {
     : null
 }
 
-export type ChatBehaviorProps = never
-
 export default ChatBehavior
diff --git a/packages/accessibility/src/behaviors/Chat/chatMessageBehavior.ts b/packages/accessibility/src/behaviors/Chat/chatMessageBehavior.ts
index 60a4b6ac42..29a372b357 100644
--- a/packages/accessibility/src/behaviors/Chat/chatMessageBehavior.ts
+++ b/packages/accessibility/src/behaviors/Chat/chatMessageBehavior.ts
@@ -16,7 +16,7 @@ import { FocusZoneTabbableElements, FocusZoneDirection } from '../../focusZone/t
  * Keyboard navigation is circular.
  * Focus is moved within the focusable children of the component using TAB key.
  */
-const chatMessageBehavior: Accessibility<ChatMessageBehaviorProps> = () => ({
+const chatMessageBehavior: Accessibility = () => ({
   attributes: {
     root: {
       [IS_FOCUSABLE_ATTRIBUTE]: true,
@@ -43,6 +43,4 @@ const chatMessageBehavior: Accessibility<ChatMessageBehaviorProps> = () => ({
   },
 })
 
-export type ChatMessageBehaviorProps = never
-
 export default chatMessageBehavior
diff --git a/packages/accessibility/src/behaviors/Checkbox/checkboxBehavior.ts b/packages/accessibility/src/behaviors/Checkbox/checkboxBehavior.ts
index ec40b9c9a0..c19a674928 100644
--- a/packages/accessibility/src/behaviors/Checkbox/checkboxBehavior.ts
+++ b/packages/accessibility/src/behaviors/Checkbox/checkboxBehavior.ts
@@ -31,9 +31,9 @@ const checkboxBehavior: Accessibility<CheckboxBehaviorProps> = props => ({
 
 export default checkboxBehavior
 
-export type CheckboxBehaviorProps = {
+type CheckboxBehaviorProps = {
   /** Whether or not item is checked. */
-  checked?: boolean
+  checked: boolean
   /** If the checkbox is in disabled state. */
   disabled?: boolean
 }
diff --git a/packages/accessibility/src/behaviors/Icon/iconBehavior.ts b/packages/accessibility/src/behaviors/Icon/iconBehavior.ts
index ccff2fd3fa..f309b0ff57 100644
--- a/packages/accessibility/src/behaviors/Icon/iconBehavior.ts
+++ b/packages/accessibility/src/behaviors/Icon/iconBehavior.ts
@@ -20,7 +20,8 @@ const iconBehavior: Accessibility<IconBehaviorProps> = props => ({
 
 export default iconBehavior
 
-export type IconBehaviorProps = {
+type IconBehaviorProps = {
   /** Alternative text. */
   alt?: string
+  'aria-label'?: string
 } & Pick<AccessibilityAttributes, 'aria-label'>
diff --git a/packages/accessibility/src/behaviors/Loader/loaderBehavior.ts b/packages/accessibility/src/behaviors/Loader/loaderBehavior.ts
index 600b668e08..8ee9c9cea4 100644
--- a/packages/accessibility/src/behaviors/Loader/loaderBehavior.ts
+++ b/packages/accessibility/src/behaviors/Loader/loaderBehavior.ts
@@ -3,37 +3,17 @@ import { Accessibility } from '../../types'
 /**
  * @description
  * Loader is usually an element that displays the progress status for a task that take a long time or consists of several steps.
- * Adds attribute 'aria-labelledby' on 'root' when loader has 'tabIndex' prop. This can be overriden by providing 'aria-labelledby' or 'aria-label' property directly to the component.
  *
  * @specification
  * Adds role 'progressbar' to 'root' slot.
  */
 
-const loaderBehavior: Accessibility<LoaderBehaviorProps> = props => {
-  return {
-    attributes: {
-      root: {
-        role: 'progressbar',
-        'aria-labelledby': getDefaultAriaLabelledBy(props),
-      },
+const loaderBehavior: Accessibility = () => ({
+  attributes: {
+    root: {
+      role: 'progressbar',
     },
-  }
-}
-
-type LoaderBehaviorProps = {
-  /** id of the loader label element. */
-  labelId?: string
-}
+  },
+})
 
 export default loaderBehavior
-
-/**
- * Returns the id of the loader label if user provide tabIndex prop. It is used when user does not provide aria-label or
- * aria-labelledby as prop.
- */
-const getDefaultAriaLabelledBy = (props: LoaderBehaviorProps) => {
-  if (props['aria-label'] || props['aria-labelledby']) {
-    return undefined
-  }
-  return props['tabIndex'] === undefined ? undefined : props.labelId
-}
diff --git a/packages/accessibility/src/behaviors/Slider/sliderBehavior.ts b/packages/accessibility/src/behaviors/Slider/sliderBehavior.ts
index 1b2ca45503..54baf7e4c0 100644
--- a/packages/accessibility/src/behaviors/Slider/sliderBehavior.ts
+++ b/packages/accessibility/src/behaviors/Slider/sliderBehavior.ts
@@ -26,7 +26,7 @@ const sliderBehavior: Accessibility<SliderBehaviorProps> = props => ({
 
 export default sliderBehavior
 
-export type SliderBehaviorProps = {
+type SliderBehaviorProps = {
   disabled?: boolean
   min?: number
   max?: number
diff --git a/packages/accessibility/src/behaviors/Tooltip/tooltipAsDescriptionBehavior.ts b/packages/accessibility/src/behaviors/Tooltip/tooltipAsDescriptionBehavior.ts
index a581cba419..3df120346a 100644
--- a/packages/accessibility/src/behaviors/Tooltip/tooltipAsDescriptionBehavior.ts
+++ b/packages/accessibility/src/behaviors/Tooltip/tooltipAsDescriptionBehavior.ts
@@ -1,5 +1,5 @@
 import * as keyboardKey from 'keyboard-key'
-import { Accessibility, AccessibilityAttributes } from '../../types'
+import { Accessibility } from '../../types'
 
 /**
  * @description
@@ -52,4 +52,4 @@ export type TooltipBehaviorProps = {
   open: boolean
   /** Tooltip's container id. */
   contentId: string
-} & Pick<AccessibilityAttributes, 'aria-label' | 'aria-labelledby' | 'aria-describedby'>
+}
diff --git a/packages/accessibility/src/behaviors/index.ts b/packages/accessibility/src/behaviors/index.ts
index 261527b548..9d5a887a42 100644
--- a/packages/accessibility/src/behaviors/index.ts
+++ b/packages/accessibility/src/behaviors/index.ts
@@ -1,6 +1,5 @@
 export { default as alertBehavior } from './Alert/alertBehavior'
 export { default as alertWarningBehavior } from './Alert/alertWarningBehavior'
-export { default as alertBaseBehavior } from './Alert/alertBaseBehavior'
 export { default as attachmentBehavior } from './Attachment/attachmentBehavior'
 export { default as buttonBehavior } from './Button/buttonBehavior'
 export { default as toggleButtonBehavior } from './Button/toggleButtonBehavior'
@@ -28,7 +27,6 @@ export { default as selectableListItemBehavior } from './List/selectableListItem
 export { default as loaderBehavior } from './Loader/loaderBehavior'
 export { default as inputBehavior } from './Input/inputBehavior'
 export { default as iconBehavior } from './Icon/iconBehavior'
-export * from './Icon/iconBehavior'
 export { default as tabBehavior } from './Tab/tabBehavior'
 export { default as tabListBehavior } from './Tab/tabListBehavior'
 export { default as menuAsToolbarBehavior } from './Toolbar/menuAsToolbarBehavior'
@@ -46,9 +44,7 @@ export { default as radioGroupBehavior } from './Radio/radioGroupBehavior'
 export { default as radioGroupItemBehavior } from './Radio/radioGroupItemBehavior'
 export { default as popupBehavior } from './Popup/popupBehavior'
 export { default as chatBehavior } from './Chat/chatBehavior'
-export * from './Chat/chatBehavior'
 export { default as chatMessageBehavior } from './Chat/chatMessageBehavior'
-export * from './Chat/chatMessageBehavior'
 export { default as gridBehavior } from './Grid/gridBehavior'
 export { default as gridHorizontalBehavior } from './Grid/gridHorizontalBehavior'
 export { default as hierarchicalTreeBehavior } from './HierarchicalTree/hierarchicalTreeBehavior'
@@ -62,12 +58,9 @@ export { default as accordionBehavior } from './Accordion/accordionBehavior'
 export { default as accordionTitleBehavior } from './Accordion/accordionTitleBehavior'
 export { default as accordionContentBehavior } from './Accordion/accordionContentBehavior'
 export { default as checkboxBehavior } from './Checkbox/checkboxBehavior'
-export * from './Checkbox/checkboxBehavior'
-export * from './Tooltip/tooltipAsDescriptionBehavior'
 export { default as tooltipAsDescriptionBehavior } from './Tooltip/tooltipAsDescriptionBehavior'
 export { default as tooltipAsLabelBehavior } from './Tooltip/tooltipAsLabelBehavior'
 export { default as sliderBehavior } from './Slider/sliderBehavior'
-export * from './Slider/sliderBehavior'
 export { default as menuButtonBehavior } from './MenuButton/menuButtonBehavior'
 export { default as splitButtonBehavior } from './SplitButton/splitButtonBehavior'
 export { default as treeBehavior } from './Tree/treeBehavior'
diff --git a/packages/accessibility/test/behaviors/alertBehavior-test.tsx b/packages/accessibility/test/behaviors/alertBehavior-test.tsx
index b969b916f9..d4c5812092 100644
--- a/packages/accessibility/test/behaviors/alertBehavior-test.tsx
+++ b/packages/accessibility/test/behaviors/alertBehavior-test.tsx
@@ -10,14 +10,4 @@ describe('AlertBehavior.ts', () => {
     const expectedResult = alertBehavior({ danger: true })
     expect(expectedResult.attributes.body.role).toEqual('alert')
   })
-
-  test('use aria-describedby if dismiss action is defined for non-warning alert', () => {
-    const expectedResult = alertBehavior({ bodyId: 'alertId' })
-    expect(expectedResult.attributes.dismissAction['aria-describedby']).toEqual('alertId')
-  })
-
-  test('use aria-describedby if dismiss action is defined for warning alert', () => {
-    const expectedResult = alertBehavior({ warning: true, bodyId: 'alertId' })
-    expect(expectedResult.attributes.dismissAction['aria-describedby']).toEqual('alertId')
-  })
 })
diff --git a/packages/accessibility/test/behaviors/behavior-test.tsx b/packages/accessibility/test/behaviors/behavior-test.tsx
index 22a81766d1..32125a553e 100644
--- a/packages/accessibility/test/behaviors/behavior-test.tsx
+++ b/packages/accessibility/test/behaviors/behavior-test.tsx
@@ -41,7 +41,6 @@ import {
   gridHorizontalBehavior,
   statusBehavior,
   alertWarningBehavior,
-  alertBaseBehavior,
   accordionBehavior,
   accordionTitleBehavior,
   accordionContentBehavior,
@@ -126,7 +125,6 @@ testHelper.addBehavior('gridHorizontalBehavior', gridHorizontalBehavior)
 testHelper.addBehavior('dialogBehavior', dialogBehavior)
 testHelper.addBehavior('statusBehavior', statusBehavior)
 testHelper.addBehavior('alertWarningBehavior', alertWarningBehavior)
-testHelper.addBehavior('alertBaseBehavior', alertBaseBehavior)
 testHelper.addBehavior('accordionBehavior', accordionBehavior)
 testHelper.addBehavior('accordionTitleBehavior', accordionTitleBehavior)
 testHelper.addBehavior('accordionContentBehavior', accordionContentBehavior)
diff --git a/packages/accessibility/test/behaviors/loaderBehavior-test.tsx b/packages/accessibility/test/behaviors/loaderBehavior-test.tsx
deleted file mode 100644
index 9824a4cd6f..0000000000
--- a/packages/accessibility/test/behaviors/loaderBehavior-test.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { loaderBehavior } from '@fluentui/accessibility'
-
-describe('LoaderBehavior.ts', () => {
-  test('do NOT add aria-labelledby, when aria-label was set already', () => {
-    const props = { labelId: 'label-id', 'aria-label': 'any loading string' }
-    const expectedResult = loaderBehavior(props)
-    expect(expectedResult.attributes.root['aria-labelledby']).toEqual(undefined)
-  })
-
-  test('do NOT add aria-labelledby, when aria-labelled was set already', () => {
-    const props = { labelId: 'label-id', 'aria-labelledby': 'id' }
-    const expectedResult = loaderBehavior(props)
-    expect(expectedResult.attributes.root['aria-labelledby']).toEqual(undefined)
-  })
-
-  test('do NOT add aria-labelledby, when there is no tabIndex specified', () => {
-    const props = { labelId: 'label-id' }
-    const expectedResult = loaderBehavior(props)
-    expect(expectedResult.attributes.root['aria-labelledby']).toEqual(undefined)
-  })
-
-  test('add aria-labelledby, when there is tabIndex=0 specified', () => {
-    const props = { labelId: 'label-id', tabIndex: 0 }
-    const expectedResult = loaderBehavior(props)
-    expect(expectedResult.attributes.root['aria-labelledby']).toEqual('label-id')
-  })
-
-  test('add aria-labelledby, when there is tabIndex=-1 specified', () => {
-    const props = { labelId: 'label-id', tabIndex: -1 }
-    const expectedResult = loaderBehavior(props)
-    expect(expectedResult.attributes.root['aria-labelledby']).toEqual('label-id')
-  })
-})
diff --git a/packages/accessibility/test/behaviors/testHelper.tsx b/packages/accessibility/test/behaviors/testHelper.tsx
index 13bfad344a..267fc35bb5 100644
--- a/packages/accessibility/test/behaviors/testHelper.tsx
+++ b/packages/accessibility/test/behaviors/testHelper.tsx
@@ -21,7 +21,6 @@ const skipSpecChecksForFiles = [
   'listBehavior.ts', // tests are written in listBehavior-test.tsx
   'listItemBehavior.ts', // tests are written in listItemBehavior-test.tsx
   'alertBehavior.ts', // tests are written in alertBehavior-test.tsx
-  'alertBaseBehavior.ts', // tests are written in alertBaseBehavior-test.tsx
   'sliderBehavior.ts', // tests are written in sliderBehavior-test.ts
   'treeItemAsListItemBehavior.ts', // tests are written in treeItemAsListItemBehavior-test.ts
   'treeTitleAsListItemTitleBehavior.ts', // tests are written in treeTitleAsListItemTitleBehavior-test.ts
diff --git a/packages/code-sandbox/package.json b/packages/code-sandbox/package.json
index c8f7be4187..9b93d5e637 100644
--- a/packages/code-sandbox/package.json
+++ b/packages/code-sandbox/package.json
@@ -1,14 +1,14 @@
 {
   "name": "@fluentui/code-sandbox",
   "description": "Fluent UI tools for CodeSandbox.",
-  "version": "0.44.0",
+  "version": "0.43.0",
   "author": "Oleksandr Fediashov <a@fedyashov.com>",
   "bugs": "https://github.com/microsoft/fluent-ui-react/issues",
   "dependencies": {
-    "@fluentui/docs-components": "^0.44.0"
+    "@fluentui/docs-components": "^0.43.0"
   },
   "devDependencies": {
-    "@fluentui/react": "^0.44.0"
+    "@fluentui/react": "^0.43.0"
   },
   "files": [
     "dist"
diff --git a/packages/digest/package.json b/packages/digest/package.json
index ed13280ff6..d12998a7f3 100644
--- a/packages/digest/package.json
+++ b/packages/digest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/digest",
-  "version": "0.44.0",
+  "version": "0.43.0",
   "private": true,
   "main": "lib/digest.js",
   "module": "lib/digest.js",
diff --git a/packages/docs-components/package.json b/packages/docs-components/package.json
index 742e1c2b5d..d5e29d4e0e 100644
--- a/packages/docs-components/package.json
+++ b/packages/docs-components/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@fluentui/docs-components",
   "description": "A set of React components to build docs sites.",
-  "version": "0.44.0",
+  "version": "0.43.0",
   "author": "Oleksandr Fediashov <a@fedyashov.com>",
   "bugs": "https://github.com/microsoft/fluent-ui-react/issues",
   "dependencies": {
-    "@babel/runtime": "^7.7.6",
+    "@babel/runtime": "^7.1.2",
     "copy-to-clipboard": "^3.2.0",
     "object.values": "^1.1.0",
     "prismjs": "^1.16.0",
diff --git a/packages/docs-components/src/knobs/KnobContexts.ts b/packages/docs-components/src/knobs/KnobContexts.ts
index 0982c11e95..16385cc688 100644
--- a/packages/docs-components/src/knobs/KnobContexts.ts
+++ b/packages/docs-components/src/knobs/KnobContexts.ts
@@ -10,11 +10,11 @@ export type KnobContextValue = {
   unregisterKnob: (knobName: KnobName) => void
 }
 
-export type LogContextFunctionsValue = {
+export type LogContextValue = {
   appendLog: (value: string) => void
   clearLog: () => void
+  items: string[]
 }
-export type LogContextItemsValue = string[]
 
 const noop = () => null
 
@@ -27,8 +27,8 @@ export const KnobContext = React.createContext<KnobContextValue>({
   unregisterKnob: noop,
 })
 
-export const LogContextFunctions = React.createContext<LogContextFunctionsValue>({
+export const LogContext = React.createContext<LogContextValue>({
   appendLog: noop,
   clearLog: noop,
+  items: [],
 })
-export const LogContextItems = React.createContext<LogContextItemsValue>([])
diff --git a/packages/docs-components/src/knobs/KnobProvider.tsx b/packages/docs-components/src/knobs/KnobProvider.tsx
index dfb22a1d44..e99d82793d 100644
--- a/packages/docs-components/src/knobs/KnobProvider.tsx
+++ b/packages/docs-components/src/knobs/KnobProvider.tsx
@@ -1,13 +1,7 @@
 import * as React from 'react'
 
 import defaultComponents from './defaultComponents'
-import {
-  KnobContext,
-  KnobContextValue,
-  LogContextFunctions,
-  LogContextFunctionsValue,
-  LogContextItems,
-} from './KnobContexts'
+import { KnobContext, KnobContextValue, LogContext, LogContextValue } from './KnobContexts'
 import { KnobComponents, KnobDefinition, KnobName, KnobSet } from './types'
 
 type KnobProviderProps = {
@@ -61,16 +55,11 @@ const KnobProvider: React.FunctionComponent<KnobProviderProps> = props => {
     }),
     [knobs, components],
   )
-  const logValue: LogContextFunctionsValue = React.useMemo(() => ({ appendLog, clearLog }), [
-    appendLog,
-    clearLog,
-  ])
+  const logValue: LogContextValue = React.useMemo(() => ({ appendLog, clearLog, items }), [items])
 
   return (
     <KnobContext.Provider value={knobValue}>
-      <LogContextFunctions.Provider value={logValue}>
-        <LogContextItems.Provider value={items}>{children}</LogContextItems.Provider>
-      </LogContextFunctions.Provider>
+      <LogContext.Provider value={logValue}>{children}</LogContext.Provider>
     </KnobContext.Provider>
   )
 }
diff --git a/packages/docs-components/src/knobs/LogInspector.tsx b/packages/docs-components/src/knobs/LogInspector.tsx
index 6c4fbe964b..21e2da3146 100644
--- a/packages/docs-components/src/knobs/LogInspector.tsx
+++ b/packages/docs-components/src/knobs/LogInspector.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { KnobContext, LogContextFunctions, LogContextItems } from './KnobContexts'
+import { KnobContext, LogContext } from './KnobContexts'
 
 type LogInspectorProps = {
   /** Will be hidden if is empty. */
@@ -8,9 +8,7 @@ type LogInspectorProps = {
 
 const LogInspector: React.FunctionComponent<LogInspectorProps> = props => {
   const { components } = React.useContext(KnobContext)
-
-  const { clearLog } = React.useContext(LogContextFunctions)
-  const items = React.useContext(LogContextItems)
+  const { clearLog, items } = React.useContext(LogContext)
 
   const visible = props.silent ? items.length > 0 : true
 
diff --git a/packages/docs-components/src/knobs/types.ts b/packages/docs-components/src/knobs/types.ts
index 57b5a8608e..31778d5a39 100644
--- a/packages/docs-components/src/knobs/types.ts
+++ b/packages/docs-components/src/knobs/types.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { LogContextFunctionsValue, LogContextItemsValue } from './KnobContexts'
+import { LogContextValue } from './KnobContexts'
 
 export type KnobDefinition = {
   content?: React.ReactNode
@@ -40,9 +40,7 @@ export type KnobRangeKnobComponentProps = KnobComponentProps & {
   unit: string
 }
 
-export type LogInspectorProps = Pick<LogContextFunctionsValue, 'clearLog'> & {
-  items: LogContextItemsValue
-}
+export type LogInspectorProps = Pick<LogContextValue, 'clearLog' | 'items'>
 
 export type LogFormatter<T extends any[] = any[]> = (name: string, ...args: T) => string
 
diff --git a/packages/docs-components/src/knobs/useLogKnob.ts b/packages/docs-components/src/knobs/useLogKnob.ts
index cfa491f84e..b351a01006 100644
--- a/packages/docs-components/src/knobs/useLogKnob.ts
+++ b/packages/docs-components/src/knobs/useLogKnob.ts
@@ -1,7 +1,7 @@
 import * as React from 'react'
 
-import { LogContextFunctions } from './KnobContexts'
-import { LogFormatter } from './types'
+import { LogContext } from './KnobContexts'
+import { LogFormatter } from '@fluentui/docs-components'
 
 const defaultFormatter: LogFormatter = (name: string) =>
   `${new Date().toLocaleTimeString()}: ${name}`
@@ -11,16 +11,17 @@ const useLogKnob = <T = (...args: any[]) => any>(
   callback?: T,
   formatter: LogFormatter = defaultFormatter,
 ): T => {
-  const { appendLog } = React.useContext(LogContextFunctions)
+  const { appendLog } = React.useContext(LogContext)
 
   const proxy = React.useCallback<any>(
     (...a) => {
       appendLog(formatter(name, ...a))
-
       if (typeof callback === 'function') {
         return (callback as any)(...a)
       }
-
+      if (process.env.NODE_ENV !== 'production') {
+        console.log(`Please provide a function to "useLogKnob(${name}, callback)"`)
+      }
       return null
     },
     [appendLog, callback, name, formatter],
diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json
index 80a92c5901..90f8c1e87d 100644
--- a/packages/eslint-plugin/package.json
+++ b/packages/eslint-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/eslint-plugin",
-  "version": "0.44.0",
+  "version": "0.43.0",
   "dependencies": {
     "@typescript-eslint/eslint-plugin": "^2.5.0",
     "@typescript-eslint/experimental-utils": "^2.5.0"
diff --git a/packages/local-sandbox/.browserslistrc b/packages/local-sandbox/.browserslistrc
deleted file mode 100644
index 3da50ae47a..0000000000
--- a/packages/local-sandbox/.browserslistrc
+++ /dev/null
@@ -1 +0,0 @@
-chrome >= 79
diff --git a/packages/local-sandbox/README.md b/packages/local-sandbox/README.md
deleted file mode 100644
index f034b19d08..0000000000
--- a/packages/local-sandbox/README.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# Local sandbox
-
-This package is an empty application which uses Fluent UI.
-
-Production build without hot reload. Primary purpose of this application is to manually test performance and/or memory impact. 
-
-## Usage
-```
-yarn build:dependencies
-yarn build:production
-yarn serve
-```  
-
-## Measuring bundle size
-
-This package can be also used to analyze bundle size. After running `yarn build:production`, bundle size report is stored to **dist/report.html**. 
diff --git a/packages/local-sandbox/babel.config.js b/packages/local-sandbox/babel.config.js
deleted file mode 100644
index a1c212ad45..0000000000
--- a/packages/local-sandbox/babel.config.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = api => require('@fluentui/internal-tooling/babel')(api)
diff --git a/packages/local-sandbox/package.json b/packages/local-sandbox/package.json
deleted file mode 100644
index f9cbe27bc5..0000000000
--- a/packages/local-sandbox/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "@fluentui/local-sandbox",
-  "version": "0.44.0",
-  "private": true,
-  "license": "MIT",
-  "scripts": {
-    "build:dependencies": "yarn --cwd ../.. build:bundle",
-    "build": "webpack",
-    "build:production": "webpack -p",
-    "serve": "node ./server.js"
-  },
-  "dependencies": {
-    "@fluentui/react": "^0.44.0",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
-  },
-  "devDependencies": {
-    "babel-loader": "^8.0.6",
-    "copy-webpack-plugin": "^4.5.2",
-    "express": "^4.15.4",
-    "fork-ts-checker-webpack-plugin": "^1.3.3",
-    "source-map-loader": "^0.2.4",
-    "terser-webpack-plugin": "^1.4.3",
-    "typescript": "~3.7.2",
-    "webpack": "^4.35.0",
-    "webpack-bundle-analyzer": "^3.6.0",
-    "webpack-cli": "^3.3.10"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
diff --git a/packages/local-sandbox/public/index.html b/packages/local-sandbox/public/index.html
deleted file mode 100644
index 76ef267ba1..0000000000
--- a/packages/local-sandbox/public/index.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<html>
-  <body>
-    <div id="root"></div>
-    <script src="app.js"></script>
-  </body>
-</html>
diff --git a/packages/local-sandbox/server.js b/packages/local-sandbox/server.js
deleted file mode 100644
index 18f72a6d20..0000000000
--- a/packages/local-sandbox/server.js
+++ /dev/null
@@ -1,16 +0,0 @@
-const express = require('express')
-const path = require('path')
-
-const host = process.env.HOST || '127.0.0.1'
-const port = process.env.PORT || 3000
-const root = path.resolve(__dirname, '.')
-
-const app = express()
-app.use(express.static(`${root}/dist`))
-
-app.listen(port, host, serverStarted)
-
-function serverStarted() {
-  console.log(`Server started ${host}:${port}`)
-  console.log('Press Ctrl+C to exit...\n')
-}
diff --git a/packages/local-sandbox/src/index.tsx b/packages/local-sandbox/src/index.tsx
deleted file mode 100644
index 6c0c1f5704..0000000000
--- a/packages/local-sandbox/src/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-import { Provider, themes, Header, Text } from '@fluentui/react'
-
-const App = () => (
-  <Provider theme={themes.teams}>
-    <Header>@fluentui/local-sandbox</Header>
-    <Text>Sandbox to test Fluent UI with production React.</Text>
-  </Provider>
-)
-
-ReactDOM.render(<App />, document.querySelector('#root'))
diff --git a/packages/local-sandbox/tsconfig.json b/packages/local-sandbox/tsconfig.json
deleted file mode 100644
index cf87ca5f8c..0000000000
--- a/packages/local-sandbox/tsconfig.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "noEmit": true,
-    "jsx": "react"
-  },
-  "include": ["src"]
-}
diff --git a/packages/local-sandbox/webpack.config.ts b/packages/local-sandbox/webpack.config.ts
deleted file mode 100644
index f4a615612a..0000000000
--- a/packages/local-sandbox/webpack.config.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import * as webpack from 'webpack'
-
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
-const CopyWebpackPlugin = require('copy-webpack-plugin')
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
-const TerserPlugin = require('terser-webpack-plugin')
-
-const webpackConfig: webpack.Configuration = {
-  name: 'client',
-  target: 'web',
-  mode: 'development',
-  entry: {
-    app: './src/index.tsx',
-  },
-  output: {
-    filename: `[name].js`,
-  },
-  devtool: 'source-map',
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        use: ['source-map-loader'],
-        enforce: 'pre',
-      },
-      {
-        test: /\.(ts|tsx)$/,
-        loader: 'babel-loader',
-        exclude: /node_modules/,
-        options: {
-          cacheDirectory: true,
-        },
-      },
-    ],
-  },
-  plugins: [
-    new ForkTsCheckerWebpackPlugin(),
-    new CopyWebpackPlugin([
-      {
-        from: 'public/index.html',
-      },
-    ]),
-    new BundleAnalyzerPlugin({
-      analyzerMode: 'static',
-      openAnalyzer: false,
-    }),
-  ],
-  resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.json'],
-  },
-  performance: {
-    hints: false, // to (temporarily) disable "WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit")
-  },
-  optimization: {
-    minimizer: [
-      new TerserPlugin({
-        cache: true,
-        parallel: true,
-        sourceMap: true,
-        terserOptions: {
-          // https://github.com/terser/terser
-          mangle: false,
-          output: {
-            beautify: true,
-            comments: true,
-          },
-        },
-      }),
-    ],
-  },
-}
-
-module.exports = webpackConfig
diff --git a/packages/perf-test/just.config.ts b/packages/perf-test/just.config.ts
index 3e857048ed..888eb0738d 100644
--- a/packages/perf-test/just.config.ts
+++ b/packages/perf-test/just.config.ts
@@ -1,6 +1,6 @@
 import path from 'path'
 import '@fluentui/scripts/tasks/preset'
-import { series, task, argv } from '@fluentui/scripts'
+import { series, task } from '@fluentui/scripts'
 
 // TODO: FUR integration issues
 // - FUR build fails when it comes across these new packages inside of packages/
@@ -26,8 +26,7 @@ task('perf-test:bundle', bundleStories())
 task('perf-test:run', () => {
   // delay require in case digest isn't built yet
   const runPerfTest = require('./tasks/perf-test').default
-
-  return runPerfTest(argv().base)
+  return runPerfTest()
 })
 
 // TOOD: is build doing anything meaningful? only if there's source that's not a just script?
diff --git a/packages/perf-test/package.json b/packages/perf-test/package.json
index 5b7b9dae9e..d79b81b54b 100644
--- a/packages/perf-test/package.json
+++ b/packages/perf-test/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@fluentui/perf-test",
   "description": "Perf tests for fluentui.",
-  "version": "0.44.0",
+  "version": "0.43.0",
   "private": true,
   "dependencies": {
     "office-ui-fabric-react": "^7.44.0",
@@ -12,18 +12,16 @@
     "build": "just-scripts build",
     "clean": "just-scripts clean",
     "test": "just-scripts test",
-    "perf:test": "just-scripts perf-test",
-    "perf:test:base": "just-scripts perf-test --base"
+    "perf:test": "just-scripts perf-test"
   },
   "devDependencies": {
-    "@fluentui/digest": "^0.44.0",
+    "@fluentui/digest": "^0.43.0",
     "@types/react": "^16.8.10",
     "@types/react-dom": "^16.8.3",
     "@types/webpack-env": "^1.14.1",
     "flamegrill": "^0.1.3",
     "ignore-not-found-export-webpack-plugin": "^1.0.1",
-    "just-scripts": "^0.35.0",
-    "node-fetch": "^2.6.0"
+    "just-scripts": "^0.35.0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/perf-test/tasks/perf-test.ts b/packages/perf-test/tasks/perf-test.ts
index b9b4e8a407..59adc7a287 100644
--- a/packages/perf-test/tasks/perf-test.ts
+++ b/packages/perf-test/tasks/perf-test.ts
@@ -1,6 +1,5 @@
 import fs from 'fs'
 import path from 'path'
-import fetch from 'node-fetch'
 import _ from 'lodash'
 import flamegrill, { CookResult, CookResults, ScenarioConfig, Scenarios } from 'flamegrill'
 
@@ -45,24 +44,7 @@ const tempDir = path.join(__dirname, '../logfiles')
 
 console.log(`__dirname: ${__dirname}`)
 
-const GITHUB_REPO_ID = '141743704'
-async function getMasterBuild(): Promise<number> {
-  const url = 'https://fluent-ui-react-stats.azurewebsites.net/api/GetLatestBuild'
-
-  const response = await fetch(url)
-  const data = await response.json()
-  return data[0].build
-}
-
-export default async function getPerfRegressions(baselineOnly: boolean = false) {
-  let urlForMaster
-
-  if (!baselineOnly) {
-    const masterBuild = await getMasterBuild()
-    urlForMaster = `https://${masterBuild}-${GITHUB_REPO_ID}-gh.circle-artifacts.com/0/artifacts/perf/index.html`
-    console.log('Master URL', urlForMaster)
-  }
-
+export default async function getPerfRegressions() {
   // TODO: support iteration/kind/story via commandline as in other perf-test script
   // TODO: can do this now that we have story information
   // TODO: align flamegrill terminology with CSF (story vs. scenario)
@@ -83,22 +65,13 @@ export default async function getPerfRegressions(baselineOnly: boolean = false)
         const scenarioName = `${kindKey}.${storyKey}`
         scenarioList.push(scenarioName)
         scenarios[scenarioName] = {
+          // TODO: We can't do CI, measure baseline or do regression analysis until master & PR files are deployed and publicly accessible.
           scenario: generateUrl(
             urlForDeploy,
             kindKey,
             storyKey,
             getIterations(stories, kindKey, storyKey),
           ),
-          ...(!baselineOnly &&
-            storyKey !== 'Fabric' && {
-              // Optimization: skip baseline comparision for Fabric
-              baseline: generateUrl(
-                urlForMaster,
-                kindKey,
-                storyKey,
-                getIterations(stories, kindKey, storyKey),
-              ),
-            }),
         }
       })
   })
diff --git a/packages/playground/package.json b/packages/playground/package.json
index adeed66316..0ddc5f00e4 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/playground",
-  "version": "0.44.0",
+  "version": "0.43.0",
   "description": "> TODO: description",
   "homepage": "https://github.com/microsoft/fluent-ui#readme",
   "bugs": {
@@ -34,11 +34,11 @@
     "update-snapshots": "just-scripts jest:snapshots"
   },
   "dependencies": {
-    "@fluentui/react-theming": "^0.44.0",
+    "@fluentui/react-theming": "^0.43.0",
     "classnames": "^2.2.6"
   },
   "devDependencies": {
-    "@fluentui/scripts": "^0.44.0",
+    "@fluentui/scripts": "^0.43.0",
     "@types/classnames": "^2.2.9",
     "@types/enzyme": "^3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.5",
diff --git a/packages/react-bindings/README.md b/packages/react-bindings/README.md
index 5dfde54140..9ce96d7101 100644
--- a/packages/react-bindings/README.md
+++ b/packages/react-bindings/README.md
@@ -9,13 +9,11 @@ A set of reusable components and hooks to build component libraries and UI kits.
 - [Hooks](#hooks)
   - [`useAccesibility()`](#useaccesibility)
     - [Usage](#usage)
-  - [`useAutoControlled()`](#useautocontrolled)
-    - [Usage](#usage-1)
   - [`useStateManager()`](#usestatemanager)
-    - [Usage](#usage-2)
+    - [Usage](#usage-1)
     - [Reference](#reference)
   - [`useStyles()`](#usestyles)
-    - [Usage](#usage-3)
+    - [Usage](#usage-2)
     - [Reference](#reference-1)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
@@ -91,39 +89,6 @@ const Image: React.FC<ImageProps> = props => {
 }
 ```
 
-## `useAutoControlled()`
-
-A React hook that allows to manage state like in `React.useState()`, but implements the [autocontrolled pattern](https://reactjs.org/docs/uncontrolled-components.html).
-
-### Usage
-
-The example below assumes a component called `<Input>` will be used this way:
-
-```tsx
-type InputProps = {
-  defaultValue?: string
-  value?: string
-  onChange?: (value: string) => void
-}
-
-const Input: React.FC<InputProps> = props => {
-  const [value, setValue] = useAutoControlled({
-    defaultValue: props.defaultValue,
-    value: props.value,
-  })
-
-  return (
-    <input
-      onChange={e => {
-        setValue(e.target.value)
-        if (props.onChange) props.onChange(e.target.value)
-      }}
-      value={value}
-    />
-  )
-}
-```
-
 ## `useStateManager()`
 
 A React hook that provides bindings for state managers.
diff --git a/packages/react-bindings/package.json b/packages/react-bindings/package.json
index 61f3171b3d..3a50ae2166 100644
--- a/packages/react-bindings/package.json
+++ b/packages/react-bindings/package.json
@@ -1,20 +1,20 @@
 {
   "name": "@fluentui/react-bindings",
   "description": "A set of components and hooks to build components libraries and UI kits.",
-  "version": "0.44.0",
+  "version": "0.43.0",
   "author": "Oleksandr Fediashov <a@fedyashov.com>",
   "bugs": "https://github.com/microsoft/fluent-ui-react/issues",
   "dependencies": {
-    "@babel/runtime": "^7.7.6",
-    "@fluentui/accessibility": "^0.44.0",
-    "@fluentui/state": "^0.44.0",
-    "@fluentui/styles": "^0.44.0",
+    "@babel/runtime": "^7.1.2",
+    "@fluentui/accessibility": "^0.43.0",
+    "@fluentui/state": "^0.43.0",
+    "@fluentui/styles": "^0.43.0",
     "classnames": "^2.2.6",
     "fela": "^10.6.1",
     "lodash": "^4.17.15"
   },
   "devDependencies": {
-    "@fluentui/internal-tooling": "^0.44.0",
+    "@fluentui/internal-tooling": "^0.43.0",
     "@types/classnames": "^2.2.9",
     "lerna-alias": "^3.0.3-0"
   },
diff --git a/packages/react-bindings/src/FocusZone/FocusZone.tsx b/packages/react-bindings/src/FocusZone/FocusZone.tsx
index 55c9adb5e6..3286dfeb9e 100644
--- a/packages/react-bindings/src/FocusZone/FocusZone.tsx
+++ b/packages/react-bindings/src/FocusZone/FocusZone.tsx
@@ -206,9 +206,6 @@ export default class FocusZone extends React.Component<FocusZoneProps> implement
     if (this._root.current) {
       this._root.current.removeEventListener('blur', this._onBlur, true)
     }
-
-    this._activeElement = null
-    this._defaultFocusElement = null
   }
 
   render() {
diff --git a/packages/react-bindings/src/hooks/useAutoControlled.ts b/packages/react-bindings/src/hooks/useAutoControlled.ts
deleted file mode 100644
index eb59d5207a..0000000000
--- a/packages/react-bindings/src/hooks/useAutoControlled.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react'
-
-type UseAutoControlledOptions<Value> = {
-  defaultValue: Value
-  value: Value
-
-  initialValue?: Value
-}
-
-const isUndefined = (value: any) => typeof value === 'undefined'
-
-/**
- * Returns a stateful value, and a function to update it. Mimics the `useState()` React Hook
- * signature.
- */
-const useAutoControlled = <Value>(
-  options: UseAutoControlledOptions<Value>,
-): [Value, React.Dispatch<React.SetStateAction<Value>>] => {
-  const { defaultValue, initialValue = undefined, value } = options
-  const [state, setState] = React.useState<Value>(
-    isUndefined(defaultValue) ? (initialValue as Value) : defaultValue,
-  )
-
-  return [isUndefined(value) ? state : value, setState]
-}
-
-export default useAutoControlled
diff --git a/packages/react-bindings/src/hooks/useIsomorphicLayoutEffect.ts b/packages/react-bindings/src/hooks/useIsomorphicLayoutEffect.ts
deleted file mode 100644
index 4a55b29563..0000000000
--- a/packages/react-bindings/src/hooks/useIsomorphicLayoutEffect.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as React from 'react'
-
-// useLayoutEffect() produces a warning with SSR rendering
-// https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
-const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect
-
-export default useIsomorphicLayoutEffect
diff --git a/packages/react-bindings/src/hooks/useStateManager.ts b/packages/react-bindings/src/hooks/useStateManager.ts
index 035eee16a3..9ab42d4ea4 100644
--- a/packages/react-bindings/src/hooks/useStateManager.ts
+++ b/packages/react-bindings/src/hooks/useStateManager.ts
@@ -36,7 +36,6 @@ const useStateManager = <
     mapPropsToState = () => ({} as Partial<State>),
     sideEffects = [],
   } = options
-  const latestActions = React.useMemo<Actions>(() => ({} as Actions), [managerFactory])
   const latestManager = React.useRef<Manager<State, Actions> | null>(null)
 
   // Heads up! forceUpdate() is used only for triggering rerenders, stateManager is SSOT
@@ -59,28 +58,19 @@ const useStateManager = <
     ],
   })
 
-  // We need to keep the same reference to an object with actions to allow usage them as
-  // a dependency in useCallback() hook
-  Object.assign(latestActions, latestManager.current.actions)
-
-  // For development environments we disallow ability to extend object with other properties to
-  // avoid misusage
-  if (process.env.NODE_ENV !== 'production') {
-    if (Object.isExtensible(latestActions)) Object.preventExtensions(latestActions)
-  }
-
   // We need to pass exactly `manager.state` to provide the same state object during the same render
   // frame.
   // It keeps behavior consistency between React state tools and our managers
   // https://github.com/facebook/react/issues/11527#issuecomment-360199710
-  // Object.freeze() is used only in dev-mode to avoid usage mistakes
 
+  if (process.env.NODE_ENV === 'production') {
+    return { state: latestManager.current.state, actions: latestManager.current.actions }
+  }
+
+  // Object.freeze() is used only in dev-mode to avoid usage mistakes
   return {
-    state:
-      process.env.NODE_ENV === 'production'
-        ? latestManager.current.state
-        : Object.freeze(latestManager.current.state),
-    actions: latestActions,
+    state: Object.freeze(latestManager.current.state),
+    actions: Object.freeze(latestManager.current.actions),
   }
 }
 
diff --git a/packages/react-bindings/src/hooks/useStyles.ts b/packages/react-bindings/src/hooks/useStyles.ts
index 3765e22ba1..d69c691999 100644
--- a/packages/react-bindings/src/hooks/useStyles.ts
+++ b/packages/react-bindings/src/hooks/useStyles.ts
@@ -1,6 +1,6 @@
 import {
   ComponentSlotStyle,
-  ComponentSlotStylesResolved,
+  ComponentSlotStylesPrepared,
   ComponentVariablesInput,
   DebugData,
   emptyTheme,
@@ -12,12 +12,12 @@ import { ThemeContext } from 'react-fela'
 import {
   ComponentDesignProp,
   ComponentSlotClasses,
-  PrimitiveProps,
   RendererRenderRule,
   StylesContextValue,
 } from '../styles/types'
 import getStyles from '../styles/getStyles'
 
+type PrimitiveProps = Record<string, boolean | number | string | undefined>
 type UseStylesOptions<StyleProps extends PrimitiveProps> = {
   className?: string
   mapPropsToStyles?: () => StyleProps
@@ -27,7 +27,7 @@ type UseStylesOptions<StyleProps extends PrimitiveProps> = {
 
 type UseStylesResult = {
   classes: ComponentSlotClasses
-  styles: ComponentSlotStylesResolved
+  styles: ComponentSlotStylesPrepared
 }
 
 type InlineStyleProps<StyleProps> = {
@@ -45,12 +45,9 @@ type InlineStyleProps<StyleProps> = {
 
 const defaultContext: StylesContextValue<{ renderRule: RendererRenderRule }> = {
   disableAnimations: false,
-  performance: {
-    enableStylesCaching: true,
-    enableVariablesCaching: true,
-  },
   renderer: { renderRule: () => '' },
   theme: emptyTheme,
+  _internal_resolvedComponentVariables: {},
 }
 
 const useStyles = <StyleProps extends PrimitiveProps>(
@@ -60,8 +57,6 @@ const useStyles = <StyleProps extends PrimitiveProps>(
   const context: StylesContextValue<{ renderRule: RendererRenderRule }> =
     React.useContext(ThemeContext) || defaultContext
 
-  const { enableStylesCaching = true, enableVariablesCaching = true } = context.performance || {}
-
   const {
     className = process.env.NODE_ENV === 'production' ? '' : 'no-classname-🙉',
     mapPropsToStyles = () => ({} as StyleProps),
@@ -86,10 +81,7 @@ const useStyles = <StyleProps extends PrimitiveProps>(
     rtl,
     saveDebug: fluentUIDebug => (debug.current = { fluentUIDebug }),
     theme: context.theme,
-    performance: {
-      enableStylesCaching,
-      enableVariablesCaching,
-    },
+    _internal_resolvedComponentVariables: context._internal_resolvedComponentVariables,
   })
 
   return { classes, styles: resolvedStyles }
diff --git a/packages/react-bindings/src/index.ts b/packages/react-bindings/src/index.ts
index 75ed78e683..96d3dd8f22 100644
--- a/packages/react-bindings/src/index.ts
+++ b/packages/react-bindings/src/index.ts
@@ -10,14 +10,11 @@ export * from './FocusZone/FocusZone.types'
 export * from './FocusZone/focusUtilities'
 
 export { default as useAccessibility } from './hooks/useAccessibility'
-export { default as useAutoControlled } from './hooks/useAutoControlled'
+export { default as useStyles } from './hooks/useStyles'
 export { default as unstable_useDispatchEffect } from './hooks/useDispatchEffect'
-export { default as useIsomorphicLayoutEffect } from './hooks/useIsomorphicLayoutEffect'
 export { default as useStateManager } from './hooks/useStateManager'
-export { default as useStyles } from './hooks/useStyles'
 
 export { default as unstable_createAnimationStyles } from './styles/createAnimationStyles'
-export { default as unstable_calculateAnimationTimeout } from './styles/calculateAnimationTimeout'
 export { default as unstable_getStyles } from './styles/getStyles'
 export * from './styles/types'
 
diff --git a/packages/react-bindings/src/styles/calculateAnimationTimeout.ts b/packages/react-bindings/src/styles/calculateAnimationTimeout.ts
deleted file mode 100644
index 2064874d95..0000000000
--- a/packages/react-bindings/src/styles/calculateAnimationTimeout.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import convertCssTimeToNumber from './convertCssTimeToNumber'
-import * as _ from 'lodash'
-
-const calculateAnimationTimeout = (duration: string | undefined, delay?: string): number => {
-  if (_.isNil(duration) || duration === 'inherit' || duration === 'initial') return 0
-  if (delay === 'inherit' || delay === 'initial') return 0
-  return convertCssTimeToNumber(duration) + convertCssTimeToNumber(delay)
-}
-
-export default calculateAnimationTimeout
diff --git a/packages/react-bindings/src/styles/convertCssTimeToNumber.ts b/packages/react-bindings/src/styles/convertCssTimeToNumber.ts
deleted file mode 100644
index a582bdb2c9..0000000000
--- a/packages/react-bindings/src/styles/convertCssTimeToNumber.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as _ from 'lodash'
-
-const convertCssTimeToNumber = (time: string | undefined): number => {
-  if (_.isNil(time) || time === 'initial' || time === 'inherit') {
-    return 0
-  }
-
-  if (!_.endsWith(time, 'ms') && !_.endsWith(time, 's')) {
-    return 0
-  }
-
-  const multiplier = _.endsWith(time, 'ms') ? 1 : 1000
-  const stringNumber = _.endsWith(time, 'ms')
-    ? time.substring(0, time.length - 2)
-    : time.substring(0, time.length - 1)
-
-  return isNaN(_.toNumber(stringNumber)) ? 0 : multiplier * _.toNumber(stringNumber)
-}
-
-export default convertCssTimeToNumber
diff --git a/packages/react-bindings/src/styles/getStyles.ts b/packages/react-bindings/src/styles/getStyles.ts
index 3ab17b5190..defec91c40 100644
--- a/packages/react-bindings/src/styles/getStyles.ts
+++ b/packages/react-bindings/src/styles/getStyles.ts
@@ -1,49 +1,126 @@
 import {
-  ComponentSlotStylesResolved,
+  callable,
+  ComponentSlotStylesInput,
+  ComponentSlotStylesPrepared,
+  ComponentStyleFunctionParam,
   ComponentVariablesObject,
+  DebugData,
+  ICSSInJSStyle,
   isDebugEnabled,
+  mergeComponentStyles,
+  mergeComponentVariables,
+  PropsWithVarsAndStyles,
+  withDebugId,
 } from '@fluentui/styles'
-
+import cx from 'classnames'
 import * as _ from 'lodash'
 
-import { ComponentSlotClasses, ResolveStylesOptions, StylesContextValue } from '../styles/types'
-import resolveVariables from './resolveVariables'
-import resolveStyles from './resolveStyles'
+import resolveStylesAndClasses from './resolveStylesAndClasses'
+import {
+  ComponentDesignProp,
+  ComponentSlotClasses,
+  RendererParam,
+  RendererRenderRule,
+  StylesContextValue,
+} from '../styles/types'
+
+type GetStylesOptions = StylesContextValue<{
+  renderRule: RendererRenderRule
+}> & {
+  className?: string
+  displayName: string
+  props: PropsWithVarsAndStyles & { design?: ComponentDesignProp }
+  rtl: boolean
+  saveDebug: (debug: DebugData | null) => void
+}
 
 export type GetStylesResult = {
   classes: ComponentSlotClasses
   variables: ComponentVariablesObject
-  styles: ComponentSlotStylesResolved
+  styles: ComponentSlotStylesPrepared
   theme: StylesContextValue['theme']
 }
 
-const getStyles = (options: ResolveStylesOptions): GetStylesResult => {
-  //
-  // To compute styles we are going through three stages:
-  // - resolve variables (siteVariables => componentVariables + props.variables)
-  // - resolve styles (with resolvedVariables & props.styles & props.design)
-  // - compute classes (with resolvedStyles)
-  // - conditionally add sources for evaluating debug information to component
-
-  const resolvedVariables = resolveVariables(
-    options.displayName,
-    options.theme,
-    options.props.variables,
-    options.performance.enableVariablesCaching,
+const getStyles = (options: GetStylesOptions): GetStylesResult => {
+  const {
+    className,
+    disableAnimations,
+    displayName,
+    props,
+    renderer,
+    rtl,
+    saveDebug,
+    theme,
+    _internal_resolvedComponentVariables: resolvedComponentVariables,
+  } = options
+
+  // Resolve variables for this component, cache the result in provider
+  if (!resolvedComponentVariables[displayName]) {
+    resolvedComponentVariables[displayName] =
+      callable(theme.componentVariables[displayName])(theme.siteVariables) || {} // component variables must not be undefined/null (see mergeComponentVariables contract)
+  }
+
+  // Merge inline variables on top of cached variables
+  const resolvedVariables = props.variables
+    ? mergeComponentVariables(
+        resolvedComponentVariables[displayName],
+        withDebugId(props.variables, 'props.variables'),
+      )(theme.siteVariables)
+    : resolvedComponentVariables[displayName]
+
+  // Resolve styles using resolved variables, merge results, allow props.styles to override
+  let mergedStyles: ComponentSlotStylesPrepared = theme.componentStyles[displayName] || {
+    root: () => ({}),
+  }
+
+  const hasInlineOverrides = !_.isNil(props.design) || !_.isNil(props.styles)
+
+  if (hasInlineOverrides) {
+    mergedStyles = mergeComponentStyles(
+      mergedStyles,
+      props.design && withDebugId({ root: props.design }, 'props.design'),
+      props.styles &&
+        withDebugId({ root: props.styles } as ComponentSlotStylesInput, 'props.styles'),
+    )
+  }
+
+  const styleParam: ComponentStyleFunctionParam = {
+    displayName,
+    props,
+    variables: resolvedVariables,
+    theme,
+    rtl,
+    disableAnimations,
+  }
+
+  // Fela plugins rely on `direction` param in `theme` prop instead of RTL
+  // Our API should be aligned with it
+  // Heads Up! Keep in sync with Design.tsx render logic
+  const direction = rtl ? 'rtl' : 'ltr'
+  const felaParam: RendererParam = {
+    theme: { direction },
+    disableAnimations,
+    displayName, // does not affect styles, only used by useEnhancedRenderer in docs
+  }
+
+  const { resolvedStyles, resolvedStylesDebug, classes } = resolveStylesAndClasses(
+    mergedStyles,
+    styleParam,
+    (style: ICSSInJSStyle) => renderer.renderRule(() => style, felaParam),
   )
 
-  const { classes, resolvedStyles, resolvedStylesDebug } = resolveStyles(options, resolvedVariables)
+  classes.root = cx(className, classes.root, props.className)
 
   // conditionally add sources for evaluating debug information to component
   if (process.env.NODE_ENV !== 'production' && isDebugEnabled) {
-    options.saveDebug({
-      componentName: options.displayName,
+    saveDebug({
+      componentName: displayName,
       componentVariables: _.filter(
         resolvedVariables._debug,
         variables => !_.isEmpty(variables.resolved),
       ),
       componentStyles: resolvedStylesDebug,
-      siteVariables: _.filter(options.theme.siteVariables._debug, siteVars => {
+      siteVariables: _.filter(theme.siteVariables._debug, siteVars => {
         if (_.isEmpty(siteVars) || _.isEmpty(siteVars.resolved)) {
           return false
         }
@@ -66,7 +143,7 @@ const getStyles = (options: ResolveStylesOptions): GetStylesResult => {
     classes,
     variables: resolvedVariables,
     styles: resolvedStyles,
-    theme: options.theme,
+    theme,
   }
 }
 
diff --git a/packages/react-bindings/src/styles/resolveStyles.ts b/packages/react-bindings/src/styles/resolveStyles.ts
deleted file mode 100644
index 8d9dcda323..0000000000
--- a/packages/react-bindings/src/styles/resolveStyles.ts
+++ /dev/null
@@ -1,227 +0,0 @@
-import cx from 'classnames'
-import {
-  ComponentSlotStylesInput,
-  ComponentSlotStylesPrepared,
-  ComponentSlotStylesResolved,
-  ComponentStyleFunctionParam,
-  ComponentVariablesObject,
-  ICSSInJSStyle,
-  isDebugEnabled,
-  mergeComponentStyles,
-  ThemePrepared,
-  withDebugId,
-} from '@fluentui/styles'
-import { ComponentSlotClasses, RendererParam, ResolveStylesOptions } from '@fluentui/react-bindings'
-import * as _ from 'lodash'
-
-export type ResolveStylesResult = {
-  resolvedStyles: ComponentSlotStylesResolved
-  resolvedStylesDebug: Record<string, { styles: Object }[]>
-  classes: ComponentSlotClasses
-}
-
-// this weak map is used as cache for the classes
-const classesCache = new WeakMap<ThemePrepared, Record<string, string>>()
-
-// this weak map is used as cache for the styles
-const stylesCache = new WeakMap<ThemePrepared, Record<string, ICSSInJSStyle>>()
-
-/**
- * Both resolvedStyles and classes are objects of getters with lazy evaluation
- *
- * Additionally if the cacheEnabled option is provided, than the resolved styles
- * and classes are caching the results in WeakMaps. The key of the maps contains the following:
- * - theme
- * - displayName
- * - slot name
- * - styling props
- * - rtl mode
- * - disable animations mode
- */
-const resolveStyles = (
-  options: ResolveStylesOptions,
-  resolvedVariables: ComponentVariablesObject,
-  renderStylesInput?: (styles: ICSSInJSStyle) => string,
-): ResolveStylesResult => {
-  const {
-    className: componentClassName,
-    theme,
-    displayName,
-    props,
-    rtl,
-    disableAnimations,
-    renderer,
-    performance = {},
-  } = options || {}
-
-  const { className, design, styles, variables, ...stylesProps } = props
-  const noInlineOverrides = !(design || styles || variables)
-
-  const cacheEnabled = performance.enableStylesCaching && noInlineOverrides
-
-  // Merge theme styles with inline overrides if any
-  let mergedStyles: ComponentSlotStylesPrepared = theme.componentStyles[displayName] || {
-    root: () => ({}),
-  }
-  const hasInlineStylesOverrides = !_.isNil(props.design) || !_.isNil(props.styles)
-
-  if (hasInlineStylesOverrides) {
-    mergedStyles = mergeComponentStyles(
-      mergedStyles,
-      props.design && withDebugId({ root: props.design }, 'props.design'),
-      props.styles &&
-        withDebugId({ root: props.styles } as ComponentSlotStylesInput, 'props.styles'),
-    )
-  }
-
-  const styleParam: ComponentStyleFunctionParam = {
-    displayName,
-    props,
-    variables: resolvedVariables,
-    theme,
-    rtl,
-    disableAnimations,
-  }
-
-  // Fela plugins rely on `direction` param in `theme` prop instead of RTL
-  // Our API should be aligned with it
-  // Heads Up! Keep in sync with Design.tsx render logic
-  const direction = rtl ? 'rtl' : 'ltr'
-  const felaParam: RendererParam = {
-    theme: { direction },
-    disableAnimations,
-    displayName, // does not affect styles, only used by useEnhancedRenderer in docs
-  }
-
-  const renderStyles =
-    renderStylesInput || ((style: ICSSInJSStyle) => renderer.renderRule(() => style, felaParam))
-
-  const resolvedStyles: Record<string, ICSSInJSStyle> = {}
-  const resolvedStylesDebug: Record<string, { styles: Object }[]> = {}
-  const classes: Record<string, string> = {}
-
-  if (cacheEnabled && theme) {
-    if (!stylesCache.has(theme)) {
-      stylesCache.set(theme, {})
-    }
-    if (!classesCache.has(theme)) {
-      classesCache.set(theme, {})
-    }
-  }
-
-  const componentCacheKey =
-    cacheEnabled && displayName && stylesProps
-      ? `${displayName}:${JSON.stringify(stylesProps)}${styleParam.rtl}${
-          styleParam.disableAnimations
-        }`
-      : ''
-
-  Object.keys(mergedStyles).forEach(slotName => {
-    // resolve/render slot styles once and cache
-    const lazyEvaluationKey = `${slotName}__return`
-    const slotCacheKey = componentCacheKey + slotName
-
-    Object.defineProperty(resolvedStyles, slotName, {
-      enumerable: false,
-      configurable: false,
-      set(val: ICSSInJSStyle) {
-        // Add to the cache if it's enabled
-        if (cacheEnabled && theme) {
-          stylesCache.set(theme, {
-            ...stylesCache.get(theme),
-            [slotCacheKey]: val,
-          })
-        }
-
-        resolvedStyles[lazyEvaluationKey] = val
-      },
-      get(): ICSSInJSStyle {
-        // If caching enabled and entry exists, get from cache, avoid lazy evaluation
-        if (cacheEnabled && theme) {
-          const stylesThemeCache = stylesCache.get(theme) || {}
-          if (stylesThemeCache[slotCacheKey]) {
-            return stylesThemeCache[slotCacheKey]
-          }
-        }
-
-        if (resolvedStyles[lazyEvaluationKey]) {
-          return resolvedStyles[lazyEvaluationKey]
-        }
-
-        // resolve/render slot styles once and cache
-        resolvedStyles[lazyEvaluationKey] = mergedStyles[slotName](styleParam)
-
-        if (cacheEnabled && theme) {
-          stylesCache.set(theme, {
-            ...stylesCache.get(theme),
-            [slotCacheKey]: resolvedStyles[lazyEvaluationKey],
-          })
-        }
-
-        if (process.env.NODE_ENV !== 'production' && isDebugEnabled) {
-          resolvedStylesDebug[slotName] = resolvedStyles[slotName]['_debug']
-          delete resolvedStyles[slotName]['_debug']
-        }
-
-        return resolvedStyles[lazyEvaluationKey]
-      },
-    })
-
-    Object.defineProperty(classes, slotName, {
-      enumerable: false,
-      configurable: false,
-      set(val: string) {
-        if (cacheEnabled && theme) {
-          classesCache.set(theme, {
-            ...classesCache.get(theme),
-            [slotCacheKey]: val,
-          })
-        }
-
-        classes[lazyEvaluationKey] = val
-      },
-      get(): string {
-        if (cacheEnabled && theme) {
-          const classesThemeCache = classesCache.get(theme) || {}
-          if (classesThemeCache[slotCacheKey]) {
-            return slotName === 'root'
-              ? cx(componentClassName, classesThemeCache[slotCacheKey], className)
-              : classesThemeCache[slotCacheKey]
-          }
-        }
-
-        if (classes[lazyEvaluationKey]) {
-          return slotName === 'root'
-            ? cx(componentClassName, classes[lazyEvaluationKey], className)
-            : classes[lazyEvaluationKey]
-        }
-
-        // this resolves the getter magic
-        const styleObj = resolvedStyles[slotName]
-
-        if (renderStyles && styleObj) {
-          classes[lazyEvaluationKey] = renderStyles(styleObj)
-
-          if (cacheEnabled && theme) {
-            classesCache.set(theme, {
-              ...classesCache.get(theme),
-              [slotCacheKey]: classes[lazyEvaluationKey],
-            })
-          }
-        }
-
-        return slotName === 'root'
-          ? cx(componentClassName, classes[lazyEvaluationKey], className)
-          : classes[lazyEvaluationKey]
-      },
-    })
-  })
-
-  return {
-    resolvedStyles,
-    resolvedStylesDebug,
-    classes,
-  }
-}
-
-export default resolveStyles
diff --git a/packages/react-bindings/src/styles/resolveStylesAndClasses.tsx b/packages/react-bindings/src/styles/resolveStylesAndClasses.tsx
new file mode 100644
index 0000000000..38fa28c875
--- /dev/null
+++ b/packages/react-bindings/src/styles/resolveStylesAndClasses.tsx
@@ -0,0 +1,82 @@
+import {
+  ComponentSlotStylesPrepared,
+  isDebugEnabled,
+  ICSSInJSStyle,
+  ComponentStyleFunctionParam,
+} from '@fluentui/styles'
+import { ComponentSlotClasses } from '../styles/types'
+
+// Both resolvedStyles and classes are objects of getters with lazy evaluation
+const resolveStylesAndClasses = (
+  mergedStyles: ComponentSlotStylesPrepared,
+  styleParam: ComponentStyleFunctionParam,
+  renderStyles: (styles: ICSSInJSStyle) => string,
+): {
+  resolvedStyles: ICSSInJSStyle
+  resolvedStylesDebug: Record<string, { styles: Object }[]>
+  classes: ComponentSlotClasses
+} => {
+  const resolvedStyles: Record<string, ICSSInJSStyle> = {}
+  const resolvedStylesDebug: Record<string, { styles: Object }[]> = {}
+  const classes: Record<string, string> = {}
+
+  Object.keys(mergedStyles).forEach(slotName => {
+    // resolve/render slot styles once and cache
+    const cacheKey = `${slotName}__return`
+
+    Object.defineProperty(resolvedStyles, slotName, {
+      enumerable: false,
+      configurable: false,
+      set(val) {
+        resolvedStyles[cacheKey] = val
+        return true
+      },
+      get() {
+        if (resolvedStyles[cacheKey]) {
+          return resolvedStyles[cacheKey]
+        }
+
+        // resolve/render slot styles once and cache
+        resolvedStyles[cacheKey] = mergedStyles[slotName](styleParam)
+
+        if (process.env.NODE_ENV !== 'production' && isDebugEnabled) {
+          resolvedStylesDebug[slotName] = resolvedStyles[slotName]['_debug']
+          delete resolvedStyles[slotName]['_debug']
+        }
+
+        return resolvedStyles[cacheKey]
+      },
+    })
+
+    Object.defineProperty(classes, slotName, {
+      enumerable: false,
+      configurable: false,
+      set(val) {
+        classes[cacheKey] = val
+        return true
+      },
+      get() {
+        if (classes[cacheKey]) {
+          return classes[cacheKey]
+        }
+
+        // this resolves the getter magic
+        const styleObj = resolvedStyles[slotName]
+
+        if (renderStyles && styleObj) {
+          classes[cacheKey] = renderStyles(styleObj)
+        }
+
+        return classes[cacheKey]
+      },
+    })
+  })
+
+  return {
+    resolvedStyles,
+    resolvedStylesDebug,
+    classes,
+  }
+}
+
+export default resolveStylesAndClasses
diff --git a/packages/react-bindings/src/styles/resolveVariables.ts b/packages/react-bindings/src/styles/resolveVariables.ts
deleted file mode 100644
index 0f3a8db47a..0000000000
--- a/packages/react-bindings/src/styles/resolveVariables.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import {
-  callable,
-  ComponentVariablesInput,
-  ComponentVariablesObject,
-  mergeComponentVariables,
-  ThemePrepared,
-  withDebugId,
-} from '@fluentui/styles'
-
-const variablesCache = new WeakMap<ThemePrepared, Record<string, ComponentVariablesObject>>()
-
-const resolveVariables = (
-  displayName: string,
-  theme: ThemePrepared,
-  variables: ComponentVariablesInput | undefined,
-  enabledVariablesCaching: boolean | undefined,
-): ComponentVariablesObject => {
-  //
-  // Simple caching model, works only if there is no `props.variables`
-  // Resolves variables for this component, cache the result in provider
-  //
-
-  let componentThemeVariables = {}
-
-  if (enabledVariablesCaching) {
-    if (!variablesCache.has(theme)) {
-      variablesCache.set(theme, {})
-    }
-
-    const variablesThemeCache = variablesCache.get(theme) || {}
-
-    if (!variablesThemeCache[displayName]) {
-      variablesThemeCache[displayName] =
-        callable(theme.componentVariables[displayName])(theme.siteVariables) || {}
-      variablesCache.set(theme, variablesThemeCache)
-    }
-
-    componentThemeVariables = variablesThemeCache[displayName]
-  } else {
-    componentThemeVariables =
-      callable(theme.componentVariables[displayName])(theme.siteVariables) || {}
-  }
-
-  if (variables === undefined) {
-    return componentThemeVariables
-  }
-
-  return mergeComponentVariables(
-    componentThemeVariables,
-    withDebugId(variables, 'props.variables'),
-  )(theme.siteVariables)
-}
-
-export default resolveVariables
diff --git a/packages/react-bindings/src/styles/types.ts b/packages/react-bindings/src/styles/types.ts
index fa4fc1a169..4472bf7e9d 100644
--- a/packages/react-bindings/src/styles/types.ts
+++ b/packages/react-bindings/src/styles/types.ts
@@ -1,10 +1,4 @@
-import {
-  DebugData,
-  ICSSInJSStyle,
-  PropsWithVarsAndStyles,
-  ThemeInput,
-  ThemePrepared,
-} from '@fluentui/styles'
+import { ICSSInJSStyle, ThemeInput, ThemePrepared } from '@fluentui/styles'
 import { IRenderer as FelaRenderer } from 'fela'
 
 // Notice:
@@ -67,30 +61,13 @@ export type Renderer = Omit<FelaRenderer, 'renderRule'> & {
   renderRule: RendererRenderRule
 }
 
-export interface StylesContextPerformance {
-  enableStylesCaching?: boolean
-  enableVariablesCaching?: boolean
-}
-
 export type StylesContextInputValue<R = Renderer> = {
   disableAnimations?: boolean
-  performance?: StylesContextPerformance
   renderer?: R
   theme?: ThemeInput
 }
 
 export type StylesContextValue<R = Renderer> = Required<StylesContextInputValue<R>> & {
   theme: ThemePrepared
-}
-
-export type PrimitiveProps = Record<string, boolean | number | string | undefined>
-
-export type ResolveStylesOptions = StylesContextValue<{
-  renderRule: RendererRenderRule
-}> & {
-  className?: string
-  displayName: string
-  props: PropsWithVarsAndStyles & { design?: ComponentDesignProp }
-  rtl: boolean
-  saveDebug: (debug: DebugData | null) => void
+  _internal_resolvedComponentVariables: Record<string, object>
 }
diff --git a/packages/react-bindings/test/hooks/useAutoControlled-test.tsx b/packages/react-bindings/test/hooks/useAutoControlled-test.tsx
deleted file mode 100644
index d4e4803dcb..0000000000
--- a/packages/react-bindings/test/hooks/useAutoControlled-test.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { useAutoControlled } from '@fluentui/react-bindings'
-import { shallow } from 'enzyme'
-import * as React from 'react'
-import * as ReactTestUtils from 'react-dom/test-utils'
-
-type TestComponentProps = {
-  defaultValue?: string
-  value?: string
-
-  initialValue?: string
-  onChange?: (value: string) => void
-}
-
-const TestComponent: React.FunctionComponent<TestComponentProps> = props => {
-  const [value, setValue] = useAutoControlled({
-    defaultValue: props.defaultValue,
-    value: props.value,
-
-    initialValue: props.initialValue,
-  })
-
-  return (
-    <input
-      onChange={e => {
-        setValue(e.target.value)
-        if (props.onChange) props.onChange(e.target.value)
-      }}
-      value={value || ''}
-    />
-  )
-}
-
-describe('useAutoControlled', () => {
-  it('defaults to "undefined"', () => {
-    const wrapper = shallow(<TestComponent />)
-
-    expect(wrapper.find('input').prop('value')).toBe('')
-  })
-
-  it('defaults to `initialValue` if specified', () => {
-    const wrapper = shallow(<TestComponent initialValue="foo" />)
-
-    expect(wrapper.find('input').prop('value')).toBe('foo')
-  })
-
-  it('sets default values of controlled props to the state', () => {
-    const wrapper = shallow(<TestComponent defaultValue="foo" />)
-
-    expect(wrapper.find('input').prop('value')).toBe('foo')
-  })
-
-  it('sets values of controlled props to the state', () => {
-    const wrapper = shallow(<TestComponent value="foo" />)
-
-    expect(wrapper.find('input').prop('value')).toBe('foo')
-  })
-
-  it('handles state updates', () => {
-    const wrapper = shallow(<TestComponent />)
-
-    ReactTestUtils.act(() => {
-      wrapper.find('input').simulate('change', { target: { value: 'foo' } })
-    })
-
-    expect(wrapper.find('input').prop('value')).toBe('foo')
-  })
-
-  it('handles state updates with a default value', () => {
-    const wrapper = shallow(<TestComponent defaultValue="foo" />)
-
-    ReactTestUtils.act(() => {
-      wrapper.find('input').simulate('change', { target: { value: 'bar' } })
-    })
-
-    expect(wrapper.find('input').prop('value')).toBe('bar')
-  })
-
-  it('ignores state updates if controlled', () => {
-    const wrapper = shallow(<TestComponent value="foo" />)
-
-    ReactTestUtils.act(() => {
-      wrapper.find('input').simulate('change', { target: { value: 'bar' } })
-    })
-
-    expect(wrapper.find('input').prop('value')).toBe('foo')
-  })
-
-  it('sets values of controlled props to the state on updates', () => {
-    const wrapper = shallow(<TestComponent value="foo" />)
-
-    ReactTestUtils.act(() => {
-      wrapper.setProps({ value: 'bar' })
-    })
-    expect(wrapper.find('input').prop('value')).toBe('bar')
-
-    ReactTestUtils.act(() => {
-      wrapper.setProps({ value: 'baz' })
-    })
-    expect(wrapper.find('input').prop('value')).toBe('baz')
-  })
-
-  it('keeps last value of controlled prop in the state if value gets "undefined"', () => {
-    const wrapper = shallow(<TestComponent defaultValue="foo" />)
-
-    ReactTestUtils.act(() => {
-      wrapper.setProps({ value: undefined })
-    })
-    expect(wrapper.find('input').prop('value')).toBe('foo')
-  })
-})
diff --git a/packages/react-bindings/test/hooks/useStateManager-test.tsx b/packages/react-bindings/test/hooks/useStateManager-test.tsx
index 737638658c..f39e597616 100644
--- a/packages/react-bindings/test/hooks/useStateManager-test.tsx
+++ b/packages/react-bindings/test/hooks/useStateManager-test.tsx
@@ -1,6 +1,6 @@
 import { useStateManager } from '@fluentui/react-bindings'
 import { createManager, ManagerFactory } from '@fluentui/state'
-import { mount, shallow } from 'enzyme'
+import { shallow } from 'enzyme'
 import * as React from 'react'
 import * as ReactTestUtils from 'react-dom/test-utils'
 
@@ -63,23 +63,6 @@ const TestComponent: React.FunctionComponent<TestComponentProps> = props => {
   )
 }
 
-type ActionsComponentProps = {
-  onRender: () => void
-  onUpdate: () => void
-}
-
-const ActionsComponent: React.FunctionComponent<ActionsComponentProps> = props => {
-  const { actions, state } = useStateManager(createTestManager)
-  const handleClick = React.useCallback(() => actions.toggle(), [actions])
-
-  props.onRender()
-  React.useEffect(() => {
-    props.onUpdate()
-  }, [actions])
-
-  return <div data-open={state.open} onClick={handleClick} />
-}
-
 describe('useStateManager', () => {
   it('uses default values from state manager', () => {
     const wrapper = shallow(<TestComponent />)
@@ -165,30 +148,4 @@ describe('useStateManager', () => {
     expect(onChange).toHaveBeenNthCalledWith(1, 'foo')
     expect(onChange).toHaveBeenNthCalledWith(2, 'foo')
   })
-
-  it('actions are referentially equal between renders', () => {
-    const onRender = jest.fn()
-    const onUpdate = jest.fn()
-    const wrapper = mount(<ActionsComponent onRender={onRender} onUpdate={onUpdate} />)
-
-    expect(wrapper.find('div').prop('data-open')).toBe(false)
-
-    ReactTestUtils.act(() => {
-      wrapper.find('div').simulate('click')
-    })
-    wrapper.update()
-
-    expect(wrapper.find('div').prop('data-open')).toBe(true)
-    expect(onRender).toHaveBeenCalledTimes(2)
-    expect(onUpdate).toHaveBeenCalledTimes(1)
-
-    ReactTestUtils.act(() => {
-      wrapper.find('div').simulate('click')
-    })
-    wrapper.update()
-
-    expect(wrapper.find('div').prop('data-open')).toBe(false)
-    expect(onRender).toHaveBeenCalledTimes(3)
-    expect(onUpdate).toHaveBeenCalledTimes(1)
-  })
 })
diff --git a/packages/react-bindings/test/hooks/useStyles-test.tsx b/packages/react-bindings/test/hooks/useStyles-test.tsx
index 6eba9f4953..d97892855b 100644
--- a/packages/react-bindings/test/hooks/useStyles-test.tsx
+++ b/packages/react-bindings/test/hooks/useStyles-test.tsx
@@ -39,6 +39,7 @@ const TestProvider: React.FC<{ theme: ThemeInput }> = props => {
     <ThemeContext.Provider
       value={{
         theme,
+        _internal_resolvedComponentVariables: {},
       }}
     >
       {children}
diff --git a/packages/react-bindings/test/styles/convertCssTimeToNumber-test.ts b/packages/react-bindings/test/styles/convertCssTimeToNumber-test.ts
deleted file mode 100644
index 55f778b23f..0000000000
--- a/packages/react-bindings/test/styles/convertCssTimeToNumber-test.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { unstable_calculateAnimationTimeout as calculateAnimationTimeout } from '@fluentui/react-bindings'
-
-describe('convertCssTimeToNumber', () => {
-  test('converts "ms" values to number', () => {
-    expect(calculateAnimationTimeout('200ms', '300ms')).toEqual(500)
-  })
-
-  test('converts "s" values to number', () => {
-    expect(calculateAnimationTimeout('20s', '2s')).toEqual(22000)
-  })
-
-  test('converts other valid css values to 0', () => {
-    expect(calculateAnimationTimeout('initial', '200ms')).toEqual(0)
-    expect(calculateAnimationTimeout('inherit', '400ms')).toEqual(0)
-  })
-
-  test('converts invalid css values to 0', () => {
-    expect(calculateAnimationTimeout('intial', undefined)).toEqual(0)
-  })
-
-  test('returns the duration if delay is not set', () => {
-    expect(calculateAnimationTimeout('400ms')).toEqual(400)
-    expect(calculateAnimationTimeout('2s')).toEqual(2000)
-  })
-})
diff --git a/packages/react-bindings/test/styles/resolveStyles-test.ts b/packages/react-bindings/test/styles/resolveStyles-test.ts
deleted file mode 100644
index ae8216cef1..0000000000
--- a/packages/react-bindings/test/styles/resolveStyles-test.ts
+++ /dev/null
@@ -1,269 +0,0 @@
-import * as _ from 'lodash'
-import {
-  ComponentSlotStylesPrepared,
-  ComponentVariablesObject,
-  emptyTheme,
-  ICSSInJSStyle,
-} from '@fluentui/styles'
-import resolveStyles from '../../src/styles/resolveStyles'
-import { ResolveStylesOptions } from '../../src/styles/types'
-
-const componentStyles: ComponentSlotStylesPrepared<{}, { color: string }> = {
-  root: ({ variables: v }): ICSSInJSStyle => ({
-    color: v.color,
-  }),
-}
-
-const resolvedVariables: ComponentVariablesObject = {
-  color: 'red',
-}
-
-const resolveStylesOptions = (options?: {
-  displayName?: ResolveStylesOptions['displayName']
-  performance?: ResolveStylesOptions['performance']
-  props?: ResolveStylesOptions['props']
-}): ResolveStylesOptions => {
-  const {
-    displayName = 'Test',
-    performance = {
-      enableVariablesCaching: true,
-      enableStylesCaching: true,
-    },
-    props = {},
-  } = options || {}
-
-  return {
-    theme: {
-      ...emptyTheme,
-      componentStyles: {
-        [displayName]: componentStyles,
-      },
-    },
-    displayName,
-    props,
-    rtl: false,
-    disableAnimations: false,
-    renderer: {
-      renderRule: () => '',
-    },
-    performance,
-    saveDebug: () => {},
-  }
-}
-
-describe('resolveStyles', () => {
-  test('resolves styles', () => {
-    const { resolvedStyles } = resolveStyles(resolveStylesOptions(), resolvedVariables)
-
-    expect(resolvedStyles.root).toMatchObject({ color: 'red' })
-  })
-
-  test('caches resolved styles', () => {
-    spyOn(componentStyles, 'root').and.callThrough()
-    const { resolvedStyles } = resolveStyles(resolveStylesOptions(), resolvedVariables)
-
-    expect(resolvedStyles.root).toMatchObject({ color: 'red' })
-    expect(componentStyles.root).toHaveBeenCalledTimes(1)
-    expect(resolvedStyles.root).toMatchObject({ color: 'red' })
-    expect(componentStyles.root).toHaveBeenCalledTimes(1)
-  })
-
-  test('does not render classes if not fetched', () => {
-    const renderStyles = jest.fn()
-    const { resolvedStyles } = resolveStyles(
-      resolveStylesOptions(),
-      resolvedVariables,
-      renderStyles,
-    )
-
-    expect(resolvedStyles.root).toMatchObject({ color: 'red' })
-    expect(renderStyles).not.toBeCalled()
-  })
-
-  test('renders classes when slot classes getter is accessed', () => {
-    const renderStyles = jest.fn().mockReturnValue('a')
-    const { classes } = resolveStyles(resolveStylesOptions(), resolvedVariables, renderStyles)
-
-    expect(classes['root']).toBeDefined()
-    expect(renderStyles).toHaveBeenCalledWith({ color: 'red' })
-  })
-
-  test('caches rendered classes', () => {
-    const renderStyles = jest.fn().mockReturnValue('a')
-    const { classes } = resolveStyles(resolveStylesOptions(), resolvedVariables, renderStyles)
-
-    expect(classes['root']).toBeDefined()
-    expect(renderStyles).toHaveBeenCalledWith({ color: 'red' })
-    expect(classes['root']).toBeDefined()
-    expect(renderStyles).toHaveBeenCalledTimes(1)
-  })
-
-  test('caches resolved styles for no props', () => {
-    spyOn(componentStyles, 'root').and.callThrough()
-    const options = resolveStylesOptions()
-    const { resolvedStyles } = resolveStyles(options, resolvedVariables)
-    const { resolvedStyles: secondResolvedStyles } = resolveStyles(options, resolvedVariables)
-
-    expect(resolvedStyles.root).toMatchObject({ color: 'red' })
-    expect(componentStyles.root).toHaveBeenCalledTimes(1)
-    expect(secondResolvedStyles.root).toMatchObject({ color: 'red' })
-    expect(componentStyles.root).toHaveBeenCalledTimes(1)
-  })
-
-  test('caches classes for no props', () => {
-    const renderStyles = jest.fn().mockReturnValue('a')
-    const options = resolveStylesOptions({ displayName: 'Test1' })
-    const { classes } = resolveStyles(options, resolvedVariables, renderStyles)
-    const { classes: secondClasses } = resolveStyles(options, resolvedVariables, renderStyles)
-
-    expect(classes['root']).toBeDefined()
-    expect(renderStyles).toHaveBeenCalledWith({ color: 'red' })
-    expect(secondClasses['root']).toBeDefined()
-    expect(renderStyles).toHaveBeenCalledTimes(1)
-  })
-
-  test('caches resolved styles for the same props', () => {
-    spyOn(componentStyles, 'root').and.callThrough()
-    const options = resolveStylesOptions({
-      displayName: 'Test2',
-      props: { primary: true },
-    })
-    const { resolvedStyles } = resolveStyles(options, resolvedVariables)
-    const { resolvedStyles: secondResolvedStyles } = resolveStyles(options, resolvedVariables)
-
-    expect(resolvedStyles.root).toMatchObject({ color: 'red' })
-    expect(componentStyles.root).toHaveBeenCalledTimes(1)
-    expect(secondResolvedStyles.root).toMatchObject({ color: 'red' })
-    expect(componentStyles.root).toHaveBeenCalledTimes(1)
-  })
-
-  test('caches classes for the same props', () => {
-    const renderStyles = jest.fn().mockReturnValue('a')
-    const options = resolveStylesOptions({
-      displayName: 'Test3',
-      props: { primary: true },
-    })
-    const { classes } = resolveStyles(options, resolvedVariables, renderStyles)
-    const { classes: secondClasses } = resolveStyles(options, resolvedVariables, renderStyles)
-
-    expect(classes['root']).toBeDefined()
-    expect(renderStyles).toHaveBeenCalledWith({ color: 'red' })
-    expect(secondClasses['root']).toBeDefined()
-    expect(renderStyles).toHaveBeenCalledTimes(1)
-  })
-
-  test('considers props when caching resolved styles', () => {
-    spyOn(componentStyles, 'root').and.callThrough()
-    const options = resolveStylesOptions({
-      displayName: 'Test4',
-      props: { primary: true },
-    })
-    const { resolvedStyles } = resolveStyles(options, resolvedVariables)
-
-    options.props = { primary: false }
-    const { resolvedStyles: secondResolvedStyles } = resolveStyles(options, resolvedVariables)
-
-    expect(resolvedStyles.root).toMatchObject({ color: 'red' })
-    expect(componentStyles.root).toHaveBeenCalledTimes(1)
-    expect(secondResolvedStyles.root).toMatchObject({ color: 'red' })
-    expect(componentStyles.root).toHaveBeenCalledTimes(2)
-  })
-
-  test('considers props when caching classes', () => {
-    const renderStyles = jest.fn().mockReturnValue('a')
-    const options = resolveStylesOptions({
-      displayName: 'Test5',
-      props: { primary: true },
-    })
-    const { classes } = resolveStyles(options, resolvedVariables, renderStyles)
-
-    options.props = { primary: false }
-    const { classes: secondClasses } = resolveStyles(options, resolvedVariables, renderStyles)
-
-    expect(classes['root']).toBeDefined()
-    expect(renderStyles).toHaveBeenCalledWith({ color: 'red' })
-    expect(secondClasses['root']).toBeDefined()
-    expect(renderStyles).toHaveBeenCalledTimes(2)
-  })
-
-  test('does not cache styles if caching is disabled', () => {
-    spyOn(componentStyles, 'root').and.callThrough()
-    const options = resolveStylesOptions({ performance: { enableStylesCaching: false } })
-    const { resolvedStyles } = resolveStyles(options, resolvedVariables)
-    const { resolvedStyles: secondResolvedStyles } = resolveStyles(options, resolvedVariables)
-
-    expect(resolvedStyles.root).toMatchObject({ color: 'red' })
-    expect(secondResolvedStyles.root).toMatchObject({ color: 'red' })
-    expect(componentStyles.root).toHaveBeenCalledTimes(2)
-  })
-
-  test('does not cache classes if caching is disabled', () => {
-    const renderStyles = jest.fn().mockReturnValue('a')
-    const options = resolveStylesOptions({ performance: { enableStylesCaching: false } })
-    const { classes } = resolveStyles(options, resolvedVariables, renderStyles)
-    const { classes: secondClasses } = resolveStyles(options, resolvedVariables, renderStyles)
-
-    expect(classes['root']).toBeDefined()
-    expect(renderStyles).toHaveBeenCalledWith({ color: 'red' })
-    expect(secondClasses['root']).toBeDefined()
-    expect(renderStyles).toHaveBeenCalledTimes(2)
-  })
-
-  test('does not cache styles if there are inline overrides', () => {
-    spyOn(componentStyles, 'root').and.callThrough()
-    const propsInlineOverrides: ResolveStylesOptions['props'][] = [
-      { styles: { fontSize: '10px' } },
-      { design: { left: '10px' } },
-      { variables: { backgroundColor: 'yellow' } },
-    ]
-
-    const propsInlineOverridesResolvedStyles: ICSSInJSStyle[] = [
-      { color: 'red', fontSize: '10px' },
-      { color: 'red', left: '10px' },
-      { color: 'red' },
-    ]
-
-    const propsInlineOverridesSize = propsInlineOverrides.length
-
-    _.forEach(propsInlineOverrides, (props, idx) => {
-      const options = resolveStylesOptions({
-        props,
-        performance: { enableStylesCaching: false },
-      })
-
-      const { resolvedStyles } = resolveStyles(options, resolvedVariables)
-      const { resolvedStyles: secondResolvedStyles } = resolveStyles(options, resolvedVariables)
-
-      expect(resolvedStyles.root).toMatchObject(propsInlineOverridesResolvedStyles[idx])
-      expect(secondResolvedStyles.root).toMatchObject(propsInlineOverridesResolvedStyles[idx])
-      resolveStyles(options, resolvedVariables)
-    })
-
-    expect(componentStyles.root).toHaveBeenCalledTimes(propsInlineOverridesSize * 2)
-  })
-
-  test('does not cache classes if there are inline overrides', () => {
-    const renderStyles = jest.fn().mockReturnValue('a')
-    const propsInlineOverrides: ResolveStylesOptions['props'][] = [
-      { styles: { fontSize: '10px' } },
-      { design: { left: '10px' } },
-      { variables: { backgroundColor: 'yellow' } },
-    ]
-
-    const propsInlineOverridesSize = propsInlineOverrides.length
-
-    _.forEach(propsInlineOverrides, props => {
-      const options = resolveStylesOptions({
-        props,
-        performance: { enableStylesCaching: false },
-      })
-      const { classes } = resolveStyles(options, resolvedVariables, renderStyles)
-      const { classes: secondClasses } = resolveStyles(options, resolvedVariables, renderStyles)
-
-      expect(classes['root']).toBeDefined()
-      expect(secondClasses['root']).toBeDefined()
-    })
-
-    expect(renderStyles).toHaveBeenCalledTimes(propsInlineOverridesSize * 2)
-  })
-})
diff --git a/packages/react-bindings/test/styles/resolveStylesAndClasses-test.ts b/packages/react-bindings/test/styles/resolveStylesAndClasses-test.ts
new file mode 100644
index 0000000000..71ea32fdbe
--- /dev/null
+++ b/packages/react-bindings/test/styles/resolveStylesAndClasses-test.ts
@@ -0,0 +1,68 @@
+import {
+  ComponentSlotStylesPrepared,
+  ComponentStyleFunctionParam,
+  emptyTheme,
+  ICSSInJSStyle,
+} from '@fluentui/styles'
+import resolveStylesAndClasses from '../../src/styles/resolveStylesAndClasses'
+
+const styleParam: ComponentStyleFunctionParam = {
+  disableAnimations: false,
+  displayName: 'Test',
+  props: {},
+  rtl: false,
+  theme: emptyTheme,
+  variables: {
+    color: 'red',
+  },
+}
+
+const componentStyles: ComponentSlotStylesPrepared<{}, { color: string }> = {
+  root: ({ variables: v }): ICSSInJSStyle => ({
+    color: v.color,
+  }),
+}
+
+describe('resolveStylesAndClasses', () => {
+  test('resolves styles', () => {
+    const { resolvedStyles } = resolveStylesAndClasses(componentStyles, styleParam, () => '')
+
+    expect(resolvedStyles.root).toMatchObject({ color: 'red' })
+  })
+
+  test('caches resolved styles', () => {
+    spyOn(componentStyles, 'root').and.callThrough()
+    const { resolvedStyles } = resolveStylesAndClasses(componentStyles, styleParam, () => '')
+
+    expect(resolvedStyles.root).toMatchObject({ color: 'red' })
+    expect(componentStyles.root).toHaveBeenCalledTimes(1)
+    expect(resolvedStyles.root).toMatchObject({ color: 'red' })
+    expect(componentStyles.root).toHaveBeenCalledTimes(1)
+  })
+
+  test('does not render classes if not fetched', () => {
+    const renderStyles = jest.fn()
+    const { resolvedStyles } = resolveStylesAndClasses(componentStyles, styleParam, renderStyles)
+
+    expect(resolvedStyles.root).toMatchObject({ color: 'red' })
+    expect(renderStyles).not.toBeCalled()
+  })
+
+  test('renders classes when slot classes getter is accessed', () => {
+    const renderStyles = jest.fn().mockReturnValue('a')
+    const { classes } = resolveStylesAndClasses(componentStyles, styleParam, renderStyles)
+
+    expect(classes.root).toBeDefined()
+    expect(renderStyles).toHaveBeenCalledWith({ color: 'red' })
+  })
+
+  test('caches rendered classes', () => {
+    const renderStyles = jest.fn().mockReturnValue('a')
+    const { classes } = resolveStylesAndClasses(componentStyles, styleParam, renderStyles)
+
+    expect(classes.root).toBeDefined()
+    expect(renderStyles).toHaveBeenCalledWith({ color: 'red' })
+    expect(classes.root).toBeDefined()
+    expect(renderStyles).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/packages/react-bindings/test/styles/resolveVariables-test.ts b/packages/react-bindings/test/styles/resolveVariables-test.ts
deleted file mode 100644
index 433d4bf28d..0000000000
--- a/packages/react-bindings/test/styles/resolveVariables-test.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import resolveVariables from '../../src/styles/resolveVariables'
-import { ComponentVariablesPrepared, emptyTheme, ThemePrepared } from '@fluentui/styles'
-
-const siteVariables = {
-  ...emptyTheme.siteVariables,
-  brand: 'blue',
-}
-const componentVariables: ComponentVariablesPrepared = (
-  siteVariables = emptyTheme.siteVariables,
-) => ({
-  backgroundColor: siteVariables.brand,
-})
-
-const createTheme: (displayName?: string) => ThemePrepared = displayName => ({
-  ...emptyTheme,
-  siteVariables,
-  componentVariables: {
-    [displayName || 'Test']: componentVariables,
-  },
-})
-
-describe('resolveVariables', () => {
-  test('resolved variables', () => {
-    const variables = resolveVariables('Test', createTheme('Test'), {}, false)
-    expect(variables).toMatchObject({ backgroundColor: 'blue' })
-  })
-
-  test('merges theme with input variables', () => {
-    const propsVariables = () => ({
-      color: 'red',
-    })
-    const variables = resolveVariables('Test', createTheme('Test'), propsVariables, false)
-    expect(variables).toMatchObject({ backgroundColor: 'blue', color: 'red' })
-  })
-
-  test("allows input variabes to override theme's", () => {
-    const propsVariables = {
-      backgroundColor: 'green',
-    }
-    const variables = resolveVariables('Test', createTheme('Test'), propsVariables, false)
-    expect(variables).toMatchObject({ backgroundColor: 'green' })
-  })
-
-  test('caches resolved variables', () => {
-    const componentVariablesMock = jest.fn().mockReturnValue({ backgroundColor: 'blue' })
-    const theme = createTheme()
-    theme.componentVariables['Test'] = componentVariablesMock
-
-    const variables = resolveVariables('Test', theme, {}, true)
-    const secondVariables = resolveVariables('Test', theme, {}, true)
-
-    expect(variables).toMatchObject(secondVariables)
-    expect(componentVariablesMock).toHaveBeenCalledTimes(1)
-  })
-
-  test('considers displayName while caching resolved variables', () => {
-    const componentVariablesMock1 = jest.fn().mockReturnValue({ backgroundColor: 'blue' })
-    const componentVariablesMock2 = jest.fn().mockReturnValue({ color: 'red' })
-    const theme = createTheme()
-    theme.componentVariables['Test1'] = componentVariablesMock1
-    theme.componentVariables['Test2'] = componentVariablesMock2
-
-    const variables = resolveVariables('Test1', theme, {}, true)
-    const secondVariables = resolveVariables('Test2', theme, {}, true)
-
-    expect(variables).toMatchObject({ backgroundColor: 'blue' })
-    expect(secondVariables).toMatchObject({ color: 'red' })
-    expect(componentVariablesMock1).toHaveBeenCalledTimes(1)
-    expect(componentVariablesMock2).toHaveBeenCalledTimes(1)
-  })
-
-  test('considers theme while caching resolved variables', () => {
-    const componentVariablesMock = jest.fn().mockReturnValue({ backgroundColor: 'blue' })
-    const theme = createTheme('Test')
-    const secondTheme = createTheme('Test')
-    theme.componentVariables['Test'] = componentVariablesMock
-    secondTheme.componentVariables['Test'] = componentVariablesMock
-
-    const variables = resolveVariables('Test', theme, {}, true)
-    const secondVariables = resolveVariables('Test', secondTheme, {}, true)
-
-    expect(variables).toMatchObject({ backgroundColor: 'blue' })
-    expect(secondVariables).toMatchObject({ backgroundColor: 'blue' })
-    expect(componentVariablesMock).toHaveBeenCalledTimes(2)
-  })
-})
diff --git a/packages/react-component-event-listener/package.json b/packages/react-component-event-listener/package.json
index 8fa76e9cad..a66e0f5e26 100644
--- a/packages/react-component-event-listener/package.json
+++ b/packages/react-component-event-listener/package.json
@@ -1,15 +1,15 @@
 {
   "name": "@fluentui/react-component-event-listener",
   "description": "React components for binding events on the global scope.",
-  "version": "0.44.0",
+  "version": "0.43.0",
   "author": "Oleksandr Fediashov <a@fedyashov.com>",
   "bugs": "https://github.com/microsoft/fluent-ui-react/issues",
   "dependencies": {
-    "@babel/runtime": "^7.7.6",
+    "@babel/runtime": "^7.1.2",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "@fluentui/internal-tooling": "^0.44.0",
+    "@fluentui/internal-tooling": "^0.43.0",
     "@types/simulant": "^0.2.0",
     "lerna-alias": "^3.0.3-0",
     "simulant": "^0.2.2"
diff --git a/packages/react-component-event-listener/src/EventListener.ts b/packages/react-component-event-listener/src/EventListener.ts
index b7a3dcb06e..48b318b092 100644
--- a/packages/react-component-event-listener/src/EventListener.ts
+++ b/packages/react-component-event-listener/src/EventListener.ts
@@ -1,7 +1,7 @@
 import * as PropTypes from 'prop-types'
 
 import useEventListener from './useEventListener'
-import { EventListenerOptions, EventTypes, Target, TargetRef } from './types'
+import { EventListenerOptions, EventTypes, TargetRef } from './types'
 
 function EventListener<T extends EventTypes>(props: EventListenerOptions<T>) {
   useEventListener(props)
@@ -16,10 +16,9 @@ EventListener.propTypes =
     ? {
         capture: PropTypes.bool,
         listener: PropTypes.func.isRequired,
-        target: PropTypes.object as PropTypes.Validator<Target>,
         targetRef: PropTypes.shape({
           current: PropTypes.object,
-        }) as PropTypes.Validator<TargetRef>,
+        }).isRequired as PropTypes.Validator<TargetRef>,
         type: PropTypes.string.isRequired as PropTypes.Validator<EventTypes>,
       }
     : {}
diff --git a/packages/react-component-event-listener/src/types.ts b/packages/react-component-event-listener/src/types.ts
index 57c9a0d433..4155976c11 100644
--- a/packages/react-component-event-listener/src/types.ts
+++ b/packages/react-component-event-listener/src/types.ts
@@ -7,11 +7,8 @@ export interface EventListenerOptions<T extends EventTypes = 'click'> {
   /** A function which receives a notification when an event of the specified type occurs. */
   listener: EventHandler<T>
 
-  /** A target node. Use `target` or `targetRef` prop. */
-  target?: Target
-
   /** A ref object with a target node. */
-  targetRef?: TargetRef
+  targetRef: TargetRef
 
   /** A case-sensitive string representing the event type to listen for. */
   type: T
@@ -20,5 +17,4 @@ export interface EventListenerOptions<T extends EventTypes = 'click'> {
 export type EventHandler<T extends EventTypes> = (e: DocumentEventMap[T]) => void
 export type EventTypes = keyof DocumentEventMap
 
-export type Target = Node | Window
-export type TargetRef = React.RefObject<Target>
+export type TargetRef = React.RefObject<Node | Window>
diff --git a/packages/react-component-event-listener/src/useEventListener.ts b/packages/react-component-event-listener/src/useEventListener.ts
index 125633ee3c..91f7561c58 100644
--- a/packages/react-component-event-listener/src/useEventListener.ts
+++ b/packages/react-component-event-listener/src/useEventListener.ts
@@ -1,14 +1,14 @@
 import * as React from 'react'
 
-import { EventHandler, EventListenerOptions, EventTypes, Target } from './types'
+import { EventHandler, EventListenerOptions, EventTypes, TargetRef } from './types'
 
 const isActionSupported = (
-  element: Target | null | undefined,
+  targetRef: TargetRef,
   method: 'addEventListener' | 'removeEventListener',
-): element is Target => (element ? !!element[method] : false)
+) => targetRef && !!targetRef.current && !!targetRef.current[method]
 
 const useEventListener = <T extends EventTypes>(options: EventListenerOptions<T>): void => {
-  const { capture, listener, type, target, targetRef } = options
+  const { capture, listener, type, targetRef } = options
 
   const latestListener = React.useRef<EventHandler<T>>(listener)
   latestListener.current = listener
@@ -17,44 +17,25 @@ const useEventListener = <T extends EventTypes>(options: EventListenerOptions<T>
     return latestListener.current(event)
   }, [])
 
-  if (process.env.NODE_ENV !== 'production') {
-    React.useEffect(() => {
-      if (typeof target !== 'undefined' && typeof targetRef !== 'undefined') {
-        throw new Error(
-          '`target` and `targetRef` props are mutually exclusive, please use one of them.',
-        )
-      }
-
-      if (typeof target === 'undefined' && typeof targetRef === 'undefined') {
-        throw new Error(
-          "`target` and `targetRef` props are `undefined`, it' required to use one of them.",
-        )
-      }
-    }, [target, targetRef])
-  }
-
   React.useEffect(() => {
-    const element: Target | null | undefined =
-      typeof targetRef === 'undefined' ? target : targetRef.current
-
-    if (isActionSupported(element, 'addEventListener')) {
-      element.addEventListener(type, eventHandler, capture)
+    if (isActionSupported(targetRef, 'addEventListener')) {
+      ;(targetRef.current as NonNullable<Node>).addEventListener(type, eventHandler, capture)
     } else if (process.env.NODE_ENV !== 'production') {
       throw new Error(
-        '@fluentui/react-component-event-listener: Passed `element` is not valid or does not support `addEventListener()` method.',
+        '@fluentui/react-component-event-listener: Passed `targetRef` is not valid or does not support `addEventListener()` method.',
       )
     }
 
     return () => {
-      if (isActionSupported(element, 'removeEventListener')) {
-        element.removeEventListener(type, eventHandler, capture)
+      if (isActionSupported(targetRef, 'removeEventListener')) {
+        ;(targetRef.current as NonNullable<Node>).removeEventListener(type, eventHandler, capture)
       } else if (process.env.NODE_ENV !== 'production') {
         throw new Error(
-          '@fluentui/react-component-event-listener: Passed `element` is not valid or does not support `removeEventListener()` method.',
+          '@fluentui/react-component-event-listener: Passed `targetRef` is not valid or does not support `removeEventListener()` method.',
         )
       }
     }
-  }, [capture, target, targetRef, type])
+  }, [capture, targetRef, type])
 }
 
 export default useEventListener
diff --git a/packages/react-component-event-listener/test/EventListener-test.tsx b/packages/react-component-event-listener/test/EventListener-test.tsx
index 56e46fd886..57280e2a0b 100644
--- a/packages/react-component-event-listener/test/EventListener-test.tsx
+++ b/packages/react-component-event-listener/test/EventListener-test.tsx
@@ -4,23 +4,6 @@ import * as React from 'react'
 // @ts-ignore
 import * as simulant from 'simulant'
 
-class TestBoundary extends React.Component<{ onError: (e: Error) => void }, { hasError: boolean }> {
-  state = { hasError: false }
-
-  componentDidCatch(error: Error) {
-    this.props.onError(error)
-    this.setState({ hasError: true })
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return null
-    }
-
-    return this.props.children
-  }
-}
-
 describe('EventListener', () => {
   describe('listener', () => {
     it('handles events on `target`', () => {
@@ -100,70 +83,4 @@ describe('EventListener', () => {
       expect(listener).toHaveBeenCalledTimes(2)
     })
   })
-
-  describe('target', () => {
-    it('handles events', () => {
-      const listener = jest.fn()
-      mount(<EventListener listener={listener} target={document} type="click" />)
-
-      simulant.fire(document, 'click')
-      expect(listener).toHaveBeenCalledTimes(1)
-    })
-
-    it('throws an error when is used with `targetRef`', () => {
-      jest.spyOn(console, 'error').mockImplementation(() => {})
-      const onError = jest.fn()
-
-      mount(
-        <TestBoundary onError={onError}>
-          <EventListener
-            listener={jest.fn()}
-            target={document}
-            targetRef={documentRef}
-            type="click"
-          />
-        </TestBoundary>,
-      )
-
-      expect(onError).toBeCalledWith(
-        expect.objectContaining({
-          message: '`target` and `targetRef` props are mutually exclusive, please use one of them.',
-        }),
-      )
-
-      // We need to clean up mocks to avoid errors reported by React
-      ;(console.error as any).mockClear()
-    })
-
-    it('throws an error when not defined', () => {
-      jest.spyOn(console, 'error').mockImplementation(() => {})
-      const onError = jest.fn()
-
-      mount(
-        <TestBoundary onError={onError}>
-          <EventListener listener={jest.fn()} type="click" />
-        </TestBoundary>,
-      )
-
-      expect(onError).toBeCalledWith(
-        expect.objectContaining({
-          message:
-            "`target` and `targetRef` props are `undefined`, it' required to use one of them.",
-        }),
-      )
-
-      // We need to clean up mocks to avoid errors reported by React
-      ;(console.error as any).mockClear()
-    })
-  })
-
-  describe('targetRef', () => {
-    it('handles events', () => {
-      const listener = jest.fn()
-      mount(<EventListener listener={listener} targetRef={documentRef} type="click" />)
-
-      simulant.fire(document, 'click')
-      expect(listener).toHaveBeenCalledTimes(1)
-    })
-  })
 })
diff --git a/packages/react-component-nesting-registry/package.json b/packages/react-component-nesting-registry/package.json
index 8fdd73198b..9bf2d562e1 100644
--- a/packages/react-component-nesting-registry/package.json
+++ b/packages/react-component-nesting-registry/package.json
@@ -1,15 +1,15 @@
 {
   "name": "@fluentui/react-component-nesting-registry",
   "description": "Registers a DOM nodes within a context.",
-  "version": "0.44.0",
+  "version": "0.43.0",
   "author": "Oleksandr Fediashov <a@fedyashov.com>",
   "bugs": "https://github.com/microsoft/fluent-ui-react/issues",
   "dependencies": {
-    "@babel/runtime": "^7.7.6",
+    "@babel/runtime": "^7.1.2",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "@fluentui/internal-tooling": "^0.44.0",
+    "@fluentui/internal-tooling": "^0.43.0",
     "lerna-alias": "^3.0.3-0"
   },
   "files": [
diff --git a/packages/react-component-ref/package.json b/packages/react-component-ref/package.json
index adcff3339b..f236c65c19 100644
--- a/packages/react-component-ref/package.json
+++ b/packages/react-component-ref/package.json
@@ -1,16 +1,16 @@
 {
   "name": "@fluentui/react-component-ref",
   "description": "A set of components and utils to deal with React refs.",
-  "version": "0.44.0",
+  "version": "0.43.0",
   "author": "Oleksandr Fediashov <olfedias@microsoft.com>",
   "bugs": "https://github.com/microsoft/fluent-ui-react/issues",
   "dependencies": {
-    "@babel/runtime": "^7.7.6",
+    "@babel/runtime": "^7.1.2",
     "prop-types": "^15.7.2",
     "react-is": "^16.6.3"
   },
   "devDependencies": {
-    "@fluentui/internal-tooling": "^0.44.0",
+    "@fluentui/internal-tooling": "^0.43.0",
     "@types/react-is": "^16.7.1",
     "lerna-alias": "^3.0.3-0"
   },
diff --git a/packages/react-component-ref/src/RefFindNode.tsx b/packages/react-component-ref/src/RefFindNode.tsx
index fb792ebcf7..9ec7a4e4e8 100644
--- a/packages/react-component-ref/src/RefFindNode.tsx
+++ b/packages/react-component-ref/src/RefFindNode.tsx
@@ -40,8 +40,6 @@ export default class RefFindNode extends React.Component<RefProps> {
 
   componentWillUnmount() {
     handleRef(this.props.innerRef, null)
-
-    delete this.prevNode
   }
 
   render() {
diff --git a/packages/react-component-ref/src/index.ts b/packages/react-component-ref/src/index.ts
index 5242fee943..d5724dd37d 100644
--- a/packages/react-component-ref/src/index.ts
+++ b/packages/react-component-ref/src/index.ts
@@ -1,5 +1,6 @@
 export { default as handleRef } from './handleRef'
 export { default as isRefObject } from './isRefObject'
+export { default as toRefObject } from './toRefObject'
 
 export { default as Ref } from './Ref'
 export { default as RefFindNode } from './RefFindNode'
diff --git a/packages/react-component-ref/src/toRefObject.ts b/packages/react-component-ref/src/toRefObject.ts
new file mode 100644
index 0000000000..872620d464
--- /dev/null
+++ b/packages/react-component-ref/src/toRefObject.ts
@@ -0,0 +1,25 @@
+import * as React from 'react'
+
+const nullRefObject: React.RefObject<null> = { current: null }
+
+// A map of created ref objects to provide memoization.
+const refObjects = new WeakMap<Node | Window, React.RefObject<Node | Window>>()
+
+/** Creates a React ref object from existing DOM node. */
+const toRefObject = <T extends Node | Window>(node: T): React.RefObject<T> => {
+  // A "null" is not valid key for a WeakMap
+  if (node === null) {
+    return nullRefObject as any
+  }
+
+  if (refObjects.has(node)) {
+    return refObjects.get(node) as React.RefObject<T>
+  }
+
+  const refObject: React.RefObject<T> = { current: node }
+  refObjects.set(node, refObject)
+
+  return refObject
+}
+
+export default toRefObject
diff --git a/packages/react-component-ref/test/toRefObject-test.ts b/packages/react-component-ref/test/toRefObject-test.ts
new file mode 100644
index 0000000000..d103efe878
--- /dev/null
+++ b/packages/react-component-ref/test/toRefObject-test.ts
@@ -0,0 +1,19 @@
+import { toRefObject } from '@fluentui/react-component-ref'
+
+describe('toRefObject', () => {
+  it('creates an ref object from an input', () => {
+    const node = document.createElement('div')
+    expect(toRefObject(node)).toHaveProperty('current', node)
+  })
+
+  it('handles "null" as input', () => {
+    expect(toRefObject(null as any)).toHaveProperty('current', null)
+  })
+
+  it('returned object is memoized', () => {
+    const node = document.createElement('div')
+    const refObject = toRefObject(node)
+
+    expect(toRefObject(node)).toBe(refObject)
+  })
+})
diff --git a/packages/react-context-selector/.gulp.js b/packages/react-context-selector/.gulp.js
deleted file mode 100644
index 87c6422c6b..0000000000
--- a/packages/react-context-selector/.gulp.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('../../.gulp')
diff --git a/packages/react-context-selector/README.md b/packages/react-context-selector/README.md
deleted file mode 100644
index b7c8eac4fc..0000000000
--- a/packages/react-context-selector/README.md
+++ /dev/null
@@ -1,41 +0,0 @@
-# `@fluentui/react-context-selector`
-
-React `useContextSelector()` and `useContextSelectors()` hooks in userland.
-
-## Introduction
-
-[React Context](https://reactjs.org/docs/context.html) and [`useContext()`](https://reactjs.org/docs/hooks-reference.html#usecontext) is often used to avoid prop drilling,
-however it's known that there's a performance issue. When a context value is changed, all components that are subscribed with `useContext()` will re-render.
-
-[useContextSelector](https://github.com/reactjs/rfcs/pull/119) is recently proposed. While waiting for the process, this library provides the API in userland.
-
-# Installation
-
-**NPM**
-
-```bash
-npm install --save @fluentui/react-context-selector
-```
-
-**Yarn**
-
-```bash
-yarn add @fluentui/react-context-selector
-```
-
-## Technical memo
-
-React context by nature triggers propagation of component re-rendering if a value is changed. To avoid this, this library uses undocumented feature of `calculateChangedBits`. It then uses a subscription model to force update when a component needs to re-render.
-
-## Limitations
-
-- In order to stop propagation, `children` of a context provider has to be either created outside of the provider or memoized with `React.memo`.
-- `<Consumer />` components are not supported.
-- The [stale props](https://react-redux.js.org/api/hooks#stale-props-and-zombie-children) issue can't be solved in userland. (workaround with try-catch)
-
-## Related projects
-
-The implementation is heavily inspired by:
-
-- [use-context-selector](https://github.com/dai-shi/use-context-selector)
-- [react-tracked](https://github.com/dai-shi/react-tracked)
diff --git a/packages/react-context-selector/babel.config.js b/packages/react-context-selector/babel.config.js
deleted file mode 100644
index a1c212ad45..0000000000
--- a/packages/react-context-selector/babel.config.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = api => require('@fluentui/internal-tooling/babel')(api)
diff --git a/packages/react-context-selector/gulpfile.ts b/packages/react-context-selector/gulpfile.ts
deleted file mode 100644
index de10829664..0000000000
--- a/packages/react-context-selector/gulpfile.ts
+++ /dev/null
@@ -1 +0,0 @@
-import '../../gulpfile'
diff --git a/packages/react-context-selector/jest.config.js b/packages/react-context-selector/jest.config.js
deleted file mode 100644
index 8c78ce7fdf..0000000000
--- a/packages/react-context-selector/jest.config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
-  ...require('@fluentui/internal-tooling/jest'),
-  name: 'react-context-selector',
-  moduleNameMapper: require('lerna-alias').jest(),
-}
diff --git a/packages/react-context-selector/package.json b/packages/react-context-selector/package.json
deleted file mode 100644
index 117605bb4a..0000000000
--- a/packages/react-context-selector/package.json
+++ /dev/null
@@ -1,40 +0,0 @@
-{
-  "name": "@fluentui/react-context-selector",
-  "description": "React useContextSelector & useContextSelectors hooks in userland",
-  "version": "0.44.0",
-  "author": "Oleksandr Fediashov <a@fedyashov.com>",
-  "bugs": "https://github.com/microsoft/fluent-ui-react/issues",
-  "dependencies": {
-    "@babel/runtime": "^7.7.6"
-  },
-  "devDependencies": {
-    "@fluentui/internal-tooling": "^0.44.0",
-    "@types/react-is": "^16.7.1",
-    "lerna-alias": "^3.0.3-0",
-    "react": "^16.8.0",
-    "react-is": "^16.6.3"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0"
-  },
-  "files": [
-    "dist"
-  ],
-  "homepage": "https://github.com/microsoft/fluent-ui-react/tree/master/packages/react-context-selector",
-  "jsnext:main": "dist/es/index.js",
-  "license": "MIT",
-  "main": "dist/commonjs/index.js",
-  "module": "dist/es/index.js",
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": "microsoft/fluent-ui-react.git",
-  "scripts": {
-    "build": "gulp bundle:package:no-umd",
-    "clean": "gulp bundle:package:clean",
-    "test": "gulp test",
-    "test:watch": "gulp test:watch"
-  },
-  "sideEffects": false,
-  "types": "dist/es/index.d.ts"
-}
diff --git a/packages/react-context-selector/src/createContext.ts b/packages/react-context-selector/src/createContext.ts
deleted file mode 100644
index 4c1cd28296..0000000000
--- a/packages/react-context-selector/src/createContext.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import * as React from 'react'
-import { Context, ContextListener, ContextValue, CreateContextOptions } from './types'
-
-// Stops React Context propagation
-// https://github.com/facebook/react/blob/95bd7aad7daa80c381faa3215c80b0906ab5ead5/packages/react-reconciler/src/ReactFiberBeginWork.js#L2656
-const calculateChangedBits = () => 0
-
-const createProvider = <Value>(Original: React.Provider<ContextValue<Value>>) => {
-  const Provider: React.FC<React.ProviderProps<Value>> = props => {
-    const listeners = React.useRef<ContextListener<Value>[]>([])
-
-    // We call listeners in render intentionally. Listeners are not technically pure, but
-    // otherwise we can't get benefits from concurrent mode.
-    //
-    // We make sure to work with double or more invocation of listeners.
-    listeners.current.forEach(listener => listener(props.value))
-
-    // Disables updates propogation for React Context as `value` is always shallow equal
-    const subscribe = React.useCallback((listener: ContextListener<Value>) => {
-      listeners.current.push(listener)
-
-      const unsubscribe = () => {
-        const index = listeners.current.indexOf(listener)
-        listeners.current.splice(index, 1)
-      }
-
-      return unsubscribe
-    }, [])
-
-    return React.createElement(
-      Original,
-      { value: { subscribe, value: props.value } },
-      props.children,
-    )
-  }
-
-  /* istanbul ignore else */
-  if (process.env.NODE_ENV !== 'production') {
-    Provider.displayName = 'ContextSelector.Provider'
-  }
-
-  return Provider
-}
-
-const createContext = <Value>(
-  defaultValue: Value,
-  options: CreateContextOptions = {},
-): Context<Value> => {
-  const { strict = true } = options
-
-  const context = React.createContext<ContextValue<Value>>(
-    {
-      get subscribe() {
-        if (strict) {
-          /* istanbul ignore next */
-          throw new Error(
-            process.env.NODE_ENV === 'production'
-              ? ''
-              : `Please use <Provider /> component from "@fluentui/react-context-selector"`,
-          )
-        }
-
-        /* istanbul ignore next */
-        return () => () => {}
-      },
-      value: defaultValue,
-    },
-    calculateChangedBits,
-  )
-  context.Provider = createProvider<Value>(context.Provider) as any
-
-  // We don't support Consumer API
-  delete context.Consumer
-
-  return (context as unknown) as Context<Value>
-}
-
-export default createContext
diff --git a/packages/react-context-selector/src/index.ts b/packages/react-context-selector/src/index.ts
deleted file mode 100644
index 9f8f0f3613..0000000000
--- a/packages/react-context-selector/src/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as createContext } from './createContext'
-export { default as useContextSelector } from './useContextSelector'
-export { default as useContextSelectors } from './useContextSelectors'
-export * from './types'
diff --git a/packages/react-context-selector/src/types.ts b/packages/react-context-selector/src/types.ts
deleted file mode 100644
index 1847125baa..0000000000
--- a/packages/react-context-selector/src/types.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from 'react'
-
-export type Context<Value> = React.Context<Value> & {
-  Provider: React.FC<React.ProviderProps<Value>>
-  Consumer: never
-}
-
-export type CreateContextOptions = {
-  strict?: boolean
-}
-
-export type ContextListener<Value> = (value: Value) => void
-
-export type ContextSelector<Value, SelectedValue> = (value: Value) => SelectedValue
-
-export type ContextValue<Value> = {
-  subscribe: (listener: ContextListener<Value>) => any
-  value: Value
-}
diff --git a/packages/react-context-selector/src/useContextSelector.ts b/packages/react-context-selector/src/useContextSelector.ts
deleted file mode 100644
index b2a651cdab..0000000000
--- a/packages/react-context-selector/src/useContextSelector.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import * as React from 'react'
-
-import { Context, ContextSelector, ContextValue } from './types'
-import { useIsomorphicLayoutEffect } from './utils'
-
-type UseSelectorRef<Value, SelectedValue> = {
-  selector: ContextSelector<Value, SelectedValue>
-  selected: SelectedValue
-  value: Value
-}
-
-/**
- * This hook returns context selected value by selector.
- * It will only accept context created by `createContext`.
- * It will trigger re-render if only the selected value is referencially changed.
- */
-const useContextSelector = <Value, SelectedValue>(
-  context: Context<Value>,
-  selector: ContextSelector<Value, SelectedValue>,
-): SelectedValue => {
-  const { subscribe, value } = React.useContext(
-    (context as unknown) as Context<ContextValue<Value>>,
-  )
-  const [, forceUpdate] = React.useReducer((c: number) => c + 1, 0) as [never, () => void]
-
-  const ref = React.useRef<UseSelectorRef<Value, SelectedValue>>()
-  const selected = selector(value)
-
-  useIsomorphicLayoutEffect(() => {
-    ref.current = {
-      selector,
-      value,
-      selected,
-    }
-  })
-  useIsomorphicLayoutEffect(() => {
-    const callback = (nextState: Value) => {
-      try {
-        const reference: UseSelectorRef<Value, SelectedValue> = ref.current as NonNullable<
-          UseSelectorRef<Value, SelectedValue>
-        >
-
-        if (
-          reference.value === nextState ||
-          Object.is(reference.selected, reference.selector(nextState))
-        ) {
-          // not changed
-          return
-        }
-      } catch (e) {
-        // ignored (stale props or some other reason)
-      }
-
-      forceUpdate()
-    }
-
-    return subscribe(callback)
-  }, [subscribe])
-
-  return selected
-}
-
-export default useContextSelector
diff --git a/packages/react-context-selector/src/useContextSelectors.ts b/packages/react-context-selector/src/useContextSelectors.ts
deleted file mode 100644
index 0224726f63..0000000000
--- a/packages/react-context-selector/src/useContextSelectors.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import * as React from 'react'
-
-import { Context, ContextSelector, ContextValue } from './types'
-import { useIsomorphicLayoutEffect } from './utils'
-
-type UseSelectorsRef<
-  Value,
-  Properties extends string,
-  Selectors extends Record<Properties, ContextSelector<Value, SelectedValue>>,
-  SelectedValue extends any
-> = {
-  selectors: Selectors
-  value: Value
-  selected: Record<Properties, SelectedValue>
-}
-
-/**
- * This hook returns context selected value by selectors.
- * It will only accept context created by `createContext`.
- * It will trigger re-render if only the selected value is referencially changed.
- */
-const useContextSelectors = <
-  Value,
-  Properties extends string,
-  Selectors extends Record<Properties, ContextSelector<Value, SelectedValue>>,
-  SelectedValue extends any
->(
-  context: Context<Value>,
-  selectors: Selectors,
-): Record<Properties, SelectedValue> => {
-  const { subscribe, value } = React.useContext(
-    (context as unknown) as Context<ContextValue<Value>>,
-  )
-  const [, forceUpdate] = React.useReducer((c: number) => c + 1, 0) as [never, () => void]
-
-  const ref = React.useRef<UseSelectorsRef<Value, Properties, Selectors, SelectedValue>>()
-  const selected = {} as Record<Properties, SelectedValue>
-
-  Object.keys(selectors).forEach((key: Properties) => {
-    selected[key] = selectors[key](value)
-  })
-
-  useIsomorphicLayoutEffect(() => {
-    ref.current = {
-      selectors,
-      value,
-      selected,
-    }
-  })
-  useIsomorphicLayoutEffect(() => {
-    const callback = (nextState: Value) => {
-      try {
-        const reference: UseSelectorsRef<
-          Value,
-          Properties,
-          Selectors,
-          SelectedValue
-        > = ref.current as NonNullable<UseSelectorsRef<Value, Properties, Selectors, SelectedValue>>
-
-        if (
-          reference.value === nextState ||
-          Object.keys(reference.selected).every((key: Properties) =>
-            Object.is(reference.selected[key], reference.selectors[key](nextState)),
-          )
-        ) {
-          // not changed
-          return
-        }
-      } catch (e) {
-        // ignored (stale props or some other reason)
-      }
-
-      forceUpdate()
-    }
-
-    return subscribe(callback)
-  }, [subscribe])
-
-  return selected
-}
-
-export default useContextSelectors
diff --git a/packages/react-context-selector/src/utils.ts b/packages/react-context-selector/src/utils.ts
deleted file mode 100644
index 7afd4eabda..0000000000
--- a/packages/react-context-selector/src/utils.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import * as React from 'react'
-
-// useLayoutEffect that does not show warning when server-side rendering, see Alex Reardon's article for more info
-// @see https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
-export const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' ? React.useLayoutEffect : /* istanbul ignore next */ React.useEffect
diff --git a/packages/react-context-selector/test/createContext-test.tsx b/packages/react-context-selector/test/createContext-test.tsx
deleted file mode 100644
index da488cf169..0000000000
--- a/packages/react-context-selector/test/createContext-test.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { createContext, useContextSelector } from '@fluentui/react-context-selector'
-import { mount } from 'enzyme'
-import * as React from 'react'
-import * as ReactIs from 'react-is'
-
-class TestBoundary extends React.Component<{ onError: (e: Error) => void }, { hasError: boolean }> {
-  state = { hasError: false }
-
-  componentDidCatch(error: Error) {
-    this.props.onError(error)
-    this.setState({ hasError: true })
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return null
-    }
-
-    return this.props.children
-  }
-}
-
-describe('createContext', () => {
-  it('creates a Provider component', () => {
-    const Context = createContext(null)
-    expect(ReactIs.isValidElementType(Context.Provider)).toBeTruthy()
-  })
-
-  describe('options', () => {
-    it('throws on usage outside Provider by default', () => {
-      jest.spyOn(console, 'error').mockImplementation(() => {})
-
-      const TestContext = createContext<string>('')
-      const TestComponent: React.FC = () => {
-        const value = useContextSelector(TestContext, v => v)
-        return <div data-value={value} />
-      }
-
-      const onError = jest.fn()
-      mount(
-        <TestBoundary onError={onError}>
-          <TestComponent />
-        </TestBoundary>,
-      )
-
-      expect(onError).toBeCalledWith(
-        expect.objectContaining({
-          message: 'Please use <Provider /> component from "@fluentui/react-context-selector"',
-        }),
-      )
-
-      // We need to clean up mocks to avoid errors reported by React
-      ;(console.error as any).mockClear()
-    })
-
-    it('do not throw usage outside Provider when `strict` is `false`', () => {
-      const TestContext = createContext<string>('', { strict: false })
-      const TestComponent: React.FC = () => {
-        const value = useContextSelector(TestContext, v => v)
-        return <div data-value={value} />
-      }
-
-      const onError = jest.fn()
-      mount(
-        <TestBoundary onError={onError}>
-          <TestComponent />
-        </TestBoundary>,
-      )
-
-      expect(onError).not.toBeCalled()
-    })
-  })
-})
diff --git a/packages/react-context-selector/test/useContextSelector-test.tsx b/packages/react-context-selector/test/useContextSelector-test.tsx
deleted file mode 100644
index 4f303fc9a4..0000000000
--- a/packages/react-context-selector/test/useContextSelector-test.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { createContext, useContextSelector } from '@fluentui/react-context-selector'
-import { mount } from 'enzyme'
-import * as React from 'react'
-
-const TestContext = createContext<{ index: number }>({ index: -1 })
-
-const TestComponent: React.FC<{ index: number; onUpdate?: () => void }> = props => {
-  const active = useContextSelector(TestContext, v => v.index === props.index)
-
-  React.useEffect(() => {
-    props.onUpdate && props.onUpdate()
-  })
-
-  return <div data-active={active} />
-}
-
-describe('useContextSelector', () => {
-  it('propogates values via Context', () => {
-    const wrapper = mount(
-      <TestContext.Provider value={{ index: 1 }}>
-        <TestComponent index={1} />
-      </TestContext.Provider>,
-    )
-
-    expect(wrapper.find('div').prop('data-active')).toBe(true)
-  })
-
-  it('updates only on selector match', () => {
-    const onUpdate = jest.fn()
-    const wrapper = mount(
-      <TestContext.Provider value={{ index: 0 }}>
-        <TestComponent index={1} onUpdate={onUpdate} />
-      </TestContext.Provider>,
-    )
-
-    expect(wrapper.find('div').prop('data-active')).toBe(false)
-    expect(onUpdate).toBeCalledTimes(1)
-
-    // No match, (v.index: 2, p.index: 1)
-    wrapper.setProps({ value: { index: 2 } })
-    expect(wrapper.find('div').prop('data-active')).toBe(false)
-    expect(onUpdate).toBeCalledTimes(1)
-
-    // Match => update, (v.index: 1, p.index: 1)
-    wrapper.setProps({ value: { index: 1 } })
-    expect(wrapper.find('div').prop('data-active')).toBe(true)
-    expect(onUpdate).toBeCalledTimes(2)
-
-    // Match previous => no update, (v.index: 1, p.index: 1)
-    wrapper.setProps({ value: { index: 1 } })
-    expect(wrapper.find('div').prop('data-active')).toBe(true)
-    expect(onUpdate).toBeCalledTimes(2)
-  })
-
-  it('updates are propogated inside React.memo()', () => {
-    // https://reactjs.org/docs/react-api.html#reactmemo
-    // Will never pass updates
-    const MemoComponent = React.memo(TestComponent, () => true)
-
-    const onUpdate = jest.fn()
-    const wrapper = mount(
-      <TestContext.Provider value={{ index: 0 }}>
-        <MemoComponent index={1} onUpdate={onUpdate} />
-      </TestContext.Provider>,
-    )
-
-    wrapper.setProps({ value: { index: 1 } })
-    expect(wrapper.find('div').prop('data-active')).toBe(true)
-    expect(onUpdate).toBeCalledTimes(2)
-  })
-
-  it('handles unsubscribe', () => {
-    const MemoComponent = React.memo(TestComponent)
-    const onUpdate = jest.fn()
-
-    const wrapper = mount(
-      <TestContext.Provider value={{ index: 0 }}>
-        <MemoComponent index={1} />
-        <MemoComponent index={2} key="2" onUpdate={onUpdate} />
-      </TestContext.Provider>,
-    )
-
-    wrapper.setProps({
-      children: [null, <MemoComponent index={2} key={2} onUpdate={onUpdate} />],
-    })
-    expect(onUpdate).toBeCalledTimes(1)
-  })
-})
diff --git a/packages/react-context-selector/test/useContextSelectors-test.tsx b/packages/react-context-selector/test/useContextSelectors-test.tsx
deleted file mode 100644
index 0cfd991d59..0000000000
--- a/packages/react-context-selector/test/useContextSelectors-test.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { createContext, useContextSelectors } from '@fluentui/react-context-selector'
-import { mount } from 'enzyme'
-import * as React from 'react'
-
-const TestContext = createContext<{ index: number; value: string }>({
-  index: -1,
-  value: '',
-})
-
-const TestComponent: React.FC<{ index: number; onUpdate?: () => void }> = props => {
-  const context = useContextSelectors(TestContext, {
-    active: v => v.index === props.index,
-    value: v => v.value,
-  })
-
-  React.useEffect(() => {
-    props.onUpdate && props.onUpdate()
-  })
-
-  return <div data-active={context.active} data-value={context.value} />
-}
-
-describe('useContextSelectors', () => {
-  it('propogates values via Context', () => {
-    const wrapper = mount(
-      <TestContext.Provider value={{ index: 1, value: 'foo' }}>
-        <TestComponent index={1} />
-      </TestContext.Provider>,
-    )
-
-    expect(wrapper.find('div').prop('data-active')).toBe(true)
-    expect(wrapper.find('div').prop('data-value')).toBe('foo')
-  })
-
-  it('updates only on selector match', () => {
-    const onUpdate = jest.fn()
-    const wrapper = mount(
-      <TestContext.Provider value={{ index: -1, value: 'foo' }}>
-        <TestComponent index={1} onUpdate={onUpdate} />
-      </TestContext.Provider>,
-    )
-
-    expect(wrapper.find('div').prop('data-active')).toBe(false)
-    expect(wrapper.find('div').prop('data-value')).toBe('foo')
-    expect(onUpdate).toBeCalledTimes(1)
-
-    // No match, (v.index: 2, p.index: 1)
-    wrapper.setProps({ value: { index: 2, value: 'foo' } })
-    expect(wrapper.find('div').prop('data-active')).toBe(false)
-    expect(wrapper.find('div').prop('data-value')).toBe('foo')
-    expect(onUpdate).toBeCalledTimes(1)
-
-    // Match => update, (v.index: 1, p.index: 1)
-    wrapper.setProps({ value: { index: 1, value: 'foo' } })
-    expect(wrapper.find('div').prop('data-active')).toBe(true)
-    expect(wrapper.find('div').prop('data-value')).toBe('foo')
-    expect(onUpdate).toBeCalledTimes(2)
-
-    // Match previous => no update, (v.index: 1, p.index: 1)
-    wrapper.setProps({ value: { index: 1, value: 'foo' } })
-    expect(wrapper.find('div').prop('data-active')).toBe(true)
-    expect(wrapper.find('div').prop('data-value')).toBe('foo')
-    expect(onUpdate).toBeCalledTimes(2)
-
-    // Match => update, (v.value: 'bar')
-    wrapper.setProps({ value: { index: 1, value: 'bar' } })
-    expect(wrapper.find('div').prop('data-value')).toBe('bar')
-    expect(onUpdate).toBeCalledTimes(3)
-  })
-
-  it('updates are propogated inside React.memo()', () => {
-    // https://reactjs.org/docs/react-api.html#reactmemo
-    // Will never pass updates
-    const MemoComponent = React.memo(TestComponent, () => true)
-
-    const onUpdate = jest.fn()
-    const wrapper = mount(
-      <TestContext.Provider value={{ index: 0, value: 'foo' }}>
-        <MemoComponent index={1} onUpdate={onUpdate} />
-      </TestContext.Provider>,
-    )
-
-    wrapper.setProps({ value: { index: 1, value: 'foo' } })
-    expect(wrapper.find('div').prop('data-active')).toBe(true)
-    expect(onUpdate).toBeCalledTimes(2)
-  })
-})
diff --git a/packages/react-context-selector/tsconfig.json b/packages/react-context-selector/tsconfig.json
deleted file mode 100644
index 6908043d43..0000000000
--- a/packages/react-context-selector/tsconfig.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "extends": "../../build/tsconfig.common",
-  "compilerOptions": {
-    "composite": true,
-    "outDir": "dist/dts",
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noImplicitAny": true,
-    "noUnusedParameters": true,
-    "strictNullChecks": true
-  },
-  "include": ["src", "test"],
-  "references": []
-}
diff --git a/packages/react-proptypes/package.json b/packages/react-proptypes/package.json
index 268201b061..b2c198db68 100644
--- a/packages/react-proptypes/package.json
+++ b/packages/react-proptypes/package.json
@@ -1,16 +1,16 @@
 {
   "name": "@fluentui/react-proptypes",
   "description": "Set of custom reusable PropTypes for React components, some of them are specific for Fluent UI.",
-  "version": "0.44.0",
+  "version": "0.43.0",
   "author": "Oleksandr Fediashov <olfedias@microsoft.com>",
   "bugs": "https://github.com/microsoft/fluent-ui-react/issues",
   "dependencies": {
-    "@babel/runtime": "^7.7.6",
+    "@babel/runtime": "^7.1.2",
     "lodash": "^4.17.15",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "@fluentui/internal-tooling": "^0.44.0",
+    "@fluentui/internal-tooling": "^0.43.0",
     "lerna-alias": "^3.0.3-0"
   },
   "files": [
diff --git a/packages/react-proptypes/src/index.ts b/packages/react-proptypes/src/index.ts
index 90f5a41c8e..714b9df0e4 100644
--- a/packages/react-proptypes/src/index.ts
+++ b/packages/react-proptypes/src/index.ts
@@ -13,8 +13,6 @@ const typeOf = (x: any) => Object.prototype.toString.call(x)
 export const domNode = (props: ObjectOf<any>, propName: string) => {
   // skip if prop is undefined
   if (props[propName] === undefined) return undefined
-  // skip if prop is null
-  if (props[propName] === null) return null
   // skip if prop is valid
   if (props[propName] instanceof Element) return undefined
 
@@ -484,12 +482,7 @@ export const size = PropTypes.oneOf<
   'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest'
 >(['smallest', 'smaller', 'small', 'medium', 'large', 'larger', 'largest'])
 
-export const align = PropTypes.oneOf<'start' | 'end' | 'center' | 'justify'>([
-  'start',
-  'end',
-  'center',
-  'justify',
-])
+export const align = PropTypes.oneOf(['start', 'end', 'center', 'justify'])
 
 export const animation = PropTypes.oneOfType([
   // Validator is broken in the latest @react/types
@@ -538,7 +531,4 @@ export const design = PropTypes.shape({
 })
 
 /** A checker that matches the React.Ref type. */
-export const ref = PropTypes.oneOfType([
-  PropTypes.func,
-  PropTypes.object as PropTypes.Validator<{ current: any }>,
-])
+export const ref = PropTypes.oneOfType([PropTypes.func, PropTypes.object])
diff --git a/packages/react-theming/package.json b/packages/react-theming/package.json
index ad580fb563..e54f81e390 100644
--- a/packages/react-theming/package.json
+++ b/packages/react-theming/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-theming",
-  "version": "0.44.0",
+  "version": "0.43.0",
   "description": "> TODO: description",
   "homepage": "https://github.com/microsoft/fluent-ui#readme",
   "bugs": {
@@ -37,7 +37,7 @@
     "jss-preset-default": "^10.0.0"
   },
   "devDependencies": {
-    "@fluentui/scripts": "^0.44.0",
+    "@fluentui/scripts": "^0.43.0",
     "@types/jss": "^9.5.8",
     "@types/react": "^16.8.10",
     "react": "^16.8.0"
diff --git a/packages/react/package.json b/packages/react/package.json
index c17e5dc8ec..09f1eacbd0 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,19 +1,18 @@
 {
   "name": "@fluentui/react",
   "description": "A themable React component library.",
-  "version": "0.44.0",
+  "version": "0.43.0",
   "author": "Levi Thomason <me@levithomason.com>",
   "bugs": "https://github.com/microsoft/fluent-ui-react/issues",
   "dependencies": {
-    "@babel/runtime": "^7.7.6",
-    "@fluentui/accessibility": "^0.44.0",
-    "@fluentui/react-bindings": "^0.44.0",
-    "@fluentui/react-component-event-listener": "^0.44.0",
-    "@fluentui/react-component-nesting-registry": "^0.44.0",
-    "@fluentui/react-context-selector": "^0.44.0",
-    "@fluentui/react-component-ref": "^0.44.0",
-    "@fluentui/react-proptypes": "^0.44.0",
-    "@fluentui/styles": "^0.44.0",
+    "@babel/runtime": "^7.1.2",
+    "@fluentui/accessibility": "^0.43.0",
+    "@fluentui/styles": "^0.43.0",
+    "@fluentui/react-bindings": "^0.43.0",
+    "@fluentui/react-component-event-listener": "^0.43.0",
+    "@fluentui/react-component-nesting-registry": "^0.43.0",
+    "@fluentui/react-component-ref": "^0.43.0",
+    "@fluentui/react-proptypes": "^0.43.0",
     "classnames": "^2.2.6",
     "downshift": "3.2.14",
     "fast-memoize": "^2.5.1",
@@ -31,7 +30,7 @@
     "react-transition-group": "^4.3.0"
   },
   "devDependencies": {
-    "@fluentui/internal-tooling": "^0.44.0",
+    "@fluentui/internal-tooling": "^0.43.0",
     "@types/classnames": "^2.2.9",
     "@types/faker": "^4.1.3",
     "@types/simulant": "^0.2.0",
diff --git a/packages/react/src/components/Accordion/AccordionTitle.tsx b/packages/react/src/components/Accordion/AccordionTitle.tsx
index b3d7f047ab..c02647ca95 100644
--- a/packages/react/src/components/Accordion/AccordionTitle.tsx
+++ b/packages/react/src/components/Accordion/AccordionTitle.tsx
@@ -38,9 +38,6 @@ export interface AccordionTitleProps
   /** If at least one panel needs to stay active and this title does not correspond to the last active one. */
   canBeCollapsed?: boolean
 
-  /** An accordion title can show it is currently unable to be interacted with. */
-  disabled?: boolean
-
   /** AccordionTitle index inside Accordion. */
   index?: number
 
@@ -81,7 +78,6 @@ class AccordionTitle extends UIComponent<WithAsProp<AccordionTitleProps>, any> {
     active: PropTypes.bool,
     contentRef: customPropTypes.ref,
     canBeCollapsed: PropTypes.bool,
-    disabled: PropTypes.bool,
     index: PropTypes.number,
     onClick: PropTypes.func,
     indicator: customPropTypes.itemShorthand,
@@ -101,9 +97,7 @@ class AccordionTitle extends UIComponent<WithAsProp<AccordionTitleProps>, any> {
   }
 
   handleClick = (e: React.SyntheticEvent) => {
-    if (!this.props.disabled) {
-      _.invoke(this.props, 'onClick', e, this.props)
-    }
+    _.invoke(this.props, 'onClick', e, this.props)
   }
 
   handleFocus = (e: React.SyntheticEvent) => {
diff --git a/packages/react/src/components/Animation/Animation.tsx b/packages/react/src/components/Animation/Animation.tsx
index 1457facb8b..cc586f87d5 100644
--- a/packages/react/src/components/Animation/Animation.tsx
+++ b/packages/react/src/components/Animation/Animation.tsx
@@ -1,35 +1,26 @@
-import {
-  ComponentAnimationProp,
-  getUnhandledProps,
-  unstable_createAnimationStyles as createAnimationStyles,
-  unstable_calculateAnimationTimeout as calculateAnimationTimeout,
-  unstable_getStyles as getStyles,
-  useTelemetry,
-} from '@fluentui/react-bindings'
-import cx from 'classnames'
-import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
-// @ts-ignore
-import { ThemeContext } from 'react-fela'
+import cx from 'classnames'
+import * as _ from 'lodash'
 import { Transition } from 'react-transition-group'
 
 import {
+  UIComponent,
   childrenExist,
   StyledComponentProps,
   commonPropTypes,
-  ChildrenComponentProps,
+  ShorthandFactory,
 } from '../../utils'
-import { ComponentEventHandler, ProviderContextPrepared } from '../../types'
+import { ComponentEventHandler } from '../../types'
 
 export type AnimationChildrenProp = (props: { classes: string }) => React.ReactNode
 
-export interface AnimationProps
-  extends StyledComponentProps,
-    ChildrenComponentProps<AnimationChildrenProp | React.ReactChild> {
+export interface AnimationProps extends StyledComponentProps {
   /** Additional CSS class name(s) to apply.  */
   className?: string
 
+  children: AnimationChildrenProp | React.ReactChild
+
   /** The name for the animation that should be applied, defined in the theme. */
   name?: string
 
@@ -148,162 +139,92 @@ export interface AnimationProps
 /**
  * An Animation provides animation effects to rendered elements.
  */
-const Animation: React.FC<AnimationProps> & {
-  className: string
-  handledProps: (keyof AnimationProps)[]
-} = props => {
-  const context: ProviderContextPrepared = React.useContext(ThemeContext)
-  const { setStart, setEnd } = useTelemetry(Animation.displayName, context.telemetry)
-  setStart()
-
-  const {
-    appear,
-    children,
-    className,
-    delay,
-    direction,
-    duration,
-    fillMode,
-    iterationCount,
-    keyframeParams,
-    mountOnEnter,
-    name,
-    playState,
-    timeout,
-    timingFunction,
-    visible,
-    unmountOnExit,
-  } = props
-
-  const handleAnimationEvent = (
-    event: 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited',
-  ) => () => {
-    _.invoke(props, event, null, props)
+class Animation extends UIComponent<AnimationProps, any> {
+  static create: ShorthandFactory<AnimationProps>
+
+  static className = 'ui-animation'
+
+  static displayName = 'Animation'
+
+  static propTypes = {
+    ...commonPropTypes.createCommon({
+      accessibility: false,
+      as: false,
+      content: false,
+      children: false,
+    }),
+    children: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+    name: PropTypes.string,
+    delay: PropTypes.string,
+    direction: PropTypes.string,
+    duration: PropTypes.string,
+    fillMode: PropTypes.string,
+    iterationCount: PropTypes.string,
+    keyframeParams: PropTypes.object,
+    playState: PropTypes.string,
+    timingFunction: PropTypes.string,
+    visible: PropTypes.bool,
+    appear: PropTypes.bool,
+    mountOnEnter: PropTypes.bool,
+    unmountOnExit: PropTypes.bool,
+    timeout: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.shape({
+        appear: PropTypes.number,
+        enter: PropTypes.number,
+        exit: PropTypes.number,
+      }),
+    ]),
+    onEnter: PropTypes.func,
+    onEntering: PropTypes.func,
+    onEntered: PropTypes.func,
+    onExit: PropTypes.func,
+    onExiting: PropTypes.func,
+    onExited: PropTypes.func,
   }
 
-  const { classes, styles: animationStyles } = React.useMemo(() => {
-    const animation: ComponentAnimationProp = {
-      name,
-      keyframeParams,
-      duration,
-      delay,
-      iterationCount,
-      direction,
-      fillMode,
-      playState,
-      timingFunction,
-    }
-
-    return getStyles({
-      className: Animation.className,
-      displayName: Animation.displayName,
-      props: {
-        className,
-        styles: createAnimationStyles(animation, context.theme),
-      },
-
-      disableAnimations: context.disableAnimations,
-      renderer: context.renderer,
-      rtl: context.rtl,
-      performance: {},
-      saveDebug: _.noop,
-      theme: context.theme,
-    })
-  }, [
-    className,
-    context,
-    name,
-    delay,
-    direction,
-    duration,
-    fillMode,
-    iterationCount,
-    keyframeParams,
-    playState,
-    timingFunction,
-  ])
-
-  if (_.isNil(children)) {
-    setEnd()
-    return null
+  static defaultProps = {
+    timeout: 0,
   }
 
-  const { animationDuration, animationDelay } = animationStyles.root
-  const timeoutResult = timeout || calculateAnimationTimeout(animationDuration, animationDelay) || 0
-
-  const unhandledProps = getUnhandledProps(Animation.handledProps, props)
-
-  const isChildrenFunction = typeof children === 'function'
-  const child =
-    childrenExist(children) &&
-    !isChildrenFunction &&
-    (React.Children.only(children) as React.ReactElement)
-
-  const element = (
-    <Transition
-      in={visible}
-      appear={appear}
-      mountOnEnter={mountOnEnter}
-      unmountOnExit={unmountOnExit}
-      timeout={timeoutResult}
-      onEnter={handleAnimationEvent('onEnter')}
-      onEntering={handleAnimationEvent('onEntering')}
-      onEntered={handleAnimationEvent('onEntered')}
-      onExit={handleAnimationEvent('onExit')}
-      onExiting={handleAnimationEvent('onExiting')}
-      onExited={handleAnimationEvent('onExited')}
-      {...unhandledProps}
-      className={!isChildrenFunction ? cx(classes.root, (child as any)?.props?.className) : ''}
-    >
-      {isChildrenFunction
-        ? () => (children as AnimationChildrenProp)({ classes: classes.root })
-        : child}
-    </Transition>
-  )
-  setEnd()
-
-  return element
-}
+  handleAnimationEvent = (
+    event: 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited',
+  ) => () => {
+    _.invoke(this.props, event, null, this.props)
+  }
 
-Animation.className = 'ui-animation'
-Animation.displayName = 'Animation'
-
-Animation.propTypes = {
-  ...commonPropTypes.createCommon({
-    accessibility: false,
-    as: false,
-    content: false,
-    children: false,
-  }),
-  children: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
-  name: PropTypes.string,
-  delay: PropTypes.string,
-  direction: PropTypes.string,
-  duration: PropTypes.string,
-  fillMode: PropTypes.string,
-  iterationCount: PropTypes.string,
-  keyframeParams: PropTypes.object,
-  playState: PropTypes.string,
-  timingFunction: PropTypes.string,
-  visible: PropTypes.bool,
-  appear: PropTypes.bool,
-  mountOnEnter: PropTypes.bool,
-  unmountOnExit: PropTypes.bool,
-  timeout: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.shape({
-      appear: PropTypes.number,
-      enter: PropTypes.number,
-      exit: PropTypes.number,
-    }),
-  ]),
-  onEnter: PropTypes.func,
-  onEntering: PropTypes.func,
-  onEntered: PropTypes.func,
-  onExit: PropTypes.func,
-  onExiting: PropTypes.func,
-  onExited: PropTypes.func,
+  renderComponent({ ElementType, classes, unhandledProps }) {
+    const { children, mountOnEnter, unmountOnExit, timeout, appear, visible } = this.props
+
+    const isChildrenFunction = typeof children === 'function'
+
+    const child =
+      childrenExist(children) &&
+      !isChildrenFunction &&
+      (React.Children.only(children) as React.ReactElement<any>)
+
+    return (
+      <Transition
+        in={visible}
+        appear={appear}
+        mountOnEnter={mountOnEnter}
+        unmountOnExit={unmountOnExit}
+        timeout={timeout}
+        onEnter={this.handleAnimationEvent('onEnter')}
+        onEntering={this.handleAnimationEvent('onEntering')}
+        onEntered={this.handleAnimationEvent('onEntered')}
+        onExit={this.handleAnimationEvent('onExit')}
+        onExiting={this.handleAnimationEvent('onExiting')}
+        onExited={this.handleAnimationEvent('onExited')}
+        {...unhandledProps}
+        className={!isChildrenFunction ? cx(classes.root, (child as any).props.className) : ''}
+      >
+        {isChildrenFunction
+          ? () => (children as AnimationChildrenProp)({ classes: classes.root })
+          : child}
+      </Transition>
+    )
+  }
 }
-Animation.handledProps = Object.keys(Animation.propTypes) as any
 
 export default Animation
diff --git a/packages/react/src/components/Carousel/Carousel.tsx b/packages/react/src/components/Carousel/Carousel.tsx
index 6e8f208170..acf5e858ba 100644
--- a/packages/react/src/components/Carousel/Carousel.tsx
+++ b/packages/react/src/components/Carousel/Carousel.tsx
@@ -3,9 +3,7 @@ import { Accessibility, carouselBehavior } from '@fluentui/accessibility'
 import * as React from 'react'
 import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
-import cx from 'classnames'
 import { Ref } from '@fluentui/react-component-ref'
-import Animation from '../Animation/Animation'
 
 import {
   UIComponentProps,
@@ -17,12 +15,10 @@ import {
   ChildrenComponentProps,
   getOrGenerateIdFromShorthand,
   AutoControlledComponent,
-  isFromKeyboard,
 } from '../../utils'
 import {
   WithAsProp,
   withSafeTypeForAs,
-  DebounceResultFn,
   ShorthandCollection,
   ShorthandValue,
   ComponentEventHandler,
@@ -112,11 +108,8 @@ export interface CarouselProps extends UIComponentProps, ChildrenComponentProps
 
 export interface CarouselState {
   activeIndex: number
-  prevActiveIndex: number
   ariaLiveOn: boolean
   itemIds: string[]
-  shouldFocusContainer: boolean
-  isFromKeyboard: boolean
 }
 
 class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, CarouselState> {
@@ -207,20 +200,13 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
   }
 
   getInitialAutoControlledState(): CarouselState {
-    return {
-      activeIndex: 0,
-      prevActiveIndex: -1,
-      ariaLiveOn: false,
-      itemIds: [] as string[],
-      shouldFocusContainer: false,
-      isFromKeyboard: false,
-    }
+    return { activeIndex: 0, ariaLiveOn: false, itemIds: [] as string[] }
   }
 
   itemRefs = [] as React.RefObject<HTMLElement>[]
   paddleNextRef = React.createRef<HTMLElement>()
   paddlePreviousRef = React.createRef<HTMLElement>()
-  focusItemAtIndex: DebounceResultFn<(index: number) => void> = _.debounce((index: number) => {
+  focusItemAtIndex = _.debounce((index: number) => {
     this.itemRefs[index].current.focus()
   }, 400)
 
@@ -244,7 +230,6 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
     }
 
     this.setState({
-      prevActiveIndex: this.state.activeIndex,
       activeIndex,
     })
 
@@ -255,36 +240,17 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
     }
   }
 
-  overrideItemProps = predefinedProps => ({
-    onFocus: (e, itemProps) => {
-      this.setState({
-        shouldFocusContainer: e.currentTarget === e.target,
-        isFromKeyboard: isFromKeyboard(),
-      })
-      _.invoke(predefinedProps, 'onFocus', e, itemProps)
-    },
-    onBlur: (e, itemProps) => {
-      this.setState({
-        shouldFocusContainer: e.currentTarget.contains(e.relatedTarget),
-        isFromKeyboard: false,
-      })
-      _.invoke(predefinedProps, 'onBlur', e, itemProps)
-    },
-  })
-
-  renderContent = (accessibility, classes, unhandledProps) => {
-    const { getItemPositionText, items, circular } = this.props
-    const { activeIndex, itemIds, prevActiveIndex } = this.state
+  renderContent = (accessibility, styles, unhandledProps) => {
+    const { getItemPositionText, items } = this.props
+    const { activeIndex, itemIds } = this.state
 
     this.itemRefs = []
 
     return (
-      <div
-        className={classes.itemsContainerWrapper}
-        {...accessibility.attributes.itemsContainerWrapper}
-      >
+      <div style={styles.itemsContainerWrapper} {...accessibility.attributes.itemsContainerWrapper}>
         <div
-          className={cx(Carousel.slotClassNames.itemsContainer, classes.itemsContainer)}          
+          className={Carousel.slotClassNames.itemsContainer}
+          style={styles.itemsContainer}
           {...accessibility.attributes.itemsContainer}
           {...applyAccessibilityKeyHandlers(
             accessibility.keyHandlers.itemsContainer,
@@ -295,49 +261,19 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
             items.map((item, index) => {
               const itemRef = React.createRef<HTMLElement>()
               this.itemRefs.push(itemRef)
-              const active = activeIndex === index
-              let slideToNext = prevActiveIndex < activeIndex
-
-              const initialMounting = prevActiveIndex === -1
-
-              if (circular && prevActiveIndex === items.length - 1 && activeIndex === 0) {
-                slideToNext = true
-              } else if (circular && prevActiveIndex === 0 && activeIndex === items.length - 1) {
-                slideToNext = false
-              }
-
               return (
-                <Animation
-                  key={item['key'] || index}
-                  mountOnEnter
-                  unmountOnExit
-                  visible={active}
-                  name={
-                    initialMounting
-                      ? ''
-                      : active
-                      ? slideToNext
-                        ? 'carousel-slide-to-next-enter'
-                        : 'carousel-slide-to-previous-enter'
-                      : slideToNext
-                      ? 'carousel-slide-to-next-exit'
-                      : 'carousel-slide-to-previous-exit'
-                  }
-                >
-                  <Ref innerRef={itemRef}>
-                    {CarouselItem.create(item, {
-                      defaultProps: () => ({
-                        active,
-                        id: itemIds[index],
-                        navigation: !!this.props.navigation,
-                        ...(getItemPositionText && {
-                          itemPositionText: getItemPositionText(index, items.length),
-                        }),
+                <Ref key={item['key'] || index} innerRef={itemRef}>
+                  {CarouselItem.create(item, {
+                    defaultProps: () => ({
+                      active: activeIndex === index,
+                      id: itemIds[index],
+                      navigation: !!this.props.navigation,
+                      ...(getItemPositionText && {
+                        itemPositionText: getItemPositionText(index, items.length),
                       }),
-                      overrideProps: this.overrideItemProps,
-                    })}
-                  </Ref>
-                </Animation>
+                    }),
+                  })}
+                </Ref>
               )
             })}
         </div>
@@ -475,7 +411,7 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
           children
         ) : (
           <>
-            {this.renderContent(accessibility, classes, unhandledProps)}
+            {this.renderContent(accessibility, styles, unhandledProps)}
             {this.renderPaddles(accessibility, styles)}
             {this.renderNavigation()}
           </>
diff --git a/packages/react/src/components/Chat/Chat.tsx b/packages/react/src/components/Chat/Chat.tsx
index 349f97d21f..ee3c990b26 100644
--- a/packages/react/src/components/Chat/Chat.tsx
+++ b/packages/react/src/components/Chat/Chat.tsx
@@ -1,35 +1,20 @@
-import { Accessibility, chatBehavior, ChatBehaviorProps } from '@fluentui/accessibility'
-import {
-  getElementType,
-  getUnhandledProps,
-  useAccessibility,
-  useStyles,
-  useTelemetry,
-} from '@fluentui/react-bindings'
+import { Accessibility, chatBehavior } from '@fluentui/accessibility'
 import * as customPropTypes from '@fluentui/react-proptypes'
 import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
-// @ts-ignore
-import { ThemeContext } from 'react-fela'
 
 import {
   childrenExist,
-  ChildrenComponentProps,
+  UIComponent,
   commonPropTypes,
-  createShorthandFactory,
   rtlTextContainer,
-  UIComponentProps,
+  applyAccessibilityKeyHandlers,
 } from '../../utils'
-import {
-  WithAsProp,
-  withSafeTypeForAs,
-  ShorthandCollection,
-  FluentComponentStaticProps,
-  ProviderContextPrepared,
-} from '../../types'
 import ChatItem, { ChatItemProps } from './ChatItem'
 import ChatMessage from './ChatMessage'
+import { WithAsProp, withSafeTypeForAs, ShorthandCollection } from '../../types'
+import { UIComponentProps, ChildrenComponentProps } from '../../utils/commonPropInterfaces'
 
 export interface ChatSlotClassNames {
   item: string
@@ -37,90 +22,59 @@ export interface ChatSlotClassNames {
 
 export interface ChatProps extends UIComponentProps, ChildrenComponentProps {
   /** Accessibility behavior if overridden by the user. */
-  accessibility?: Accessibility<ChatBehaviorProps>
+  accessibility?: Accessibility
 
   /** Shorthand array of the items inside the chat. */
   items?: ShorthandCollection<ChatItemProps>
 }
 
-export type ChatStylesProps = {}
+class Chat extends UIComponent<WithAsProp<ChatProps>, any> {
+  static displayName = 'Chat'
 
-const Chat: React.FC<WithAsProp<ChatProps>> &
-  FluentComponentStaticProps<ChatProps> & {
-    slotClassNames: ChatSlotClassNames
-    Item: typeof ChatItem
-    Message: typeof ChatMessage
-  } = props => {
-  const context: ProviderContextPrepared = React.useContext(ThemeContext)
-  const { setStart, setEnd } = useTelemetry(Chat.displayName, context.telemetry)
-  setStart()
+  static className = 'ui-chat'
 
-  const { accessibility, children, className, design, items, styles, variables } = props
+  static slotClassNames: ChatSlotClassNames = {
+    item: `${Chat.className}__item`,
+  }
 
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: Chat.displayName,
-    rtl: context.rtl,
-  })
-  const { classes } = useStyles<ChatStylesProps>(Chat.displayName, {
-    className: Chat.className,
-    mapPropsToInlineStyles: () => ({
-      className,
-      design,
-      styles,
-      variables,
+  static propTypes = {
+    ...commonPropTypes.createCommon({
+      content: false,
     }),
-    rtl: context.rtl,
-  })
-
-  const ElementType = getElementType(props)
-  const unhandledProps = getUnhandledProps(Chat.handledProps, props)
-
-  const element = getA11Props.unstable_wrapWithFocusZone(
-    <ElementType
-      {...getA11Props('root', {
-        className: classes.root,
-        ...rtlTextContainer.getAttributes({ forElements: [children] }),
-        ...unhandledProps,
-      })}
-    >
-      {childrenExist(children)
-        ? children
-        : _.map(items, item =>
-            ChatItem.create(item, {
-              defaultProps: () => ({ className: Chat.slotClassNames.item }),
-            }),
-          )}
-    </ElementType>,
-  )
-  setEnd()
-
-  return element
+    items: PropTypes.arrayOf(customPropTypes.itemShorthand),
+  }
+
+  static defaultProps = {
+    accessibility: chatBehavior,
+    as: 'ul',
+  }
+
+  static Item = ChatItem
+  static Message = ChatMessage
+
+  renderComponent({ ElementType, classes, accessibility, unhandledProps }) {
+    const { children, items } = this.props
+
+    return (
+      <ElementType
+        className={classes.root}
+        {...accessibility.attributes.root}
+        {...rtlTextContainer.getAttributes({ forElements: [children] })}
+        {...unhandledProps}
+        {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.root, unhandledProps)}
+      >
+        {childrenExist(children)
+          ? children
+          : _.map(items, item =>
+              ChatItem.create(item, {
+                defaultProps: () => ({ className: Chat.slotClassNames.item }),
+              }),
+            )}
+      </ElementType>
+    )
+  }
 }
 
-Chat.className = 'ui-chat'
-Chat.displayName = 'Chat'
-
-Chat.slotClassNames = {
-  item: `${Chat.className}__item`,
-}
-
-Chat.defaultProps = {
-  accessibility: chatBehavior,
-  as: 'ul',
-}
-Chat.propTypes = {
-  ...commonPropTypes.createCommon({
-    content: false,
-  }),
-  items: PropTypes.arrayOf(customPropTypes.itemShorthand),
-}
-Chat.handledProps = Object.keys(Chat.propTypes) as any
-
-Chat.Item = ChatItem
-Chat.Message = ChatMessage
-
-Chat.create = createShorthandFactory({ Component: Chat })
-
 /**
  * A Chat displays messages from a conversation between multiple users.
  */
diff --git a/packages/react/src/components/Chat/ChatItem.tsx b/packages/react/src/components/Chat/ChatItem.tsx
index f84dbfd8be..664b2107dd 100644
--- a/packages/react/src/components/Chat/ChatItem.tsx
+++ b/packages/react/src/components/Chat/ChatItem.tsx
@@ -1,34 +1,24 @@
 import { Accessibility } from '@fluentui/accessibility'
-import {
-  getElementType,
-  getUnhandledProps,
-  useAccessibility,
-  useStyles,
-  useTelemetry,
-} from '@fluentui/react-bindings'
 import * as customPropTypes from '@fluentui/react-proptypes'
-import * as PropTypes from 'prop-types'
 import * as React from 'react'
-// @ts-ignore
-import { ThemeContext } from 'react-fela'
+import * as PropTypes from 'prop-types'
 
-import {
-  WithAsProp,
-  ShorthandValue,
-  withSafeTypeForAs,
-  FluentComponentStaticProps,
-  ProviderContextPrepared,
-} from '../../types'
+import { WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
 import {
   childrenExist,
   createShorthandFactory,
+  RenderResultConfig,
+  UIComponent,
   UIComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
   rtlTextContainer,
   getElementProp,
+  ShorthandFactory,
 } from '../../utils'
 import Box, { BoxProps } from '../Box/Box'
+
+import { ComponentSlotStylesPrepared } from '@fluentui/styles'
 import ChatMessage from './ChatMessage'
 
 export interface ChatItemSlotClassNames {
@@ -40,7 +30,7 @@ export interface ChatItemProps extends UIComponentProps, ChildrenComponentProps
   /**
    * Accessibility behavior if overridden by the user.
    */
-  accessibility?: Accessibility<never>
+  accessibility?: Accessibility
 
   /** Controls item's relation to other chat items. */
   attached?: boolean | 'top' | 'bottom'
@@ -55,149 +45,108 @@ export interface ChatItemProps extends UIComponentProps, ChildrenComponentProps
   message?: ShorthandValue<BoxProps>
 }
 
-export type ChatItemStylesProps = Pick<ChatItemProps, 'attached' | 'contentPosition'>
-
-const cloneElementWithCustomProps = (element, props, prop?) => {
-  if (!prop) {
-    return React.cloneElement(element, props)
+class ChatItem extends UIComponent<WithAsProp<ChatItemProps>, any> {
+  static className = 'ui-chat__item'
+  static create: ShorthandFactory<ChatItemProps>
+  static displayName = 'ChatItem'
+  static slotClassNames: ChatItemSlotClassNames
+
+  static propTypes = {
+    ...commonPropTypes.createCommon({ content: false }),
+    attached: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['top', 'bottom'])]),
+    gutter: customPropTypes.itemShorthand,
+    contentPosition: PropTypes.oneOf(['start', 'end']),
+    message: customPropTypes.itemShorthand,
   }
-  return React.cloneElement(element, {
-    [prop]: React.cloneElement(getElementProp(element, prop), props),
-  })
-}
 
-const ChatItem: React.FC<WithAsProp<ChatItemProps>> &
-  FluentComponentStaticProps<ChatItemProps> & {
-    slotClassNames: ChatItemSlotClassNames
-  } = props => {
-  const context: ProviderContextPrepared = React.useContext(ThemeContext)
-  const { setStart, setEnd } = useTelemetry(ChatItem.displayName, context.telemetry)
-  setStart()
+  static defaultProps = {
+    as: 'li',
+    contentPosition: 'start',
+    attached: false,
+  }
 
-  const {
+  renderComponent({
     accessibility,
-    attached,
-    children,
-    className,
-    contentPosition,
-    design,
-    gutter,
-    message,
+    ElementType,
+    classes,
+    unhandledProps,
     styles,
-    variables,
-  } = props
-
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: ChatItem.displayName,
-    rtl: context.rtl,
-  })
-  const { classes, styles: resolvedStyles } = useStyles<ChatItemStylesProps>(ChatItem.displayName, {
-    className: ChatItem.className,
-    mapPropsToStyles: () => ({
-      attached,
-      contentPosition,
-    }),
-    mapPropsToInlineStyles: () => ({
-      className,
-      design,
-      styles,
-      variables,
-    }),
-    rtl: context.rtl,
-  })
-
-  const setAttachedPropValueForChatMessage = () => {
+  }: RenderResultConfig<ChatItemProps>) {
+    const { children } = this.props
+
+    return (
+      <ElementType
+        {...rtlTextContainer.getAttributes({ forElements: [children] })}
+        {...accessibility.attributes.root}
+        {...unhandledProps}
+        className={classes.root}
+      >
+        {childrenExist(children) ? children : this.renderChatItem(styles)}
+      </ElementType>
+    )
+  }
+
+  renderChatItem(styles: ComponentSlotStylesPrepared) {
+    const { gutter, contentPosition } = this.props
+    const gutterElement =
+      gutter &&
+      Box.create(gutter, {
+        defaultProps: () => ({ className: ChatItem.slotClassNames.gutter, styles: styles.gutter }),
+      })
+
+    const messageElement = this.setAttachedPropValueForChatMessage(styles)
+
+    return (
+      <>
+        {contentPosition === 'start' && gutterElement}
+        {messageElement}
+        {contentPosition === 'end' && gutterElement}
+      </>
+    )
+  }
+
+  setAttachedPropValueForChatMessage = styles => {
+    const { message, attached } = this.props
     const messageElement = Box.create(message, {
-      defaultProps: () =>
-        getA11Props('message', {
-          className: ChatItem.slotClassNames.message,
-          styles: resolvedStyles.message,
-        }),
+      defaultProps: () => ({
+        className: ChatItem.slotClassNames.message,
+        styles: styles.message,
+      }),
     })
 
     // the element is ChatMessage
     if (ChatMessage.isTypeOfElement(messageElement)) {
-      return cloneElementWithCustomProps(messageElement, { attached })
+      return this.cloneElementWithCustomProps(messageElement, { attached })
     }
 
     // the children is ChatMessage
     if (ChatMessage.isTypeOfElement(getElementProp(messageElement, 'children'))) {
-      return cloneElementWithCustomProps(messageElement, { attached }, 'children')
+      return this.cloneElementWithCustomProps(messageElement, { attached }, 'children')
     }
 
     // the content is ChatMessage
     if (ChatMessage.isTypeOfElement(getElementProp(messageElement, 'content'))) {
-      return cloneElementWithCustomProps(messageElement, { attached }, 'content')
+      return this.cloneElementWithCustomProps(messageElement, { attached }, 'content')
     }
-
     return messageElement
   }
 
-  const renderContent = () => {
-    const gutterElement = Box.create(gutter, {
-      defaultProps: () =>
-        getA11Props('gutter', {
-          className: ChatItem.slotClassNames.gutter,
-          styles: resolvedStyles.gutter,
-        }),
+  cloneElementWithCustomProps = (element, props, prop?) => {
+    if (!prop) {
+      return React.cloneElement(element, props)
+    }
+    return React.cloneElement(element, {
+      [prop]: React.cloneElement(getElementProp(element, prop), props),
     })
-    const messageElement = setAttachedPropValueForChatMessage()
-
-    return (
-      <>
-        {contentPosition === 'start' && gutterElement}
-        {messageElement}
-        {contentPosition === 'end' && gutterElement}
-      </>
-    )
   }
-
-  const ElementType = getElementType(props)
-  const unhandledProps = getUnhandledProps(ChatItem.handledProps, props)
-
-  const element = (
-    <ElementType
-      {...getA11Props('root', {
-        className: classes.root,
-        ...rtlTextContainer.getAttributes({ forElements: [children] }),
-        ...unhandledProps,
-      })}
-    >
-      {childrenExist(children) ? children : renderContent()}
-    </ElementType>
-  )
-  setEnd()
-
-  return element
 }
 
-ChatItem.className = 'ui-chat__item'
-ChatItem.displayName = 'ChatItem'
-
+ChatItem.create = createShorthandFactory({ Component: ChatItem, mappedProp: 'message' })
 ChatItem.slotClassNames = {
   message: `${ChatItem.className}__message`,
   gutter: `${ChatItem.className}__gutter`,
 }
 
-ChatItem.defaultProps = {
-  as: 'li',
-  contentPosition: 'start',
-  attached: false,
-}
-ChatItem.propTypes = {
-  ...commonPropTypes.createCommon({ content: false }),
-  attached: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.oneOf<'top' | 'bottom'>(['top', 'bottom']),
-  ]),
-  gutter: customPropTypes.itemShorthand,
-  contentPosition: PropTypes.oneOf(['start', 'end']),
-  message: customPropTypes.itemShorthand,
-}
-ChatItem.handledProps = Object.keys(ChatItem.propTypes) as any
-
-ChatItem.create = createShorthandFactory({ Component: ChatItem, mappedProp: 'message' })
-
 /**
  * A ChatItem is container for single entity in Chat (e.g. message, notification, etc).
  */
diff --git a/packages/react/src/components/Chat/ChatMessage.tsx b/packages/react/src/components/Chat/ChatMessage.tsx
index bf9d054555..89851990ae 100644
--- a/packages/react/src/components/Chat/ChatMessage.tsx
+++ b/packages/react/src/components/Chat/ChatMessage.tsx
@@ -3,34 +3,27 @@ import {
   IS_FOCUSABLE_ATTRIBUTE,
   chatMessageBehavior,
   menuAsToolbarBehavior,
-  ChatMessageBehaviorProps,
 } from '@fluentui/accessibility'
-import {
-  getElementType,
-  getUnhandledProps,
-  useAccessibility,
-  useStyles,
-  useTelemetry,
-} from '@fluentui/react-bindings'
-import { Ref } from '@fluentui/react-component-ref'
 import * as customPropTypes from '@fluentui/react-proptypes'
+import { Ref } from '@fluentui/react-component-ref'
+import * as React from 'react'
+import * as PropTypes from 'prop-types'
 import cx from 'classnames'
 import * as _ from 'lodash'
-import * as PropTypes from 'prop-types'
-import * as React from 'react'
-// @ts-ignore
-import { ThemeContext } from 'react-fela'
-
 import { Popper } from '../../utils/positioner'
 
 import {
   childrenExist,
   createShorthandFactory,
+  RenderResultConfig,
+  UIComponent,
   UIComponentProps,
   ChildrenComponentProps,
   ContentComponentProps,
   commonPropTypes,
   rtlTextContainer,
+  applyAccessibilityKeyHandlers,
+  ShorthandFactory,
 } from '../../utils'
 import {
   WithAsProp,
@@ -38,8 +31,6 @@ import {
   ComponentEventHandler,
   withSafeTypeForAs,
   ShorthandCollection,
-  FluentComponentStaticProps,
-  ProviderContextPrepared,
 } from '../../types'
 
 import Box, { BoxProps } from '../Box/Box'
@@ -49,6 +40,7 @@ import { MenuItemProps } from '../Menu/MenuItem'
 import Text, { TextProps } from '../Text/Text'
 import Reaction, { ReactionProps } from '../Reaction/Reaction'
 import { ReactionGroupProps } from '../Reaction/ReactionGroup'
+import { ComponentSlotStylesPrepared } from '@fluentui/styles'
 
 export interface ChatMessageSlotClassNames {
   actionMenu: string
@@ -64,7 +56,7 @@ export interface ChatMessageProps
     ChildrenComponentProps,
     ContentComponentProps<ShorthandValue<BoxProps>> {
   /** Accessibility behavior if overridden by the user. */
-  accessibility?: Accessibility<ChatMessageBehaviorProps>
+  accessibility?: Accessibility
 
   /** Menu with actions of the message. */
   actionMenu?: ShorthandValue<MenuProps> | ShorthandCollection<MenuItemProps>
@@ -121,117 +113,116 @@ export interface ChatMessageProps
   unstable_overflow?: boolean
 }
 
-export type ChatMessageStylesProps = Pick<
-  ChatMessageProps,
-  'attached' | 'badgePosition' | 'mine'
-> & { focused: boolean; hasBadge: boolean; hasReactionGroup: boolean }
-
-const ChatMessage: React.FC<WithAsProp<ChatMessageProps>> &
-  FluentComponentStaticProps<ChatMessageProps> & {
-    __isChatMessage: boolean
-    isTypeOfElement: Function
-    slotClassNames: ChatMessageSlotClassNames
-  } = props => {
-  const context: ProviderContextPrepared = React.useContext(ThemeContext)
-  const { setStart, setEnd } = useTelemetry(ChatMessage.displayName, context.telemetry)
-  setStart()
-
-  const {
-    accessibility,
-    actionMenu,
-    attached,
-    author,
-    badge,
-    badgePosition,
-    children,
-    className,
-    content,
-    design,
-    mine,
-    positionActionMenu,
-    reactionGroup,
-    reactionGroupPosition,
-    timestamp,
-    styles,
-    variables,
-    unstable_overflow: overflow,
-  } = props
-
-  const [focused, setFocused] = React.useState<boolean>(false)
-  const [messageNode, setMessageNode] = React.useState<HTMLElement | null>(null)
-
-  const menuRef = React.useRef<HTMLElement>()
-  const updateActionsMenuPosition = React.useRef<(() => void) | null>(null)
-
-  const getA11Props = useAccessibility(accessibility, {
-    actionHandlers: {
-      // prevents default FocusZone behavior, e.g., in ChatMessageBehavior, it prevents FocusZone from using arrow keys
-      // as navigation (only Tab key should work)
-      preventDefault: event => {
-        // preventDefault only if event coming from inside the message
-        if (event.currentTarget !== event.target) {
-          event.preventDefault()
-        }
-      },
+export interface ChatMessageState {
+  focused: boolean
+  messageNode: HTMLElement
+}
 
-      focus: event => {
-        if (messageNode) {
-          messageNode.focus()
-          event.stopPropagation()
-        }
-      },
+class ChatMessage extends UIComponent<WithAsProp<ChatMessageProps>, ChatMessageState> {
+  static className = 'ui-chat__message'
+
+  static create: ShorthandFactory<ChatMessageProps>
+
+  static slotClassNames: ChatMessageSlotClassNames
+
+  static displayName = 'ChatMessage'
+
+  static __isChatMessage = true
+
+  static isTypeOfElement = element => _.get(element, `type.__isChatMessage`)
+
+  static propTypes = {
+    ...commonPropTypes.createCommon({ content: 'shorthand' }),
+    actionMenu: customPropTypes.itemShorthand,
+    attached: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['top', 'bottom'])]),
+    author: customPropTypes.itemShorthand,
+    badge: customPropTypes.itemShorthand,
+    badgePosition: PropTypes.oneOf(['start', 'end']),
+    mine: PropTypes.bool,
+    timestamp: customPropTypes.itemShorthand,
+    onBlur: PropTypes.func,
+    onFocus: PropTypes.func,
+    onMouseEnter: PropTypes.func,
+    positionActionMenu: PropTypes.bool,
+    reactionGroup: PropTypes.oneOfType([
+      customPropTypes.collectionShorthand,
+      customPropTypes.itemShorthand,
+    ]),
+    reactionGroupPosition: PropTypes.oneOf(['start', 'end']),
+    unstable_overflow: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    accessibility: chatMessageBehavior,
+    as: 'div',
+    badgePosition: 'end',
+    positionActionMenu: true,
+    reactionGroupPosition: 'start',
+  }
+
+  updateActionsMenuPosition = () => {}
+
+  state = {
+    focused: false,
+    messageNode: null,
+  }
+
+  menuRef = React.createRef<HTMLElement>()
+
+  actionHandlers = {
+    // prevents default FocusZone behavior, e.g., in ChatMessageBehavior, it prevents FocusZone from using arrow keys
+    // as navigation (only Tab key should work)
+    preventDefault: event => {
+      // preventDefault only if event coming from inside the message
+      if (event.currentTarget !== event.target) {
+        event.preventDefault()
+      }
     },
-  })
-  const { classes, styles: resolvedStyles } = useStyles<ChatMessageStylesProps>(
-    ChatMessage.displayName,
-    {
-      className: ChatMessage.className,
-      mapPropsToStyles: () => ({
-        attached,
-        badgePosition,
-        focused,
-        mine,
-        hasBadge: !!badge,
-        hasReactionGroup: !!reactionGroup,
-      }),
-      mapPropsToInlineStyles: () => ({
-        className,
-        design,
-        styles,
-        variables,
-      }),
-      rtl: context.rtl,
+
+    focus: event => {
+      if (this.state.messageNode) {
+        this.state.messageNode.focus()
+        event.stopPropagation()
+      }
     },
-  )
+  }
 
-  const handleFocus = (e: React.SyntheticEvent) => {
-    _.invoke(updateActionsMenuPosition, 'current')
+  handleFocus = (e: React.SyntheticEvent) => {
+    this.updateActionsMenuPosition()
 
-    setFocused(true)
-    _.invoke(props, 'onFocus', e, props)
+    this.setState({ focused: true })
+    _.invoke(this.props, 'onFocus', e, this.props)
   }
 
-  const handleBlur = (e: React.SyntheticEvent) => {
-    // `focused` controls is focused the whole `ChatMessage` or any of its children. When we're navigating
+  handleBlur = (e: React.SyntheticEvent) => {
+    // `this.state.focused` controls is focused the whole `ChatMessage` or any of its children. When we're navigating
     // with keyboard the focused element will be changed and there is no way to use `:focus` selector
     const shouldPreserveFocusState = _.invoke(e, 'currentTarget.contains', (e as any).relatedTarget)
 
-    setFocused(shouldPreserveFocusState)
-    _.invoke(props, 'onBlur', e, props)
+    this.setState({ focused: shouldPreserveFocusState })
+    _.invoke(this.props, 'onBlur', e, this.props)
   }
 
-  const handleMouseEnter = (e: React.SyntheticEvent) => {
-    _.invoke(updateActionsMenuPosition, 'current')
-    _.invoke(props, 'onMouseEnter', e, props)
+  handleMouseEnter = (e: React.SyntheticEvent) => {
+    this.updateActionsMenuPosition()
+    _.invoke(this.props, 'onMouseEnter', e, this.props)
   }
 
-  const renderActionMenu = () => {
+  handleMessageRef = (node: HTMLElement) => this.setState({ messageNode: node })
+
+  renderActionMenu(
+    actionMenu: ChatMessageProps['actionMenu'],
+    styles: ComponentSlotStylesPrepared,
+  ) {
+    const { unstable_overflow: overflow, positionActionMenu } = this.props
+    const { messageNode } = this.state
+
     const actionMenuElement = Menu.create(actionMenu, {
       defaultProps: () => ({
         [IS_FOCUSABLE_ATTRIBUTE]: true,
         accessibility: menuAsToolbarBehavior,
         className: ChatMessage.slotClassNames.actionMenu,
-        styles: resolvedStyles.actionMenu,
+        styles: styles.actionMenu,
       }),
     })
 
@@ -240,7 +231,7 @@ const ChatMessage: React.FC<WithAsProp<ChatMessageProps>> &
     }
 
     const menuRect: DOMRect = (positionActionMenu &&
-      _.invoke(menuRef.current, 'getBoundingClientRect')) || {
+      _.invoke(this.menuRef.current, 'getBoundingClientRect')) || {
       height: 0,
     }
     const messageRect: DOMRect = (positionActionMenu &&
@@ -275,72 +266,85 @@ const ChatMessage: React.FC<WithAsProp<ChatMessageProps>> &
         targetRef={messageNode}
       >
         {({ scheduleUpdate }) => {
-          updateActionsMenuPosition.current = scheduleUpdate
+          this.updateActionsMenuPosition = scheduleUpdate
 
-          return <Ref innerRef={menuRef}>{actionMenuElement}</Ref>
+          return <Ref innerRef={this.menuRef}>{actionMenuElement}</Ref>
         }}
       </Popper>
     )
   }
 
-  const childrenPropExists = childrenExist(children)
-  const rootClasses = childrenPropExists ? cx(classes.root, classes.content) : classes.root
-
-  const ElementType = getElementType(props)
-  const unhandledProps = getUnhandledProps(ChatMessage.handledProps, props)
-
-  const badgeElement = Label.create(badge, {
-    defaultProps: () => ({
-      className: ChatMessage.slotClassNames.badge,
-      styles: resolvedStyles.badge,
-    }),
-  })
-
-  const reactionGroupElement = Reaction.Group.create(reactionGroup, {
-    defaultProps: () => ({
-      className: ChatMessage.slotClassNames.reactionGroup,
-      styles: resolvedStyles.reactionGroup,
-    }),
-  })
-
-  const actionMenuElement = renderActionMenu()
-
-  const authorElement = Text.create(author, {
-    defaultProps: () => ({
-      size: 'small',
-      styles: resolvedStyles.author,
-      className: ChatMessage.slotClassNames.author,
-    }),
-  })
-
-  const timestampElement = Text.create(timestamp, {
-    defaultProps: () => ({
-      size: 'small',
-      styles: resolvedStyles.timestamp,
-      timestamp: true,
-      className: ChatMessage.slotClassNames.timestamp,
-    }),
-  })
-
-  const messageContent = Box.create(content, {
-    defaultProps: () => ({
-      className: ChatMessage.slotClassNames.content,
-      styles: resolvedStyles.content,
-    }),
-  })
-
-  const element = (
-    <Ref innerRef={setMessageNode}>
-      {getA11Props.unstable_wrapWithFocusZone(
+  renderComponent({
+    ElementType,
+    classes,
+    accessibility,
+    unhandledProps,
+    styles,
+  }: RenderResultConfig<ChatMessageProps>) {
+    const {
+      actionMenu,
+      author,
+      badge,
+      badgePosition,
+      children,
+      content,
+      timestamp,
+      reactionGroup,
+      reactionGroupPosition,
+    } = this.props
+    const childrenPropExists = childrenExist(children)
+    const className = childrenPropExists ? cx(classes.root, classes.content) : classes.root
+    const badgeElement = Label.create(badge, {
+      defaultProps: () => ({
+        className: ChatMessage.slotClassNames.badge,
+        styles: styles.badge,
+      }),
+    })
+
+    const reactionGroupElement = Reaction.Group.create(reactionGroup, {
+      defaultProps: () => ({
+        className: ChatMessage.slotClassNames.reactionGroup,
+        styles: styles.reactionGroup,
+      }),
+    })
+
+    const actionMenuElement = this.renderActionMenu(actionMenu, styles)
+
+    const authorElement = Text.create(author, {
+      defaultProps: () => ({
+        size: 'small',
+        styles: styles.author,
+        className: ChatMessage.slotClassNames.author,
+      }),
+    })
+
+    const timestampElement = Text.create(timestamp, {
+      defaultProps: () => ({
+        size: 'small',
+        styles: styles.timestamp,
+        timestamp: true,
+        className: ChatMessage.slotClassNames.timestamp,
+      }),
+    })
+
+    const messageContent = Box.create(content, {
+      defaultProps: () => ({
+        className: ChatMessage.slotClassNames.content,
+        styles: styles.content,
+      }),
+    })
+
+    return (
+      <Ref innerRef={this.handleMessageRef}>
         <ElementType
-          {...getA11Props('root', {
-            className: rootClasses,
-            onBlur: handleBlur,
-            onFocus: handleFocus,
-            onMouseEnter: handleMouseEnter,
-            ...rtlTextContainer.getAttributes({ forElements: [children] }),
-            ...unhandledProps,
-          })}
+          onBlur={this.handleBlur}
+          onFocus={this.handleFocus}
+          onMouseEnter={this.handleMouseEnter}
+          className={className}
+          {...accessibility.attributes.root}
+          {...unhandledProps}
+          {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.root, unhandledProps)}
+          {...rtlTextContainer.getAttributes({ forElements: [children] })}
         >
           {childrenPropExists ? (
             children
@@ -356,52 +360,11 @@ const ChatMessage: React.FC<WithAsProp<ChatMessageProps>> &
               {badgePosition === 'end' && badgeElement}
             </>
           )}
-        </ElementType>,
-      )}
-    </Ref>
-  )
-  setEnd()
-
-  return element
-}
-
-ChatMessage.className = 'ui-chat__message'
-ChatMessage.displayName = 'ChatMessage'
-
-ChatMessage.defaultProps = {
-  accessibility: chatMessageBehavior,
-  badgePosition: 'end',
-  positionActionMenu: true,
-  reactionGroupPosition: 'start',
-}
-ChatMessage.propTypes = {
-  ...commonPropTypes.createCommon({ content: 'shorthand' }),
-  actionMenu: customPropTypes.itemShorthand,
-  attached: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.oneOf<'top' | 'bottom'>(['top', 'bottom']),
-  ]),
-  author: customPropTypes.itemShorthand,
-  badge: customPropTypes.itemShorthand,
-  badgePosition: PropTypes.oneOf(['start', 'end']),
-  mine: PropTypes.bool,
-  timestamp: customPropTypes.itemShorthand,
-  onBlur: PropTypes.func,
-  onFocus: PropTypes.func,
-  onMouseEnter: PropTypes.func,
-  positionActionMenu: PropTypes.bool,
-  reactionGroup: PropTypes.oneOfType([
-    customPropTypes.collectionShorthand,
-    customPropTypes.itemShorthand,
-  ]),
-  reactionGroupPosition: PropTypes.oneOf(['start', 'end']),
-  unstable_overflow: PropTypes.bool,
+        </ElementType>
+      </Ref>
+    )
+  }
 }
-ChatMessage.handledProps = Object.keys(ChatMessage.propTypes) as any
-
-// TODO: remove this magic static
-ChatMessage.__isChatMessage = true
-ChatMessage.isTypeOfElement = element => _.get(element, `type.__isChatMessage`)
 
 ChatMessage.create = createShorthandFactory({ Component: ChatMessage, mappedProp: 'content' })
 ChatMessage.slotClassNames = {
diff --git a/packages/react/src/components/Checkbox/Checkbox.tsx b/packages/react/src/components/Checkbox/Checkbox.tsx
index 709e65f817..8ae819f263 100644
--- a/packages/react/src/components/Checkbox/Checkbox.tsx
+++ b/packages/react/src/components/Checkbox/Checkbox.tsx
@@ -1,34 +1,19 @@
-import { Accessibility, checkboxBehavior, CheckboxBehaviorProps } from '@fluentui/accessibility'
-import {
-  getElementType,
-  getUnhandledProps,
-  useAccessibility,
-  useStateManager,
-  useStyles,
-  useTelemetry,
-} from '@fluentui/react-bindings'
+import { Accessibility, checkboxBehavior } from '@fluentui/accessibility'
 import * as customPropTypes from '@fluentui/react-proptypes'
-import { createCheckboxManager } from '@fluentui/state'
 import * as _ from 'lodash'
-import * as PropTypes from 'prop-types'
 import * as React from 'react'
-// @ts-ignore
-import { ThemeContext } from 'react-fela'
+import * as PropTypes from 'prop-types'
 
 import {
+  applyAccessibilityKeyHandlers,
+  AutoControlledComponent,
   createShorthandFactory,
   ChildrenComponentProps,
   commonPropTypes,
   UIComponentProps,
+  ShorthandFactory,
 } from '../../utils'
-import {
-  ComponentEventHandler,
-  WithAsProp,
-  ShorthandValue,
-  withSafeTypeForAs,
-  ProviderContextPrepared,
-  FluentComponentStaticProps,
-} from '../../types'
+import { ComponentEventHandler, WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
 import Icon, { IconProps } from '../Icon/Icon'
 import Text, { TextProps } from '../Text/Text'
 import { SupportedIntrinsicInputProps } from '../../utils/htmlPropsUtils'
@@ -40,7 +25,7 @@ export interface CheckboxSlotClassNames {
 
 export interface CheckboxProps extends UIComponentProps, ChildrenComponentProps {
   /** Accessibility behavior if overridden by the user. */
-  accessibility?: Accessibility<CheckboxBehaviorProps>
+  accessibility?: Accessibility
 
   /** A checkbox can be checked by default. */
   defaultChecked?: SupportedIntrinsicInputProps['defaultChecked']
@@ -78,146 +63,116 @@ export interface CheckboxProps extends UIComponentProps, ChildrenComponentProps
   toggle?: boolean
 }
 
-const Checkbox: React.FC<WithAsProp<CheckboxProps>> &
-  FluentComponentStaticProps<CheckboxProps> & {
-    slotClassNames: CheckboxSlotClassNames
-  } = props => {
-  const context: ProviderContextPrepared = React.useContext(ThemeContext)
-  const { setStart, setEnd } = useTelemetry(Checkbox.displayName, context.telemetry)
-  setStart()
-
-  const {
-    checked,
-    className,
-    defaultChecked,
-    design,
-    disabled,
-    label,
-    labelPosition,
-    icon,
-    styles,
-    toggle,
-    variables,
-  } = props
-
-  const { state, actions } = useStateManager(createCheckboxManager, {
-    mapPropsToInitialState: () => ({ checked: defaultChecked }),
-    mapPropsToState: () => ({ checked }),
-  })
-  const getA11Props = useAccessibility(props.accessibility, {
-    debugName: Checkbox.displayName,
-    mapPropsToBehavior: () => ({
-      checked: state.checked,
-      disabled,
+export interface CheckboxState {
+  checked: CheckboxProps['checked']
+}
+
+class Checkbox extends AutoControlledComponent<WithAsProp<CheckboxProps>, CheckboxState> {
+  static slotClassNames: CheckboxSlotClassNames
+
+  static create: ShorthandFactory<CheckboxProps>
+
+  static displayName = 'Checkbox'
+
+  static className = 'ui-checkbox'
+
+  static propTypes = {
+    ...commonPropTypes.createCommon({
+      content: false,
     }),
-    actionHandlers: {
-      performClick: (e: React.KeyboardEvent) => {
-        e.preventDefault()
-        handleClick(e)
-      },
+    checked: PropTypes.bool,
+    defaultChecked: PropTypes.bool,
+    disabled: PropTypes.bool,
+    icon: customPropTypes.itemShorthandWithoutJSX,
+    label: customPropTypes.itemShorthand,
+    labelPosition: PropTypes.oneOf(['start', 'end']),
+    onChange: PropTypes.func,
+    onClick: PropTypes.func,
+    toggle: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    accessibility: checkboxBehavior,
+    icon: {},
+    labelPosition: 'end',
+  }
+
+  static autoControlledProps = ['checked']
+
+  actionHandlers = {
+    performClick: (e: any /* TODO: use React.KeyboardEvent */) => {
+      e.preventDefault()
+      this.handleClick(e)
     },
-    rtl: context.rtl,
-  })
-  const { classes, styles: resolvedStyles } = useStyles(Checkbox.displayName, {
-    className: Checkbox.className,
-    mapPropsToStyles: () => ({
-      checked: state.checked,
-      disabled,
-      labelPosition,
-      toggle,
-    }),
-    mapPropsToInlineStyles: () => ({
-      className,
-      design,
-      styles,
-      variables,
-    }),
-    rtl: context.rtl,
-  })
+  }
 
-  const ElementType = getElementType(props)
-  const unhandledProps = getUnhandledProps(Checkbox.handledProps, props)
+  getInitialAutoControlledState(): CheckboxState {
+    return { checked: false }
+  }
 
-  const handleChange = (e: React.ChangeEvent) => {
-    if (!disabled) {
-      // Checkbox component doesn't present any `input` component in markup, however all of our
-      // components should handle events transparently.
-      const checked = !state.checked
+  handleChange = (e: React.ChangeEvent) => {
+    // Checkbox component doesn't present any `input` component in markup, however all of our
+    // components should handle events transparently.
+    const { disabled } = this.props
+    const checked = !this.state.checked
 
-      actions.toggle(checked)
-      _.invoke(props, 'onChange', e, { ...props, checked })
+    if (!disabled) {
+      this.setState({ checked })
+      _.invoke(this.props, 'onChange', e, { ...this.props, checked })
     }
   }
 
-  const handleClick = (e: React.MouseEvent | React.KeyboardEvent) => {
+  handleClick = (e: React.MouseEvent | React.KeyboardEvent) => {
+    const { disabled } = this.props
+    const checked = !this.state.checked
+
     if (!disabled) {
-      const checked = !state.checked
-      actions.toggle(checked)
+      this.setState({ checked })
 
-      _.invoke(props, 'onClick', e, { ...props, checked })
-      _.invoke(props, 'onChange', e, { ...props, checked })
+      _.invoke(this.props, 'onClick', e, { ...this.props, checked })
+      _.invoke(this.props, 'onChange', e, { ...this.props, checked })
     }
   }
 
-  const labelElement = Text.create(label, {
-    defaultProps: () =>
-      getA11Props('label', {
-        styles: resolvedStyles.label,
+  handleFocus = (e: React.FocusEvent) => {
+    _.invoke(this.props, 'onFocus', e, this.props)
+  }
+
+  renderComponent({ ElementType, classes, unhandledProps, styles, accessibility }) {
+    const { label, labelPosition, icon, toggle } = this.props
+
+    const labelElement = Text.create(label, {
+      defaultProps: () => ({
+        styles: styles.label,
         className: Checkbox.slotClassNames.label,
       }),
-  })
-
-  const element = (
-    <ElementType
-      {...getA11Props('root', {
-        className: classes.root,
-        onClick: handleClick,
-        onChange: handleChange,
-        ...unhandledProps,
-      })}
-    >
-      {labelPosition === 'start' && labelElement}
-      {Icon.create(icon, {
-        defaultProps: () =>
-          getA11Props('icon', {
-            outline: toggle && !state.checked,
+    })
+
+    return (
+      <ElementType
+        className={classes.root}
+        onClick={this.handleClick}
+        onChange={this.handleChange}
+        onFocus={this.handleFocus}
+        {...accessibility.attributes.root}
+        {...unhandledProps}
+        {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.root, unhandledProps)}
+      >
+        {labelPosition === 'start' && labelElement}
+        {Icon.create(icon, {
+          defaultProps: () => ({
+            outline: toggle && !this.state.checked,
             size: toggle ? 'medium' : 'smaller',
             className: Checkbox.slotClassNames.indicator,
             name: toggle ? 'icon-circle' : 'icon-checkmark',
-            styles: toggle ? resolvedStyles.toggle : resolvedStyles.checkbox,
+            styles: toggle ? styles.toggle : styles.checkbox,
           }),
-      })}
-      {labelPosition === 'end' && labelElement}
-    </ElementType>
-  )
-  setEnd()
-
-  return element
-}
-
-Checkbox.displayName = 'Checkbox'
-Checkbox.className = 'ui-checkbox'
-
-Checkbox.defaultProps = {
-  accessibility: checkboxBehavior,
-  icon: {} as any,
-  labelPosition: 'end',
-}
-Checkbox.propTypes = {
-  ...commonPropTypes.createCommon({
-    content: false,
-  }),
-  checked: PropTypes.bool,
-  defaultChecked: PropTypes.bool,
-  disabled: PropTypes.bool,
-  icon: customPropTypes.itemShorthandWithoutJSX,
-  label: customPropTypes.itemShorthand,
-  labelPosition: PropTypes.oneOf(['start', 'end']),
-  onChange: PropTypes.func,
-  onClick: PropTypes.func,
-  toggle: PropTypes.bool,
+        })}
+        {labelPosition === 'end' && labelElement}
+      </ElementType>
+    )
+  }
 }
-Checkbox.handledProps = Object.keys(Checkbox.propTypes) as any
 
 Checkbox.slotClassNames = {
   label: `${Checkbox.className}__label`,
diff --git a/packages/react/src/components/Debug/Debug.tsx b/packages/react/src/components/Debug/Debug.tsx
index 931268e9c9..6c0c3bd3e5 100644
--- a/packages/react/src/components/Debug/Debug.tsx
+++ b/packages/react/src/components/Debug/Debug.tsx
@@ -1,6 +1,7 @@
 import keyboardKey from 'keyboard-key'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
+import { toRefObject } from '@fluentui/react-component-ref'
 import { EventListener } from '@fluentui/react-component-event-listener'
 
 import { isBrowser } from '../../utils'
@@ -145,18 +146,22 @@ class Debug extends React.Component<DebugProps, DebugState> {
     if (process.env.NODE_ENV !== 'production' && isDebugEnabled) {
       return (
         <>
-          <EventListener listener={this.handleKeyDown} target={mountDocument.body} type="keydown" />
+          <EventListener
+            targetRef={toRefObject(mountDocument.body)}
+            listener={this.handleKeyDown}
+            type="keydown"
+          />
           {isSelecting && (
             <EventListener
+              targetRef={toRefObject(mountDocument.body)}
               listener={this.handleMouseMove}
-              target={mountDocument.body}
               type="mousemove"
             />
           )}
           {isSelecting && fiberNav && fiberNav.domNode && (
             <EventListener
+              targetRef={toRefObject(fiberNav.domNode)}
               listener={this.handleDOMNodeClick}
-              target={fiberNav.domNode}
               type="click"
             />
           )}
diff --git a/packages/react/src/components/Dialog/Dialog.tsx b/packages/react/src/components/Dialog/Dialog.tsx
index 2c3f57c044..0c20b1ceed 100644
--- a/packages/react/src/components/Dialog/Dialog.tsx
+++ b/packages/react/src/components/Dialog/Dialog.tsx
@@ -2,7 +2,7 @@ import { Accessibility, dialogBehavior } from '@fluentui/accessibility'
 import { FocusTrapZoneProps } from '@fluentui/react-bindings'
 import { Unstable_NestingAuto } from '@fluentui/react-component-nesting-registry'
 import { EventListener } from '@fluentui/react-component-event-listener'
-import { Ref } from '@fluentui/react-component-ref'
+import { Ref, toRefObject } from '@fluentui/react-component-ref'
 import * as customPropTypes from '@fluentui/react-proptypes'
 import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
@@ -287,6 +287,8 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
       <Ref innerRef={this.contentRef}>
         <ElementType
           className={classes.root}
+          // it's required to have an `rtl` attribute there as Dialog is rendered outside the main DOM tree
+          dir={rtl ? 'rtl' : undefined}
           {...accessibility.attributes.popup}
           {...unhandledProps}
           {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.popup, unhandledProps)}
@@ -328,6 +330,7 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
       </Ref>
     )
 
+    const targetRef = toRefObject(this.context.target)
     const triggerAccessibility: TriggerAccessibility = {
       attributes: accessibility.attributes.trigger,
       keyHandlers: accessibility.keyHandlers.trigger,
@@ -363,14 +366,14 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
               {closeOnOutsideClick && (
                 <EventListener
                   listener={this.handleOverlayClick}
-                  target={this.context.target}
+                  targetRef={targetRef}
                   type="click"
                   capture
                 />
               )}
               <EventListener
                 listener={this.handleDocumentKeydown(getRefs)}
-                target={this.context.target}
+                targetRef={targetRef}
                 type="keydown"
                 capture
               />
diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx
index c44d94c0e3..7f04a31599 100644
--- a/packages/react/src/components/Dropdown/Dropdown.tsx
+++ b/packages/react/src/components/Dropdown/Dropdown.tsx
@@ -7,7 +7,6 @@ import cx from 'classnames'
 import * as keyboardKey from 'keyboard-key'
 
 import {
-  DebounceResultFn,
   ShorthandRenderFunction,
   ShorthandValue,
   ComponentEventHandler,
@@ -446,7 +445,7 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
           highlightedIndex={highlightedIndex}
           onStateChange={this.handleStateChange}
           labelId={this.props['aria-labelledby']}
-          environment={this.context.target?.defaultView}
+          environment={this.context.target.defaultView}
           inputId={
             this.props.searchInput && this.props.searchInput['id']
               ? this.props.searchInput['id']
@@ -1372,11 +1371,11 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
     this.clearStartingString()
   }
 
-  clearA11ySelectionMessage: DebounceResultFn<() => void> = _.debounce(() => {
+  clearA11ySelectionMessage = _.debounce(() => {
     this.setState({ a11ySelectionStatus: '' })
   }, Dropdown.a11yStatusCleanupTime)
 
-  clearStartingString: DebounceResultFn<() => void> = _.debounce(() => {
+  clearStartingString = _.debounce(() => {
     this.setState({ startingString: '' })
   }, Dropdown.charKeyPressedCleanupTime)
 }
diff --git a/packages/react/src/components/Flex/FlexItem.tsx b/packages/react/src/components/Flex/FlexItem.tsx
index e71def7610..b34d966925 100644
--- a/packages/react/src/components/Flex/FlexItem.tsx
+++ b/packages/react/src/components/Flex/FlexItem.tsx
@@ -23,7 +23,7 @@ export interface FlexItemProps extends UIComponentProps, ChildrenComponentProps<
   align?: 'auto' | 'start' | 'end' | 'center' | 'baseline' | 'stretch'
 
   /** Defines size of the item. */
-  size?: 'size.half' | 'size.quarter' | 'size.small' | 'size.medium' | 'size.large' | string
+  size?: 'size.half' | 'size.quarter' | 'size.small' | 'size.medium' | 'size.large'
 
   /**
    * Item can fill remaining space of the container.
@@ -65,14 +65,7 @@ class FlexItem extends UIComponent<FlexItemProps> {
     children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
 
     align: PropTypes.oneOf(['auto', 'start', 'end', 'center', 'baseline', 'stretch']),
-    size: PropTypes.oneOf([
-      'size.half',
-      'size.quarter',
-      'size.small',
-      'size.medium',
-      'size.large',
-      PropTypes.string,
-    ]),
+    size: PropTypes.oneOf(['size.half', 'size.quarter', 'size.small', 'size.medium', 'size.large']),
 
     stretch: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
     shrink: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
diff --git a/packages/react/src/components/Icon/Icon.tsx b/packages/react/src/components/Icon/Icon.tsx
index 3150648db8..8e86f8fca3 100644
--- a/packages/react/src/components/Icon/Icon.tsx
+++ b/packages/react/src/components/Icon/Icon.tsx
@@ -1,46 +1,24 @@
-import {
-  Accessibility,
-  AccessibilityAttributes,
-  IconBehaviorProps,
-  iconBehavior,
-} from '@fluentui/accessibility'
-import * as customPropTypes from '@fluentui/react-proptypes'
-import {
-  getElementType,
-  getUnhandledProps,
-  useAccessibility,
-  useStyles,
-  useTelemetry,
-} from '@fluentui/react-bindings'
+import { Accessibility, iconBehavior } from '@fluentui/accessibility'
 import { callable } from '@fluentui/styles'
+import * as customPropTypes from '@fluentui/react-proptypes'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
-// @ts-ignore
-import { ThemeContext } from 'react-fela'
-
 import {
+  UIComponent,
   createShorthandFactory,
   UIComponentProps,
   commonPropTypes,
   ColorComponentProps,
   SizeValue,
+  ShorthandFactory,
 } from '../../utils'
-import {
-  FluentComponentStaticProps,
-  ProviderContextPrepared,
-  WithAsProp,
-  withSafeTypeForAs,
-} from '../../types'
+import { WithAsProp, withSafeTypeForAs } from '../../types'
 
 export type IconXSpacing = 'none' | 'before' | 'after' | 'both'
 
 export interface IconProps extends UIComponentProps, ColorComponentProps {
-  /** Alternative text. */
-  alt?: string
-  'aria-label'?: AccessibilityAttributes['aria-label']
-
   /** Accessibility behavior if overridden by the user. */
-  accessibility?: Accessibility<IconBehaviorProps>
+  accessibility?: Accessibility
 
   /** Icon can appear with rectangular border. */
   bordered?: boolean
@@ -67,102 +45,50 @@ export interface IconProps extends UIComponentProps, ColorComponentProps {
   xSpacing?: IconXSpacing
 }
 
-const Icon: React.FC<WithAsProp<IconProps>> & FluentComponentStaticProps = props => {
-  const context: ProviderContextPrepared = React.useContext(ThemeContext)
-
-  const { setStart, setEnd } = useTelemetry(Icon.displayName, context.telemetry)
-  setStart()
-
-  const {
-    accessibility,
-    alt,
-    'aria-label': ariaLabel,
-    bordered,
-    circular,
-    className,
-    color,
-    disabled,
-    design,
-    name,
-    outline,
-    rotate,
-    size,
-    styles,
-    variables,
-    xSpacing,
-  } = props
-
-  const { icons = {} } = context.theme
-  const maybeIcon = icons[name]
-  const isSvgIcon = maybeIcon && maybeIcon.isSvg
-
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: Icon.displayName,
-    mapPropsToBehavior: () => ({
-      alt,
-      'aria-label': ariaLabel,
-    }),
-    rtl: context.rtl,
-  })
-  const { classes } = useStyles(Icon.displayName, {
-    className: Icon.className,
-    mapPropsToStyles: () => ({
-      bordered,
-      circular,
-      color,
-      disabled,
-      // name is required only for font icons
-      // one can compose the Icon component with FontIcon to handle this if necessary
-      name: isSvgIcon ? undefined : name,
-      outline,
-      rotate,
-      size,
-      xSpacing,
-      isFontIcon: !isSvgIcon,
-      isSvgIcon,
-    }),
-    mapPropsToInlineStyles: () => ({ className, design, styles, variables }),
-    rtl: context.rtl,
-  })
+class Icon extends UIComponent<WithAsProp<IconProps>, any> {
+  static create: ShorthandFactory<IconProps>
 
-  const ElementType = getElementType(props)
-  const unhandledProps = getUnhandledProps(Icon.handledProps, props)
+  static className = 'ui-icon'
 
-  const element = (
-    <ElementType {...getA11Props('root', { className: classes.root, ...unhandledProps })}>
-      {isSvgIcon && callable(maybeIcon.icon)({ classes, rtl: context.rtl, props })}
-    </ElementType>
-  )
-  setEnd()
-
-  return element
-}
+  static displayName = 'Icon'
 
-Icon.className = 'ui-icon'
-Icon.displayName = 'Icon'
-Icon.defaultProps = {
-  as: 'span',
-  accessibility: iconBehavior,
-  size: 'medium',
-  rotate: 0,
-}
-
-Icon.propTypes = {
-  ...commonPropTypes.createCommon({
-    children: false,
-    content: false,
-    color: true,
-  }),
-  bordered: PropTypes.bool,
-  circular: PropTypes.bool,
-  disabled: PropTypes.bool,
-  name: PropTypes.string.isRequired,
-  outline: PropTypes.bool,
-  rotate: PropTypes.number,
-  size: customPropTypes.size,
-  xSpacing: PropTypes.oneOf(['none', 'before', 'after', 'both']),
+  static propTypes = {
+    ...commonPropTypes.createCommon({
+      children: false,
+      content: false,
+      color: true,
+    }),
+    bordered: PropTypes.bool,
+    circular: PropTypes.bool,
+    disabled: PropTypes.bool,
+    name: PropTypes.string.isRequired,
+    outline: PropTypes.bool,
+    rotate: PropTypes.number,
+    size: customPropTypes.size,
+    xSpacing: PropTypes.oneOf(['none', 'before', 'after', 'both']),
+  }
+
+  static defaultProps = {
+    as: 'span',
+    size: 'medium',
+    accessibility: iconBehavior,
+    rotate: 0,
+  }
+
+  renderComponent({ ElementType, classes, unhandledProps, accessibility, theme, rtl, styles }) {
+    const { name } = this.props
+    const { icons = {} } = theme || {}
+
+    const maybeIcon = icons[name]
+    const isSvgIcon = maybeIcon && maybeIcon.isSvg
+
+    return (
+      <ElementType className={classes.root} {...accessibility.attributes.root} {...unhandledProps}>
+        {isSvgIcon && callable(maybeIcon.icon)({ classes, rtl, props: this.props })}
+      </ElementType>
+    )
+  }
 }
-Icon.handledProps = Object.keys(Icon.propTypes) as any
 
 Icon.create = createShorthandFactory({ Component: Icon, mappedProp: 'name', allowsJSX: false })
 
diff --git a/packages/react/src/components/Label/Label.tsx b/packages/react/src/components/Label/Label.tsx
index 2e57a1f5af..8c9174c0ab 100644
--- a/packages/react/src/components/Label/Label.tsx
+++ b/packages/react/src/components/Label/Label.tsx
@@ -1,41 +1,27 @@
 import { Accessibility } from '@fluentui/accessibility'
-import {
-  getElementType,
-  getUnhandledProps,
-  useAccessibility,
-  useStyles,
-  useTelemetry,
-} from '@fluentui/react-bindings'
 import * as customPropTypes from '@fluentui/react-proptypes'
-import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
-// @ts-ignore
-import { ThemeContext } from 'react-fela'
 
 import {
   childrenExist,
   createShorthandFactory,
   pxToRem,
+  UIComponent,
   UIComponentProps,
   ChildrenComponentProps,
   ContentComponentProps,
   commonPropTypes,
   ColorComponentProps,
   rtlTextContainer,
+  ShorthandFactory,
 } from '../../utils'
 
 import Icon, { IconProps } from '../Icon/Icon'
 import Image, { ImageProps } from '../Image/Image'
 import Layout from '../Layout/Layout'
 
-import {
-  WithAsProp,
-  ShorthandValue,
-  withSafeTypeForAs,
-  FluentComponentStaticProps,
-  ProviderContextPrepared,
-} from '../../types'
+import { WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
 
 export interface LabelProps
   extends UIComponentProps,
@@ -45,7 +31,7 @@ export interface LabelProps
   /**
    * Accessibility behavior if overridden by the user.
    */
-  accessibility?: Accessibility<never>
+  accessibility?: Accessibility
 
   /** A Label can be circular. */
   circular?: boolean
@@ -66,142 +52,100 @@ export interface LabelProps
   imagePosition?: 'start' | 'end'
 }
 
-const Label: React.FC<WithAsProp<LabelProps>> & FluentComponentStaticProps = props => {
-  const context: ProviderContextPrepared = React.useContext(ThemeContext)
-  const { setStart, setEnd } = useTelemetry(Label.displayName, context.telemetry)
-  setStart()
-
-  const {
-    accessibility,
-    children,
-    className,
-    circular,
-    color,
-    content,
-    icon,
-    iconPosition,
-    design,
-    styles,
-    variables,
-    image,
-    imagePosition,
-  } = props
-
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: Label.displayName,
-    rtl: context.rtl,
-  })
-  const { classes, styles: resolvedStyles } = useStyles(Label.displayName, {
-    className: Label.className,
-    mapPropsToStyles: () => ({
-      hasActionableIcon: _.has(icon, 'onClick'),
-      hasImage: !!image,
-      circular,
-      color,
-      imagePosition,
-    }),
-    mapPropsToInlineStyles: () => ({ className, design, styles, variables }),
-    rtl: context.rtl,
-  })
-
-  const handleIconOverrides = (predefinedProps: IconProps) => ({
-    ...(!predefinedProps.xSpacing && {
-      xSpacing: 'none',
-    }),
-  })
-
-  const ElementType = getElementType(props)
-  const unhandledProps = getUnhandledProps(Label.handledProps, props)
-
-  if (childrenExist(children)) {
-    const element = (
-      <ElementType
-        {...getA11Props('root', {
-          className: classes.root,
-          ...rtlTextContainer.getAttributes({ forElements: [children] }),
-          ...unhandledProps,
-        })}
-      >
-        {children}
-      </ElementType>
-    )
-    setEnd()
+class Label extends UIComponent<WithAsProp<LabelProps>, any> {
+  static displayName = 'Label'
 
-    return element
+  static create: ShorthandFactory<LabelProps>
+
+  static className = 'ui-label'
+
+  static propTypes = {
+    ...commonPropTypes.createCommon({ color: true }),
+    circular: PropTypes.bool,
+    icon: customPropTypes.itemShorthandWithoutJSX,
+    iconPosition: PropTypes.oneOf(['start', 'end']),
+    image: customPropTypes.itemShorthandWithoutJSX,
+    imagePosition: PropTypes.oneOf(['start', 'end']),
+    fluid: PropTypes.bool,
   }
 
-  const imageElement = Image.create(image, {
-    defaultProps: () => ({
-      styles: resolvedStyles.image,
-    }),
-  })
-  const iconElement = Icon.create(icon, {
-    defaultProps: () => ({
-      styles: resolvedStyles.icon,
-    }),
-    overrideProps: handleIconOverrides,
-  })
-
-  const startImage = imagePosition === 'start' && imageElement
-  const startIcon = iconPosition === 'start' && iconElement
-  const endIcon = iconPosition === 'end' && iconElement
-  const endImage = imagePosition === 'end' && imageElement
-
-  const hasStartElement = startImage || startIcon
-  const hasEndElement = endIcon || endImage
-
-  const element = (
-    <ElementType
-      {...getA11Props('root', {
-        className: classes.root,
-        ...unhandledProps,
-      })}
-    >
-      <Layout
-        start={
-          hasStartElement && (
-            <>
-              {startImage}
-              {startIcon}
-            </>
-          )
-        }
-        main={content}
-        end={
-          hasEndElement && (
-            <>
-              {endIcon}
-              {endImage}
-            </>
-          )
-        }
-        gap={pxToRem(3)}
-      />
-    </ElementType>
-  )
-  setEnd()
-
-  return element
-}
+  static defaultProps = {
+    as: 'span',
+    imagePosition: 'start',
+    iconPosition: 'end',
+  }
 
-Label.displayName = 'Label'
-Label.className = 'ui-label'
-
-Label.propTypes = {
-  ...commonPropTypes.createCommon({ color: true }),
-  circular: PropTypes.bool,
-  icon: customPropTypes.itemShorthandWithoutJSX,
-  iconPosition: PropTypes.oneOf(['start', 'end']),
-  image: customPropTypes.itemShorthandWithoutJSX,
-  imagePosition: PropTypes.oneOf(['start', 'end']),
-  fluid: PropTypes.bool,
-}
-Label.handledProps = Object.keys(Label.propTypes) as any
+  handleIconOverrides = iconProps => {
+    return {
+      ...(!iconProps.xSpacing && {
+        xSpacing: 'none',
+      }),
+    }
+  }
 
-Label.defaultProps = {
-  as: 'span',
-  imagePosition: 'start',
-  iconPosition: 'end',
+  renderComponent({ accessibility, ElementType, classes, unhandledProps, variables, styles }) {
+    const { children, content, icon, iconPosition, image, imagePosition } = this.props
+
+    if (childrenExist(children)) {
+      return (
+        <ElementType
+          {...rtlTextContainer.getAttributes({ forElements: [children] })}
+          {...accessibility.attributes.root}
+          {...unhandledProps}
+          className={classes.root}
+        >
+          {children}
+        </ElementType>
+      )
+    }
+
+    const imageElement = Image.create(image, {
+      defaultProps: () => ({
+        styles: styles.image,
+        variables: variables.image,
+      }),
+    })
+    const iconElement = Icon.create(icon, {
+      defaultProps: () => ({
+        styles: styles.icon,
+        variables: variables.icon,
+      }),
+      overrideProps: this.handleIconOverrides,
+    })
+
+    const startImage = imagePosition === 'start' && imageElement
+    const startIcon = iconPosition === 'start' && iconElement
+    const endIcon = iconPosition === 'end' && iconElement
+    const endImage = imagePosition === 'end' && imageElement
+
+    const hasStartElement = startImage || startIcon
+    const hasEndElement = endIcon || endImage
+
+    return (
+      <ElementType {...accessibility.attributes.root} {...unhandledProps} className={classes.root}>
+        <Layout
+          start={
+            hasStartElement && (
+              <>
+                {startImage}
+                {startIcon}
+              </>
+            )
+          }
+          main={content}
+          end={
+            hasEndElement && (
+              <>
+                {endIcon}
+                {endImage}
+              </>
+            )
+          }
+          gap={pxToRem(3)}
+        />
+      </ElementType>
+    )
+  }
 }
 
 Label.create = createShorthandFactory({ Component: Label, mappedProp: 'content' })
diff --git a/packages/react/src/components/List/List.tsx b/packages/react/src/components/List/List.tsx
index 078c48bb86..10df6c5e41 100644
--- a/packages/react/src/components/List/List.tsx
+++ b/packages/react/src/components/List/List.tsx
@@ -3,10 +3,11 @@ import {
   getElementType,
   getUnhandledProps,
   useAccessibility,
-  useAutoControlled,
+  useStateManager,
   useStyles,
   useTelemetry,
 } from '@fluentui/react-bindings'
+import { createListManager } from '@fluentui/state'
 import * as customPropTypes from '@fluentui/react-proptypes'
 import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
@@ -31,7 +32,6 @@ import {
   rtlTextContainer,
   createShorthandFactory,
 } from '../../utils'
-import { ListContextProvider, ListContextValue } from './listContext'
 import ListItem, { ListItemProps } from './ListItem'
 
 export interface ListProps extends UIComponentProps, ChildrenComponentProps {
@@ -76,6 +76,16 @@ export interface ListProps extends UIComponentProps, ChildrenComponentProps {
   wrap?: (children: ReactChildren) => React.ReactNode
 }
 
+// List props that are passed to each individual Item props
+const itemProps = [
+  'debug',
+  'selectable',
+  'navigable',
+  'truncateContent',
+  'truncateHeader',
+  'variables',
+]
+
 const List: React.FC<WithAsProp<ListProps>> &
   FluentComponentStaticProps<ListProps> & {
     Item: typeof ListItem
@@ -90,22 +100,21 @@ const List: React.FC<WithAsProp<ListProps>> &
     children,
     className,
     debug,
+    defaultSelectedIndex,
     design,
     horizontal,
-    items,
     navigable,
+    items,
     selectable,
+    selectedIndex,
     styles,
-    truncateContent,
-    truncateHeader,
     variables,
     wrap,
   } = props
 
-  const [selectedIndex, setSelectedIndex] = useAutoControlled({
-    defaultValue: props.defaultSelectedIndex,
-    value: props.selectedIndex,
-    initialValue: -1,
+  const { state, actions } = useStateManager(createListManager, {
+    mapPropsToInitialState: () => ({ selectedIndex: defaultSelectedIndex }),
+    mapPropsToState: () => ({ selectedIndex }),
   })
   const getA11Props = useAccessibility(accessibility, {
     debugName: List.displayName,
@@ -123,38 +132,42 @@ const List: React.FC<WithAsProp<ListProps>> &
     rtl: context.rtl,
   })
 
-  const latestProps = React.useRef<ListProps>(props)
-  latestProps.current = props
-
   const ElementType = getElementType(props)
   const unhandledProps = getUnhandledProps(List.handledProps, props)
 
   const hasContent = childrenExist(children) || (items && items.length > 0)
-  const onItemClick = React.useCallback(
-    (e, itemIndex) => {
+
+  const handleItemOverrides = (predefinedProps: ListItemProps) => ({
+    onClick: (e: React.SyntheticEvent, itemProps: ListItemProps) => {
+      _.invoke(predefinedProps, 'onClick', e, itemProps)
+
       if (selectable) {
-        setSelectedIndex(itemIndex)
-        _.invoke(latestProps.current, 'onSelectedIndexChange', e, {
-          ...latestProps.current,
-          selectedIndex: itemIndex,
+        actions.select(itemProps.index)
+        _.invoke(props, 'onSelectedIndexChange', e, {
+          ...props,
+          ...{ selectedIndex: itemProps.index },
         })
       }
     },
-    [latestProps, setSelectedIndex],
-  )
+  })
 
-  const childProps: ListContextValue = {
-    debug,
-    navigable,
-    onItemClick,
-    selectable,
-    selectedIndex,
-    truncateContent,
-    truncateHeader,
-    variables,
-  }
   const renderItems = () =>
-    _.map(items, (item, index) => ListItem.create(item, { defaultProps: () => ({ index }) }))
+    _.map(items, (item, index) => {
+      const maybeSelectableItemProps = {} as any
+
+      if (selectable) {
+        maybeSelectableItemProps.selected = index === state.selectedIndex
+      }
+
+      return ListItem.create(item, {
+        defaultProps: () => ({
+          ..._.pick(props, itemProps),
+          ...maybeSelectableItemProps,
+          index,
+        }),
+        overrideProps: handleItemOverrides,
+      })
+    })
 
   const element = getA11Props.unstable_wrapWithFocusZone(
     <ElementType
@@ -164,9 +177,7 @@ const List: React.FC<WithAsProp<ListProps>> &
         ...unhandledProps,
       })}
     >
-      <ListContextProvider value={childProps}>
-        {hasContent && wrap(childrenExist(children) ? children : renderItems())}
-      </ListContextProvider>
+      {hasContent && wrap(childrenExist(children) ? children : renderItems())}
     </ElementType>,
   )
   setEnd()
diff --git a/packages/react/src/components/List/ListItem.tsx b/packages/react/src/components/List/ListItem.tsx
index 496103f29b..6af5e1aed2 100644
--- a/packages/react/src/components/List/ListItem.tsx
+++ b/packages/react/src/components/List/ListItem.tsx
@@ -6,7 +6,6 @@ import {
   useStyles,
   useTelemetry,
 } from '@fluentui/react-bindings'
-import { useContextSelectors } from '@fluentui/react-context-selector'
 import cx from 'classnames'
 import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
@@ -29,7 +28,6 @@ import {
   commonPropTypes,
   ContentComponentProps,
 } from '../../utils'
-import { ListContext, ListContextSubscribedValue } from './listContext'
 
 export interface ListItemSlotClassNames {
   header: string
@@ -100,26 +98,13 @@ const ListItem: React.FC<WithAsProp<ListItemProps> & { index: number }> &
     headerMedia,
     media,
     styles,
-  } = props
-
-  const parentProps: ListContextSubscribedValue = useContextSelectors(ListContext, {
-    debug: v => v.debug,
-    navigable: v => v.navigable,
-    selectable: v => v.selectable,
-    truncateContent: v => v.truncateContent,
-    truncateHeader: v => v.truncateHeader,
-    variables: v => v.variables,
-    onItemClick: v => v.onItemClick,
-    selected: v => v.selectedIndex === props.index,
-  })
-  const {
-    debug = parentProps.debug,
-    navigable = parentProps.navigable,
-    selectable = parentProps.selectable,
-    selected = parentProps.selected,
-    truncateContent = parentProps.truncateContent,
-    truncateHeader = parentProps.truncateHeader,
-    variables = parentProps.variables,
+    debug,
+    navigable,
+    selectable,
+    selected,
+    truncateContent,
+    truncateHeader,
+    variables,
   } = props
 
   const getA11Props = useAccessibility(accessibility, {
@@ -162,7 +147,6 @@ const ListItem: React.FC<WithAsProp<ListItemProps> & { index: number }> &
 
   const handleClick = (e: React.MouseEvent | React.KeyboardEvent) => {
     _.invoke(props, 'onClick', e, props)
-    parentProps.onItemClick(e, props.index)
   }
 
   const contentElement = Box.create(content, {
diff --git a/packages/react/src/components/List/listContext.ts b/packages/react/src/components/List/listContext.ts
deleted file mode 100644
index f1e3ead194..0000000000
--- a/packages/react/src/components/List/listContext.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { createContext } from '@fluentui/react-context-selector'
-import { ComponentVariablesInput } from '@fluentui/styles'
-import * as React from 'react'
-
-export type ListContextValue = {
-  debug: boolean
-  selectable: boolean
-  navigable: boolean
-  truncateContent: boolean
-  truncateHeader: boolean
-  variables: ComponentVariablesInput
-
-  onItemClick: (e: React.KeyboardEvent | React.MouseEvent, itemIndex: number) => void
-  selectedIndex: number
-}
-
-export type ListContextSubscribedValue = Pick<
-  ListContextValue,
-  | 'debug'
-  | 'selectable'
-  | 'navigable'
-  | 'truncateContent'
-  | 'truncateHeader'
-  | 'variables'
-  | 'onItemClick'
-> & { selected: boolean }
-
-export const ListContext = createContext<ListContextValue>(
-  {
-    debug: false,
-    selectable: false,
-    navigable: false,
-    truncateContent: false,
-    truncateHeader: false,
-    variables: {},
-
-    onItemClick: () => {},
-    selectedIndex: -1,
-  },
-  { strict: false },
-)
-
-export const ListContextProvider = ListContext.Provider
diff --git a/packages/react/src/components/Loader/Loader.tsx b/packages/react/src/components/Loader/Loader.tsx
index 5ad4513450..127bd04bdb 100644
--- a/packages/react/src/components/Loader/Loader.tsx
+++ b/packages/react/src/components/Loader/Loader.tsx
@@ -10,7 +10,6 @@ import {
   commonPropTypes,
   SizeValue,
   ShorthandFactory,
-  getOrGenerateIdFromShorthand,
 } from '../../utils'
 import { WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
 import Box, { BoxProps } from '../Box/Box'
@@ -50,7 +49,6 @@ export interface LoaderProps extends UIComponentProps {
 
 export interface LoaderState {
   visible: boolean
-  labelId: string
 }
 
 /**
@@ -96,13 +94,6 @@ class Loader extends UIComponent<WithAsProp<LoaderProps>, LoaderState> {
 
     this.state = {
       visible: this.props.delay === 0,
-      labelId: '',
-    }
-  }
-
-  static getDerivedStateFromProps(props, state) {
-    return {
-      labelId: getOrGenerateIdFromShorthand('loader-label-', props.label, state.labelId),
     }
   }
 
@@ -123,7 +114,7 @@ class Loader extends UIComponent<WithAsProp<LoaderProps>, LoaderState> {
 
   renderComponent({ ElementType, classes, accessibility, variables, styles, unhandledProps }) {
     const { indicator, label, svg } = this.props
-    const { visible, labelId } = this.state
+    const { visible } = this.state
 
     const svgElement = Box.create(svg, {
       defaultProps: () => ({ className: Loader.slotClassNames.svg, styles: styles.svg }),
@@ -144,11 +135,7 @@ class Loader extends UIComponent<WithAsProp<LoaderProps>, LoaderState> {
             }),
           })}
           {Text.create(label, {
-            defaultProps: () => ({
-              className: Loader.slotClassNames.label,
-              styles: styles.label,
-              id: labelId,
-            }),
+            defaultProps: () => ({ className: Loader.slotClassNames.label, styles: styles.label }),
           })}
         </ElementType>
       )
diff --git a/packages/react/src/components/Menu/MenuItem.tsx b/packages/react/src/components/Menu/MenuItem.tsx
index de7fc05168..0ae3ee368e 100644
--- a/packages/react/src/components/Menu/MenuItem.tsx
+++ b/packages/react/src/components/Menu/MenuItem.tsx
@@ -1,7 +1,7 @@
 import { Accessibility, menuItemBehavior, submenuBehavior } from '@fluentui/accessibility'
 import { focusAsync } from '@fluentui/react-bindings'
 import { EventListener } from '@fluentui/react-component-event-listener'
-import { Ref } from '@fluentui/react-component-ref'
+import { Ref, toRefObject } from '@fluentui/react-component-ref'
 import * as customPropTypes from '@fluentui/react-proptypes'
 import * as _ from 'lodash'
 import cx from 'classnames'
@@ -215,6 +215,7 @@ class MenuItem extends AutoControlledComponent<WithAsProp<MenuItemProps>, MenuIt
 
     const defaultIndicator = { name: vertical ? 'icon-arrow-end' : 'icon-arrow-down' }
     const indicatorWithDefaults = indicator === undefined ? defaultIndicator : indicator
+    const targetRef = toRefObject(this.context.target)
 
     const menuItemInner = childrenExist(children) ? (
       children
@@ -273,11 +274,7 @@ class MenuItem extends AutoControlledComponent<WithAsProp<MenuItemProps>, MenuIt
               })}
             </Popper>
           </Ref>
-          <EventListener
-            listener={this.outsideClickHandler}
-            target={this.context.target}
-            type="click"
-          />
+          <EventListener listener={this.outsideClickHandler} targetRef={targetRef} type="click" />
         </>
       ) : null
 
diff --git a/packages/react/src/components/Popup/Popup.tsx b/packages/react/src/components/Popup/Popup.tsx
index ffc787e404..1a82c47c9a 100644
--- a/packages/react/src/components/Popup/Popup.tsx
+++ b/packages/react/src/components/Popup/Popup.tsx
@@ -6,7 +6,7 @@ import {
 } from '@fluentui/react-bindings'
 import { EventListener } from '@fluentui/react-component-event-listener'
 import { NodeRef, Unstable_NestingAuto } from '@fluentui/react-component-nesting-registry'
-import { handleRef, Ref } from '@fluentui/react-component-ref'
+import { handleRef, toRefObject, Ref } from '@fluentui/react-component-ref'
 import * as customPropTypes from '@fluentui/react-proptypes'
 import * as React from 'react'
 import * as PropTypes from 'prop-types'
@@ -241,10 +241,14 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
     }
   }
 
-  renderComponent({ rtl, accessibility }: RenderResultConfig<PopupProps>): React.ReactNode {
+  renderComponent({
+    classes,
+    rtl,
+    accessibility,
+  }: RenderResultConfig<PopupProps>): React.ReactNode {
     const { inline, mountNode } = this.props
     const { open } = this.state
-    const popupContent = open && this.renderPopupContent(rtl, accessibility)
+    const popupContent = open && this.renderPopupContent(classes.popup, rtl, accessibility)
 
     return (
       <>
@@ -365,7 +369,7 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
     if (_.includes(normalizedOn, 'hover')) {
       triggerProps.onMouseEnter = (e, ...args) => {
         this.setPopupOpen(true, e)
-        setWhatInputSource(this.context.target, 'mouse')
+        setWhatInputSource('mouse')
         _.invoke(triggerElement, 'props.onMouseEnter', e, ...args)
       }
       triggerProps.onMouseLeave = (e, ...args) => {
@@ -458,7 +462,11 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
     )
   }
 
-  renderPopupContent(rtl: boolean, accessibility: ReactAccessibilityBehavior): JSX.Element {
+  renderPopupContent(
+    popupPositionClasses: string,
+    rtl: boolean,
+    accessibility: ReactAccessibilityBehavior,
+  ): JSX.Element {
     const { align, position, offset, target, unstable_pinned } = this.props
 
     return (
@@ -469,16 +477,20 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
         offset={offset}
         rtl={rtl}
         unstable_pinned={unstable_pinned}
-        targetRef={this.rightClickReferenceObject || target || this.triggerRef}
-        children={this.renderPopperChildren(accessibility)}
+        targetRef={
+          this.rightClickReferenceObject || (target ? toRefObject(target) : this.triggerRef)
+        }
+        children={this.renderPopperChildren.bind(this, popupPositionClasses, rtl, accessibility)}
       />
     )
   }
 
-  renderPopperChildren = (accessibility: ReactAccessibilityBehavior) => ({
-    placement,
-    scheduleUpdate,
-  }: PopperChildrenProps) => {
+  renderPopperChildren = (
+    popupPositionClasses: string,
+    rtl: boolean,
+    accessibility: ReactAccessibilityBehavior,
+    { placement, scheduleUpdate }: PopperChildrenProps,
+  ) => {
     const {
       content: propsContent,
       renderContent,
@@ -489,10 +501,14 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
     } = this.props
 
     const content = renderContent ? renderContent(scheduleUpdate) : propsContent
+    const targetRef = toRefObject(this.context.target)
+
     const popupContent = Popup.Content.create(content || {}, {
       defaultProps: () => ({
+        ...(rtl && { dir: 'rtl' }),
         ...accessibility.attributes.popup,
         ...accessibility.keyHandlers.popup,
+        className: popupPositionClasses,
         ...this.getContentProps(),
         placement,
         pointing,
@@ -519,19 +535,19 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
 
             <EventListener
               listener={this.handleDocumentClick(getRefs)}
-              target={this.context.target}
+              targetRef={targetRef}
               type="click"
               capture
             />
             <EventListener
               listener={this.handleDocumentClick(getRefs)}
-              target={this.context.target}
+              targetRef={targetRef}
               type="contextmenu"
               capture
             />
             <EventListener
               listener={this.handleDocumentKeyDown(getRefs)}
-              target={this.context.target}
+              targetRef={targetRef}
               type="keydown"
               capture
             />
@@ -540,13 +556,13 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
               <>
                 <EventListener
                   listener={this.dismissOnScroll}
-                  target={this.context.target}
+                  targetRef={targetRef}
                   type="wheel"
                   capture
                 />
                 <EventListener
                   listener={this.dismissOnScroll}
-                  target={this.context.target}
+                  targetRef={targetRef}
                   type="touchmove"
                   capture
                 />
diff --git a/packages/react/src/components/Portal/Portal.tsx b/packages/react/src/components/Portal/Portal.tsx
index da1ac9bd7e..ef4998fca2 100644
--- a/packages/react/src/components/Portal/Portal.tsx
+++ b/packages/react/src/components/Portal/Portal.tsx
@@ -5,7 +5,7 @@ import {
   FocusTrapZoneProps,
 } from '@fluentui/react-bindings'
 import { EventListener } from '@fluentui/react-component-event-listener'
-import { handleRef, Ref } from '@fluentui/react-component-ref'
+import { handleRef, Ref, toRefObject } from '@fluentui/react-component-ref'
 import * as customPropTypes from '@fluentui/react-proptypes'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
@@ -126,6 +126,7 @@ class Portal extends AutoControlledComponent<PortalProps, PortalState> {
 
     const contentToRender = childrenExist(children) ? children : content
     const focusTrapZoneProps = (_.keys(trapFocus).length && trapFocus) || {}
+    const targetRef = toRefObject(this.context.target)
 
     return (
       open && (
@@ -140,11 +141,7 @@ class Portal extends AutoControlledComponent<PortalProps, PortalState> {
             ) : (
               contentToRender
             )}
-            <EventListener
-              listener={this.handleDocumentClick}
-              target={this.context.target}
-              type="click"
-            />
+            <EventListener listener={this.handleDocumentClick} targetRef={targetRef} type="click" />
           </PortalInner>
         </Ref>
       )
diff --git a/packages/react/src/components/Portal/PortalInner.tsx b/packages/react/src/components/Portal/PortalInner.tsx
index 2a01fec378..901963b794 100644
--- a/packages/react/src/components/Portal/PortalInner.tsx
+++ b/packages/react/src/components/Portal/PortalInner.tsx
@@ -1,10 +1,11 @@
-import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
+import * as _ from 'lodash'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
+// @ts-ignore
+import { ThemeContext } from 'react-fela'
 
 import { isBrowser, ChildrenComponentProps, commonPropTypes } from '../../utils'
-import { PortalBoxContext } from '../Provider/usePortalBox'
 
 export interface PortalInnerProps extends ChildrenComponentProps {
   /** Existing element the portal should be bound to. */
@@ -29,7 +30,7 @@ export interface PortalInnerProps extends ChildrenComponentProps {
  * A PortalInner is a container for Portal's content.
  */
 class PortalInner extends React.Component<PortalInnerProps> {
-  static contextType = PortalBoxContext
+  static contextType = ThemeContext
 
   static propTypes = {
     ...commonPropTypes.createCommon({
@@ -55,9 +56,7 @@ class PortalInner extends React.Component<PortalInnerProps> {
   render() {
     const { children, mountNode } = this.props
 
-    // PortalInner should render elements even without a context
-    // eslint-disable-next-line
-    const target: HTMLDivElement | null = isBrowser() ? this.context || document.body : null
+    const target: HTMLElement | null = isBrowser() ? this.context.target.body : null
     const container: HTMLElement | null = mountNode || target
 
     return container && ReactDOM.createPortal(children, container)
diff --git a/packages/react/src/components/Provider/Provider.tsx b/packages/react/src/components/Provider/Provider.tsx
index d37648b657..c11e38c259 100644
--- a/packages/react/src/components/Provider/Provider.tsx
+++ b/packages/react/src/components/Provider/Provider.tsx
@@ -1,35 +1,26 @@
 import { IStyle } from 'fela'
 import * as _ from 'lodash'
-import {
-  getElementType,
-  getUnhandledProps,
-  Renderer,
-  StylesContextPerformance,
-  Telemetry,
-  unstable_getStyles,
-  useIsomorphicLayoutEffect,
-} from '@fluentui/react-bindings'
+import { Renderer, Telemetry } from '@fluentui/react-bindings'
+import * as customPropTypes from '@fluentui/react-proptypes'
 import {
   mergeSiteVariables,
+  ThemePrepared,
   StaticStyleObject,
   StaticStyle,
   StaticStyleFunction,
   FontFace,
+  ComponentVariablesInput,
   ThemeInput,
-  SiteVariablesPrepared,
 } from '@fluentui/styles'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 // @ts-ignore
 import { RendererProvider, ThemeProvider, ThemeContext } from 'react-fela'
 
-import {
-  ChildrenComponentProps,
-  setUpWhatInput,
-  tryCleanupWhatInput,
-  UIComponentProps,
-} from '../../utils'
+import { ChildrenComponentProps, setUpWhatInput, tryCleanupWhatInput } from '../../utils'
 
+import ProviderConsumer from './ProviderConsumer'
+import ProviderBox, { ProviderBoxProps } from './ProviderBox'
 import {
   WithAsProp,
   ProviderContextInput,
@@ -37,232 +28,201 @@ import {
   withSafeTypeForAs,
 } from '../../types'
 import mergeContexts from '../../utils/mergeProviderContexts'
-import ProviderConsumer from './ProviderConsumer'
-import usePortalBox, { PortalBoxContext } from './usePortalBox'
 
-export interface ProviderProps extends ChildrenComponentProps, UIComponentProps {
+export interface ProviderProps extends ChildrenComponentProps {
   renderer?: Renderer
   rtl?: boolean
   disableAnimations?: boolean
-  performance?: StylesContextPerformance
   overwrite?: boolean
   target?: Document
   theme?: ThemeInput
-  telemetryRef?: React.MutableRefObject<Telemetry>
+  variables?: ComponentVariablesInput
+  telemetryRef?: React.Ref<Telemetry>
 }
 
-const renderFontFaces = (renderer: Renderer, theme: ThemeInput) => {
-  if (!theme.fontFaces) {
-    return
+/**
+ * The Provider passes the CSS-in-JS renderer, theme styles and other settings to Fluent UI components.
+ */
+class Provider extends React.Component<WithAsProp<ProviderProps>> {
+  static displayName = 'Provider'
+
+  static propTypes = {
+    as: PropTypes.elementType,
+    variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+    theme: PropTypes.shape({
+      siteVariables: PropTypes.object,
+      componentVariables: PropTypes.object,
+      componentStyles: PropTypes.object,
+      fontFaces: PropTypes.arrayOf(
+        PropTypes.shape({
+          name: PropTypes.string,
+          paths: PropTypes.arrayOf(PropTypes.string),
+          style: PropTypes.shape({
+            fontStretch: PropTypes.string,
+            fontStyle: PropTypes.string,
+            fontVariant: PropTypes.string,
+            fontWeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+            localAlias: PropTypes.string,
+            unicodeRange: PropTypes.string,
+          }),
+        }),
+      ),
+      staticStyles: PropTypes.arrayOf(
+        PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func]),
+      ),
+      animations: PropTypes.object,
+    }),
+    renderer: PropTypes.object,
+    rtl: PropTypes.bool,
+    disableAnimations: PropTypes.bool,
+    children: PropTypes.node.isRequired,
+    target: PropTypes.object,
+    telemetryRef: customPropTypes.ref,
   }
 
-  const renderFontObject = (font: FontFace) => {
-    if (!_.isPlainObject(font)) {
-      throw new Error(`fontFaces must be objects, got: ${typeof font}`)
-    }
-
-    renderer.renderFont(font.name, font.paths, font.props)
+  static defaultProps = {
+    theme: {},
   }
 
-  theme.fontFaces.forEach((font: FontFace) => {
-    renderFontObject(font)
-  })
-}
+  static Consumer = ProviderConsumer
+  static Box = ProviderBox
+  static contextType = ThemeContext
 
-const renderStaticStyles = (
-  renderer: Renderer,
-  theme: ThemeInput,
-  siteVariables: SiteVariablesPrepared,
-) => {
-  if (!theme.staticStyles) {
-    return
-  }
+  outgoingContext: ProviderContextPrepared
+  staticStylesRendered: boolean = false
 
-  const renderObject = (object: StaticStyleObject) => {
-    _.forEach(object, (style, selector) => {
-      renderer.renderStatic(style as IStyle, selector)
-    })
-  }
+  telemetry: Telemetry
 
-  theme.staticStyles.forEach((staticStyle: StaticStyle) => {
-    if (typeof staticStyle === 'string') {
-      renderer.renderStatic(staticStyle)
-    } else if (_.isPlainObject(staticStyle)) {
-      renderObject(staticStyle as StaticStyleObject)
-    } else if (_.isFunction(staticStyle)) {
-      const preparedSiteVariables = mergeSiteVariables(siteVariables)
-      renderObject((staticStyle as StaticStyleFunction)(preparedSiteVariables))
-    } else {
-      throw new Error(
-        `staticStyles array must contain CSS strings, style objects, or style functions, got: ${typeof staticStyle}`,
-      )
+  renderStaticStyles = (renderer: Renderer, mergedTheme: ThemePrepared) => {
+    const { siteVariables } = mergedTheme
+    const { staticStyles } = this.props.theme
+
+    if (!staticStyles) return
+
+    const renderObject = (object: StaticStyleObject) => {
+      _.forEach(object, (style, selector) => {
+        renderer.renderStatic(style as IStyle, selector)
+      })
     }
-  })
-}
 
-/**
- * The Provider passes the CSS-in-JS renderer, theme styles and other settings to Fluent UI components.
- */
-const Provider: React.FC<WithAsProp<ProviderProps>> & {
-  className: string
-  Consumer: typeof ProviderConsumer
-  handledProps: (keyof ProviderProps)[]
-} = props => {
-  const { children, className, design, overwrite, styles, variables, telemetryRef } = props
+    staticStyles.forEach((staticStyle: StaticStyle) => {
+      if (typeof staticStyle === 'string') {
+        renderer.renderStatic(staticStyle)
+      } else if (_.isPlainObject(staticStyle)) {
+        renderObject(staticStyle as StaticStyleObject)
+      } else if (_.isFunction(staticStyle)) {
+        const preparedSiteVariables = mergeSiteVariables(siteVariables)
+        renderObject((staticStyle as StaticStyleFunction)(preparedSiteVariables))
+      } else {
+        throw new Error(
+          `staticStyles array must contain CSS strings, style objects, or style functions, got: ${typeof staticStyle}`,
+        )
+      }
+    })
+  }
 
-  const ElementType = getElementType(props)
-  const unhandledProps = getUnhandledProps(Provider.handledProps, props)
+  renderFontFaces = (renderer: Renderer) => {
+    const { fontFaces } = this.props.theme
 
-  const telemetry = React.useMemo<Telemetry | undefined>(() => {
-    if (!telemetryRef) {
-      return undefined
-    }
+    if (!fontFaces) return
+
+    const renderFontObject = (font: FontFace) => {
+      if (!_.isPlainObject(font)) {
+        throw new Error(`fontFaces must be objects, got: ${typeof font}`)
+      }
 
-    if (!telemetryRef.current) {
-      telemetryRef.current = new Telemetry()
+      renderer.renderFont(font.name, font.paths, font.props)
     }
 
-    return telemetryRef.current
-  }, [telemetryRef])
-  const inputContext: ProviderContextInput = {
-    theme: props.theme,
-    rtl: props.rtl,
-    disableAnimations: props.disableAnimations,
-    performance: props.performance,
-    renderer: props.renderer,
-    target: props.target,
-    telemetry,
+    fontFaces.forEach((font: FontFace) => {
+      renderFontObject(font)
+    })
   }
 
-  const consumedContext: ProviderContextPrepared = React.useContext(ThemeContext)
-  const incomingContext: ProviderContextPrepared = overwrite ? ({} as any) : consumedContext
-
-  // rehydration disabled to avoid leaking styles between renderers
-  // https://github.com/rofrischmann/fela/blob/master/docs/api/fela-dom/rehydrate.md
-  const outgoingContext = mergeContexts(incomingContext, inputContext)
+  componentDidMount() {
+    this.renderFontFaces(this.outgoingContext.renderer)
+    if (this.props.target) {
+      setUpWhatInput(this.props.target)
+    }
+  }
 
-  const rtlProps: { dir?: 'rtl' | 'ltr' } = {}
-  // only add dir attribute for top level provider or when direction changes from parent to child
-  if (
-    !consumedContext ||
-    (consumedContext.rtl !== outgoingContext.rtl && _.isBoolean(outgoingContext.rtl))
-  ) {
-    rtlProps.dir = outgoingContext.rtl ? 'rtl' : 'ltr'
+  componentWillUnmount() {
+    if (this.props.target) {
+      tryCleanupWhatInput(this.props.target)
+    }
   }
 
-  const { classes } = unstable_getStyles({
-    className: Provider.className,
-    displayName: Provider.displayName,
-    props: {
-      className,
-      design,
-      styles,
+  render() {
+    const {
+      as,
+      children,
+      disableAnimations,
+      overwrite,
+      renderer,
+      rtl,
+      target,
+      theme,
       variables,
-    },
-
-    disableAnimations: outgoingContext.disableAnimations,
-    performance: outgoingContext.performance,
-    renderer: outgoingContext.renderer,
-    rtl: outgoingContext.rtl,
-    theme: outgoingContext.theme,
-    saveDebug: _.noop,
-  })
-
-  const element = usePortalBox({
-    className: classes.root,
-    target: outgoingContext.target,
-    rtl: outgoingContext.rtl,
-  })
+      telemetryRef,
+      ...unhandledProps
+    } = this.props
 
-  useIsomorphicLayoutEffect(() => {
-    renderFontFaces(outgoingContext.renderer, props.theme)
-    renderStaticStyles(outgoingContext.renderer, props.theme, outgoingContext.theme.siteVariables)
+    if (telemetryRef) {
+      if (!this.telemetry) {
+        this.telemetry = new Telemetry()
+      }
 
-    if (props.target) {
-      setUpWhatInput(props.target)
+      telemetryRef['current'] = this.telemetry
+    } else if (this.telemetry) {
+      delete this.telemetry
     }
 
-    return () => {
-      if (props.target) {
-        tryCleanupWhatInput(props.target)
-      }
+    const inputContext: ProviderContextInput = {
+      theme,
+      rtl,
+      disableAnimations,
+      renderer,
+      target,
+      telemetry: this.telemetry,
     }
-  }, [])
 
-  // do not spread anything - React.Fragment can only have `key` and `children` props
-  const elementProps =
-    ElementType === React.Fragment
-      ? {}
-      : {
-          className: classes.root,
-          ...rtlProps,
-          ...unhandledProps,
-        }
+    const incomingContext: ProviderContextPrepared = overwrite ? {} : this.context
+    // rehydration disabled to avoid leaking styles between renderers
+    // https://github.com/rofrischmann/fela/blob/master/docs/api/fela-dom/rehydrate.md
+    this.outgoingContext = mergeContexts(incomingContext, inputContext)
 
-  return (
-    <RendererProvider
-      renderer={outgoingContext.renderer}
-      {...{ rehydrate: false, targetDocument: outgoingContext.target }}
-    >
-      <ThemeProvider theme={outgoingContext} overwrite>
-        <PortalBoxContext.Provider value={element}>
-          <ElementType {...elementProps}>{children}</ElementType>
-        </PortalBoxContext.Provider>
-      </ThemeProvider>
-    </RendererProvider>
-  )
-}
+    this.renderStaticStylesOnce(this.outgoingContext.theme)
 
-Provider.className = 'ui-provider'
-Provider.displayName = 'Provider'
+    const rtlProps: { dir?: 'rtl' | 'ltr' } = {}
+    // only add dir attribute for top level provider or when direction changes from parent to child
+    if (
+      !this.context ||
+      (this.context.rtl !== this.outgoingContext.rtl && _.isBoolean(this.outgoingContext.rtl))
+    ) {
+      rtlProps.dir = this.outgoingContext.rtl ? 'rtl' : 'ltr'
+    }
 
-Provider.defaultProps = {
-  theme: {},
-}
-Provider.propTypes = {
-  as: PropTypes.elementType,
-  design: PropTypes.object,
-  variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
-  styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
-  theme: PropTypes.shape({
-    siteVariables: PropTypes.object,
-    componentVariables: PropTypes.object,
-    componentStyles: PropTypes.object,
-    fontFaces: PropTypes.arrayOf(
-      PropTypes.shape({
-        name: PropTypes.string,
-        paths: PropTypes.arrayOf(PropTypes.string),
-        style: PropTypes.shape({
-          fontStretch: PropTypes.string,
-          fontStyle: PropTypes.string,
-          fontVariant: PropTypes.string,
-          fontWeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-          localAlias: PropTypes.string,
-          unicodeRange: PropTypes.string,
-        }),
-      }),
-    ),
-    staticStyles: PropTypes.arrayOf(
-      PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func]),
-    ),
-    animations: PropTypes.object,
-  }),
-  renderer: PropTypes.object as PropTypes.Validator<Renderer>,
-  rtl: PropTypes.bool,
-  disableAnimations: PropTypes.bool,
-  // Heads Up!
-  // Keep in sync with packages/react-bindings/src/styles/types.ts
-  performance: PropTypes.shape({
-    enableStylesCaching: PropTypes.bool,
-    enableVariablesCaching: PropTypes.bool,
-  }),
-  children: PropTypes.node.isRequired,
-  overwrite: PropTypes.bool,
-  target: PropTypes.object as PropTypes.Validator<Document>,
-  telemetryRef: PropTypes.object as PropTypes.Validator<React.MutableRefObject<Telemetry>>,
-}
-Provider.handledProps = Object.keys(Provider.propTypes) as any
+    return (
+      <RendererProvider
+        renderer={this.outgoingContext.renderer}
+        {...{ rehydrate: false, targetDocument: this.outgoingContext.target }}
+      >
+        <ThemeProvider theme={this.outgoingContext} overwrite>
+          <ProviderBox as={as} variables={variables} {...unhandledProps} {...rtlProps}>
+            {children}
+          </ProviderBox>
+        </ThemeProvider>
+      </RendererProvider>
+    )
+  }
 
-Provider.Consumer = ProviderConsumer
+  renderStaticStylesOnce = (mergedTheme: ThemePrepared) => {
+    const { staticStyles } = this.props.theme
+    if (!this.staticStylesRendered && staticStyles) {
+      this.renderStaticStyles(this.outgoingContext.renderer, mergedTheme)
+      this.staticStylesRendered = true
+    }
+  }
+}
 
-export default withSafeTypeForAs<typeof Provider, ProviderProps>(Provider)
+export default withSafeTypeForAs<typeof Provider, ProviderProps & ProviderBoxProps>(Provider)
diff --git a/packages/react/src/components/Provider/ProviderBox.tsx b/packages/react/src/components/Provider/ProviderBox.tsx
new file mode 100644
index 0000000000..d92b0dea69
--- /dev/null
+++ b/packages/react/src/components/Provider/ProviderBox.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react'
+import {
+  commonPropTypes,
+  ContentComponentProps,
+  ChildrenComponentProps,
+  UIComponentProps,
+} from '../../utils'
+import createComponentInternal from '../../utils/createComponentInternal'
+import { WithAsProp, withSafeTypeForAs } from '../../types'
+
+export interface ProviderBoxProps
+  extends UIComponentProps<ProviderBoxProps>,
+    ContentComponentProps,
+    ChildrenComponentProps {}
+
+const ProviderBox = createComponentInternal<WithAsProp<ProviderBoxProps>>({
+  displayName: 'ProviderBox',
+
+  className: 'ui-provider__box',
+
+  propTypes: {
+    ...commonPropTypes.createCommon(),
+  },
+
+  render(config, props) {
+    const { ElementType, classes, unhandledProps } = config
+    const { children } = props
+    if (ElementType === React.Fragment) {
+      // do not spread anything - React.Fragment can only have `key` and `children` props.
+      return <>{children}</>
+    }
+
+    return (
+      <ElementType className={classes.root} {...unhandledProps}>
+        {children}
+      </ElementType>
+    )
+  },
+})
+
+/**
+ * The ProviderBox passes the CSS-in-JS renderer, theme styles and other settings to Fluent UI components.
+ * Also, being comapred to Provider, it additionally renders an element to the DOM (`div` by default).
+ */
+export default withSafeTypeForAs<typeof ProviderBox, ProviderBoxProps>(ProviderBox)
diff --git a/packages/react/src/components/Provider/usePortalBox.ts b/packages/react/src/components/Provider/usePortalBox.ts
deleted file mode 100644
index fc7bc445d5..0000000000
--- a/packages/react/src/components/Provider/usePortalBox.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useIsomorphicLayoutEffect } from '@fluentui/react-bindings'
-import * as React from 'react'
-
-import isBrowser from '../../utils/isBrowser'
-
-type UsePortalBoxOptions = {
-  className: string
-  rtl: boolean
-  target: Document
-}
-
-export const PortalBoxContext = React.createContext<HTMLDivElement>(null)
-
-const usePortalBox = (options: UsePortalBoxOptions): HTMLDivElement => {
-  const { className, rtl, target } = options
-
-  const element: HTMLDivElement | null = React.useMemo(
-    () => (isBrowser() ? target.createElement('div') : null),
-    [target],
-  )
-
-  useIsomorphicLayoutEffect(() => {
-    if (element) {
-      target.body.appendChild(element)
-    }
-
-    return () => {
-      if (element) {
-        target.body.removeChild(element)
-      }
-    }
-  }, [])
-  useIsomorphicLayoutEffect(() => {
-    if (element) {
-      element.setAttribute('class', className)
-
-      if (rtl) {
-        element.setAttribute('dir', 'rtl')
-      } else {
-        element.removeAttribute('dir')
-      }
-    }
-  }, [className, rtl])
-
-  return element
-}
-
-export default usePortalBox
diff --git a/packages/react/src/components/Slider/Slider.tsx b/packages/react/src/components/Slider/Slider.tsx
index 331ecfdf03..51c3357bb2 100644
--- a/packages/react/src/components/Slider/Slider.tsx
+++ b/packages/react/src/components/Slider/Slider.tsx
@@ -1,29 +1,20 @@
-import { Accessibility, sliderBehavior, SliderBehaviorProps } from '@fluentui/accessibility'
-import {
-  getElementType,
-  getUnhandledProps,
-  useAccessibility,
-  useStateManager,
-  useStyles,
-  useTelemetry,
-} from '@fluentui/react-bindings'
-import { handleRef, Ref } from '@fluentui/react-component-ref'
-import * as customPropTypes from '@fluentui/react-proptypes'
-import { createSliderManager } from '@fluentui/state'
-import cx from 'classnames'
+import { Accessibility, sliderBehavior } from '@fluentui/accessibility'
+import * as React from 'react'
 import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
-import * as React from 'react'
-// @ts-ignore
-import { ThemeContext } from 'react-fela'
+import * as customPropTypes from '@fluentui/react-proptypes'
+import { handleRef, Ref } from '@fluentui/react-component-ref'
+import cx from 'classnames'
 
 import {
+  applyAccessibilityKeyHandlers,
+  AutoControlledComponent,
   ChildrenComponentProps,
   commonPropTypes,
   partitionHTMLProps,
   UIComponentProps,
+  RenderResultConfig,
   setWhatInputSource,
-  createShorthandFactory,
 } from '../../utils'
 import {
   ComponentEventHandler,
@@ -31,14 +22,12 @@ import {
   WithAsProp,
   withSafeTypeForAs,
   Omit,
-  FluentComponentStaticProps,
-  ProviderContextPrepared,
 } from '../../types'
 import { SupportedIntrinsicInputProps } from '../../utils/htmlPropsUtils'
 import Box, { BoxProps } from '../Box/Box'
 
 const processInputValues = (
-  p: Pick<SliderProps, 'min' | 'max'> & { value: string },
+  p: Pick<SliderProps, 'min' | 'max'> & Pick<SliderState, 'value'>,
 ): { min: number; max: number; value: number; valueAsPercentage: string } => {
   let min = _.toNumber(p.min)
   let max = _.toNumber(p.max)
@@ -65,7 +54,7 @@ export interface SliderProps
     ChildrenComponentProps,
     Omit<SupportedIntrinsicInputProps, 'defaultValue'> {
   /** Accessibility behavior if overridden by the user. */
-  accessibility?: Accessibility<SliderBehaviorProps>
+  accessibility?: Accessibility
 
   /** The default value of the slider. */
   defaultValue?: string | number
@@ -115,154 +104,121 @@ export interface SliderProps
   vertical?: boolean
 }
 
-const Slider: React.FC<WithAsProp<SliderProps>> &
-  FluentComponentStaticProps & { slotClassNames: SliderSlotClassNames } = props => {
-  const context: ProviderContextPrepared = React.useContext(ThemeContext)
-  const { setStart, setEnd } = useTelemetry(Slider.displayName, context.telemetry)
-  setStart()
-
-  const {
-    accessibility,
-    min,
-    max,
-    value,
-    getA11yValueMessageOnChange,
-    defaultValue,
-    input,
-    inputRef: userInputRef,
-    step,
-    className,
-    styles,
-    variables,
-    design,
-    fluid,
-    vertical,
-    disabled,
-  } = props
-  const inputRef = React.createRef<HTMLElement>()
-
-  const { state, actions } = useStateManager(createSliderManager, {
-    mapPropsToInitialState: () => ({
-      value: defaultValue as string,
-    }),
-    mapPropsToState: () => ({
-      value: value as string,
-    }),
-  })
-  const {
-    min: numericMin,
-    max: numericMax,
-    value: numericValue,
-    valueAsPercentage,
-  } = processInputValues({
-    min,
-    max,
-    value: state.value || '',
-  })
-
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: Slider.displayName,
-    rtl: context.rtl,
-    mapPropsToBehavior: () => ({
-      disabled,
-      getA11yValueMessageOnChange,
-      max: numericMax,
-      min: numericMax,
-      value: numericValue,
-      vertical,
-    }),
-  })
-  const { classes, styles: resolvedStyles } = useStyles(Slider.displayName, {
-    className: Slider.className,
-    mapPropsToStyles: () => ({
-      fluid,
-      vertical,
-      disabled,
-    }),
-    mapPropsToInlineStyles: () => ({
-      className,
-      styles,
-      variables,
-      design,
-    }),
-    rtl: context.rtl,
-  })
+export interface SliderState {
+  value: SliderProps['value']
+}
 
-  const handleInputOverrides = () => ({
+class Slider extends AutoControlledComponent<WithAsProp<SliderProps>, SliderState> {
+  inputRef = React.createRef<HTMLElement>()
+
+  static displayName = 'Slider'
+
+  static className = 'ui-slider'
+
+  static slotClassNames: SliderSlotClassNames
+
+  static propTypes = {
+    ...commonPropTypes.createCommon({ content: false }),
+    defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    fluid: PropTypes.bool,
+    getA11yValueMessageOnChange: PropTypes.func,
+    input: customPropTypes.itemShorthand,
+    inputRef: customPropTypes.ref,
+    max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    onChange: PropTypes.func,
+    step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    vertical: PropTypes.bool,
+  }
+
+  static defaultProps: SliderProps = {
+    accessibility: sliderBehavior,
+    getA11yValueMessageOnChange: ({ value }) => String(value),
+    max: 100,
+    min: 0,
+    step: 1,
+  }
+
+  static autoControlledProps = ['value']
+
+  getInitialAutoControlledState(): Partial<SliderState> {
+    return { value: 50 }
+  }
+
+  handleInputOverrides = () => ({
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
       const value = _.get(e, 'target.value')
-      _.invoke(props, 'onChange', e, { ...props, value })
-      actions.change(value)
+      _.invoke(this.props, 'onChange', e, { ...this.props, value })
+      this.setState({ value })
     },
     onMouseDown: (e: React.MouseEvent<HTMLInputElement>) => {
-      setWhatInputSource(context.target, 'mouse')
-      _.invoke(props, 'onMouseDown', e, props)
+      setWhatInputSource('mouse')
+      _.invoke(this.props, 'onMouseDown', e, this.props)
     },
   })
 
-  const ElementType = getElementType(props)
-  const unhandledProps = getUnhandledProps(Slider.handledProps, props)
-  const [htmlInputProps, restProps] = partitionHTMLProps(unhandledProps)
-  const type = 'range'
-
-  // we need 2 wrappers around the slider rail, track, input and thumb slots to achieve correct component sizes
-
-  const inputElement = Box.create(input || type, {
-    defaultProps: () =>
-      getA11Props('input', {
-        ...htmlInputProps,
-        as: 'input',
-        className: Slider.slotClassNames.input,
-        fluid,
-        min: numericMin,
-        max: numericMax,
-        step,
-        styles: resolvedStyles.input,
-        type,
-        value: numericValue,
-        vertical,
-      }),
-    overrideProps: handleInputOverrides,
-  })
-
-  const element = (
-    <ElementType {...getA11Props('root', { className: classes.root, ...restProps })}>
-      <div
-        {...getA11Props('inputWrapper', {
-          className: cx(Slider.slotClassNames.inputWrapper, classes.inputWrapper),
-        })}
-      >
-        <span
-          {...getA11Props('rail', { className: cx(Slider.slotClassNames.rail, classes.rail) })}
-        />
-        <span
-          {...getA11Props('track', { className: cx(Slider.slotClassNames.track, classes.track) })}
-          style={{ width: valueAsPercentage }}
-        />
-        <Ref
-          innerRef={(inputElement: HTMLElement) => {
-            handleRef(inputRef, inputElement)
-            handleRef(userInputRef, inputElement)
-          }}
-        >
-          {inputElement}
-        </Ref>
-        {/* the thumb slot needs to appear after the input slot */}
-        <span
-          {...getA11Props('thumb', { className: cx(Slider.slotClassNames.thumb, classes.thumb) })}
-          style={{ [context.rtl ? 'right' : 'left']: valueAsPercentage }}
-        />
-      </div>
-    </ElementType>
-  )
-  setEnd()
-
-  return element
+  renderComponent({
+    ElementType,
+    classes,
+    accessibility,
+    rtl,
+    styles,
+    unhandledProps,
+  }: RenderResultConfig<SliderProps>) {
+    const { input, inputRef, step } = this.props
+    const [htmlInputProps, restProps] = partitionHTMLProps(unhandledProps)
+    const type = 'range'
+
+    const { min, max, value, valueAsPercentage } = processInputValues({
+      min: this.props.min,
+      max: this.props.max,
+      value: this.state.value || '',
+    })
+
+    // we need 2 wrappers around the slider rail, track, input and thumb slots to achieve correct component sizes
+    return (
+      <ElementType className={classes.root} {...accessibility.attributes.root} {...restProps}>
+        <div className={cx(Slider.slotClassNames.inputWrapper, classes.inputWrapper)}>
+          <span className={cx(Slider.slotClassNames.rail, classes.rail)} />
+          <span
+            className={cx(Slider.slotClassNames.track, classes.track)}
+            style={{ width: valueAsPercentage }}
+          />
+          <Ref
+            innerRef={(inputElement: HTMLElement) => {
+              handleRef(this.inputRef, inputElement)
+              handleRef(inputRef, inputElement)
+            }}
+          >
+            {Box.create(input || type, {
+              defaultProps: () => ({
+                ...htmlInputProps,
+                ...accessibility.attributes.input,
+                className: Slider.slotClassNames.input,
+                as: 'input',
+                min,
+                max,
+                step,
+                type,
+                value,
+                styles: styles.input,
+                ...applyAccessibilityKeyHandlers(accessibility.keyHandlers.input, htmlInputProps),
+              }),
+              overrideProps: this.handleInputOverrides,
+            })}
+          </Ref>
+          {/* the thumb slot needs to appear after the input slot */}
+          <span
+            className={cx(Slider.slotClassNames.thumb, classes.thumb)}
+            style={{ [rtl ? 'right' : 'left']: valueAsPercentage }}
+          />
+        </div>
+      </ElementType>
+    )
+  }
 }
 
-Slider.className = 'ui-slider'
-Slider.displayName = 'Slider'
-
 Slider.slotClassNames = {
   input: `${Slider.className}__input`,
   inputWrapper: `${Slider.className}__input-wrapper`,
@@ -271,31 +227,6 @@ Slider.slotClassNames = {
   track: `${Slider.className}__track`,
 }
 
-Slider.defaultProps = {
-  accessibility: sliderBehavior,
-  getA11yValueMessageOnChange: ({ value }) => String(value),
-  max: 100,
-  min: 0,
-  step: 1,
-}
-Slider.propTypes = {
-  ...commonPropTypes.createCommon({ content: false }),
-  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  fluid: PropTypes.bool,
-  getA11yValueMessageOnChange: PropTypes.func,
-  input: customPropTypes.itemShorthand,
-  inputRef: customPropTypes.ref,
-  max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  onChange: PropTypes.func,
-  step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  vertical: PropTypes.bool,
-}
-Slider.handledProps = Object.keys(Slider.propTypes) as any
-
-Slider.create = createShorthandFactory({ Component: Slider, mappedProp: 'value' })
-
 /**
  * A Slider represents an input that allows user to choose a value from within a specific range.
  *
diff --git a/packages/react/src/components/Status/Status.tsx b/packages/react/src/components/Status/Status.tsx
index 8f3b864395..b1635a00ee 100644
--- a/packages/react/src/components/Status/Status.tsx
+++ b/packages/react/src/components/Status/Status.tsx
@@ -1,30 +1,22 @@
 import { Accessibility, statusBehavior } from '@fluentui/accessibility'
-import {
-  getElementType,
-  getUnhandledProps,
-  useAccessibility,
-  useStyles,
-  useTelemetry,
-} from '@fluentui/react-bindings'
 import * as customPropTypes from '@fluentui/react-proptypes'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
-// @ts-ignore
-import { ThemeContext } from 'react-fela'
+import Icon, { IconProps } from '../Icon/Icon'
 
-import { createShorthandFactory, UIComponentProps, commonPropTypes, SizeValue } from '../../utils'
 import {
-  WithAsProp,
-  ShorthandValue,
-  withSafeTypeForAs,
-  ProviderContextPrepared,
-  FluentComponentStaticProps,
-} from '../../types'
-import Icon, { IconProps } from '../Icon/Icon'
+  UIComponent,
+  createShorthandFactory,
+  UIComponentProps,
+  commonPropTypes,
+  SizeValue,
+  ShorthandFactory,
+} from '../../utils'
+import { WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
 
 export interface StatusProps extends UIComponentProps {
   /** Accessibility behavior if overridden by the user. */
-  accessibility?: Accessibility<never>
+  accessibility?: Accessibility
 
   /** A custom color. */
   color?: string
@@ -39,71 +31,46 @@ export interface StatusProps extends UIComponentProps {
   state?: 'success' | 'info' | 'warning' | 'error' | 'unknown'
 }
 
-const Status: React.FC<WithAsProp<StatusProps>> & FluentComponentStaticProps = props => {
-  const context: ProviderContextPrepared = React.useContext(ThemeContext)
-  const { setStart, setEnd } = useTelemetry(Icon.displayName, context.telemetry)
-  setStart()
+class Status extends UIComponent<WithAsProp<StatusProps>, any> {
+  static create: ShorthandFactory<StatusProps>
 
-  const { className, color, icon, size, state, design, styles, variables } = props
-  const { classes, styles: resolvedStyles } = useStyles(Status.displayName, {
-    className: Status.className,
-    mapPropsToStyles: () => ({
-      color,
-      size,
-      state,
-    }),
-    mapPropsToInlineStyles: () => ({
-      className,
-      design,
-      styles,
-      variables,
-    }),
-    rtl: context.rtl,
-  })
-  const getA11Props = useAccessibility(props.accessibility, {
-    debugName: Status.displayName,
-    rtl: context.rtl,
-  })
-  const ElementType = getElementType(props)
-  const unhandledProps = getUnhandledProps(Status.handledProps, props)
+  static className = 'ui-status'
 
-  const iconElement = Icon.create(icon, {
-    defaultProps: () =>
-      getA11Props('icon', {
-        size: 'smallest',
-        styles: resolvedStyles.icon,
-        xSpacing: 'none',
-      }),
-  })
+  static displayName = 'Status'
 
-  const element = (
-    <ElementType {...getA11Props('root', { className: classes.root, ...unhandledProps })}>
-      {iconElement}
-    </ElementType>
-  )
-  setEnd()
+  static propTypes = {
+    ...commonPropTypes.createCommon({
+      children: false,
+      content: false,
+    }),
+    color: PropTypes.string,
+    icon: customPropTypes.itemShorthandWithoutJSX,
+    size: customPropTypes.size,
+    state: PropTypes.oneOf(['success', 'info', 'warning', 'error', 'unknown']),
+  }
 
-  return element
-}
+  static defaultProps = {
+    accessibility: statusBehavior,
+    as: 'span',
+    size: 'medium',
+    state: 'unknown',
+  }
 
-Status.className = 'ui-status'
-Status.displayName = 'Status'
-Status.propTypes = {
-  ...commonPropTypes.createCommon({
-    children: false,
-    content: false,
-  }),
-  color: PropTypes.string,
-  icon: customPropTypes.itemShorthandWithoutJSX,
-  size: customPropTypes.size,
-  state: PropTypes.oneOf(['success', 'info', 'warning', 'error', 'unknown']),
-}
-Status.handledProps = Object.keys(Status.propTypes) as any
-Status.defaultProps = {
-  accessibility: statusBehavior,
-  as: 'span',
-  size: 'medium',
-  state: 'unknown',
+  renderComponent({ accessibility, ElementType, classes, unhandledProps, variables, styles }) {
+    const { icon } = this.props as StatusProps
+    return (
+      <ElementType className={classes.root} {...accessibility.attributes.root} {...unhandledProps}>
+        {Icon.create(icon, {
+          defaultProps: () => ({
+            size: 'smallest',
+            styles: styles.icon,
+            variables: variables.icon,
+            xSpacing: 'none',
+          }),
+        })}
+      </ElementType>
+    )
+  }
 }
 
 Status.create = createShorthandFactory({ Component: Status, mappedProp: 'state' })
diff --git a/packages/react/src/components/Text/Text.tsx b/packages/react/src/components/Text/Text.tsx
index dde729be6e..29b96575a0 100644
--- a/packages/react/src/components/Text/Text.tsx
+++ b/packages/react/src/components/Text/Text.tsx
@@ -5,6 +5,7 @@ import * as React from 'react'
 import {
   childrenExist,
   createShorthandFactory,
+  UIComponent,
   UIComponentProps,
   ContentComponentProps,
   ChildrenComponentProps,
@@ -13,24 +14,11 @@ import {
   rtlTextContainer,
   SizeValue,
   AlignValue,
+  ShorthandFactory,
 } from '../../utils'
 import { Accessibility } from '@fluentui/accessibility'
 
-import {
-  FluentComponentStaticProps,
-  ProviderContextPrepared,
-  WithAsProp,
-  withSafeTypeForAs,
-} from '../../types'
-import {
-  getElementType,
-  getUnhandledProps,
-  useAccessibility,
-  useStyles,
-  useTelemetry,
-} from '@fluentui/react-bindings'
-// @ts-ignore
-import { ThemeContext } from 'react-fela'
+import { WithAsProp, withSafeTypeForAs } from '../../types'
 
 export interface TextProps
   extends UIComponentProps,
@@ -40,7 +28,7 @@ export interface TextProps
   /**
    * Accessibility behavior if overridden by the user.
    */
-  accessibility?: Accessibility<never>
+  accessibility?: Accessibility
 
   /** At mentions can be formatted to draw users' attention. Mentions for "me" can be formatted to appear differently. */
   atMention?: boolean | 'me'
@@ -76,103 +64,47 @@ export interface TextProps
   truncated?: boolean
 }
 
-const Text: React.FC<WithAsProp<TextProps>> & FluentComponentStaticProps<TextProps> = props => {
-  const context: ProviderContextPrepared = React.useContext(ThemeContext)
-  const { setStart, setEnd } = useTelemetry(Text.displayName, context.telemetry)
-  setStart()
-
-  const {
-    accessibility,
-    align,
-    atMention,
-    children,
-    className,
-    color,
-    content,
-    design,
-    disabled,
-    error,
-    important,
-    size,
-    styles,
-    success,
-    timestamp,
-    truncated,
-    temporary,
-    variables,
-    weight,
-  } = props
-
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: Text.displayName,
-    rtl: context.rtl,
-  })
-  const { classes } = useStyles(Text.displayName, {
-    className: Text.className,
-    mapPropsToStyles: () => ({
-      atMention,
-      color,
-      important,
-      timestamp,
-      truncated,
-      disabled,
-      error,
-      success,
-      temporary,
-      align,
-      weight,
-      size,
-    }),
-    mapPropsToInlineStyles: () => ({
-      className,
-      design,
-      styles,
-      variables,
-    }),
-    rtl: context.rtl,
-  })
-
-  const unhandledProps = getUnhandledProps(Text.handledProps, props)
-  const ElementType = getElementType(props)
-
-  const element = (
-    <ElementType
-      {...getA11Props('root', {
-        className: classes.root,
-        ...rtlTextContainer.getAttributes({ forElements: [children, content] }),
-        ...unhandledProps,
-      })}
-    >
-      {childrenExist(children) ? children : content}
-    </ElementType>
-  )
-
-  setEnd()
-
-  return element
-}
-
-Text.className = 'ui-text'
-Text.displayName = 'Text'
-
-Text.defaultProps = {
-  as: 'span',
-}
-Text.propTypes = {
-  ...commonPropTypes.createCommon({ color: true }),
-  atMention: PropTypes.oneOfType<any>([PropTypes.bool, PropTypes.oneOf(['me'])]),
-  disabled: PropTypes.bool,
-  error: PropTypes.bool,
-  important: PropTypes.bool,
-  size: customPropTypes.size,
-  weight: PropTypes.oneOf(['light', 'semilight', 'regular', 'semibold', 'bold']),
-  success: PropTypes.bool,
-  temporary: PropTypes.bool,
-  align: customPropTypes.align,
-  timestamp: PropTypes.bool,
-  truncated: PropTypes.bool,
+class Text extends UIComponent<WithAsProp<TextProps>, any> {
+  static create: ShorthandFactory<TextProps>
+
+  static className = 'ui-text'
+
+  static displayName = 'Text'
+
+  static propTypes = {
+    ...commonPropTypes.createCommon({ color: true }),
+    atMention: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['me'])]),
+    disabled: PropTypes.bool,
+    error: PropTypes.bool,
+    important: PropTypes.bool,
+    size: customPropTypes.size,
+    weight: PropTypes.oneOf(['light', 'semilight', 'regular', 'semibold', 'bold']),
+    success: PropTypes.bool,
+    temporary: PropTypes.bool,
+    align: customPropTypes.align,
+    timestamp: PropTypes.bool,
+    truncated: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    as: 'span',
+  }
+
+  renderComponent({ accessibility, ElementType, classes, unhandledProps }): React.ReactNode {
+    const { children, content } = this.props
+
+    return (
+      <ElementType
+        className={classes.root}
+        {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
+        {...accessibility.attributes.root}
+        {...unhandledProps}
+      >
+        {childrenExist(children) ? children : content}
+      </ElementType>
+    )
+  }
 }
-Text.handledProps = Object.keys(Text.propTypes) as any
 
 Text.create = createShorthandFactory({ Component: Text, mappedProp: 'content' })
 
diff --git a/packages/react/src/components/Toolbar/Toolbar.tsx b/packages/react/src/components/Toolbar/Toolbar.tsx
index 8a2a849fa6..0fc284db4f 100644
--- a/packages/react/src/components/Toolbar/Toolbar.tsx
+++ b/packages/react/src/components/Toolbar/Toolbar.tsx
@@ -8,7 +8,7 @@ import * as React from 'react'
 import * as _ from 'lodash'
 import * as customPropTypes from '@fluentui/react-proptypes'
 import * as PropTypes from 'prop-types'
-import { Ref } from '@fluentui/react-component-ref'
+import { Ref, toRefObject } from '@fluentui/react-component-ref'
 import { EventListener } from '@fluentui/react-component-event-listener'
 
 import {
@@ -498,6 +498,8 @@ class Toolbar extends UIComponent<WithAsProp<ToolbarProps>> {
     unhandledProps,
     rtl,
   }): React.ReactNode {
+    const windowRef = toRefObject(this.context.target.defaultView)
+
     this.rtl = rtl
     const { children, items, overflow, overflowItem } = this.props
 
@@ -528,11 +530,7 @@ class Toolbar extends UIComponent<WithAsProp<ToolbarProps>> {
           </div>
           <div className={classes.offsetMeasure} ref={this.offsetMeasureRef} />
         </ElementType>
-        <EventListener
-          listener={this.handleWindowResize}
-          target={this.context.target.defaultView}
-          type="resize"
-        />
+        <EventListener listener={this.handleWindowResize} targetRef={windowRef} type="resize" />
       </>
     )
   }
diff --git a/packages/react/src/components/Toolbar/ToolbarItem.tsx b/packages/react/src/components/Toolbar/ToolbarItem.tsx
index f6e350de54..508852977f 100644
--- a/packages/react/src/components/Toolbar/ToolbarItem.tsx
+++ b/packages/react/src/components/Toolbar/ToolbarItem.tsx
@@ -4,7 +4,7 @@ import * as PropTypes from 'prop-types'
 import * as customPropTypes from '@fluentui/react-proptypes'
 import { Accessibility, toolbarItemBehavior } from '@fluentui/accessibility'
 import cx from 'classnames'
-import { Ref } from '@fluentui/react-component-ref'
+import { Ref, toRefObject } from '@fluentui/react-component-ref'
 import { EventListener } from '@fluentui/react-component-event-listener'
 
 import {
@@ -199,6 +199,7 @@ class ToolbarItem extends UIComponent<WithAsProp<ToolbarItemProps>> {
 
   renderComponent({ ElementType, classes, unhandledProps, accessibility, variables }) {
     const { icon, children, disabled, popup, menu, menuOpen, wrapper } = this.props
+    const targetRef = toRefObject(this.context.target)
 
     const itemElement = (
       <ElementType
@@ -241,7 +242,7 @@ class ToolbarItem extends UIComponent<WithAsProp<ToolbarItemProps>> {
             </Ref>
             <EventListener
               listener={this.handleOutsideClick(getRefs)}
-              target={this.context.target}
+              targetRef={targetRef}
               type="click"
               capture
             />
diff --git a/packages/react/src/components/Toolbar/ToolbarMenuItem.tsx b/packages/react/src/components/Toolbar/ToolbarMenuItem.tsx
index 70c19c25e9..55b5a709f0 100644
--- a/packages/react/src/components/Toolbar/ToolbarMenuItem.tsx
+++ b/packages/react/src/components/Toolbar/ToolbarMenuItem.tsx
@@ -5,7 +5,7 @@ import cx from 'classnames'
 import * as PropTypes from 'prop-types'
 
 import { EventListener } from '@fluentui/react-component-event-listener'
-import { Ref } from '@fluentui/react-component-ref'
+import { Ref, toRefObject } from '@fluentui/react-component-ref'
 import * as customPropTypes from '@fluentui/react-proptypes'
 import { focusAsync } from '@fluentui/react-bindings'
 import { GetRefs, NodeRef, Unstable_NestingAuto } from '@fluentui/react-component-nesting-registry'
@@ -281,6 +281,8 @@ class ToolbarMenuItem extends AutoControlledComponent<
     } = this.props
     const { menuOpen } = this.state
 
+    const targetRef = toRefObject(this.context.target)
+
     const elementType = (
       <ElementType
         {...accessibility.attributes.root}
@@ -361,7 +363,7 @@ class ToolbarMenuItem extends AutoControlledComponent<
               </Ref>
               <EventListener
                 listener={this.outsideClickHandler(getRefs)}
-                target={this.context.target}
+                targetRef={targetRef}
                 type="click"
               />
             </>
diff --git a/packages/react/src/components/Tooltip/Tooltip.tsx b/packages/react/src/components/Tooltip/Tooltip.tsx
index b006844dd8..bdbc0adaeb 100644
--- a/packages/react/src/components/Tooltip/Tooltip.tsx
+++ b/packages/react/src/components/Tooltip/Tooltip.tsx
@@ -1,19 +1,16 @@
-import {
-  Accessibility,
-  tooltipAsLabelBehavior,
-  TooltipBehaviorProps,
-} from '@fluentui/accessibility'
-import { useAccessibility, useAutoControlled, useTelemetry } from '@fluentui/react-bindings'
-import { Ref } from '@fluentui/react-component-ref'
+import { Accessibility, tooltipAsLabelBehavior } from '@fluentui/accessibility'
+import { ReactAccessibilityBehavior } from '@fluentui/react-bindings'
+import { toRefObject, Ref } from '@fluentui/react-component-ref'
 import * as customPropTypes from '@fluentui/react-proptypes'
-import * as _ from 'lodash'
-import * as PropTypes from 'prop-types'
 import * as React from 'react'
-// @ts-ignore
-import { ThemeContext } from 'react-fela'
+import * as PropTypes from 'prop-types'
+import * as _ from 'lodash'
 
 import {
+  applyAccessibilityKeyHandlers,
   childrenExist,
+  AutoControlledComponent,
+  RenderResultConfig,
   ChildrenComponentProps,
   ContentComponentProps,
   StyledComponentProps,
@@ -22,27 +19,31 @@ import {
   setWhatInputSource,
   getOrGenerateIdFromShorthand,
   createShorthandFactory,
+  ShorthandFactory,
 } from '../../utils'
-import { ShorthandValue, FluentComponentStaticProps, ProviderContextPrepared } from '../../types'
+import { ShorthandValue, Props } from '../../types'
 import {
   ALIGNMENTS,
   POSITIONS,
   Popper,
   BasicPositioningProps,
   PopperChildrenProps,
-  Alignment,
-  Position,
 } from '../../utils/positioner'
-import PortalInner from '../Portal/PortalInner'
 import TooltipContent, { TooltipContentProps } from './TooltipContent'
+import PortalInner from '../Portal/PortalInner'
 
 export interface TooltipSlotClassNames {
   content: string
 }
 
+export interface TooltipState {
+  open: boolean
+  contentId: string
+}
+
 export interface TooltipProps
   extends StyledComponentProps<TooltipProps>,
-    ChildrenComponentProps<React.ReactElement>,
+    ChildrenComponentProps,
     ContentComponentProps<ShorthandValue<TooltipContentProps>>,
     BasicPositioningProps {
   /**
@@ -50,7 +51,7 @@ export interface TooltipProps
    * @default tooltipBehavior
    * @available tooltipAsLabelBehavior
    * */
-  accessibility?: Accessibility<TooltipBehaviorProps>
+  accessibility?: Accessibility
 
   /** Additional CSS class name(s) to apply.  */
   className?: string
@@ -68,16 +69,7 @@ export interface TooltipProps
   open?: boolean
 
   /**
-   * Event for request to change 'open' value.
-   * @param event - React's original SyntheticEvent.
-   * @param data - All props and proposed value.
-   */
-  onOpenChange?: (
-    e: React.MouseEvent | React.FocusEvent | React.KeyboardEvent,
-    data: TooltipProps,
-  ) => void
-
-  /**
+   * TODO: should this be centralized?
    * Offset value to apply to rendered component. Accepts the following units:
    * - px or unit-less, interpreted as pixels
    * - %, percentage relative to the length of the trigger element
@@ -106,206 +98,229 @@ export interface TooltipProps
  * @accessibility
  * Implements [ARIA Tooltip](https://www.w3.org/TR/wai-aria-practices-1.1/#tooltip) design pattern.
  */
-const Tooltip: React.FC<TooltipProps> &
-  FluentComponentStaticProps<TooltipProps> & {
-    Content: typeof TooltipContent
-    slotClassNames: TooltipSlotClassNames
-  } = props => {
-  const context: ProviderContextPrepared = React.useContext(ThemeContext)
-  const { setStart, setEnd } = useTelemetry(Tooltip.displayName, context.telemetry)
-  setStart()
-
-  const {
-    accessibility,
-    align,
-    children,
-    content,
-    mountNode,
-    mouseLeaveDelay,
-    offset,
-    pointing,
-    position,
-    target,
-    trigger,
-  } = props
-
-  const [open, setOpen] = useAutoControlled({
-    defaultValue: props.defaultOpen,
-    value: props.open,
-
-    initialValue: false,
-  })
-
-  const contentRef = React.useRef<HTMLElement>()
-  const pointerTargetRef = React.useRef<HTMLDivElement>()
-  const triggerRef = React.useRef<HTMLElement>()
-
-  const closeTimeoutId = React.useRef<number>()
-  // TODO: Consider `getOrGenerateIdFromShorthand()` as hook and make it SSR safe
-  const contentId = React.useRef<string>()
-  contentId.current = getOrGenerateIdFromShorthand('tooltip-content-', content, contentId.current)
-
-  const getA11Props = useAccessibility(accessibility, {
-    actionHandlers: {
-      close: e => {
-        setTooltipOpen(false, e)
-        e.stopPropagation()
-        e.preventDefault()
-      },
-    },
-    mapPropsToBehavior: () => ({
-      'aria-describedby': props['aria-describedby'],
-      'aria-label': props['aria-label'],
-      'aria-labelledby': props['aria-labelledby'],
-      contentId: contentId.current,
-      open,
+export default class Tooltip extends AutoControlledComponent<TooltipProps, TooltipState> {
+  static displayName = 'Tooltip'
+
+  static className = 'ui-tooltip'
+
+  static slotClassNames: TooltipSlotClassNames = {
+    content: `${Tooltip.className}__content`,
+  }
+
+  static Content = TooltipContent
+
+  static propTypes = {
+    ...commonPropTypes.createCommon({
+      as: false,
+      content: false,
     }),
-  })
-
-  const getContentOverrideProps = (
-    predefinedProps: TooltipContentProps,
-  ): TooltipContentProps &
-    Pick<React.DOMAttributes<HTMLDivElement>, 'onMouseEnter' | 'onMouseLeave'> => ({
-    onMouseEnter: (e: React.MouseEvent) => {
-      setTooltipOpen(true, e)
-      _.invoke(predefinedProps, 'onMouseEnter', e)
-    },
-    onMouseLeave: (e: React.MouseEvent) => {
-      setTooltipOpen(false, e)
-      _.invoke(predefinedProps, 'onMouseLeave', e)
-    },
-  })
-
-  const renderPopperChildren = (popperProps: PopperChildrenProps) => {
-    const tooltipContent = TooltipContent.create(content, {
-      defaultProps: () =>
-        getA11Props('tooltip', {
-          open,
-          placement: popperProps.placement,
-          pointing,
-          pointerRef: pointerTargetRef,
-        }),
-      generateKey: false,
-      overrideProps: getContentOverrideProps,
-    })
+    align: PropTypes.oneOf(ALIGNMENTS),
+    defaultOpen: PropTypes.bool,
+    inline: PropTypes.bool,
+    mountNode: customPropTypes.domNode,
+    mouseLeaveDelay: PropTypes.number,
+    offset: PropTypes.string,
+    open: PropTypes.bool,
+    onOpenChange: PropTypes.func,
+    pointing: PropTypes.bool,
+    position: PropTypes.oneOf(POSITIONS),
+    target: customPropTypes.domNode,
+    trigger: customPropTypes.every([customPropTypes.disallow(['children']), PropTypes.element]),
+    content: customPropTypes.shorthandAllowingChildren,
+  }
 
-    return tooltipContent ? <Ref innerRef={contentRef}>{tooltipContent}</Ref> : null
+  static defaultProps: TooltipProps = {
+    align: 'center',
+    position: 'above',
+    mouseLeaveDelay: 10,
+    pointing: true,
+    accessibility: tooltipAsLabelBehavior,
   }
 
-  const shouldStayOpen = (e: React.FocusEvent) =>
-    _.invoke(e, 'currentTarget.contains', e.relatedTarget) ||
-    _.invoke(contentRef.current, 'contains', e.relatedTarget)
+  static autoControlledProps = ['open']
 
-  const trySetOpen = (
-    newValue: boolean,
-    e: React.MouseEvent | React.FocusEvent | React.KeyboardEvent,
-  ) => {
-    setOpen(newValue)
-    _.invoke(props, 'onOpenChange', e, { ...props, ...{ open: newValue } })
+  static create: ShorthandFactory<TooltipProps>
+
+  pointerTargetRef = React.createRef<HTMLDivElement>()
+  triggerRef = React.createRef<HTMLElement>()
+  contentRef = React.createRef<HTMLElement>()
+  closeTimeoutId
+
+  actionHandlers = {
+    close: e => {
+      this.setTooltipOpen(false, e)
+      e.stopPropagation()
+      e.preventDefault()
+    },
   }
 
-  const setTooltipOpen = (newOpen: boolean, e: React.MouseEvent | React.KeyboardEvent) => {
-    clearTimeout(closeTimeoutId.current)
+  getInitialAutoControlledState(): Partial<TooltipState> {
+    return { open: false }
+  }
 
-    if (newOpen) {
-      trySetOpen(true, e)
-    } else {
-      closeTimeoutId.current = context.target.defaultView.setTimeout(() => {
-        trySetOpen(false, e)
-      }, mouseLeaveDelay)
+  static getAutoControlledStateFromProps(
+    props: TooltipProps,
+    state: TooltipState,
+  ): Partial<TooltipState> {
+    return {
+      contentId: getOrGenerateIdFromShorthand('tooltip-content-', props.content, state.contentId),
     }
   }
 
-  const triggerNode: React.ReactElement | undefined = childrenExist(children) ? children : trigger
-  const triggerElement = triggerNode && React.Children.only(triggerNode)
+  renderComponent({
+    classes,
+    rtl,
+    accessibility,
+  }: RenderResultConfig<TooltipProps>): React.ReactNode {
+    const { mountNode, children, trigger } = this.props
+    const tooltipContent = this.renderTooltipContent(classes.content, rtl, accessibility)
+
+    const triggerNode = childrenExist(children) ? children : trigger
+    const triggerElement = triggerNode && (React.Children.only(triggerNode) as React.ReactElement)
+    const triggerProps = this.getTriggerProps(triggerElement)
+
+    return (
+      <>
+        {triggerElement && (
+          <Ref innerRef={this.triggerRef}>
+            {React.cloneElement(triggerElement, {
+              ...accessibility.attributes.trigger,
+              ...triggerProps,
+              ...applyAccessibilityKeyHandlers(accessibility.keyHandlers.trigger, triggerProps),
+            })}
+          </Ref>
+        )}
+        <PortalInner mountNode={mountNode}>{tooltipContent}</PortalInner>
+      </>
+    )
+  }
 
-  const triggerProps: React.HTMLAttributes<HTMLElement> = {
-    onFocus: (e, ...args) => {
+  getTriggerProps(triggerElement) {
+    const triggerProps: Props = {}
+
+    triggerProps.onFocus = (e, ...args) => {
       if (isFromKeyboard()) {
-        trySetOpen(true, e)
+        this.trySetOpen(true, e)
       }
       _.invoke(triggerElement, 'props.onFocus', e, ...args)
-    },
-    onBlur: (e, ...args) => {
-      if (!shouldStayOpen(e)) {
-        trySetOpen(false, e)
+    }
+    triggerProps.onBlur = (e, ...args) => {
+      if (!this.shouldStayOpen(e)) {
+        this.trySetOpen(false, e)
       }
       _.invoke(triggerElement, 'props.onBlur', e, ...args)
-    },
-    onMouseEnter: (e, ...args) => {
-      setTooltipOpen(true, e)
-      setWhatInputSource(context.target, 'mouse')
+    }
+
+    triggerProps.onMouseEnter = (e, ...args) => {
+      this.setTooltipOpen(true, e)
+      setWhatInputSource('mouse')
       _.invoke(triggerElement, 'props.onMouseEnter', e, ...args)
-    },
-    onMouseLeave: (e, ...args) => {
-      setTooltipOpen(false, e)
+    }
+    triggerProps.onMouseLeave = (e, ...args) => {
+      this.setTooltipOpen(false, e)
       _.invoke(triggerElement, 'props.onMouseLeave', e, ...args)
-    },
+    }
+
+    return triggerProps
   }
 
-  const element = (
-    <>
-      {triggerElement && (
-        <Ref innerRef={triggerRef}>
-          {React.cloneElement(triggerElement, getA11Props('trigger', triggerProps))}
-        </Ref>
-      )}
-      <PortalInner mountNode={mountNode}>
-        <Popper
-          pointerTargetRef={pointerTargetRef}
-          align={align}
-          offset={offset}
-          position={position}
-          enabled={open}
-          rtl={context.rtl}
-          targetRef={target || triggerRef}
-          children={renderPopperChildren}
-        />
-      </PortalInner>
-    </>
-  )
-  setEnd()
-
-  return element
-}
+  getContentProps = (predefinedProps?) => {
+    const contentHandlerProps: Props = {}
 
-Tooltip.className = 'ui-tooltip'
-Tooltip.displayName = 'Tooltip'
+    contentHandlerProps.onMouseEnter = (e, contentProps) => {
+      this.setTooltipOpen(true, e)
+      _.invoke(predefinedProps, 'onMouseEnter', e, contentProps)
+    }
+    contentHandlerProps.onMouseLeave = (e, contentProps) => {
+      this.setTooltipOpen(false, e)
+      _.invoke(predefinedProps, 'onMouseLeave', e, contentProps)
+    }
 
-Tooltip.slotClassNames = {
-  content: `${Tooltip.className}__content`,
-}
+    return contentHandlerProps
+  }
 
-Tooltip.defaultProps = {
-  align: 'center',
-  position: 'above',
-  mouseLeaveDelay: 10,
-  pointing: true,
-  accessibility: tooltipAsLabelBehavior,
-}
-Tooltip.propTypes = {
-  ...commonPropTypes.createCommon({
-    as: false,
-    content: false,
-  }),
-  align: PropTypes.oneOf<Alignment>(ALIGNMENTS),
-  children: PropTypes.element,
-  defaultOpen: PropTypes.bool,
-  mountNode: customPropTypes.domNode,
-  mouseLeaveDelay: PropTypes.number,
-  offset: PropTypes.string,
-  open: PropTypes.bool,
-  onOpenChange: PropTypes.func,
-  pointing: PropTypes.bool,
-  position: PropTypes.oneOf<Position>(POSITIONS),
-  target: customPropTypes.domNode,
-  trigger: customPropTypes.every([customPropTypes.disallow(['children']), PropTypes.element]),
-  content: customPropTypes.shorthandAllowingChildren,
-}
-Tooltip.handledProps = Object.keys(Tooltip.propTypes) as any
+  shouldStayOpen = e =>
+    _.invoke(e, 'currentTarget.contains', e.relatedTarget) ||
+    _.invoke(this.contentRef.current, 'contains', e.relatedTarget)
+
+  renderTooltipContent(
+    tooltipPositionClasses: string,
+    rtl: boolean,
+    accessibility: ReactAccessibilityBehavior,
+  ): JSX.Element {
+    const { align, position, target, offset } = this.props
+    const { open } = this.state
+
+    return (
+      <Popper
+        pointerTargetRef={this.pointerTargetRef}
+        align={align}
+        offset={offset}
+        position={position}
+        enabled={open}
+        rtl={rtl}
+        targetRef={target ? toRefObject(target) : this.triggerRef}
+        children={this.renderPopperChildren.bind(this, tooltipPositionClasses, rtl, accessibility)}
+      />
+    )
+  }
 
-Tooltip.Content = TooltipContent
+  renderPopperChildren = (
+    tooltipPositionClasses: string,
+    rtl: boolean,
+    accessibility: ReactAccessibilityBehavior,
+    { placement }: PopperChildrenProps,
+  ) => {
+    const { content, pointing } = this.props
+
+    const tooltipContentAttributes = {
+      ...(rtl && { dir: 'rtl' }),
+      ...accessibility.attributes.tooltip,
+      ...accessibility.keyHandlers.tooltip,
+      className: tooltipPositionClasses,
+      ...this.getContentProps(),
+    }
 
-Tooltip.create = createShorthandFactory({ Component: Tooltip, mappedProp: 'content' })
+    const tooltipContent = Tooltip.Content.create(content, {
+      defaultProps: () => ({
+        ...tooltipContentAttributes,
+        open: this.state.open,
+        placement,
+        pointing,
+        pointerRef: this.pointerTargetRef,
+      }),
+      generateKey: false,
+      overrideProps: this.getContentProps,
+    })
+
+    return <Ref innerRef={this.contentRef}>{tooltipContent}</Ref>
+  }
+
+  trySetOpen(newValue: boolean, eventArgs: any) {
+    this.setState({ open: newValue })
+    _.invoke(this.props, 'onOpenChange', eventArgs, { ...this.props, ...{ open: newValue } })
+  }
+
+  setTooltipOpen(newOpen, e) {
+    clearTimeout(this.closeTimeoutId)
+    newOpen ? this.trySetOpen(true, e) : this.scheduleTooltipClose(e)
+  }
 
-export default Tooltip
+  scheduleTooltipClose = e => {
+    const { mouseLeaveDelay } = this.props
+
+    this.closeTimeoutId = setTimeout(() => {
+      this.trySetOpen(false, e)
+    }, mouseLeaveDelay)
+  }
+
+  close = (e, onClose?: Function) => {
+    if (this.state.open) {
+      this.trySetOpen(false, e)
+      onClose && onClose()
+      e.stopPropagation()
+    }
+  }
+}
+
+Tooltip.create = createShorthandFactory({ Component: Tooltip, mappedProp: 'content' })
diff --git a/packages/react/src/components/Tooltip/TooltipContent.tsx b/packages/react/src/components/Tooltip/TooltipContent.tsx
index 41af76b4a4..a1894582de 100644
--- a/packages/react/src/components/Tooltip/TooltipContent.tsx
+++ b/packages/react/src/components/Tooltip/TooltipContent.tsx
@@ -1,35 +1,23 @@
-import { Accessibility } from '@fluentui/accessibility'
-import {
-  getElementType,
-  getUnhandledProps,
-  useAccessibility,
-  useStyles,
-  useTelemetry,
-} from '@fluentui/react-bindings'
-import * as customPropTypes from '@fluentui/react-proptypes'
-import Popper from 'popper.js'
-import * as PropTypes from 'prop-types'
 import * as React from 'react'
-// @ts-ignore
-import { ThemeContext } from 'react-fela'
+import * as PropTypes from 'prop-types'
+import * as customPropTypes from '@fluentui/react-proptypes'
 
 import {
   childrenExist,
   createShorthandFactory,
+  UIComponent,
+  RenderResultConfig,
   UIComponentProps,
   ChildrenComponentProps,
   ContentComponentProps,
   commonPropTypes,
   rtlTextContainer,
+  ShorthandFactory,
 } from '../../utils'
+import { Accessibility } from '@fluentui/accessibility'
 
 import { PopperChildrenProps } from '../../utils/positioner'
-import {
-  FluentComponentStaticProps,
-  ProviderContextPrepared,
-  WithAsProp,
-  withSafeTypeForAs,
-} from '../../types'
+import { WithAsProp, withSafeTypeForAs } from '../../types'
 
 export interface TooltipContentProps
   extends UIComponentProps,
@@ -38,7 +26,7 @@ export interface TooltipContentProps
   /**
    * Accessibility behavior if overridden by the user.
    */
-  accessibility?: Accessibility<never>
+  accessibility?: Accessibility
 
   /** An actual placement value from Popper. */
   placement?: PopperChildrenProps['placement']
@@ -53,95 +41,42 @@ export interface TooltipContentProps
   pointerRef?: React.Ref<HTMLDivElement>
 }
 
-const TooltipContent: React.FC<WithAsProp<TooltipContentProps>> &
-  FluentComponentStaticProps<TooltipContentProps> = props => {
-  const context: ProviderContextPrepared = React.useContext(ThemeContext)
-  const { setStart, setEnd } = useTelemetry(TooltipContent.displayName, context.telemetry)
-  setStart()
-
-  const {
-    accessibility,
-    children,
-    className,
-    content,
-    design,
-    open,
-    placement,
-    pointing,
-    pointerRef,
-    styles,
-    variables,
-  } = props
-
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: TooltipContent.displayName,
-    rtl: context.rtl,
-  })
-  const { classes } = useStyles(TooltipContent.displayName, {
-    className: TooltipContent.className,
-    mapPropsToStyles: () => ({
-      open,
-      placement,
-      pointing,
-    }),
-    mapPropsToInlineStyles: () => ({
-      className,
-      design,
-      styles,
-      variables,
-    }),
-    rtl: context.rtl,
-  })
+class TooltipContent extends UIComponent<WithAsProp<TooltipContentProps>> {
+  static create: ShorthandFactory<TooltipContentProps>
 
-  const ElementType = getElementType(props)
-  const unhandledProps = getUnhandledProps(TooltipContent.handledProps, props)
+  static displayName = 'TooltipContent'
+  static className = 'ui-tooltip__content'
 
-  const element = (
-    <ElementType
-      {...getA11Props('root', {
-        className: classes.root,
-        ...rtlTextContainer.getAttributes({ forElements: [children, content] }),
-        ...unhandledProps,
-      })}
-    >
-      {open && pointing && <div className={classes.pointer} ref={pointerRef} />}
+  static propTypes = {
+    ...commonPropTypes.createCommon(),
+    placement: PropTypes.string,
+    pointing: PropTypes.bool,
+    pointerRef: customPropTypes.ref,
+  }
 
-      <div {...getA11Props('content', { className: classes.content })}>
-        {childrenExist(children) ? children : content}
-      </div>
-    </ElementType>
-  )
-  setEnd()
-
-  return element
-}
-
-TooltipContent.displayName = 'TooltipContent'
-TooltipContent.className = 'ui-tooltip__content'
-
-TooltipContent.propTypes = {
-  ...commonPropTypes.createCommon(),
-  placement: PropTypes.oneOf<Popper.Placement>([
-    'auto-start',
-    'auto',
-    'auto-end',
-    'top-start',
-    'top',
-    'top-end',
-    'right-start',
-    'right',
-    'right-end',
-    'bottom-end',
-    'bottom',
-    'bottom-start',
-    'left-end',
-    'left',
-    'left-start',
-  ]),
-  pointing: PropTypes.bool,
-  pointerRef: customPropTypes.ref,
+  renderComponent({
+    accessibility,
+    ElementType,
+    classes,
+    unhandledProps,
+    styles,
+  }: RenderResultConfig<TooltipContentProps>): React.ReactNode {
+    const { children, content, open, pointing, pointerRef } = this.props
+
+    return (
+      <ElementType
+        className={classes.root}
+        {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
+        {...accessibility.attributes.root}
+        {...unhandledProps}
+      >
+        {open && pointing && <div className={classes.pointer} ref={pointerRef} />}
+
+        <div className={classes.content}>{childrenExist(children) ? children : content}</div>
+      </ElementType>
+    )
+  }
 }
-TooltipContent.handledProps = Object.keys(TooltipContent.propTypes) as any
 
 TooltipContent.create = createShorthandFactory({ Component: TooltipContent, mappedProp: 'content' })
 
diff --git a/packages/react/src/themes/teams-dark/colors.ts b/packages/react/src/themes/teams-dark/colors.ts
index 4230d49171..31e0a7ee28 100644
--- a/packages/react/src/themes/teams-dark/colors.ts
+++ b/packages/react/src/themes/teams-dark/colors.ts
@@ -235,7 +235,6 @@ export const colorScheme: ColorSchemeMapping = {
 
     foregroundHover: colors.white,
     backgroundHover: colors.ruby[600],
-    backgroundHover1: colors.red[400],
 
     foregroundPressed: colors.white,
     backgroundPressed: colors.ruby[700],
diff --git a/packages/react/src/themes/teams-dark/componentVariables.ts b/packages/react/src/themes/teams-dark/componentVariables.ts
index 9efb95edff..2d8cf3386f 100644
--- a/packages/react/src/themes/teams-dark/componentVariables.ts
+++ b/packages/react/src/themes/teams-dark/componentVariables.ts
@@ -14,6 +14,6 @@ export { default as Menu } from './components/Menu/menuVariables'
 export { default as Icon } from './components/Icon/iconVariables'
 export { default as Reaction } from './components/Reaction/reactionVariables'
 export { default as Alert } from './components/Alert/alertVariables'
-export { default as Provider } from './components/Provider/providerVariables'
+export { default as ProviderBox } from './components/Provider/providerBoxVariables'
 export { default as Dropdown } from './components/Dropdown/dropdownVariables'
 export { default as Label } from './components/Label/labelVariables'
diff --git a/packages/react/src/themes/teams-dark/components/Provider/providerBoxVariables.ts b/packages/react/src/themes/teams-dark/components/Provider/providerBoxVariables.ts
new file mode 100644
index 0000000000..5294222dad
--- /dev/null
+++ b/packages/react/src/themes/teams-dark/components/Provider/providerBoxVariables.ts
@@ -0,0 +1,6 @@
+import { ProviderBoxVariables } from '../../../teams/components/Provider/providerBoxVariables'
+
+export default (siteVariables): Partial<ProviderBoxVariables> => ({
+  scrollbarThumbBackgroundColor: siteVariables.colors.grey[450],
+  scrollbarThumbHoverBackgroundColor: siteVariables.colors.grey[400],
+})
diff --git a/packages/react/src/themes/teams-dark/components/Provider/providerVariables.ts b/packages/react/src/themes/teams-dark/components/Provider/providerVariables.ts
deleted file mode 100644
index 6474d9b9e4..0000000000
--- a/packages/react/src/themes/teams-dark/components/Provider/providerVariables.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { ProviderVariables } from '../../../teams/components/Provider/providerVariables'
-
-export default (siteVariables): Partial<ProviderVariables> => ({
-  scrollbarThumbBackgroundColor: siteVariables.colors.grey[450],
-  scrollbarThumbHoverBackgroundColor: siteVariables.colors.grey[400],
-})
diff --git a/packages/react/src/themes/teams-high-contrast/colors.ts b/packages/react/src/themes/teams-high-contrast/colors.ts
index eb7626f747..0241340811 100644
--- a/packages/react/src/themes/teams-high-contrast/colors.ts
+++ b/packages/react/src/themes/teams-high-contrast/colors.ts
@@ -237,7 +237,6 @@ export const colorScheme: ColorSchemeMapping = {
 
     foregroundHover: colors.black,
     backgroundHover: accessibleYellow,
-    backgroundHover1: accessibleYellow,
 
     foregroundPressed: colors.black,
     backgroundPressed: accessibleYellow,
diff --git a/packages/react/src/themes/teams-high-contrast/componentVariables.ts b/packages/react/src/themes/teams-high-contrast/componentVariables.ts
index 4f53420e2d..5a5a4b3855 100644
--- a/packages/react/src/themes/teams-high-contrast/componentVariables.ts
+++ b/packages/react/src/themes/teams-high-contrast/componentVariables.ts
@@ -19,7 +19,7 @@ export { default as HierarchicalTreeTitle } from './components/HierarchicalTree/
 export { default as Status } from './components/Status/statusVariables'
 export { default as Reaction } from './components/Reaction/reactionVariables'
 export { default as Alert } from './components/Alert/alertVariables'
-export { default as Provider } from './components/Provider/providerVariables'
+export { default as ProviderBox } from './components/Provider/providerBoxVariables'
 export { default as Dropdown } from './components/Dropdown/dropdownVariables'
 export { default as Label } from './components/Label/labelVariables'
 export { default as TooltipContent } from './components/Tooltip/tooltipContentVariables'
diff --git a/packages/react/src/themes/teams-high-contrast/components/Provider/providerBoxVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Provider/providerBoxVariables.ts
new file mode 100644
index 0000000000..238cfdb995
--- /dev/null
+++ b/packages/react/src/themes/teams-high-contrast/components/Provider/providerBoxVariables.ts
@@ -0,0 +1,6 @@
+import { ProviderBoxVariables } from '../../../teams/components/Provider/providerBoxVariables'
+
+export default (siteVariables): Partial<ProviderBoxVariables> => ({
+  scrollbarThumbBackgroundColor: siteVariables.colors.white,
+  scrollbarThumbHoverBackgroundColor: siteVariables.colors.white,
+})
diff --git a/packages/react/src/themes/teams-high-contrast/components/Provider/providerVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Provider/providerVariables.ts
deleted file mode 100644
index 95a9e75347..0000000000
--- a/packages/react/src/themes/teams-high-contrast/components/Provider/providerVariables.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { ProviderVariables } from '../../../teams/components/Provider/providerVariables'
-
-export default (siteVariables): Partial<ProviderVariables> => ({
-  scrollbarThumbBackgroundColor: siteVariables.colors.white,
-  scrollbarThumbHoverBackgroundColor: siteVariables.colors.white,
-})
diff --git a/packages/react/src/themes/teams/animations/index.ts b/packages/react/src/themes/teams/animations/index.ts
index 0b593c1ec3..bc091d537f 100755
--- a/packages/react/src/themes/teams/animations/index.ts
+++ b/packages/react/src/themes/teams/animations/index.ts
@@ -2,12 +2,4 @@ import scaleAnimations from './scale'
 import fadeAnimations from './fade'
 import slideAnimations from './slide'
 
-export default {
-  ...fadeAnimations,
-  ...scaleAnimations,
-  ...slideAnimations,
-  'carousel-slide-to-next-enter': slideAnimations.slideLeftEnterMedium,
-  'carousel-slide-to-next-exit': slideAnimations.slideLeftExitMedium,
-  'carousel-slide-to-previous-enter': slideAnimations.slideRightEnterMedium,
-  'carousel-slide-to-previous-exit': slideAnimations.slideRightExitMedium,
-}
+export default { ...fadeAnimations, ...scaleAnimations, ...slideAnimations }
diff --git a/packages/react/src/themes/teams/animations/slide.ts b/packages/react/src/themes/teams/animations/slide.ts
index 7babe13a43..dead01ce14 100755
--- a/packages/react/src/themes/teams/animations/slide.ts
+++ b/packages/react/src/themes/teams/animations/slide.ts
@@ -188,7 +188,7 @@ const slideAnimations = {
     fillMode: 'forwards',
   },
   // Slides object in from left to right
-  slideRightEnterMedium: {
+  SlideRightEnterMedium: {
     keyframe: ({ distance }) => ({
       '0%': {
         transform: `translateX(-${distance})`,
diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts
index a08441774f..bdb5771c0f 100644
--- a/packages/react/src/themes/teams/colors.ts
+++ b/packages/react/src/themes/teams/colors.ts
@@ -441,11 +441,8 @@ export const colorScheme: ColorSchemeMapping<ColorScheme, TeamsColorNames> = {
     background2: colors.ruby[500],
     background3: colors.red[400],
     border: colors.red[100],
-
     foregroundHover: colors.white,
     backgroundHover: colors.ruby[600],
-    backgroundHover1: colors.red[400],
-
     foregroundPressed: colors.white,
     backgroundPressed: colors.ruby[700],
   }),
diff --git a/packages/react/src/themes/teams/componentStyles.ts b/packages/react/src/themes/teams/componentStyles.ts
index d30b024a15..2da1609a24 100644
--- a/packages/react/src/themes/teams/componentStyles.ts
+++ b/packages/react/src/themes/teams/componentStyles.ts
@@ -67,9 +67,10 @@ export { default as MenuDivider } from './components/Menu/menuDividerStyles'
 
 export { default as MenuButton } from './components/MenuButton/menuButtonStyles'
 
+export { default as Popup } from './components/Popup/popupStyles'
 export { default as PopupContent } from './components/Popup/popupContentStyles'
 
-export { default as Provider } from './components/Provider/providerStyles'
+export { default as ProviderBox } from './components/Provider/providerBoxStyles'
 
 export { default as RadioGroupItem } from './components/RadioGroup/radioGroupItemStyles'
 
@@ -102,8 +103,11 @@ export { default as Tree } from './components/Tree/treeStyles'
 export { default as TreeItem } from './components/Tree/treeItemStyles'
 export { default as TreeTitle } from './components/Tree/treeTitleStyles'
 
+export { default as Animation } from './components/Animation/animationStyles'
+
 export { default as Video } from './components/Video/videoStyles'
 
+export { default as Tooltip } from './components/Tooltip/tooltipStyles'
 export { default as TooltipContent } from './components/Tooltip/tooltipContentStyles'
 
 export { default as Carousel } from './components/Carousel/carouselStyles'
diff --git a/packages/react/src/themes/teams/componentVariables.ts b/packages/react/src/themes/teams/componentVariables.ts
index 60276e2ae7..025fd37ba0 100644
--- a/packages/react/src/themes/teams/componentVariables.ts
+++ b/packages/react/src/themes/teams/componentVariables.ts
@@ -54,9 +54,10 @@ export { default as Menu } from './components/Menu/menuVariables'
 export { default as MenuItem } from './components/Menu/menuItemVariables'
 export { default as MenuDivider } from './components/Menu/menuDividerVariables'
 
+export { default as Popup } from './components/Popup/popupVariables'
 export { default as PopupContent } from './components/Popup/popupContentVariables'
 
-export { default as Provider } from './components/Provider/providerVariables'
+export { default as ProviderBox } from './components/Provider/providerBoxVariables'
 
 export { default as RadioGroupItem } from './components/RadioGroup/radioGroupItemVariables'
 
@@ -84,8 +85,11 @@ export { default as ToolbarMenuRadioGroup } from './components/Toolbar/toolbarMe
 
 export { default as TreeTitle } from './components/Tree/treeTitleVariables'
 
+export { default as Animation } from './components/Animation/animationVariables'
+
 export { default as Video } from './components/Video/videoVariables'
 
+export { default as Tooltip } from './components/Tooltip/tooltipVariables'
 export { default as TooltipContent } from './components/Tooltip/tooltipContentVariables'
 
 export { default as SplitButton } from './components/SplitButton/splitButtonVariables'
diff --git a/packages/react/src/themes/teams/components/Accordion/accordionTitleStyles.ts b/packages/react/src/themes/teams/components/Accordion/accordionTitleStyles.ts
index 038fa040ee..16f1d2239d 100644
--- a/packages/react/src/themes/teams/components/Accordion/accordionTitleStyles.ts
+++ b/packages/react/src/themes/teams/components/Accordion/accordionTitleStyles.ts
@@ -2,11 +2,11 @@ import { ComponentSlotStylesPrepared } from '@fluentui/styles'
 import { AccordionTitleProps } from '../../../../components/Accordion/AccordionTitle'
 
 const accordionTitleStyles: ComponentSlotStylesPrepared<AccordionTitleProps> = {
-  root: ({ props: p }) => ({
+  root: () => ({
     display: 'inline-block',
     verticalAlign: 'middle',
     padding: '.5rem 0',
-    cursor: p.disabled ? 'default' : 'pointer',
+    cursor: 'pointer',
   }),
   indicator: () => ({
     userSelect: 'none',
diff --git a/packages/react/src/themes/teams/components/Animation/animationStyles.ts b/packages/react/src/themes/teams/components/Animation/animationStyles.ts
new file mode 100644
index 0000000000..aeacc8904d
--- /dev/null
+++ b/packages/react/src/themes/teams/components/Animation/animationStyles.ts
@@ -0,0 +1,22 @@
+import {
+  ComponentAnimationProp,
+  unstable_createAnimationStyles as createAnimationStyles,
+} from '@fluentui/react-bindings'
+
+export default {
+  root: ({ props: p, theme }) => {
+    const animation: ComponentAnimationProp = {
+      name: p.name,
+      keyframeParams: p.keyframeParams,
+      duration: p.duration,
+      delay: p.delay,
+      iterationCount: p.iterationCount,
+      direction: p.direction,
+      fillMode: p.fillMode,
+      playState: p.playState,
+      timingFunction: p.timingFunction,
+    }
+
+    return createAnimationStyles(animation, theme)
+  },
+}
diff --git a/packages/react/src/themes/teams/components/Animation/animationVariables.ts b/packages/react/src/themes/teams/components/Animation/animationVariables.ts
new file mode 100644
index 0000000000..ead516c976
--- /dev/null
+++ b/packages/react/src/themes/teams/components/Animation/animationVariables.ts
@@ -0,0 +1 @@
+export default () => {}
diff --git a/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts b/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts
index a872b705eb..1db07b8a24 100644
--- a/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts
+++ b/packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts
@@ -75,7 +75,7 @@ const attachmentStyles: ComponentSlotStylesPrepared<AttachmentProps, AttachmentV
       ...getIconFillOrOutlineStyles({ outline: true }),
 
       ':hover': {
-        ...iconFilledStyles,
+        iconFilledStyles,
         background: 'transparent',
       },
 
diff --git a/packages/react/src/themes/teams/components/Carousel/carouselItemStyles.ts b/packages/react/src/themes/teams/components/Carousel/carouselItemStyles.ts
index 1708a2459b..3ae54e5df2 100644
--- a/packages/react/src/themes/teams/components/Carousel/carouselItemStyles.ts
+++ b/packages/react/src/themes/teams/components/Carousel/carouselItemStyles.ts
@@ -9,9 +9,6 @@ const carouselItemStyles: ComponentSlotStylesPrepared<
 > = {
   root: ({ variables: v }): ICSSInJSStyle => ({
     width: pxToRem(v.width),
-    ':focus': {
-      outline: 'none',
-    },
   }),
 }
 
diff --git a/packages/react/src/themes/teams/components/Carousel/carouselStyles.ts b/packages/react/src/themes/teams/components/Carousel/carouselStyles.ts
index 8c41d66805..5b6c156956 100644
--- a/packages/react/src/themes/teams/components/Carousel/carouselStyles.ts
+++ b/packages/react/src/themes/teams/components/Carousel/carouselStyles.ts
@@ -10,23 +10,18 @@ const carouselStyles: ComponentSlotStylesPrepared<
   root: (): ICSSInJSStyle => ({
     display: 'inline-block',
   }),
-  itemsContainerWrapper: ({ variables: v, props: p }): ICSSInJSStyle => ({
+  itemsContainerWrapper: ({ variables: v }): ICSSInJSStyle => ({
     display: 'flex',
     width: pxToRem(v.width),
     overflowX: 'hidden',
-    border: '1px solid transparent',
-
-    ...(p.shouldFocusContainer &&
-      p.isFromKeyboard && {
-        border: `1px solid ${v.focusOuterBorderColor}`,
-        borderRadius: v.focusOuterBorderRadius,
-      }),
   }),
-  itemsContainer: (): ICSSInJSStyle => ({
+  itemsContainer: ({ props: p, variables: v }): ICSSInJSStyle => ({
     padding: 0,
     margin: 0,
     display: 'flex',
     listStyle: 'none',
+    transform: `translateX(${pxToRem(-v.width * p.activeIndex)})`,
+    transitionDuration: '.4s',
     willChange: 'transform',
   }),
   paddleNext: ({ props: p, variables: v }): ICSSInJSStyle => ({
diff --git a/packages/react/src/themes/teams/components/Carousel/carouselVariables.ts b/packages/react/src/themes/teams/components/Carousel/carouselVariables.ts
index ae14d0b7d9..4ba057134d 100644
--- a/packages/react/src/themes/teams/components/Carousel/carouselVariables.ts
+++ b/packages/react/src/themes/teams/components/Carousel/carouselVariables.ts
@@ -3,8 +3,6 @@ export interface CarouselVariables {
   height: number
   paddlePreviousSize: number
   paddleNextSize: number
-  focusOuterBorderColor: string
-  focusOuterBorderRadius: string
 }
 
 export default (siteVars): CarouselVariables => ({
@@ -12,6 +10,4 @@ export default (siteVars): CarouselVariables => ({
   height: 300,
   paddlePreviousSize: 32,
   paddleNextSize: 32,
-  focusOuterBorderColor: siteVars.focusOuterBorderColor,
-  focusOuterBorderRadius: siteVars.borderRadius,
 })
diff --git a/packages/react/src/themes/teams/components/Chat/chatItemStyles.ts b/packages/react/src/themes/teams/components/Chat/chatItemStyles.ts
index 3e2f99fbc2..ee337e4c22 100644
--- a/packages/react/src/themes/teams/components/Chat/chatItemStyles.ts
+++ b/packages/react/src/themes/teams/components/Chat/chatItemStyles.ts
@@ -1,9 +1,9 @@
 import { ICSSInJSStyle, ComponentSlotStylesPrepared } from '@fluentui/styles'
 import { ChatItemVariables } from './chatItemVariables'
-import { ChatItemStylesProps } from '../../../../components/Chat/ChatItem'
+import { ChatItemProps } from '../../../../components/Chat/ChatItem'
 import { pxToRem } from '../../../../utils'
 
-const chatItemStyles: ComponentSlotStylesPrepared<ChatItemStylesProps, ChatItemVariables> = {
+const chatItemStyles: ComponentSlotStylesPrepared<ChatItemProps, ChatItemVariables> = {
   root: ({ props: p, variables: v }): ICSSInJSStyle => ({
     position: 'relative',
     ...((!p.attached || p.attached === 'top') && { paddingTop: pxToRem(16) }),
diff --git a/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts b/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts
index 99661574da..e0b3e7bf9a 100644
--- a/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts
+++ b/packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts
@@ -2,16 +2,16 @@ import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles'
 import * as _ from 'lodash'
 import {
   default as ChatMessage,
-  ChatMessageStylesProps,
+  ChatMessageProps,
+  ChatMessageState,
 } from '../../../../components/Chat/ChatMessage'
 import { ChatMessageVariables } from './chatMessageVariables'
 import { screenReaderContainerStyles } from '../../../../utils/accessibility/Styles/accessibilityStyles'
 import { pxToRem } from '../../../../utils'
-import initialPopperStyles from '../../../../utils/positioner/initialStyles'
 import getBorderFocusStyles from '../../getBorderFocusStyles'
 
 const chatMessageStyles: ComponentSlotStylesPrepared<
-  ChatMessageStylesProps,
+  ChatMessageProps & ChatMessageState,
   ChatMessageVariables
 > = {
   root: ({ props: p, variables: v, theme: { siteVariables } }): ICSSInJSStyle => ({
@@ -93,9 +93,7 @@ const chatMessageStyles: ComponentSlotStylesPrepared<
     borderRadius: v.borderRadius,
     boxShadow: v.actionMenuBoxShadow,
     // we need higher zIndex for the action menu in order to be displayed above the focus border of the chat message
-    zIndex: v.overlayZIndex,
-
-    ...(initialPopperStyles as ICSSInJSStyle),
+    zIndex: 1000,
 
     ...(_.isNil(v.showActionMenu) && {
       overflow: p.focused ? 'visible' : 'hidden',
@@ -131,7 +129,7 @@ const chatMessageStyles: ComponentSlotStylesPrepared<
       color: v.timestampColorMine,
     }),
     ...((p.attached === 'bottom' || p.attached === true) &&
-      !p.hasReactionGroup &&
+      !p.reactionGroup &&
       (screenReaderContainerStyles as ICSSInJSStyle)),
   }),
 
@@ -145,7 +143,7 @@ const chatMessageStyles: ComponentSlotStylesPrepared<
         textDecoration: 'underline',
       },
     },
-    ...(p.hasBadge &&
+    ...(p.badge &&
       p.badgePosition === 'end' && {
         marginRight: pxToRem(4),
       }),
@@ -162,14 +160,14 @@ const chatMessageStyles: ComponentSlotStylesPrepared<
       width: 'auto',
       borderRadius: '50%',
       top: pxToRem(4),
-      zIndex: v.zIndex,
+      zIndex: 1,
       [sidePosition]: 0,
       transform: p.badgePosition === 'start' ? 'translateX(-50%)' : 'translateX(50%)',
     }
   },
   reactionGroup: ({ props: p, variables: v }) => ({
     marginLeft: v.reactionGroupMarginLeft,
-    ...(p.hasBadge &&
+    ...(p.badge &&
       p.badgePosition === 'end' && {
         marginRight: pxToRem(2),
       }),
diff --git a/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts b/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts
index 0e57d41ada..b1bee0ca75 100644
--- a/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts
+++ b/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts
@@ -29,8 +29,6 @@ export interface ChatMessageVariables {
   reactionGroupBorderColor: string
   showActionMenu?: boolean
   timestampColorMine: string
-  zIndex: number
-  overlayZIndex: number
 }
 
 export default (siteVars): ChatMessageVariables => ({
@@ -62,6 +60,4 @@ export default (siteVars): ChatMessageVariables => ({
   reactionGroupBorderColor: 'transparent',
   showActionMenu: undefined,
   timestampColorMine: siteVars.colors.grey[500],
-  zIndex: siteVars.zIndexes.foreground,
-  overlayZIndex: siteVars.zIndexes.overlay,
 })
diff --git a/packages/react/src/themes/teams/components/Chat/chatStyles.ts b/packages/react/src/themes/teams/components/Chat/chatStyles.ts
index 6c4c2ca0a7..00cb692be6 100644
--- a/packages/react/src/themes/teams/components/Chat/chatStyles.ts
+++ b/packages/react/src/themes/teams/components/Chat/chatStyles.ts
@@ -1,9 +1,9 @@
 import { ICSSInJSStyle, ComponentSlotStylesPrepared } from '@fluentui/styles'
 import { ChatVariables } from './chatVariables'
-import { ChatStylesProps } from '../../../../components/Chat/Chat'
+import { ChatProps } from '../../../../components/Chat/Chat'
 import { pxToRem } from '../../../../utils'
 
-const chatStyles: ComponentSlotStylesPrepared<ChatStylesProps, ChatVariables> = {
+const chatStyles: ComponentSlotStylesPrepared<ChatProps, ChatVariables> = {
   root: ({ variables: v }): ICSSInJSStyle => ({
     backgroundColor: v.backgroundColor,
     border: `1px solid ${v.backgroundColor}`,
diff --git a/packages/react/src/themes/teams/components/Checkbox/checkboxStyles.ts b/packages/react/src/themes/teams/components/Checkbox/checkboxStyles.ts
index 2fae56b316..55249efc44 100644
--- a/packages/react/src/themes/teams/components/Checkbox/checkboxStyles.ts
+++ b/packages/react/src/themes/teams/components/Checkbox/checkboxStyles.ts
@@ -1,14 +1,12 @@
 import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles'
-import Checkbox, { CheckboxProps } from '../../../../components/Checkbox/Checkbox'
+import Checkbox, { CheckboxProps, CheckboxState } from '../../../../components/Checkbox/Checkbox'
 import { CheckboxVariables } from './checkboxVariables'
 import getBorderFocusStyles from '../../getBorderFocusStyles'
 
-export type CheckboxStylesProps = Pick<
-  CheckboxProps,
-  'checked' | 'disabled' | 'labelPosition' | 'toggle'
->
-
-const checkboxStyles: ComponentSlotStylesPrepared<CheckboxStylesProps, CheckboxVariables> = {
+const checkboxStyles: ComponentSlotStylesPrepared<
+  CheckboxProps & CheckboxState,
+  CheckboxVariables
+> = {
   root: ({ props: p, variables: v, theme: t }): ICSSInJSStyle => ({
     position: 'relative',
 
diff --git a/packages/react/src/themes/teams/components/Dialog/dialogVariables.ts b/packages/react/src/themes/teams/components/Dialog/dialogVariables.ts
index d7edbbd95c..46125fa610 100644
--- a/packages/react/src/themes/teams/components/Dialog/dialogVariables.ts
+++ b/packages/react/src/themes/teams/components/Dialog/dialogVariables.ts
@@ -38,7 +38,7 @@ export default (siteVariables): Partial<DialogVariables> => ({
   headerMargin: `0 0 ${pxToRem(8)} 0`,
 
   overlayBackground: 'rgba(37, 36, 36, .75)', // todo: update to a palette value when daisy has mapped one
-  overlayZIndex: siteVariables.zIndexes.overlay,
+  overlayZIndex: 1000,
 
   headerActionMargin: `${pxToRem(-3)} ${pxToRem(-8)} 0 0`,
 })
diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
index 63ae3beee5..97b441ebe1 100644
--- a/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
+++ b/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
@@ -148,7 +148,7 @@ const dropdownStyles: ComponentSlotStylesPrepared<DropdownPropsAndState, Dropdow
     borderStyle: 'solid',
     borderWidth: p.open ? v.listBorderWidth : '0px',
     borderColor: v.listBorderColor,
-    zIndex: v.overlayZIndex,
+    zIndex: 1000,
     maxHeight: v.listMaxHeight,
     overflowY: 'auto',
     width: getWidth(p, v),
diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts
index 96f5f5b5fe..fbca04bd67 100644
--- a/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts
+++ b/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts
@@ -41,7 +41,6 @@ export interface DropdownVariables {
   toggleIndicatorSize: string
   triggerButtonColorHover: string
   width: string
-  overlayZIndex: number
 }
 
 const [cornerRadius, _12px_asRem] = [3, 12].map(v => pxToRem(v))
@@ -83,7 +82,6 @@ export default (siteVars): DropdownVariables => ({
   toggleIndicatorSize: pxToRem(32),
   triggerButtonColorHover: siteVars.bodyColor,
   width: pxToRem(356),
-  overlayZIndex: siteVars.zIndexes.overlay,
 
   // these should only apply when there is content in the image/media slot:
   listItemHeaderFontSize: siteVars.fontSizes.medium,
diff --git a/packages/react/src/themes/teams/components/Embed/embedStyles.ts b/packages/react/src/themes/teams/components/Embed/embedStyles.ts
index db1e0e4106..41650535e5 100644
--- a/packages/react/src/themes/teams/components/Embed/embedStyles.ts
+++ b/packages/react/src/themes/teams/components/Embed/embedStyles.ts
@@ -29,7 +29,7 @@ export default {
       ':hover': {
         [`& .${Embed.slotClassNames.control}`]: {
           opacity: 1,
-          zIndex: v.zIndex,
+          zIndex: 1,
         },
       },
     }
diff --git a/packages/react/src/themes/teams/components/Embed/embedVariables.ts b/packages/react/src/themes/teams/components/Embed/embedVariables.ts
index cc9ea5461b..a2592cee96 100644
--- a/packages/react/src/themes/teams/components/Embed/embedVariables.ts
+++ b/packages/react/src/themes/teams/components/Embed/embedVariables.ts
@@ -4,7 +4,6 @@ export interface EmbedVariables {
   width: string
   height: string
   focusBorderColor: string
-  zIndex: number
 }
 
 export default (siteVariables): EmbedVariables => ({
@@ -14,5 +13,4 @@ export default (siteVariables): EmbedVariables => ({
   width: undefined,
   height: undefined,
   focusBorderColor: siteVariables.colors.brand[500],
-  zIndex: siteVariables.zIndexes.foreground,
 })
diff --git a/packages/react/src/themes/teams/components/Flex/flexItemStyles.ts b/packages/react/src/themes/teams/components/Flex/flexItemStyles.ts
index 0c3386b526..b3c8b58266 100644
--- a/packages/react/src/themes/teams/components/Flex/flexItemStyles.ts
+++ b/packages/react/src/themes/teams/components/Flex/flexItemStyles.ts
@@ -9,7 +9,7 @@ const flexItemStyles: ComponentSlotStylesPrepared<FlexItemProps, FlexItemVariabl
     return {
       ...(p.align && { alignSelf: toFlexAlignment(p.align) }),
 
-      ...(p.size && toFlexItemSizeValues(v.hasOwnProperty(p.size) ? v[p.size] : p.size)),
+      ...(p.size && toFlexItemSizeValues(v[p.size])),
 
       ...(typeof p.shrink === 'number' && { flexShrink: p.shrink }),
       ...(p.shrink === false && { flexShrink: 0 }),
diff --git a/packages/react/src/themes/teams/components/Icon/iconStyles.ts b/packages/react/src/themes/teams/components/Icon/iconStyles.ts
index d94bdd81c9..f4adc639c0 100644
--- a/packages/react/src/themes/teams/components/Icon/iconStyles.ts
+++ b/packages/react/src/themes/teams/components/Icon/iconStyles.ts
@@ -13,11 +13,6 @@ import { IconXSpacing, IconProps } from '../../../../components/Icon/Icon'
 import { getStyle as getSvgStyle } from './svg'
 import { IconVariables, iconColorAreas } from './iconVariables'
 
-export type IconStylesProps = Pick<
-  IconProps,
-  'bordered' | 'circular' | 'color' | 'disabled' | 'outline' | 'rotate' | 'size' | 'xSpacing'
-> & { isFontIcon: boolean; isSvgIcon: boolean; name?: IconProps['name'] }
-
 export const emptyIcon: ThemeIconSpec = { icon: { content: '?' } }
 
 const getPaddedStyle = (): ICSSInJSStyle => ({
@@ -62,11 +57,16 @@ const getXSpacingStyles = (xSpacing: IconXSpacing, horizontalSpace: string): ICS
   }
 }
 
-const iconStyles: ComponentSlotStylesPrepared<IconStylesProps, IconVariables> = {
+const iconStyles: ComponentSlotStylesPrepared<IconProps, IconVariables> = {
   root: ({ props: p, variables: v, theme: t, rtl }): ICSSInJSStyle => {
-    const iconSpec: ThemeIconSpec = (p.name && t.icons[p.name]) || emptyIcon
+    const iconSpec: ThemeIconSpec = t.icons[p.name] || emptyIcon
+    const isFontIcon = !iconSpec.isSvg
+
     const colors = v.colorScheme[p.color]
 
+    const maybeIcon = t.icons[p.name]
+    const isSvgIcon = maybeIcon && maybeIcon.isSvg
+
     return {
       speak: 'none',
       verticalAlign: 'middle',
@@ -83,7 +83,7 @@ const iconStyles: ComponentSlotStylesPrepared<IconStylesProps, IconVariables> =
       ...((p.bordered || v.borderColor) &&
         getBorderedStyles(v.borderColor || getIconColor(v, colors))),
 
-      ...(p.isFontIcon && {
+      ...(isFontIcon && {
         fontWeight: 900, // required for the fontAwesome to render
         alignItems: 'center',
         boxSizing: 'content-box',
@@ -102,7 +102,7 @@ const iconStyles: ComponentSlotStylesPrepared<IconStylesProps, IconVariables> =
 
         transform: rtl ? `scaleX(-1) rotate(${-1 * p.rotate}deg)` : `rotate(${p.rotate}deg)`,
       }),
-      ...(p.isSvgIcon && { backgroundColor: v.backgroundColor }),
+      ...(isSvgIcon && { backgroundColor: v.backgroundColor }),
     }
   },
 
diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/collapse.tsx b/packages/react/src/themes/teams/components/Icon/svg/icons/collapse.tsx
deleted file mode 100644
index ec34f0d55c..0000000000
--- a/packages/react/src/themes/teams/components/Icon/svg/icons/collapse.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as React from 'react'
-import cx from 'classnames'
-import { TeamsProcessedSvgIconSpec } from '../types'
-import { teamsIconClassNames } from '../teamsIconClassNames'
-
-export default {
-  icon: ({ classes }) => (
-    <svg viewBox="8 8 16 16" role="presentation" className={classes.svg} focusable="false">
-      <path
-        className={cx(teamsIconClassNames.outline, classes.outlinePart)}
-        d="M16,23c0,0.14-0.05,0.25-0.15,0.35c-0.1,0.1-0.22,0.15-0.35,0.15c-0.14,0-0.25-0.05-0.35-0.15C15.05,23.25,15,23.14,15,23
-        v-4.29l-4.15,4.14c-0.1,0.1-0.22,0.15-0.35,0.15c-0.14,0-0.25-0.05-0.35-0.15c-0.1-0.1-0.15-0.22-0.15-0.35
-        c0-0.13,0.05-0.25,0.15-0.35L14.29,18H9.5c-0.14,0-0.25-0.05-0.35-0.15C9.05,17.75,9,17.64,9,17.5c0-0.13,0.05-0.25,0.15-0.35
-        C9.25,17.05,9.36,17,9.5,17h6c0.14,0,0.25,0.05,0.35,0.15c0.1,0.1,0.15,0.22,0.15,0.35V23z M23.5,14.5c0,0.14-0.05,0.25-0.15,0.35
-        C23.25,14.95,23.13,15,23,15h-5.5c-0.14,0-0.25-0.05-0.35-0.15c-0.1-0.1-0.15-0.22-0.15-0.35V9c0-0.14,0.05-0.25,0.15-0.35
-        c0.1-0.1,0.22-0.15,0.35-0.15c0.13,0,0.25,0.05,0.35,0.15C17.95,8.75,18,8.86,18,9v4.29l4.15-4.14C22.25,9.05,22.36,9,22.5,9
-        c0.13,0,0.25,0.05,0.35,0.15C22.95,9.25,23,9.36,23,9.5c0,0.14-0.05,0.25-0.15,0.35L18.71,14H23c0.13,0,0.25,0.05,0.35,0.15
-        C23.45,14.25,23.5,14.36,23.5,14.5z"
-      />
-      <path
-        className={cx(teamsIconClassNames.filled, classes.filledPart)}
-        d="M16,17.47v5.5c0,0.14-0.03,0.26-0.08,0.38c-0.05,0.12-0.13,0.23-0.22,0.32c-0.09,0.09-0.2,0.16-0.32,0.22
-        c-0.12,0.05-0.25,0.08-0.38,0.08c-0.14,0-0.26-0.03-0.38-0.08c-0.12-0.05-0.23-0.13-0.32-0.22c-0.09-0.09-0.16-0.2-0.22-0.32
-        C14.03,23.23,14,23.1,14,22.97v-3.09l-3.29,3.3c-0.09,0.09-0.2,0.17-0.32,0.21c-0.12,0.05-0.26,0.07-0.39,0.07
-        c-0.14,0-0.26-0.03-0.38-0.08c-0.12-0.05-0.23-0.13-0.32-0.22c-0.09-0.09-0.16-0.2-0.22-0.32C9.03,22.73,9,22.6,9,22.47
-        c0-0.13,0.02-0.27,0.07-0.39c0.05-0.12,0.12-0.23,0.21-0.32l3.3-3.29H9.5c-0.14,0-0.26-0.03-0.38-0.08C9,18.33,8.89,18.26,8.8,18.17
-        c-0.09-0.09-0.16-0.2-0.22-0.32C8.53,17.73,8.5,17.6,8.5,17.47c0-0.13,0.03-0.26,0.08-0.38c0.05-0.12,0.13-0.23,0.22-0.32
-        c0.09-0.09,0.2-0.16,0.32-0.22c0.12-0.05,0.25-0.08,0.38-0.08H15c0.13,0,0.26,0.03,0.38,0.08c0.12,0.05,0.23,0.13,0.32,0.22
-        c0.09,0.09,0.16,0.2,0.22,0.32C15.97,17.21,16,17.34,16,17.47z M24,14.47c0,0.14-0.03,0.26-0.08,0.38
-        c-0.05,0.12-0.13,0.23-0.22,0.32c-0.09,0.09-0.2,0.16-0.32,0.22c-0.12,0.05-0.25,0.08-0.38,0.08h-6c-0.14,0-0.26-0.03-0.38-0.08
-        c-0.12-0.05-0.23-0.13-0.32-0.22c-0.09-0.09-0.16-0.2-0.22-0.32C16.03,14.73,16,14.6,16,14.47v-5.5c0-0.13,0.03-0.26,0.08-0.38
-        c0.05-0.12,0.13-0.23,0.22-0.32c0.09-0.09,0.2-0.16,0.32-0.22C16.74,8,16.86,7.97,17,7.97c0.13,0,0.26,0.03,0.38,0.08
-        c0.12,0.05,0.23,0.13,0.32,0.22c0.09,0.09,0.16,0.2,0.22,0.32C17.97,8.71,18,8.84,18,8.97v3.09l3.29-3.3
-        c0.09-0.09,0.2-0.17,0.32-0.21c0.12-0.05,0.25-0.07,0.39-0.07c0.13,0,0.26,0.03,0.38,0.08c0.12,0.05,0.23,0.13,0.32,0.22
-        c0.09,0.09,0.16,0.2,0.22,0.32C22.97,9.21,23,9.34,23,9.47c0,0.14-0.03,0.27-0.07,0.39c-0.05,0.12-0.12,0.23-0.21,0.32l-3.3,3.29H23
-        c0.13,0,0.26,0.03,0.38,0.08c0.12,0.05,0.23,0.13,0.32,0.22c0.09,0.09,0.16,0.2,0.22,0.32C23.97,14.21,24,14.34,24,14.47z"
-      />
-    </svg>
-  ),
-  styles: {},
-} as TeamsProcessedSvgIconSpec
diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/companion.tsx b/packages/react/src/themes/teams/components/Icon/svg/icons/companion.tsx
deleted file mode 100644
index f2d26665ca..0000000000
--- a/packages/react/src/themes/teams/components/Icon/svg/icons/companion.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react'
-import cx from 'classnames'
-import { TeamsProcessedSvgIconSpec } from '../types'
-import { teamsIconClassNames } from '../teamsIconClassNames'
-
-export default {
-  icon: ({ classes }) => (
-    <svg className={classes.svg} viewBox="8 8 16 16" role="presentation" focusable="false">
-      <path
-        className={cx(teamsIconClassNames.outline, classes.outlinePart)}
-        d="M14,21H11.5a.5.5,0,0,0,0,1H14Zm0-2H9.65A.64.64,0,0,1,9,18.35v-6.7A.64.64,0,0,1,9.65,11H14V10H9.65A1.65,1.65,0,0,0,8,11.65v6.7A1.65,1.65,0,0,0,9.65,20H13.9Zm7.6-4.5a2.73,2.73,0,0,1-.5-.05V19H16V11.5a.51.51,0,0,1,.5-.5h1.05a2.52,2.52,0,0,1,0-1H16.5A1.5,1.5,0,0,0,15,11.5v9A1.5,1.5,0,0,0,16.5,22h4A1.5,1.5,0,0,0,22,20.5V14.45A2.73,2.73,0,0,1,21.5,14.5ZM19,21H18a.5.5,0,0,1,0-1h1a.5.5,0,0,1,0,1Zm3-11V8H21v2H19v1h2v2h1V11h2V10Z"
-      />
-      <path
-        className={cx(teamsIconClassNames.filled, classes.filledPart)}
-        d="M14,21H11.5a.5.5,0,0,0,0,1H14Zm0-11H9.65A1.65,1.65,0,0,0,8,11.65v6.7A1.65,1.65,0,0,0,9.65,20H13.9Zm7.55,4.5a2.73,2.73,0,0,1-.5-.05V19H16V11.5a.51.51,0,0,1,.5-.5h1.05a2.52,2.52,0,0,1,0-1H16.5A1.5,1.5,0,0,0,15,11.5v9A1.5,1.5,0,0,0,16.5,22h4A1.5,1.5,0,0,0,22,20.5V14.45A2.73,2.73,0,0,1,21.5,14.5ZM19,21H18a.5.5,0,0,1,0-1h1a.5.5,0,0,1,0,1Zm3-11V8H21v2H19v1h2v2h1V11h2V10Z"
-      />
-    </svg>
-  ),
-  styles: {},
-} as TeamsProcessedSvgIconSpec
diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/expand.tsx b/packages/react/src/themes/teams/components/Icon/svg/icons/expand.tsx
deleted file mode 100644
index fc59657336..0000000000
--- a/packages/react/src/themes/teams/components/Icon/svg/icons/expand.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import * as React from 'react'
-import cx from 'classnames'
-import { TeamsProcessedSvgIconSpec } from '../types'
-import { teamsIconClassNames } from '../teamsIconClassNames'
-
-export default {
-  icon: ({ classes }) => (
-    <svg viewBox="8 8 16 16" role="presentation" className={classes.svg} focusable="false">
-      <path
-        className={cx(teamsIconClassNames.outline, classes.outlinePart)}
-        d="M15.5,22.5c0,0.14-0.05,0.25-0.15,0.35C15.25,22.95,15.14,23,15,23H9.5c-0.14,0-0.25-0.05-0.35-0.15
-            C9.05,22.75,9,22.64,9,22.5V17c0-0.13,0.05-0.25,0.15-0.35c0.1-0.1,0.22-0.15,0.35-0.15c0.14,0,0.25,0.05,0.35,0.15
-            C9.95,16.75,10,16.87,10,17v4.29l4.15-4.14c0.1-0.1,0.22-0.15,0.35-0.15c0.14,0,0.25,0.05,0.35,0.15c0.1,0.1,0.15,0.22,0.15,0.35
-            c0,0.14-0.05,0.25-0.15,0.35L10.71,22H15c0.14,0,0.25,0.05,0.35,0.15C15.45,22.25,15.5,22.37,15.5,22.5z M23,15
-            c0,0.14-0.05,0.25-0.15,0.35c-0.1,0.1-0.22,0.15-0.35,0.15c-0.14,0-0.25-0.05-0.35-0.15C22.05,15.25,22,15.14,22,15v-4.29
-            l-4.15,4.14c-0.1,0.1-0.22,0.15-0.35,0.15c-0.14,0-0.25-0.05-0.35-0.15c-0.1-0.1-0.15-0.22-0.15-0.35c0-0.14,0.05-0.25,0.15-0.35
-            L21.29,10H16.5c-0.14,0-0.25-0.05-0.35-0.15C16.05,9.75,16,9.64,16,9.5c0-0.14,0.05-0.25,0.15-0.35C16.25,9.05,16.36,9,16.5,9h6
-            c0.13,0,0.25,0.05,0.35,0.15C22.95,9.25,23,9.36,23,9.5V15z"
-      />
-      <path
-        className={cx(teamsIconClassNames.filled, classes.filledPart)}
-        d="M16,22.5c0,0.14-0.03,0.26-0.08,0.38c-0.05,0.12-0.13,0.23-0.22,0.32c-0.09,0.09-0.2,0.16-0.32,0.22
-            c-0.12,0.05-0.25,0.08-0.38,0.08H9.5c-0.14,0-0.26-0.03-0.38-0.08C9,23.36,8.89,23.29,8.8,23.2c-0.09-0.09-0.16-0.2-0.22-0.32
-            C8.53,22.76,8.5,22.64,8.5,22.5V17c0-0.13,0.03-0.26,0.08-0.38c0.05-0.12,0.13-0.23,0.22-0.32c0.09-0.09,0.2-0.16,0.32-0.22
-            C9.24,16.03,9.36,16,9.5,16c0.13,0,0.26,0.03,0.38,0.08c0.12,0.05,0.23,0.13,0.32,0.22c0.09,0.09,0.16,0.2,0.22,0.32
-            c0.05,0.12,0.08,0.25,0.08,0.38v3.09l3.29-3.3c0.09-0.09,0.2-0.17,0.32-0.21c0.12-0.05,0.25-0.07,0.39-0.07
-            c0.13,0,0.26,0.03,0.38,0.08c0.12,0.05,0.23,0.13,0.32,0.22c0.09,0.09,0.16,0.2,0.22,0.32c0.05,0.12,0.08,0.25,0.08,0.38
-            c0,0.14-0.02,0.27-0.07,0.39c-0.05,0.12-0.12,0.23-0.21,0.32l-3.3,3.29H15c0.13,0,0.26,0.03,0.38,0.08
-            c0.12,0.05,0.23,0.13,0.32,0.22c0.09,0.09,0.16,0.2,0.22,0.32C15.97,22.24,16,22.37,16,22.5z M23.5,9.5V15
-            c0,0.14-0.03,0.26-0.08,0.38c-0.05,0.12-0.13,0.23-0.22,0.32c-0.09,0.09-0.2,0.16-0.32,0.22C22.76,15.97,22.63,16,22.5,16
-            c-0.14,0-0.26-0.03-0.38-0.08c-0.12-0.05-0.23-0.13-0.32-0.22c-0.09-0.09-0.16-0.2-0.22-0.32c-0.05-0.12-0.08-0.25-0.08-0.38v-3.09
-            l-3.29,3.3c-0.09,0.09-0.2,0.17-0.32,0.21c-0.12,0.05-0.26,0.07-0.39,0.07c-0.14,0-0.26-0.03-0.38-0.08
-            c-0.12-0.05-0.23-0.13-0.32-0.22c-0.09-0.09-0.16-0.2-0.22-0.32c-0.05-0.12-0.08-0.25-0.08-0.38c0-0.14,0.02-0.27,0.07-0.39
-            c0.05-0.12,0.12-0.23,0.21-0.32l3.3-3.29H16.5c-0.14,0-0.26-0.03-0.38-0.08c-0.12-0.05-0.23-0.13-0.32-0.22
-            c-0.09-0.09-0.16-0.2-0.22-0.32C15.53,9.76,15.5,9.64,15.5,9.5c0-0.13,0.03-0.26,0.08-0.38C15.64,9,15.71,8.89,15.8,8.8
-            c0.09-0.09,0.2-0.16,0.32-0.22c0.12-0.05,0.25-0.08,0.38-0.08h6c0.13,0,0.26,0.03,0.38,0.08C23,8.64,23.11,8.71,23.2,8.8
-            c0.09,0.09,0.16,0.2,0.22,0.32C23.47,9.24,23.5,9.37,23.5,9.5z"
-      />
-    </svg>
-  ),
-  styles: {},
-} as TeamsProcessedSvgIconSpec
diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts b/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts
index 13c0f6a36e..a96603c78c 100644
--- a/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts
+++ b/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts
@@ -44,8 +44,23 @@ import clipboardCopiedTo from './clipboardCopiedTo'
 import close from './close'
 import closedCaptions from './closedCaptions'
 import codeSnippet from './codeSnippet'
-import collapse from './collapse'
-import companion from './companion'
+import filesAftereffects from './filesAftereffects'
+import filesCode from './filesCode'
+import filesEmpty from './filesEmpty'
+import filesFlash from './filesFlash'
+import filesGif from './filesGif'
+import filesIllustrator from './filesIllustrator'
+import filesImage from './filesImage'
+import filesIndesign from './filesIndesign'
+import filesPdf from './filesPdf'
+import filesPhotoshop from './filesPhotoshop'
+import filesSketch from './filesSketch'
+import filesSound from './filesSound'
+import filesTxt from './filesTxt'
+import filesUpload from './filesUpload'
+import filesVideo from './filesVideo'
+import filesZip from './filesZip'
+import flag from './flag'
 import download from './download'
 import edit from './edit'
 import email from './email'
@@ -53,37 +68,19 @@ import emoji from './emoji'
 import error from './error'
 import exclamationCircle from './exclamationCircle'
 import exclamationTriangle from './exclamationTriangle'
-import expand from './expand'
 import eye from './eye'
 import eyeFriendlier from './eyeFriendlier'
 import eyeSlash from './eyeSlash'
-import filesAftereffects from './filesAftereffects'
-import filesCode from './filesCode'
-import filesEmpty from './filesEmpty'
 import filesExcel from './filesExcel'
 import filesExcelBrand from './filesExcelBrand'
-import filesFlash from './filesFlash'
-import filesGif from './filesGif'
-import filesIllustrator from './filesIllustrator'
-import filesImage from './filesImage'
-import filesIndesign from './filesIndesign'
 import filesOneNote from './filesOneNote'
 import filesOneNoteBrand from './filesOneNoteBrand'
-import filesPdf from './filesPdf'
-import filesPhotoshop from './filesPhotoshop'
 import filesPowerPoint from './filesPowerPoint'
 import filesPowerPointBrand from './filesPowerPointBrand'
-import filesSketch from './filesSketch'
-import filesSound from './filesSound'
-import filesTxt from './filesTxt'
-import filesUpload from './filesUpload'
-import filesVideo from './filesVideo'
-import filesVisio from './filesVisio'
-import filesVisioBrand from './filesVisioBrand'
 import filesWord from './filesWord'
 import filesWordBrand from './filesWordBrand'
-import filesZip from './filesZip'
-import flag from './flag'
+import filesVisio from './filesVisio'
+import filesVisioBrand from './filesVisioBrand'
 import fontColor from './fontColor'
 import fontSize from './fontSize'
 import format from './format'
@@ -92,7 +89,6 @@ import giphy from './giphy'
 import hand from './hand'
 import highlight from './highlight'
 import horizontalRule from './horizontalRule'
-import iconCircle from './iconCircle'
 import imageUnavailable from './image-unavailable'
 import indent from './indent'
 import info from './info'
@@ -116,6 +112,7 @@ import notes from './notes'
 import notificationsMuted from './notificationsMuted'
 import numberList from './numberList'
 import oneDrive from './oneDrive'
+import userPhone from './userPhone'
 import outdent from './outdent'
 import openOutside from './openOutside'
 import pause from './pause'
@@ -140,16 +137,15 @@ import removeFormat from './removeFormat'
 import reply from './reply'
 import retry from './retry'
 import robot from './robot'
-import search from './search'
-import send from './send'
-import settings from './settings'
-import settingsAudio from './settingsAudio'
 import shareAlt from './shareAlt'
-import shareTo from './shareTo'
 import skypeLogo from './skypeLogo'
 import snooze from './snooze'
+import search from './search'
+import send from './send'
+import settings from './settings'
 import speakerMute from './speakerMute'
 import star from './star'
+import iconCircle from './iconCircle'
 import sticker from './sticker'
 import strike from './strike'
 import sync from './sync'
@@ -173,7 +169,6 @@ import undo from './undo'
 import urgent from './urgent'
 import userBlur from './userBlur'
 import userFriends from './userFriends'
-import userPhone from './userPhone'
 import videoCameraEmphasis from './videoCameraEmphasis'
 import volume from './volume'
 import volumeDown from './volumeDown'
@@ -229,8 +224,6 @@ export default {
   close,
   'closed-captions': closedCaptions,
   'code-snippet': codeSnippet,
-  collapse,
-  companion,
   'files-aftereffects': filesAftereffects,
   'files-code': filesCode,
   'files-empty': filesEmpty,
@@ -255,7 +248,6 @@ export default {
   error,
   'exclamation-circle': exclamationCircle,
   'exclamation-triangle': exclamationTriangle,
-  expand,
   eye,
   'eye-friendlier': eyeFriendlier,
   'eye-slash': eyeSlash,
@@ -318,9 +310,7 @@ export default {
   search,
   send,
   settings,
-  'settings-audio': settingsAudio,
   'share-alt': shareAlt,
-  'share-to': shareTo,
   star,
   sticker,
   strike,
diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/settingsAudio.tsx b/packages/react/src/themes/teams/components/Icon/svg/icons/settingsAudio.tsx
deleted file mode 100644
index 2673bc9995..0000000000
--- a/packages/react/src/themes/teams/components/Icon/svg/icons/settingsAudio.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react'
-import cx from 'classnames'
-import { TeamsProcessedSvgIconSpec } from '../types'
-import { teamsIconClassNames } from '../teamsIconClassNames'
-
-export default {
-  icon: ({ classes }) => (
-    <svg className={classes.svg} viewBox="8 8 16 16" role="presentation" focusable="false">
-      <path
-        className={cx(teamsIconClassNames.outline, classes.outlinePart)}
-        d="M16.49,10a.5.5,0,0,1,.5.5V18h1.5a.5.5,0,0,1,0,1h-4a.5.5,0,0,1,0-1H16V10.5A.51.51,0,0,1,16.49,10ZM12,21.5a.5.5,0,0,1-.5.5.51.51,0,0,1-.5-.5V15h1Zm5,0a.5.5,0,0,1-.5.5.51.51,0,0,1-.5-.5V20h1ZM11.49,10a.5.5,0,0,1,.5.5V13h1.5a.5.5,0,1,1,0,1h-4a.5.5,0,0,1,0-1H11V10.5A.51.51,0,0,1,11.49,10ZM22,21.5a.5.5,0,0,1-.5.5.51.51,0,0,1-.5-.5V17h1ZM21.49,10a.5.5,0,0,1,.5.5V15h1.5a.5.5,0,0,1,0,1h-4a.5.5,0,1,1,0-1H21V10.5A.51.51,0,0,1,21.49,10Z"
-      />
-      <path
-        className={cx(teamsIconClassNames.filled, classes.filledPart)}
-        d="M16,10a1,1,0,0,1,1,1v6h.54c.73,0,1.46.11,1.46,1a1,1,0,0,1-1,1H14a1,1,0,0,1-1-1c0-1.15,1.2-1,2-1V11A1,1,0,0,1,16,10ZM12,22a1,1,0,0,1-2,0V16h2Zm5,0a1,1,0,0,1-2,0V21h2ZM11,10c1.15,0,1,1.2,1,2h.54c.73,0,1.46.11,1.46,1a1,1,0,0,1-1,1H9a1,1,0,0,1-1-1c0-1.15,1.2-1,2-1,0-.18,0-.36,0-.54C10,10.73,10.1,10,11,10ZM22,22a1,1,0,0,1-2,0V17h2ZM21,10a1,1,0,0,1,1,1v2h.54c.73,0,1.46.11,1.46,1a1,1,0,0,1-1,1H19a1,1,0,0,1-1-1c0-1.15,1.2-1,2-1V11A1,1,0,0,1,21,10Z"
-      />
-    </svg>
-  ),
-  styles: {},
-} as TeamsProcessedSvgIconSpec
diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/shareTo.tsx b/packages/react/src/themes/teams/components/Icon/svg/icons/shareTo.tsx
deleted file mode 100644
index 63fe059cf2..0000000000
--- a/packages/react/src/themes/teams/components/Icon/svg/icons/shareTo.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react'
-import cx from 'classnames'
-import { TeamsProcessedSvgIconSpec } from '../types'
-import { teamsIconClassNames } from '../teamsIconClassNames'
-
-export default {
-  icon: ({ classes }) => (
-    <svg className={classes.svg} viewBox="8 8 16 16" role="presentation" focusable="false">
-      <path
-        className={cx(teamsIconClassNames.outline, classes.outlinePart)}
-        d="M21.49,10A1.53,1.53,0,0,1,23,11.5v7a1.53,1.53,0,0,1-1.5,1.5H18v1c.22,0,.44,0,.66,0s.84.08.84.53a.5.5,0,0,1-.5.5H13a.51.51,0,0,1-.5-.5c0-.48.46-.53.84-.53q.33,0,.66,0V20c-.22,0-.44,0-.65,0s-.85-.1-.85-.53A.51.51,0,0,1,13,19h8.5a.5.5,0,0,0,.5-.5v-7a.5.5,0,0,0-.5-.5h-11a.51.51,0,0,0-.5.5V16a.5.5,0,0,1-.5.5A.51.51,0,0,1,9,16V11.5a1.54,1.54,0,0,1,1.5-1.5ZM15,20v1h2V20Zm.5-7a.5.5,0,0,1,.5.5V17a.5.5,0,0,1-.5.5A.51.51,0,0,1,15,17V14.71L9.84,19.85a.45.45,0,0,1-.35.15.5.5,0,0,1-.35-.85L14.28,14H12a.5.5,0,0,1,0-1Z"
-      />
-      <path
-        className={cx(teamsIconClassNames.filled, classes.filledPart)}
-        d="M21.49,10A1.52,1.52,0,0,1,23,11.5v7a1.52,1.52,0,0,1-1.5,1.5H18v1c.22,0,.44,0,.66,0s.84.08.84.53a.5.5,0,0,1-.5.5H13a.51.51,0,0,1-.5-.5c0-.48.46-.53.84-.53q.33,0,.66,0V20c-.22,0-.44,0-.65,0s-.85-.1-.85-.53A.51.51,0,0,1,13,19h8.5a.5.5,0,0,0,.5-.5v-7a.5.5,0,0,0-.5-.5h-11a.51.51,0,0,0-.5.5V16a.5.5,0,0,1-.5.5A.51.51,0,0,1,9,16V11.5a1.52,1.52,0,0,1,1.5-1.5ZM15,20v1h2V20Zm.5-7.5a1,1,0,0,1,1,1V17a1,1,0,0,1-1,1c-1.17,0-1-1.28-1-2.09l-4.29,4.3a.94.94,0,0,1-.71.29,1,1,0,0,1-1-1,1,1,0,0,1,.29-.71l4.3-4.29h-.63c-.7,0-1.46-.14-1.46-1a1,1,0,0,1,1-1Z"
-      />
-    </svg>
-  ),
-  styles: {},
-} as TeamsProcessedSvgIconSpec
diff --git a/packages/react/src/themes/teams/components/Input/inputStyles.ts b/packages/react/src/themes/teams/components/Input/inputStyles.ts
index 7bb62a90df..cdb8b3037c 100644
--- a/packages/react/src/themes/teams/components/Input/inputStyles.ts
+++ b/packages/react/src/themes/teams/components/Input/inputStyles.ts
@@ -19,8 +19,6 @@ const inputStyles: ComponentSlotStylesPrepared<InputProps, InputVariables> = {
       backgroundColor: v.backgroundColorInverted,
     }),
 
-    lineHeight: 'unset',
-
     color: v.fontColor,
 
     borderColor: v.borderColor,
diff --git a/packages/react/src/themes/teams/components/Input/inputVariables.ts b/packages/react/src/themes/teams/components/Input/inputVariables.ts
index f894a1bdfc..447521c242 100644
--- a/packages/react/src/themes/teams/components/Input/inputVariables.ts
+++ b/packages/react/src/themes/teams/components/Input/inputVariables.ts
@@ -24,10 +24,10 @@ export default (siteVars): InputVariables => ({
   iconPosition: 'absolute',
   iconRight: pxToRem(10),
   iconLeft: pxToRem(6),
-  inputPaddingWithIconAtStart: `${pxToRem(5)} ${pxToRem(12)} ${pxToRem(5)} ${pxToRem(24)}`,
-  inputPaddingWithIconAtEnd: `${pxToRem(5)} ${pxToRem(24)} ${pxToRem(5)} ${pxToRem(12)}`,
+  inputPaddingWithIconAtStart: `${pxToRem(7)} ${pxToRem(12)} ${pxToRem(7)} ${pxToRem(24)}`,
+  inputPaddingWithIconAtEnd: `${pxToRem(7)} ${pxToRem(24)} ${pxToRem(7)} ${pxToRem(12)}`,
 
-  inputPadding: `${pxToRem(5)} ${pxToRem(12)}`,
+  inputPadding: `${pxToRem(7)} ${pxToRem(12)}`,
 
   borderColor: 'transparent',
   borderRadius: `${pxToRem(3)} ${pxToRem(3)} ${pxToRem(2)} ${pxToRem(2)}`,
diff --git a/packages/react/src/themes/teams/components/Label/labelStyles.ts b/packages/react/src/themes/teams/components/Label/labelStyles.ts
index e555c59f55..49f1a4a728 100644
--- a/packages/react/src/themes/teams/components/Label/labelStyles.ts
+++ b/packages/react/src/themes/teams/components/Label/labelStyles.ts
@@ -4,12 +4,7 @@ import { LabelProps } from '../../../../components/Label/Label'
 import { LabelVariables } from './labelVariables'
 import { getColorScheme } from '../../colors'
 
-export type LabelStylesProps = Pick<LabelProps, 'circular' | 'color' | 'imagePosition'> & {
-  hasImage: boolean
-  hasActionableIcon: boolean
-}
-
-const labelStyles: ComponentSlotStylesPrepared<LabelStylesProps, LabelVariables> = {
+const labelStyles: ComponentSlotStylesPrepared<LabelProps, LabelVariables> = {
   root: ({ props: p, variables: v }): ICSSInJSStyle => {
     const colors = getColorScheme(v.colorScheme, p.color)
 
@@ -24,7 +19,7 @@ const labelStyles: ComponentSlotStylesPrepared<LabelStylesProps, LabelVariables>
       fontSize: pxToRem(14),
       borderRadius: pxToRem(3),
       padding: v.padding,
-      ...(p.hasImage &&
+      ...(p.image &&
         (p.imagePosition === 'start'
           ? { paddingLeft: v.startPaddingLeft }
           : { paddingRight: v.endPaddingRight })),
@@ -40,7 +35,9 @@ const labelStyles: ComponentSlotStylesPrepared<LabelStylesProps, LabelVariables>
   }),
 
   icon: ({ props: p }): ICSSInJSStyle =>
-    p.hasActionableIcon && {
+    p.icon &&
+    typeof p.icon === 'object' &&
+    (p.icon as any).onClick && {
       cursor: 'pointer',
     },
 }
diff --git a/packages/react/src/themes/teams/components/List/listItemStyles.ts b/packages/react/src/themes/teams/components/List/listItemStyles.ts
index d54efcb050..a013736dd1 100644
--- a/packages/react/src/themes/teams/components/List/listItemStyles.ts
+++ b/packages/react/src/themes/teams/components/List/listItemStyles.ts
@@ -72,7 +72,7 @@ const listItemStyles: ComponentSlotStylesPrepared<ListItemStylesProps, ListItemV
         ':focus': borderFocusStyles[':focus'],
         ':focus-visible': {
           ...borderFocusStyles[':focus-visible'],
-          zIndex: v.zIndex,
+          zIndex: 1,
         },
 
         ...(p.selected && selectedStyle(v)),
diff --git a/packages/react/src/themes/teams/components/List/listItemVariables.ts b/packages/react/src/themes/teams/components/List/listItemVariables.ts
index d83f67a113..7941c0e8de 100644
--- a/packages/react/src/themes/teams/components/List/listItemVariables.ts
+++ b/packages/react/src/themes/teams/components/List/listItemVariables.ts
@@ -6,7 +6,6 @@ export interface ListItemVariables {
 
   headerLineHeight: string
   headerFontSize: string
-  zIndex: number
 
   // Header Media
   headerMediaFontSize: string
@@ -32,7 +31,6 @@ export default (siteVariables: any): ListItemVariables => {
   return {
     minHeight: pxToRem(48),
     rootPadding: `0 ${pxToRem(18)} 0 ${pxToRem(20)}`,
-    zIndex: siteVariables.zIndexes.foreground,
 
     // Header
     // TODO: prod app uses 17.5px here, it should be 16px per the design guide!
diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts
index 896cf78122..081c70bc9c 100644
--- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts
+++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts
@@ -134,14 +134,14 @@ const pointingBeak = ({
       height: pxToRem(10),
       border: 'none',
       ...borders,
-      zIndex: v.beakZIndex,
+      zIndex: 2,
       transition: 'background .1s ease',
     },
   }
 }
 
 const menuItemStyles: ComponentSlotStylesPrepared<MenuItemPropsAndState, MenuVariables> = {
-  wrapper: ({ props, variables: v }): ICSSInJSStyle => {
+  wrapper: ({ props, variables: v, theme }): ICSSInJSStyle => {
     const {
       active,
       disabled,
@@ -425,7 +425,7 @@ const menuItemStyles: ComponentSlotStylesPrepared<MenuItemPropsAndState, MenuVar
     }),
   }),
 
-  menu: ({ variables: v }) => ({ zIndex: v.menuZIndex }),
+  menu: () => ({ zIndex: 1000 }),
 
   indicator: ({ props: p }) => ({
     position: 'relative',
diff --git a/packages/react/src/themes/teams/components/Menu/menuVariables.ts b/packages/react/src/themes/teams/components/Menu/menuVariables.ts
index d4680ac5dd..8ea319c5c3 100644
--- a/packages/react/src/themes/teams/components/Menu/menuVariables.ts
+++ b/packages/react/src/themes/teams/components/Menu/menuVariables.ts
@@ -57,9 +57,6 @@ export interface MenuVariables {
 
   dividerHeight: string
   borderWidth: string
-
-  menuZIndex: number
-  beakZIndex: number
 }
 
 export default (siteVars: any): MenuVariables => {
@@ -125,7 +122,5 @@ export default (siteVars: any): MenuVariables => {
 
     dividerHeight: pxToRem(1),
     borderWidth: pxToRem(1),
-    menuZIndex: siteVars.zIndexes.overlay,
-    beakZIndex: siteVars.zIndexes.menuItem,
   }
 }
diff --git a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
index 4182a8430f..8edba1828e 100644
--- a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
@@ -2,23 +2,14 @@ import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles'
 import { PopupContentProps } from '../../../../components/Popup/PopupContent'
 import { PopupContentVariables } from './popupContentVariables'
 import getPointerStyles from '../../getPointerStyles'
-import initialPopperStyles from '../../../../utils/positioner/initialStyles'
 
 const popupContentStyles: ComponentSlotStylesPrepared<PopupContentProps, PopupContentVariables> = {
   root: ({ props: p, variables: v, rtl }): ICSSInJSStyle => ({
     border: `${v.borderSize} solid ${v.borderColor}`,
     borderRadius: v.borderRadius,
-
-    background: v.backgroundColor,
-    color: v.color,
     boxShadow: v.boxShadow,
 
     display: 'block',
-    textAlign: 'left',
-    zIndex: v.zIndex,
-
-    ...(initialPopperStyles as ICSSInJSStyle),
-
     ...(p.pointing && getPointerStyles(v.pointerOffset, v.pointerMargin, rtl, p.placement).root),
   }),
 
@@ -36,7 +27,7 @@ const popupContentStyles: ComponentSlotStylesPrepared<PopupContentProps, PopupCo
     ...getPointerStyles(v.pointerOffset, v.pointerMargin, rtl, p.placement).pointer,
   }),
 
-  content: ({ variables: v }): ICSSInJSStyle => ({
+  content: ({ props: p, variables: v }): ICSSInJSStyle => ({
     display: 'block',
     padding: v.padding,
   }),
diff --git a/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts b/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
index 307dec5280..f6de209a54 100644
--- a/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
@@ -5,8 +5,6 @@ export interface PopupContentVariables {
   borderRadius: string
   borderSize: string
 
-  backgroundColor: string
-  color: string
   boxShadow: string
 
   padding: string
@@ -14,8 +12,6 @@ export interface PopupContentVariables {
   pointerMargin: string
   pointerOffset: string
   pointerSize: string
-
-  zIndex: number
 }
 
 export default (siteVars: any): PopupContentVariables => {
@@ -24,8 +20,6 @@ export default (siteVars: any): PopupContentVariables => {
     borderRadius: pxToRem(3),
     borderSize: '1px',
 
-    backgroundColor: siteVars.colorScheme.default.background,
-    color: siteVars.colorScheme.default.foreground,
     boxShadow: siteVars.shadowLevel3,
 
     padding: `${pxToRem(10)} ${pxToRem(14)}`,
@@ -33,7 +27,5 @@ export default (siteVars: any): PopupContentVariables => {
     pointerOffset: pxToRem(5),
     pointerMargin: pxToRem(10),
     pointerSize: pxToRem(10),
-
-    zIndex: siteVars.zIndexes.overlay,
   }
 }
diff --git a/packages/react/src/themes/teams/components/Popup/popupStyles.ts b/packages/react/src/themes/teams/components/Popup/popupStyles.ts
new file mode 100644
index 0000000000..8ad693c618
--- /dev/null
+++ b/packages/react/src/themes/teams/components/Popup/popupStyles.ts
@@ -0,0 +1,24 @@
+import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles'
+import { PopupProps } from '../../../../components/Popup/Popup'
+import { PopupVariables } from './popupVariables'
+
+const popupStyles: ComponentSlotStylesPrepared<PopupProps, PopupVariables> = {
+  root: (): ICSSInJSStyle => ({}),
+
+  popup: ({ variables: v }): ICSSInJSStyle => ({
+    zIndex: v.zIndex,
+    textAlign: 'left',
+    color: v.contentColor,
+    background: v.contentBackgroundColor,
+
+    // Prevents scroll issue, waiting for Popper.js to add this style once initiated.
+    // https://github.com/mui-org/material-ui/issues/16740
+    position: 'fixed',
+    // Fix Popper.js initial positioning display issue
+    // https://github.com/mui-org/material-ui/issues/17774
+    top: 0,
+    left: '0px /* @noflip */',
+  }),
+}
+
+export default popupStyles
diff --git a/packages/react/src/themes/teams/components/Popup/popupVariables.ts b/packages/react/src/themes/teams/components/Popup/popupVariables.ts
new file mode 100644
index 0000000000..7e311d2280
--- /dev/null
+++ b/packages/react/src/themes/teams/components/Popup/popupVariables.ts
@@ -0,0 +1,11 @@
+export interface PopupVariables {
+  zIndex: number
+  contentColor: string
+  contentBackgroundColor: string
+}
+
+export default (siteVars: any): PopupVariables => ({
+  zIndex: 1000,
+  contentColor: siteVars.colorScheme.default.foreground,
+  contentBackgroundColor: siteVars.colorScheme.default.background,
+})
diff --git a/packages/react/src/themes/teams/components/Provider/providerStyles.ts b/packages/react/src/themes/teams/components/Provider/providerBoxStyles.ts
similarity index 85%
rename from packages/react/src/themes/teams/components/Provider/providerStyles.ts
rename to packages/react/src/themes/teams/components/Provider/providerBoxStyles.ts
index ffe336bb7f..58ce4fad9f 100644
--- a/packages/react/src/themes/teams/components/Provider/providerStyles.ts
+++ b/packages/react/src/themes/teams/components/Provider/providerBoxStyles.ts
@@ -1,10 +1,10 @@
 import { ComponentStyleFunctionParam, ICSSInJSStyle } from '@fluentui/styles'
-import { ProviderVariables } from './providerVariables'
+import { ProviderBoxVariables } from './providerBoxVariables'
 
 export default {
   root: ({
     variables: v,
-  }: ComponentStyleFunctionParam<never, ProviderVariables>): ICSSInJSStyle => ({
+  }: ComponentStyleFunctionParam<never, ProviderBoxVariables>): ICSSInJSStyle => ({
     background: v.background,
     color: v.color,
     textAlign: 'left',
diff --git a/packages/react/src/themes/teams/components/Provider/providerVariables.ts b/packages/react/src/themes/teams/components/Provider/providerBoxVariables.ts
similarity index 87%
rename from packages/react/src/themes/teams/components/Provider/providerVariables.ts
rename to packages/react/src/themes/teams/components/Provider/providerBoxVariables.ts
index 0e0669bdc5..2c2ff4c68d 100644
--- a/packages/react/src/themes/teams/components/Provider/providerVariables.ts
+++ b/packages/react/src/themes/teams/components/Provider/providerBoxVariables.ts
@@ -1,6 +1,6 @@
 import { pxToRem } from '../../../../utils'
 
-export interface ProviderVariables {
+export interface ProviderBoxVariables {
   background: string
   color: string
 
@@ -15,7 +15,7 @@ export interface ProviderVariables {
   scrollbarThumbHoverBorderSize: string
 }
 
-export default (siteVariables): Partial<ProviderVariables> => ({
+export default (siteVariables): Partial<ProviderBoxVariables> => ({
   background: siteVariables.bodyBackground,
   color: siteVariables.bodyColor,
 
diff --git a/packages/react/src/themes/teams/components/Slider/sliderStyles.ts b/packages/react/src/themes/teams/components/Slider/sliderStyles.ts
index 55c248123c..67eb97709c 100644
--- a/packages/react/src/themes/teams/components/Slider/sliderStyles.ts
+++ b/packages/react/src/themes/teams/components/Slider/sliderStyles.ts
@@ -1,11 +1,9 @@
 import * as React from 'react'
 import { SliderVariables } from './sliderVariables'
-import Slider, { SliderProps } from '../../../../components/Slider/Slider'
+import Slider, { SliderProps, SliderState } from '../../../../components/Slider/Slider'
 import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles'
 import getBorderFocusStyles from '../../getBorderFocusStyles'
 
-export type SliderStylesProps = Pick<SliderProps, 'fluid' | 'disabled' | 'vertical'>
-
 const selectors = {
   WEBKIT_THUMB: '::-webkit-slider-thumb',
   MOZ_THUMB: '::-moz-range-thumb',
@@ -28,7 +26,7 @@ const thumbFromPreviousSiblingSelector = `&+ .${Slider.slotClassNames.thumb}`
 
 const getFluidStyles = (p: SliderProps) => p.fluid && !p.vertical && { width: '100%' }
 
-const sliderStyles: ComponentSlotStylesPrepared<SliderStylesProps, SliderVariables> = {
+const sliderStyles: ComponentSlotStylesPrepared<SliderProps & SliderState, SliderVariables> = {
   root: ({ props: p, variables: v }): ICSSInJSStyle => ({
     height: v.height,
 
diff --git a/packages/react/src/themes/teams/components/Status/statusStyles.ts b/packages/react/src/themes/teams/components/Status/statusStyles.ts
index 8960f96769..6ac2d2056f 100644
--- a/packages/react/src/themes/teams/components/Status/statusStyles.ts
+++ b/packages/react/src/themes/teams/components/Status/statusStyles.ts
@@ -3,8 +3,6 @@ import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles'
 import { StatusProps } from '../../../../components/Status/Status'
 import { StatusVariables } from './statusVariables'
 
-export type StatusStylesProps = Pick<StatusProps, 'color' | 'size' | 'state'>
-
 const getBackgroundColor = (state: string, variables: StatusVariables) => {
   switch (state) {
     case 'success':
@@ -57,7 +55,7 @@ export const getSizeStyles = (sizeInPx: number, variables: StatusVariables) => {
   }
 }
 
-const statusStyles: ComponentSlotStylesPrepared<StatusStylesProps, StatusVariables> = {
+const statusStyles: ComponentSlotStylesPrepared<StatusProps, StatusVariables> = {
   root: ({ props: { color, size, state }, variables }): ICSSInJSStyle => {
     return {
       display: 'inline-flex',
diff --git a/packages/react/src/themes/teams/components/Text/textStyles.ts b/packages/react/src/themes/teams/components/Text/textStyles.ts
index 0db3a091eb..4886306882 100644
--- a/packages/react/src/themes/teams/components/Text/textStyles.ts
+++ b/packages/react/src/themes/teams/components/Text/textStyles.ts
@@ -3,82 +3,81 @@ import { TeamsTextVariables } from './textVariables'
 import { TextProps } from '../../../../components/Text/Text'
 import { getColorSchemeKey } from '../../colors'
 import translateAlignProp from '../../../../styles/translateAlignProp'
-
-export type TextStylesProps = Pick<
-  TextProps,
-  | 'atMention'
-  | 'color'
-  | 'important'
-  | 'timestamp'
-  | 'truncated'
-  | 'disabled'
-  | 'error'
-  | 'success'
-  | 'temporary'
-  | 'align'
-  | 'weight'
-  | 'size'
->
+import { WithAsProp } from '../../../../types'
 
 export default {
   root: ({
-    props: p,
+    props: {
+      as,
+      atMention,
+      color,
+      important,
+      timestamp,
+      truncated,
+      disabled,
+      error,
+      success,
+      temporary,
+      align,
+      weight,
+      size,
+    },
     variables: v,
-  }: ComponentStyleFunctionParam<TextStylesProps, TeamsTextVariables>): ICSSInJSStyle => {
-    const colors = v.colorScheme[getColorSchemeKey(p.color)]
+  }: ComponentStyleFunctionParam<WithAsProp<TextProps>, TeamsTextVariables>): ICSSInJSStyle => {
+    const colors = v.colorScheme[getColorSchemeKey(color)]
     return {
-      ...(p.color && { color: colors.foreground }),
-      ...(p.atMention === true && { color: v.atMentionOtherColor }),
-      ...(p.truncated && { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }),
-      ...(p.disabled && { color: v.disabledColor }),
-      ...(p.error && { color: v.errorColor }),
-      ...(p.success && { color: v.successColor }),
-      ...(p.temporary && { fontStyle: 'italic' }),
-      ...(p.align && { display: 'block', textAlign: translateAlignProp(p.align) }), // textAlign makes sense only for block elements
+      ...(color && { color: colors.foreground }),
+      ...(atMention === true && { color: v.atMentionOtherColor }),
+      ...(truncated && { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }),
+      ...(disabled && { color: v.disabledColor }),
+      ...(error && { color: v.errorColor }),
+      ...(success && { color: v.successColor }),
+      ...(temporary && { fontStyle: 'italic' }),
+      ...(align && { display: 'block', textAlign: translateAlignProp(align) }), // textAlign makes sense only for block elements
 
-      ...(p.weight === 'light' && { fontWeight: v.fontWeightLight }),
-      ...(p.weight === 'semilight' && { fontWeight: v.fontWeightSemilight }),
-      ...(p.weight === 'regular' && { fontWeight: v.fontWeightRegular }),
-      ...(p.weight === 'semibold' && { fontWeight: v.fontWeightSemibold }),
-      ...(p.weight === 'bold' && { fontWeight: v.fontWeightBold }),
+      ...(weight === 'light' && { fontWeight: v.fontWeightLight }),
+      ...(weight === 'semilight' && { fontWeight: v.fontWeightSemilight }),
+      ...(weight === 'regular' && { fontWeight: v.fontWeightRegular }),
+      ...(weight === 'semibold' && { fontWeight: v.fontWeightSemibold }),
+      ...(weight === 'bold' && { fontWeight: v.fontWeightBold }),
 
-      ...(p.size === 'smallest' && {
+      ...(size === 'smallest' && {
         fontSize: v.fontSizeSmallest,
         lineHeight: v.fontLineHeightSmallest,
       }),
-      ...(p.size === 'smaller' && {
+      ...(size === 'smaller' && {
         fontSize: v.fontSizeSmaller,
         lineHeight: v.fontLineHeightSmaller,
       }),
-      ...(p.size === 'small' && {
+      ...(size === 'small' && {
         fontSize: v.fontSizeSmall,
         lineHeight: v.fontLineHeightSmall,
       }),
-      ...(p.size === 'medium' && {
+      ...(size === 'medium' && {
         fontSize: v.fontSizeMedium,
         lineHeight: v.fontLineHeightMedium,
       }),
-      ...(p.size === 'large' && {
+      ...(size === 'large' && {
         fontSize: v.fontSizeLarge,
         lineHeight: v.fontLineHeightLarge,
       }),
-      ...(p.size === 'larger' && {
+      ...(size === 'larger' && {
         fontSize: v.fontSizeLarger,
         lineHeight: v.fontLineHeightLarger,
       }),
-      ...(p.size === 'largest' && {
+      ...(size === 'largest' && {
         fontSize: v.fontSizeLargest,
         lineHeight: v.fontLineHeightLargest,
       }),
-      ...(p.atMention === 'me' && {
+      ...(atMention === 'me' && {
         color: v.atMentionMeColor,
         fontWeight: v.atMentionMeFontWeight,
       }),
-      ...(p.timestamp && {
+      ...(timestamp && {
         color: v.timestampColor,
         ':hover': { color: v.timestampHoverColor },
       }),
-      ...(p.important && {
+      ...(important && {
         color: v.importantColor,
         fontWeight: v.importantWeight,
       }),
diff --git a/packages/react/src/themes/teams/components/Toolbar/toolbarMenuItemStyles.ts b/packages/react/src/themes/teams/components/Toolbar/toolbarMenuItemStyles.ts
index bfe5dac2ca..245c1c7aa2 100644
--- a/packages/react/src/themes/teams/components/Toolbar/toolbarMenuItemStyles.ts
+++ b/packages/react/src/themes/teams/components/Toolbar/toolbarMenuItemStyles.ts
@@ -19,7 +19,6 @@ const toolbarMenuItemStyles = {
       borderColor: 'transparent',
       display: 'flex',
       alignItems: 'center',
-      textAlign: 'left',
       width: '100%',
       maxWidth: '100%',
       padding: v.menuItemPadding,
diff --git a/packages/react/src/themes/teams/components/Toolbar/toolbarMenuStyles.ts b/packages/react/src/themes/teams/components/Toolbar/toolbarMenuStyles.ts
index d8afa903cb..9fd3fafd52 100644
--- a/packages/react/src/themes/teams/components/Toolbar/toolbarMenuStyles.ts
+++ b/packages/react/src/themes/teams/components/Toolbar/toolbarMenuStyles.ts
@@ -7,6 +7,7 @@ const toolbarMenuStyles = {
 
     return {
       display: 'flex',
+      zIndex: 1000,
       flexDirection: 'column',
       listStyleType: 'none',
       margin: 0,
@@ -18,7 +19,6 @@ const toolbarMenuStyles = {
       borderWidth: v.menuBorderWidth,
       borderRadius: v.menuBorderRadius,
       width: v.menuWidth,
-      zIndex: v.overlayZIndex,
     }
   },
 }
diff --git a/packages/react/src/themes/teams/components/Toolbar/toolbarVariables.ts b/packages/react/src/themes/teams/components/Toolbar/toolbarVariables.ts
index 339f4ea210..e9b1520a92 100644
--- a/packages/react/src/themes/teams/components/Toolbar/toolbarVariables.ts
+++ b/packages/react/src/themes/teams/components/Toolbar/toolbarVariables.ts
@@ -65,8 +65,6 @@ export interface ToolbarVariables {
 
   customItemHorizontalPadding: string
   customItemVerticalPadding: string
-
-  overlayZIndex: number
 }
 
 export default (siteVars: any): ToolbarVariables => ({
@@ -122,6 +120,4 @@ export default (siteVars: any): ToolbarVariables => ({
 
   customItemHorizontalPadding: pxToRem(16),
   customItemVerticalPadding: pxToRem(4),
-
-  overlayZIndex: siteVars.zIndexes.overlay,
 })
diff --git a/packages/react/src/themes/teams/components/Tooltip/tooltipContentStyles.ts b/packages/react/src/themes/teams/components/Tooltip/tooltipContentStyles.ts
index 30d20fc137..54ca394687 100644
--- a/packages/react/src/themes/teams/components/Tooltip/tooltipContentStyles.ts
+++ b/packages/react/src/themes/teams/components/Tooltip/tooltipContentStyles.ts
@@ -5,8 +5,6 @@ import getPointerStyles from '../../getPointerStyles'
 import pointerSvg from '../../pointerSvgUrl'
 import { PopperChildrenProps } from '../../../../utils/positioner'
 
-type TooltipContentStylesProps = Pick<TooltipContentProps, 'placement' | 'pointing' | 'open'>
-
 const getPointerOffset = (
   placement: PopperChildrenProps['placement'],
   v: TooltipContentVariables,
@@ -21,7 +19,7 @@ const getPointerOffset = (
     : v.pointerHorizontalOffset
 
 const tooltipContentStyles: ComponentSlotStylesPrepared<
-  TooltipContentStylesProps,
+  TooltipContentProps,
   TooltipContentVariables
 > = {
   root: ({ props: p, variables: v, rtl }): ICSSInJSStyle => {
@@ -39,16 +37,7 @@ const tooltipContentStyles: ComponentSlotStylesPrepared<
       maxWidth: v.maxWidth,
       color: v.color,
       background: v.backgroundColor,
-
-      zIndex: v.zIndex,
-      position: 'absolute',
-      textAlign: 'left',
-
       ...(p.pointing && svgPointerStyles.root),
-
-      ...(!p.open && {
-        opacity: 0,
-      }),
     }
   },
   pointer: ({ props: p, variables: v, rtl }): ICSSInJSStyle => {
@@ -70,7 +59,7 @@ const tooltipContentStyles: ComponentSlotStylesPrepared<
       ...svgPointerStyles.pointer,
     }
   },
-  content: ({ variables: v }): ICSSInJSStyle => ({
+  content: ({ props: p, variables: v }): ICSSInJSStyle => ({
     display: 'block',
     padding: v.padding,
 
diff --git a/packages/react/src/themes/teams/components/Tooltip/tooltipContentVariables.ts b/packages/react/src/themes/teams/components/Tooltip/tooltipContentVariables.ts
index da56847be9..fba45cfb17 100644
--- a/packages/react/src/themes/teams/components/Tooltip/tooltipContentVariables.ts
+++ b/packages/react/src/themes/teams/components/Tooltip/tooltipContentVariables.ts
@@ -17,8 +17,6 @@ export interface TooltipContentVariables {
 
   color: string
   backgroundColor: string
-
-  zIndex: number
 }
 
 export default (siteVars: any): TooltipContentVariables => ({
@@ -37,6 +35,4 @@ export default (siteVars: any): TooltipContentVariables => ({
   pointerHeight: pxToRem(16),
   color: siteVars.colorScheme.default.foreground3,
   backgroundColor: siteVars.colors.grey[500],
-
-  zIndex: siteVars.zIndexes.overlay,
 })
diff --git a/packages/react/src/themes/teams/components/Tooltip/tooltipStyles.ts b/packages/react/src/themes/teams/components/Tooltip/tooltipStyles.ts
new file mode 100644
index 0000000000..3d0393210d
--- /dev/null
+++ b/packages/react/src/themes/teams/components/Tooltip/tooltipStyles.ts
@@ -0,0 +1,18 @@
+import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles'
+import { TooltipProps } from '../../../../components/Tooltip/Tooltip'
+import { TooltipVariables } from './tooltipVariables'
+
+const tooltipStyles: ComponentSlotStylesPrepared<TooltipProps, TooltipVariables> = {
+  root: (): ICSSInJSStyle => ({}),
+
+  content: ({ variables: v, props: p }): ICSSInJSStyle => ({
+    ...(!p.open && {
+      opacity: 0,
+    }),
+    zIndex: v.zIndex,
+    position: 'absolute',
+    textAlign: 'left',
+  }),
+}
+
+export default tooltipStyles
diff --git a/packages/react/src/themes/teams/components/Tooltip/tooltipVariables.ts b/packages/react/src/themes/teams/components/Tooltip/tooltipVariables.ts
new file mode 100644
index 0000000000..e4ae68c059
--- /dev/null
+++ b/packages/react/src/themes/teams/components/Tooltip/tooltipVariables.ts
@@ -0,0 +1,7 @@
+export interface TooltipVariables {
+  zIndex: number
+}
+
+export default (siteVars: any): TooltipVariables => ({
+  zIndex: 1000,
+})
diff --git a/packages/react/src/themes/teams/getBorderFocusStyles.ts b/packages/react/src/themes/teams/getBorderFocusStyles.ts
index c668a19f17..ce78a1d596 100644
--- a/packages/react/src/themes/teams/getBorderFocusStyles.ts
+++ b/packages/react/src/themes/teams/getBorderFocusStyles.ts
@@ -55,14 +55,14 @@ const getBorderFocusStyles = (args: BorderFocusStyles): ICSSInJSStyle => {
       borderColor: 'transparent',
 
       ':before': getPseudoElementStyles({
-        zIndex: sv.zIndexes.foreground,
+        zIndex: '1',
         borderEdgeValue: borderPadding == null ? '0' : `-${borderPadding}`,
         borderColor: focusInnerBorderColor,
         ...defaultBorderStyles,
       }),
 
       ':after': getPseudoElementStyles({
-        zIndex: sv.zIndexes.foreground,
+        zIndex: '1',
         borderEdgeValue:
           borderPadding == null
             ? `-${borderWidth}`
diff --git a/packages/react/src/themes/teams/siteVariables.ts b/packages/react/src/themes/teams/siteVariables.ts
index 46b80466d0..2703f88f72 100644
--- a/packages/react/src/themes/teams/siteVariables.ts
+++ b/packages/react/src/themes/teams/siteVariables.ts
@@ -61,18 +61,6 @@ export const lineHeightMedium = 1.4286
 export const lineHeightLarge = 1.3333
 export const lineHeightLarger = 1.3333
 
-//
-// Z-INDEX
-// Used to maintain proper stack order of components
-//
-export const zIndexes: Record<string, number> = {
-  background: 0, // Default value
-  foreground: 1, // Put a component in front
-  menuItem: 2, // Currently used only for menu item beak element
-  overlay: 1000, // Dialog/popup/menu overlays
-  debug: 999999999, // for debug purposes
-}
-
 //
 // SEMANTIC ASSIGNMENTS
 //
diff --git a/packages/react/src/themes/teams/types.ts b/packages/react/src/themes/teams/types.ts
index 5d37eb463b..c5c9615bf5 100644
--- a/packages/react/src/themes/teams/types.ts
+++ b/packages/react/src/themes/teams/types.ts
@@ -16,10 +16,10 @@ import { AttachmentProps } from '../../components/Attachment/Attachment'
 import { AvatarStylesProps } from './components/Avatar/avatarStyles'
 import { ButtonGroupProps } from '../../components/Button/ButtonGroup'
 import { ButtonStylesProps } from './components/Button/buttonStyles'
-import { ChatItemStylesProps } from '../../components/Chat/ChatItem'
-import { ChatMessageStylesProps } from '../../components/Chat/ChatMessage'
-import { ChatStylesProps } from '../../components/Chat/Chat'
-import { CheckboxStylesProps } from './components/Checkbox/checkboxStyles'
+import { ChatItemProps } from '../../components/Chat/ChatItem'
+import { ChatMessageProps } from '../../components/Chat/ChatMessage'
+import { ChatProps } from '../../components/Chat/Chat'
+import { CheckboxProps } from '../../components/Checkbox/Checkbox'
 import { DividerProps } from '../../components/Divider/Divider'
 import { DropdownProps } from '../../components/Dropdown/Dropdown'
 import { EmbedProps } from '../../components/Embed/Embed'
@@ -30,11 +30,11 @@ import { FormProps } from '../../components/Form/Form'
 import { GridProps } from '../../components/Grid/Grid'
 import { HeaderDescriptionProps } from '../../components/Header/HeaderDescription'
 import { HeaderProps } from '../../components/Header/Header'
-import { IconStylesProps } from './components/Icon/iconStyles'
+import { IconProps } from '../../components/Icon/Icon'
 import { ImageStylesProps } from './components/Image/imageStyles'
 import { InputProps } from '../../components/Input/Input'
 import { ItemLayoutProps } from '../../components/ItemLayout/ItemLayout'
-import { LabelStylesProps } from './components/Label/labelStyles'
+import { LabelProps } from '../../components/Label/Label'
 import { LayoutProps } from '../../components/Layout/Layout'
 import { ListStylesProps } from './components/List/listStyles'
 import { ListItemStylesProps } from './components/List/listItemStyles'
@@ -42,20 +42,22 @@ import { LoaderProps } from '../../components/Loader/Loader'
 import { MenuItemProps } from '../../components/Menu/MenuItem'
 import { MenuProps } from '../../components/Menu/Menu'
 import { PopupContentProps } from '../../components/Popup/PopupContent'
+import { PopupProps } from '../../components/Popup/Popup'
 import { PortalProps } from '../../components/Portal/Portal'
 import { RadioGroupItemProps } from '../../components/RadioGroup/RadioGroupItem'
 import { RadioGroupProps } from '../../components/RadioGroup/RadioGroup'
 import { ReactionGroupProps } from '../../components/Reaction/ReactionGroup'
 import { ReactionProps } from '../../components/Reaction/Reaction'
 import { SegmentProps } from '../../components/Segment/Segment'
-import { SliderStylesProps } from './components/Slider/sliderStyles'
-import { StatusStylesProps } from './components/Status/statusStyles'
-import { TextStylesProps } from './components/Text/textStyles'
+import { SliderProps } from '../../components/Slider/Slider'
+import { StatusProps } from '../../components/Status/Status'
+import { TextProps } from '../../components/Text/Text'
 import { ToolbarDividerProps } from '../../components/Toolbar/ToolbarDivider'
 import { ToolbarItemProps } from '../../components/Toolbar/ToolbarItem'
 import { ToolbarProps } from '../../components/Toolbar/Toolbar'
 import { ToolbarRadioGroupProps } from '../../components/Toolbar/ToolbarRadioGroup'
 import { TooltipContentProps } from '../../components/Tooltip/TooltipContent'
+import { TooltipProps } from '../../components/Tooltip/Tooltip'
 import { HierarchicalTreeItemProps } from '../../components/HierarchicalTree/HierarchicalTreeItem'
 import { HierarchicalTreeProps } from '../../components/HierarchicalTree/HierarchicalTree'
 import { HierarchicalTreeTitleProps } from '../../components/HierarchicalTree/HierarchicalTreeTitle'
@@ -71,10 +73,10 @@ export type TeamsThemeStylesProps = {
   Avatar?: AvatarStylesProps
   Button?: ButtonStylesProps
   ButtonGroup?: ButtonGroupProps
-  Chat?: ChatStylesProps
-  ChatItem?: ChatItemStylesProps
-  ChatMessage?: ChatMessageStylesProps
-  Checkbox?: CheckboxStylesProps
+  Chat?: ChatProps
+  ChatItem?: ChatItemProps
+  ChatMessage?: ChatMessageProps
+  Checkbox?: CheckboxProps
   Divider?: DividerProps
   Dropdown?: DropdownProps
   Embed?: EmbedProps
@@ -85,11 +87,11 @@ export type TeamsThemeStylesProps = {
   Grid?: GridProps
   Header?: HeaderProps
   HeaderDescription?: HeaderDescriptionProps
-  Icon?: IconStylesProps
+  Icon?: IconProps
   Image?: ImageStylesProps
   Input?: InputProps
   ItemLayout?: ItemLayoutProps
-  Label?: LabelStylesProps
+  Label?: LabelProps
   Layout?: LayoutProps
   List?: ListStylesProps
   ListItem?: ListItemStylesProps
@@ -97,20 +99,22 @@ export type TeamsThemeStylesProps = {
   Menu?: MenuProps
   MenuItem?: MenuItemProps
   Portal?: PortalProps
+  Popup?: PopupProps
   PopupContent?: PopupContentProps
   RadioGroup?: RadioGroupProps
   RadioGroupItem?: RadioGroupItemProps
   Reaction?: ReactionProps
   ReactionGroup?: ReactionGroupProps
   Segment?: SegmentProps
-  Slider?: SliderStylesProps
-  Status?: StatusStylesProps
+  Slider?: SliderProps
+  Status?: StatusProps
   Toolbar?: ToolbarProps
   ToolbarItem?: ToolbarItemProps
   ToolbarDivider?: ToolbarDividerProps
   ToolbarRadioGroup?: ToolbarRadioGroupProps
+  Tooltip?: TooltipProps
   TooltipContent?: TooltipContentProps
-  Text?: TextStylesProps
+  Text?: TextProps
   HierarchicalTree?: HierarchicalTreeProps
   HierarchicalTreeItem?: HierarchicalTreeItemProps
   HierarchicalTreeTitle?: HierarchicalTreeTitleProps
diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
index c979941e51..576f58259d 100644
--- a/packages/react/src/types.ts
+++ b/packages/react/src/types.ts
@@ -1,20 +1,8 @@
-import {
-  StylesContextInputValue,
-  StylesContextValue,
-  StylesContextPerformance,
-  Telemetry,
-} from '@fluentui/react-bindings'
+import { StylesContextInputValue, StylesContextValue, Telemetry } from '@fluentui/react-bindings'
 import * as React from 'react'
 
 import { ShorthandFactory } from './utils/factories'
 
-// Temporary workaround for @lodash dependency
-
-export type DebounceResultFn<T> = T & {
-  cancel: () => void
-  flush: () => void
-}
-
 // ========================================================
 // Utilities
 // ========================================================
@@ -179,12 +167,10 @@ export interface ProviderContextInput extends StylesContextInputValue {
   rtl?: boolean
   target?: Document
   telemetry?: Telemetry
-  performance?: StylesContextPerformance
 }
 
 export interface ProviderContextPrepared extends StylesContextValue {
   rtl: boolean
-  // `target` can be undefined for SSR
-  target: Document | undefined
+  target: Document
   telemetry: Telemetry | undefined
 }
diff --git a/packages/react/src/utils/UIComponent.tsx b/packages/react/src/utils/UIComponent.tsx
index 71e9ae13b0..168fc73c29 100644
--- a/packages/react/src/utils/UIComponent.tsx
+++ b/packages/react/src/utils/UIComponent.tsx
@@ -4,7 +4,6 @@ import * as _ from 'lodash'
 // @ts-ignore We have this export in package, but it is not present in typings
 import { ThemeContext } from 'react-fela'
 
-import { ProviderContextPrepared } from '../types'
 import renderComponent, { RenderResultConfig } from './renderComponent'
 
 // TODO @Bugaa92: deprecated by createComponent.tsx
@@ -30,7 +29,6 @@ class UIComponent<P, S = {}> extends React.Component<P, S> {
   }
 
   actionHandlers: AccessibilityActionHandlers
-  context: ProviderContextPrepared
 
   // stores debug information
   fluentUIDebug: any = null
diff --git a/packages/react/src/utils/applyAccessibilityKeyHandlers.ts b/packages/react/src/utils/applyAccessibilityKeyHandlers.ts
index 35e7458cc9..86129ecff2 100644
--- a/packages/react/src/utils/applyAccessibilityKeyHandlers.ts
+++ b/packages/react/src/utils/applyAccessibilityKeyHandlers.ts
@@ -9,10 +9,7 @@ import { Props, ShorthandValue } from '../types'
 const applyAccessibilityKeyHandlers = (
   keyHandlers: AccessibilityHandlerProps,
   value: Props | ShorthandValue<Props>,
-): Partial<Record<
-  keyof AccessibilityHandlerProps,
-  (e: React.KeyboardEvent, ...args: any[]) => void
->> => {
+) => {
   const valIsPropsObject = _.isPlainObject(value)
   const valIsReactElement = React.isValidElement(value)
 
diff --git a/packages/react/src/utils/createComponent.tsx b/packages/react/src/utils/createComponent.tsx
index 8da3e62f0a..a58e211639 100644
--- a/packages/react/src/utils/createComponent.tsx
+++ b/packages/react/src/utils/createComponent.tsx
@@ -3,7 +3,7 @@ import {
   ReactAccessibilityBehavior,
   AccessibilityActionHandlers,
 } from '@fluentui/react-bindings'
-import { ComponentSlotStylesResolved } from '@fluentui/styles'
+import { ComponentSlotStylesPrepared } from '@fluentui/styles'
 import * as _ from 'lodash'
 import * as React from 'react'
 
@@ -14,7 +14,7 @@ export interface CreateComponentRenderConfig {
   accessibility: ReactAccessibilityBehavior
   classes: ComponentSlotClasses
   rtl: boolean
-  styles: ComponentSlotStylesResolved
+  styles: ComponentSlotStylesPrepared
 }
 
 export interface CreateComponentConfig<P> {
diff --git a/packages/react/src/utils/mergeProviderContexts.ts b/packages/react/src/utils/mergeProviderContexts.ts
index f3a630d2ba..1e50d72bff 100644
--- a/packages/react/src/utils/mergeProviderContexts.ts
+++ b/packages/react/src/utils/mergeProviderContexts.ts
@@ -3,21 +3,19 @@ import { mergeThemes } from '@fluentui/styles'
 
 import { ProviderContextPrepared, ProviderContextInput } from '../types'
 import { createRenderer, felaRenderer } from './felaRenderer'
-import isBrowser from './isBrowser'
 
 const registeredRenderers = new WeakMap<Document, Renderer>()
 
-export const mergeRenderers = (current: Renderer, next?: Renderer, target?: Document): Renderer => {
+export const mergeRenderers = (
+  current: Renderer,
+  next?: Renderer,
+  target: Document = document, // eslint-disable-line no-undef
+): Renderer => {
   if (next) {
     return next
   }
 
-  // A valid comparisons, default renderer will be used
-  if (!isBrowser() || typeof target === 'undefined') {
-    return felaRenderer
-  }
-
-  // SSR logic will be handled by condition above
+  // A valid comparison, default renderer will be used
   // eslint-disable-next-line no-undef
   if (target === document) {
     return felaRenderer
@@ -33,10 +31,6 @@ export const mergeRenderers = (current: Renderer, next?: Renderer, target?: Docu
   return createdRenderer
 }
 
-export const mergePerformanceOptions = (target, ...sources) => {
-  return Object.assign(target, ...sources)
-}
-
 export const mergeBooleanValues = (target, ...sources) => {
   return sources.reduce((acc, next) => {
     return typeof next === 'boolean' ? next : acc
@@ -60,12 +54,9 @@ const mergeProviderContexts = (
     },
     rtl: false,
     disableAnimations: false,
-    target: isBrowser() ? document : undefined, // eslint-disable-line no-undef
-    performance: {
-      enableStylesCaching: true,
-      enableVariablesCaching: true,
-    },
+    target: document, // eslint-disable-line no-undef
     telemetry: undefined,
+    _internal_resolvedComponentVariables: {},
     renderer: undefined,
   }
 
@@ -94,8 +85,6 @@ const mergeProviderContexts = (
         acc.disableAnimations = mergedDisableAnimations
       }
 
-      acc.performance = mergePerformanceOptions(acc.performance, next.performance || {})
-
       acc.telemetry = next.telemetry || acc.telemetry
 
       return acc
diff --git a/packages/react/src/utils/positioner/Popper.tsx b/packages/react/src/utils/positioner/Popper.tsx
index 2ae0f6db8f..fa1a7e6f50 100644
--- a/packages/react/src/utils/positioner/Popper.tsx
+++ b/packages/react/src/utils/positioner/Popper.tsx
@@ -1,32 +1,11 @@
-import { useIsomorphicLayoutEffect } from '@fluentui/react-bindings'
-import { Ref, isRefObject } from '@fluentui/react-component-ref'
+import * as React from 'react'
 import * as _ from 'lodash'
 import PopperJS, * as _PopperJS from 'popper.js'
-import * as React from 'react'
+import { Ref, isRefObject } from '@fluentui/react-component-ref'
 
-import isBrowser from '../isBrowser'
-import getScrollParent from './getScrollParent'
 import { getPlacement, applyRtlToOffset } from './positioningHelper'
-import { PopperProps } from './types'
-
-/**
- * Memoize a result using deep equality. This hook has two advantages over
- * React.useMemo: it uses deep equality to compare memo keys, and it guarantees
- * that the memo function will only be called if the keys are unequal.
- * React.useMemo cannot be relied on to do this, since it is only a performance
- * optimization (see https://reactjs.org/docs/hooks-reference.html#usememo).
- *
- * Copied from https://github.com/apollographql/react-apollo/blob/master/packages/hooks/src/utils/useDeepMemo.ts.
- */
-function useDeepMemo<TKey, TValue>(memoFn: () => TValue, key: TKey): TValue {
-  const ref = React.useRef<{ key: TKey; value: TValue }>()
-
-  if (!ref.current || !_.isEqual(key, ref.current.key)) {
-    ref.current = { key, value: memoFn() }
-  }
-
-  return ref.current.value
-}
+import { PopperProps, PopperChildrenFn } from './types'
+import getScrollParent from './getScrollParent'
 
 // `popper.js` has a UMD build without `.default`, it breaks CJS builds:
 // https://github.com/rollup/rollup/issues/1267#issuecomment-446681320
@@ -56,7 +35,6 @@ const createPopper = (
 
   return instance
 }
-
 /**
  * Popper relies on the 3rd party library [Popper.js](https://github.com/FezVrasta/popper.js) for positioning.
  */
@@ -80,66 +58,18 @@ const Popper: React.FunctionComponent<PopperProps> = props => {
 
   const popperRef = React.useRef<PopperJS>()
   const contentRef = React.useRef<HTMLElement>(null)
-
   const latestPlacement = React.useRef<PopperJS.Placement>(proposedPlacement)
   const [computedPlacement, setComputedPlacement] = React.useState<PopperJS.Placement>(
     proposedPlacement,
   )
 
-  const hasDocument = isBrowser()
-  const hasScrollableElement = React.useMemo(() => {
-    if (hasDocument) {
-      const scrollParentElement = getScrollParent(contentRef.current)
-
-      return scrollParentElement !== scrollParentElement.ownerDocument.body
-    }
-
-    return false
-  }, [contentRef, hasDocument])
-  // Is a broken dependency and can cause potential bugs, we should rethink this as all other refs
-  // in this component.
-
-  const computedModifiers: PopperJS.Modifiers = useDeepMemo(
+  const computedModifiers: PopperJS.Modifiers = React.useMemo(
     () =>
-      _.merge(
-        /**
-         * This prevents blurrines in chrome, when the coordinates are odd numbers alternative
-         * would be to use `fn` and manipulate the computed style or ask popper to fix it but
-         * since there is presumably only handful of poppers displayed on the page, the
-         * performance impact should be minimal.
-         */
-        { computeStyle: { gpuAcceleration: false } },
-
-        { flip: { padding: 0, flipVariationsByContent: true } },
-        { preventOverflow: { padding: 0 } },
-
-        offset && {
-          offset: { offset: rtl ? applyRtlToOffset(offset, position) : offset },
-          keepTogether: { enabled: false },
-        },
-
-        /**
-         * When the popper box is placed in the context of a scrollable element, we need to set
-         * preventOverflow.escapeWithReference to true and flip.boundariesElement to 'scrollParent'
-         * (default is 'viewport') so that the popper box will stick with the targetRef when we
-         * scroll targetRef out of the viewport.
-         */
-        hasScrollableElement && {
-          preventOverflow: { escapeWithReference: true },
-          flip: { boundariesElement: 'scrollParent' },
-        },
-
-        userModifiers,
-
-        /**
-         * unstable_pinned disables the flip modifier by setting flip.enabled to false; this
-         * disables automatic repositioning of the popper box; it will always be placed according to
-         * the values of `align` and `position` props, regardless of the size of the component, the
-         * reference element or the viewport.
-         */
-        unstable_pinned && { flip: { enabled: false } },
-      ),
-    [hasScrollableElement, position, offset, rtl, unstable_pinned, userModifiers],
+      offset && {
+        offset: { offset: rtl ? applyRtlToOffset(offset, position) : offset },
+        keepTogether: { enabled: false },
+      },
+    [rtl, offset, position],
   )
 
   const scheduleUpdate = React.useCallback(() => {
@@ -172,7 +102,48 @@ const Popper: React.FunctionComponent<PopperProps> = props => {
       return
     }
 
-    const hasPointer = !!(pointerTargetRef && pointerTargetRef.current)
+    const pointerTargetRefElement = pointerTargetRef && pointerTargetRef.current
+    const scrollParentElement = getScrollParent(contentRef.current)
+    const popperHasScrollableParent = scrollParentElement !== scrollParentElement.ownerDocument.body
+
+    const modifiers: PopperJS.Modifiers = _.merge(
+      { preventOverflow: { padding: 0 } },
+      { flip: { padding: 0, flipVariationsByContent: true } },
+      /**
+       * This prevents blurrines in chrome, when the coordinates are odd numbers
+       * alternative would be to use `fn`, call _PopperJS.default.Defaults.modifiers.computeStyle.fn(data, options)
+       * and manipulate the computeed style or ask popper to fix it
+       * but since there is presumably only handful of poppers displayed on the page, the performance impact should be minimal
+       */
+      { computeStyle: { gpuAcceleration: false } },
+      /**
+       * When the popper box is placed in the context of a scrollable element, we need to set
+       * preventOverflow.escapeWithReference to true and flip.boundariesElement to 'scrollParent' (default is 'viewport')
+       * so that the popper box will stick with the targetRef when we scroll targetRef out of the viewport.
+       */
+      popperHasScrollableParent && {
+        preventOverflow: { escapeWithReference: true },
+        flip: { boundariesElement: 'scrollParent' },
+      },
+      /**
+       * unstable_pinned disables the flip modifier by setting flip.enabled to false; this disables automatic
+       * repositioning of the popper box; it will always be placed according to the values of `align` and
+       * `position` props, regardless of the size of the component, the reference element or the viewport.
+       */
+      unstable_pinned && { flip: { enabled: false } },
+      computedModifiers,
+      userModifiers,
+      /**
+       * This modifier is necessary in order to render the pointer.
+       */
+      {
+        arrow: {
+          enabled: !!pointerTargetRefElement,
+          element: pointerTargetRefElement,
+        },
+      },
+    )
+
     const handleUpdate = (data: PopperJS.Data) => {
       // PopperJS performs computations that might update the computed placement: auto positioning, flipping the
       // placement in case the popper box should be rendered at the edge of the viewport and does not fit
@@ -185,20 +156,7 @@ const Popper: React.FunctionComponent<PopperProps> = props => {
     const options: PopperJS.PopperOptions = {
       placement: proposedPlacement,
       positionFixed,
-      modifiers: {
-        ...computedModifiers,
-
-        /**
-         * This modifier is necessary in order to render the pointer. Refs are resolved in effects, so it can't be
-         * placed under computed modifiers. Deep merge is not required as this modifier has only these properties.
-         * `arrow` modifier also requires `keepTogether`.
-         */
-        keepTogether: { enabled: hasPointer },
-        arrow: {
-          enabled: hasPointer,
-          element: pointerTargetRef && pointerTargetRef.current,
-        },
-      },
+      modifiers,
       onCreate: handleUpdate,
       onUpdate: handleUpdate,
     }
@@ -206,16 +164,16 @@ const Popper: React.FunctionComponent<PopperProps> = props => {
     popperRef.current = createPopper(reference, contentRef.current, options)
   }, [
     // TODO review dependencies for popperHasScrollableParent
-    enabled,
     computedModifiers,
-    pointerTargetRef,
+    enabled,
+    userModifiers,
     positionFixed,
     proposedPlacement,
-    targetRef,
     unstable_pinned,
+    targetRef,
   ])
 
-  useIsomorphicLayoutEffect(() => {
+  React.useLayoutEffect(() => {
     createInstance()
     return destroyInstance
   }, [createInstance])
@@ -224,10 +182,13 @@ const Popper: React.FunctionComponent<PopperProps> = props => {
 
   const child =
     typeof children === 'function'
-      ? children({ placement: computedPlacement, scheduleUpdate })
-      : (children as React.ReactElement)
+      ? (children as PopperChildrenFn)({
+          placement: computedPlacement,
+          scheduleUpdate,
+        })
+      : children
 
-  return child ? <Ref innerRef={contentRef}>{React.Children.only(child)}</Ref> : null
+  return <Ref innerRef={contentRef}>{React.Children.only(child) as React.ReactElement}</Ref>
 }
 
 Popper.defaultProps = {
diff --git a/packages/react/src/utils/positioner/initialStyles.ts b/packages/react/src/utils/positioner/initialStyles.ts
deleted file mode 100644
index 8aad407cbb..0000000000
--- a/packages/react/src/utils/positioner/initialStyles.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import * as React from 'react'
-
-const initialStyles: React.CSSProperties = {
-  // Prevents scroll issue, waiting for Popper.js to add this style once initiated.
-  // https://github.com/mui-org/material-ui/issues/16740
-  position: 'fixed',
-  // Fix Popper.js initial positioning display issue
-  // https://github.com/mui-org/material-ui/issues/17774
-  top: 0,
-  left: '0px /* @noflip */',
-}
-
-export default initialStyles
diff --git a/packages/react/src/utils/positioner/types.ts b/packages/react/src/utils/positioner/types.ts
index 694f7e2f22..c2f67c3ab3 100644
--- a/packages/react/src/utils/positioner/types.ts
+++ b/packages/react/src/utils/positioner/types.ts
@@ -4,7 +4,7 @@ import PopperJS from 'popper.js'
 export type Position = 'above' | 'below' | 'before' | 'after'
 export type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center'
 
-export type PopperChildrenFn = (props: PopperChildrenProps) => React.ReactElement
+export type PopperChildrenFn = (props: PopperChildrenProps) => React.ReactNode
 
 export interface BasicPositioningProps {
   /**
@@ -47,7 +47,7 @@ export interface PopperProps extends PositioningProps {
   /**
    * The content of the Popper box (the element that is going to be repositioned).
    */
-  children: PopperChildrenFn | React.ReactElement
+  children: PopperChildrenFn | React.ReactNode
 
   /**
    * Enables events (resize, scroll).
diff --git a/packages/react/src/utils/renderComponent.tsx b/packages/react/src/utils/renderComponent.tsx
index 72198378d7..8a0d0d9e30 100644
--- a/packages/react/src/utils/renderComponent.tsx
+++ b/packages/react/src/utils/renderComponent.tsx
@@ -11,7 +11,7 @@ import {
 } from '@fluentui/react-bindings'
 import {
   emptyTheme,
-  ComponentSlotStylesResolved,
+  ComponentSlotStylesPrepared,
   ComponentVariablesObject,
   DebugData,
   PropsWithVarsAndStyles,
@@ -28,7 +28,7 @@ export interface RenderResultConfig<P> {
   classes: ComponentSlotClasses
   unhandledProps: Props
   variables: ComponentVariablesObject
-  styles: ComponentSlotStylesResolved
+  styles: ComponentSlotStylesPrepared
   accessibility: ReactAccessibilityBehavior
   rtl: boolean
   theme: ThemePrepared
@@ -68,7 +68,6 @@ const renderComponent = <P extends {}>(
 
   const { setStart, setEnd } = useTelemetry(displayName, context.telemetry)
   const rtl = context.rtl || false
-  const enableVariablesCaching = context.performance?.enableVariablesCaching
 
   setStart()
 
@@ -92,11 +91,7 @@ const renderComponent = <P extends {}>(
     rtl,
     saveDebug,
     theme: context.theme || emptyTheme,
-    performance: {
-      enableVariablesCaching:
-        typeof enableVariablesCaching === 'boolean' ? enableVariablesCaching : true,
-      enableStylesCaching: false, // we cannot enable caching for class components
-    },
+    _internal_resolvedComponentVariables: context._internal_resolvedComponentVariables || {},
   })
 
   const resolvedConfig: RenderResultConfig<P> = {
diff --git a/packages/react/src/utils/whatInput.ts b/packages/react/src/utils/whatInput.ts
index 600dc4d463..f1d18fb5a2 100644
--- a/packages/react/src/utils/whatInput.ts
+++ b/packages/react/src/utils/whatInput.ts
@@ -263,12 +263,8 @@ export const tryCleanupWhatInput = (target: Document) => {
   }
 }
 
-export const setWhatInputSource = (
-  target: Document,
-  newInput: 'mouse' | 'keyboard' | 'initial',
-) => {
+export const setWhatInputSource = (newInput: 'mouse' | 'keyboard' | 'initial') => {
   currentInput = newInput
-  doUpdate(target)
 }
 
 // returns string: the current input type
diff --git a/packages/react/test/specs/commonTests/handlesAccessibility.tsx b/packages/react/test/specs/commonTests/handlesAccessibility.tsx
index 0058b2b098..6ac1ce9707 100644
--- a/packages/react/test/specs/commonTests/handlesAccessibility.tsx
+++ b/packages/react/test/specs/commonTests/handlesAccessibility.tsx
@@ -1,7 +1,6 @@
 import { Accessibility, AriaRole } from '@fluentui/accessibility'
 import * as React from 'react'
 import * as keyboardKey from 'keyboard-key'
-import { act } from 'react-dom/test-utils'
 
 import { mountWithProviderAndGetComponent, mountWithProvider } from 'test/utils'
 import { UIComponent } from 'src/utils'
@@ -134,10 +133,8 @@ export default (
         wrapper.setProps({})
       }
 
-      act(() => {
-        getEventTargetComponent(component, 'onKeyDown').simulate('keydown', {
-          keyCode: keyboardKey.Enter,
-        })
+      getEventTargetComponent(component, 'onKeyDown').simulate('keydown', {
+        keyCode: keyboardKey.Enter,
       })
 
       if (instance && instance.actionHandlers) {
diff --git a/packages/react/test/specs/commonTests/isConformant.tsx b/packages/react/test/specs/commonTests/isConformant.tsx
index 581d2938db..81bb80bdb7 100644
--- a/packages/react/test/specs/commonTests/isConformant.tsx
+++ b/packages/react/test/specs/commonTests/isConformant.tsx
@@ -6,7 +6,6 @@ import * as _ from 'lodash'
 import * as React from 'react'
 import { ReactWrapper } from 'enzyme'
 import * as ReactDOMServer from 'react-dom/server'
-import { act } from 'react-dom/test-utils'
 
 import isExportedAtTopLevel from './isExportedAtTopLevel'
 import {
@@ -391,17 +390,13 @@ export default function isConformant(
         const customHandler: Function = eventTarget.prop(listenerName)
 
         if (customHandler) {
-          act(() => {
-            customHandler(eventShape)
-          })
+          customHandler(eventShape)
         } else {
           if (Component.propTypes[listenerName]) {
             throw new Error(
               `Handler for '${listenerName}' is not passed to child event emitter element <${eventTarget.type()} />`,
             )
           }
-
-          // We are cheking only props handled by component
           return
         }
 
diff --git a/packages/react/test/specs/components/Accordion/AccordionTitle-test.tsx b/packages/react/test/specs/components/Accordion/AccordionTitle-test.tsx
index 1c49019190..1f790fc0df 100644
--- a/packages/react/test/specs/components/Accordion/AccordionTitle-test.tsx
+++ b/packages/react/test/specs/components/Accordion/AccordionTitle-test.tsx
@@ -1,8 +1,5 @@
-import * as React from 'react'
-import * as keyboardKey from 'keyboard-key'
 import AccordionTitle from 'src/components/Accordion/AccordionTitle'
 import { isConformant, handlesAccessibility } from 'test/specs/commonTests'
-import { mountWithProvider } from 'test/utils'
 
 describe('AccordionTitle', () => {
   isConformant(AccordionTitle, {
@@ -24,46 +21,4 @@ describe('AccordionTitle', () => {
       })
     })
   })
-
-  const getContent = wrapper => wrapper.find(`div.${AccordionTitle.slotClassNames.content}`)
-
-  describe('click handler', () => {
-    it('is called on click', () => {
-      const onClick = jest.fn()
-      const wrapper = mountWithProvider(<AccordionTitle onClick={onClick} />)
-
-      getContent(wrapper).simulate('click')
-      expect(onClick).toHaveBeenCalled()
-    })
-
-    it('is not called on click for disabled title', () => {
-      const onClick = jest.fn()
-      const wrapper = mountWithProvider(<AccordionTitle onClick={onClick} disabled={true} />)
-
-      getContent(wrapper).simulate('click')
-      expect(onClick).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('Enter key', () => {
-    it('calls onClick', () => {
-      const onClick = jest.fn()
-      const wrapper = mountWithProvider(<AccordionTitle onClick={onClick} />)
-
-      getContent(wrapper).simulate('keydown', {
-        keyCode: keyboardKey.Enter,
-      })
-      expect(onClick).toHaveBeenCalled()
-    })
-
-    it('does not call onClick for disabled title', () => {
-      const onClick = jest.fn()
-      const wrapper = mountWithProvider(<AccordionTitle onClick={onClick} disabled={true} />)
-
-      getContent(wrapper).simulate('keydown', {
-        keyCode: keyboardKey.Enter,
-      })
-      expect(onClick).not.toHaveBeenCalled()
-    })
-  })
 })
diff --git a/packages/react/test/specs/components/Animation/Animation-test.tsx b/packages/react/test/specs/components/Animation/Animation-test.tsx
index cac93d6f74..628a7b55bf 100644
--- a/packages/react/test/specs/components/Animation/Animation-test.tsx
+++ b/packages/react/test/specs/components/Animation/Animation-test.tsx
@@ -2,21 +2,11 @@ import * as React from 'react'
 import { isConformant } from 'test/specs/commonTests'
 
 import Animation from 'src/components/Animation/Animation'
-import { mountWithProvider } from 'test/utils'
 
 describe('Animation', () => {
   isConformant(Animation, {
-    constructorName: 'Animation',
     hasAccessibilityProp: false,
     requiredProps: { children: <div /> },
     handlesAsProp: false,
   })
-
-  test('does not throw if children is not passed', () => {
-    expect(() => mountWithProvider(<Animation />)).not.toThrowError()
-  })
-
-  test('does not throw if children function returns undefined', () => {
-    expect(() => mountWithProvider(<Animation children={() => undefined} />)).not.toThrowError()
-  })
 })
diff --git a/packages/react/test/specs/components/Carousel/Carousel-test.tsx b/packages/react/test/specs/components/Carousel/Carousel-test.tsx
index b7c7072ce6..aed92d5d7b 100644
--- a/packages/react/test/specs/components/Carousel/Carousel-test.tsx
+++ b/packages/react/test/specs/components/Carousel/Carousel-test.tsx
@@ -262,12 +262,13 @@ describe('Carousel', () => {
     it('should show and focus the appropriate slide when clicked', () => {
       const wrapper = renderCarousel({ navigation })
       const secondNavigationItemWrapper = getNavigationNavigationItemAtIndexWrapper(wrapper, 1)
+      const secondItemWrapper = getItemAtIndexWrapper(wrapper, 1)
 
       secondNavigationItemWrapper.simulate('click')
       jest.runAllTimers()
 
       expect(wrapper.state('activeIndex')).toEqual(1)
-      expect(document.activeElement.firstElementChild.innerHTML).toEqual('item2')
+      expect(document.activeElement).toEqual(secondItemWrapper.getDOMNode())
     })
   })
 })
diff --git a/packages/react/test/specs/components/Chat/Chat-test.ts b/packages/react/test/specs/components/Chat/Chat-test.ts
index 49f0729d3f..3deeae2242 100644
--- a/packages/react/test/specs/components/Chat/Chat-test.ts
+++ b/packages/react/test/specs/components/Chat/Chat-test.ts
@@ -7,9 +7,7 @@ import ChatItem from 'src/components/Chat/ChatItem'
 const chatImplementsCollectionShorthandProp = implementsCollectionShorthandProp(Chat)
 
 describe('Chat', () => {
-  isConformant(Chat, {
-    constructorName: 'Chat',
-  })
+  isConformant(Chat)
   chatImplementsCollectionShorthandProp('items', ChatItem, { mapsValueToProp: 'message' })
 
   describe('accessibility', () => {
diff --git a/packages/react/test/specs/components/Chat/ChatItem-test.tsx b/packages/react/test/specs/components/Chat/ChatItem-test.tsx
index e435ae36c0..43d5bcc799 100644
--- a/packages/react/test/specs/components/Chat/ChatItem-test.tsx
+++ b/packages/react/test/specs/components/Chat/ChatItem-test.tsx
@@ -5,9 +5,7 @@ import Box from 'src/components/Box/Box'
 const chatItemImplementsShorthandProp = implementsShorthandProp(ChatItem)
 
 describe('ChatItem', () => {
-  isConformant(ChatItem, {
-    constructorName: 'ChatItem',
-  })
+  isConformant(ChatItem)
 
   chatItemImplementsShorthandProp('gutter', Box, { mapsValueToProp: 'children' })
   chatItemImplementsShorthandProp('message', Box, { mapsValueToProp: 'children' })
diff --git a/packages/react/test/specs/components/Chat/ChatMessage-test.tsx b/packages/react/test/specs/components/Chat/ChatMessage-test.tsx
index 1e70e8b18d..c7f0725ed9 100644
--- a/packages/react/test/specs/components/Chat/ChatMessage-test.tsx
+++ b/packages/react/test/specs/components/Chat/ChatMessage-test.tsx
@@ -1,4 +1,7 @@
+import * as React from 'react'
+
 import { handlesAccessibility, implementsShorthandProp, isConformant } from 'test/specs/commonTests'
+import { mountWithProvider } from 'test/utils'
 
 import ChatMessage from 'src/components/Chat/ChatMessage'
 import Text from 'src/components/Text/Text'
@@ -7,9 +10,7 @@ import Box from 'src/components/Box/Box'
 const chatMessageImplementsShorthandProp = implementsShorthandProp(ChatMessage)
 
 describe('ChatMessage', () => {
-  isConformant(ChatMessage, {
-    constructorName: 'ChatMessage',
-  })
+  isConformant(ChatMessage)
 
   chatMessageImplementsShorthandProp('author', Text)
   chatMessageImplementsShorthandProp('timestamp', Text)
@@ -18,4 +19,14 @@ describe('ChatMessage', () => {
   describe('accessibility', () => {
     handlesAccessibility(ChatMessage)
   })
+
+  describe('onMouseEnter', () => {
+    it('performs position update', () => {
+      const wrapper = mountWithProvider(<ChatMessage />)
+      const update = jest.spyOn(wrapper.instance() as any, 'updateActionsMenuPosition')
+
+      wrapper.simulate('mouseenter')
+      expect(update).toBeCalledTimes(1)
+    })
+  })
 })
diff --git a/packages/react/test/specs/components/Checkbox/Checkbox-test.tsx b/packages/react/test/specs/components/Checkbox/Checkbox-test.tsx
index a5c7d09593..1a626d30a1 100644
--- a/packages/react/test/specs/components/Checkbox/Checkbox-test.tsx
+++ b/packages/react/test/specs/components/Checkbox/Checkbox-test.tsx
@@ -7,7 +7,7 @@ import {
 } from 'test/specs/commonTests'
 
 describe('Checkbox', () => {
-  isConformant(Checkbox, { constructorName: 'Checkbox' })
+  isConformant(Checkbox)
   handlesAccessibility(Checkbox, { defaultRootRole: 'checkbox' })
 
   describe('HTML accessibility rules validation', () => {
diff --git a/packages/react/test/specs/components/Icon/Icon-test.tsx b/packages/react/test/specs/components/Icon/Icon-test.tsx
index 06a0aa6754..942e25f904 100644
--- a/packages/react/test/specs/components/Icon/Icon-test.tsx
+++ b/packages/react/test/specs/components/Icon/Icon-test.tsx
@@ -6,7 +6,7 @@ import Icon from '../../../../src/components/Icon/Icon'
 import { mountWithProviderAndGetComponent } from 'test/utils'
 
 describe('Icon', () => {
-  isConformant(Icon, { constructorName: 'Icon', requiredProps: { name: 'at' } })
+  isConformant(Icon, { requiredProps: { name: 'at' } })
 
   describe('accessibility', () => {
     handlesAccessibility(Icon, {
diff --git a/packages/react/test/specs/components/Label/Label-test.tsx b/packages/react/test/specs/components/Label/Label-test.tsx
index f58b487d78..e6af7b2089 100644
--- a/packages/react/test/specs/components/Label/Label-test.tsx
+++ b/packages/react/test/specs/components/Label/Label-test.tsx
@@ -7,7 +7,7 @@ import Image from 'src/components/Image/Image'
 const labelImplementsShorthandProp = implementsShorthandProp(Label)
 
 describe('Label', () => {
-  isConformant(Label, { constructorName: 'Label' })
+  isConformant(Label)
   labelImplementsShorthandProp('icon', Icon, {
     mapsValueToProp: 'name',
     requiredShorthandProps: { name: 'at' },
diff --git a/packages/react/test/specs/components/List/List-test.tsx b/packages/react/test/specs/components/List/List-test.tsx
index f00dbe370b..98f00b23cd 100644
--- a/packages/react/test/specs/components/List/List-test.tsx
+++ b/packages/react/test/specs/components/List/List-test.tsx
@@ -45,54 +45,34 @@ describe('List', () => {
 
   describe('selectedIndex', () => {
     it('should not be set by default', () => {
-      const wrapper = mountWithProvider(<List selectable items={getItems()} />)
-
-      expect(
-        wrapper.find('li').filterWhere(item => Boolean(item.prop('aria-selected'))),
-      ).toHaveLength(0)
+      const listItems = mountWithProvider(<List selectable items={getItems()} />).find('ListItem')
+      expect(listItems.everyWhere(item => !item.props().selected)).toBe(true)
     })
 
     it('can be set a default value', () => {
-      const wrapper = mountWithProvider(
+      const listItems = mountWithProvider(
         <List selectable defaultSelectedIndex={0} items={getItems()} />,
-      )
-      expect(
-        wrapper
-          .find('li')
-          .at(0)
-          .prop('aria-selected'),
-      ).toBe(true)
+      ).find('ListItem')
+      expect(listItems.first().props().selected).toBe(true)
     })
 
     it('should be set when item is clicked', () => {
       const wrapper = mountWithProvider(
         <List selectable defaultSelectedIndex={0} items={getItems()} />,
       )
+      const listItems = wrapper.find('ListItem')
+      expect(listItems.at(0).props().selected).toBe(true)
 
-      expect(
-        wrapper
-          .find('li')
-          .at(0)
-          .prop('aria-selected'),
-      ).toBe(true)
-
-      wrapper
-        .find('li')
+      listItems
         .at(1)
+        .find('li')
+        .first()
         .simulate('click')
 
-      expect(
-        wrapper
-          .find('li')
-          .at(0)
-          .prop('aria-selected'),
-      ).toBe(false)
-      expect(
-        wrapper
-          .find('li')
-          .at(1)
-          .prop('aria-selected'),
-      ).toBe(true)
+      const updatedItems = wrapper.find('ListItem')
+
+      expect(updatedItems.at(0).props().selected).toBe(false)
+      expect(updatedItems.at(1).props().selected).toBe(true)
     })
 
     it('calls onClick handler for item if `selectable`', () => {
diff --git a/packages/react/test/specs/components/Provider/Provider-test.tsx b/packages/react/test/specs/components/Provider/Provider-test.tsx
index 9d115e8494..f6a3817919 100644
--- a/packages/react/test/specs/components/Provider/Provider-test.tsx
+++ b/packages/react/test/specs/components/Provider/Provider-test.tsx
@@ -6,27 +6,6 @@ import * as React from 'react'
 import Provider from 'src/components/Provider/Provider'
 import ProviderConsumer from 'src/components/Provider/ProviderConsumer'
 
-const createDocumentMock = (): Document => {
-  const externalDocument = document.implementation.createDocument(
-    'http://www.w3.org/1999/xhtml',
-    'html',
-    null,
-  )
-  const externalWindow: Partial<Window> = {
-    ontouchstart: () => {}, // whatInput asserts for this method
-
-    addEventListener: () => {},
-    removeEventListener: () => {},
-  }
-
-  externalDocument.documentElement.appendChild(externalDocument.createElement('body'))
-  // `defaultView` is read-only by spec, getter is used as workaround
-  // https://github.com/facebook/jest/issues/2227#issuecomment-430435133
-  jest.spyOn(externalDocument, 'defaultView', 'get').mockReturnValue(externalWindow as any)
-
-  return externalDocument
-}
-
 describe('Provider', () => {
   test('is exported', () => {
     expect(require('src/index.ts').Provider).toEqual(Provider)
@@ -256,10 +235,18 @@ describe('Provider', () => {
 
   describe('target', () => {
     test('performs whatinput init on first Provider mount', () => {
-      const externalDocument = createDocumentMock()
-
-      const addEventListener = jest.spyOn(externalDocument.defaultView, 'addEventListener')
-      const setAttribute = jest.spyOn(externalDocument.documentElement, 'setAttribute')
+      const addEventListener = jest.fn()
+      const setAttribute = jest.fn()
+      const externalDocument: any = {
+        defaultView: {
+          addEventListener,
+          removeEventListener: jest.fn(),
+          ontouchstart: jest.fn(),
+        },
+        documentElement: {
+          setAttribute,
+        },
+      }
 
       mount(
         <Provider id="first-provider" target={externalDocument}>
@@ -275,8 +262,18 @@ describe('Provider', () => {
     })
 
     test('performs whatinput cleanup on last Provider unmount', () => {
-      const externalDocument = createDocumentMock()
-      const removeEventListener = jest.spyOn(externalDocument.defaultView, 'removeEventListener')
+      const removeEventListener = jest.fn()
+      const setAttribute = jest.fn()
+      const externalDocument: any = {
+        defaultView: {
+          addEventListener: jest.fn(),
+          removeEventListener,
+          ontouchstart: jest.fn(),
+        },
+        documentElement: {
+          setAttribute,
+        },
+      }
 
       const wrapper = mount(
         <Provider id="first-provider" target={externalDocument}>
diff --git a/packages/react/test/specs/components/Slider/Slider-test.tsx b/packages/react/test/specs/components/Slider/Slider-test.tsx
index d18c1abd93..af8f4ee925 100644
--- a/packages/react/test/specs/components/Slider/Slider-test.tsx
+++ b/packages/react/test/specs/components/Slider/Slider-test.tsx
@@ -3,7 +3,6 @@ import Slider from 'src/components/Slider/Slider'
 
 describe('Slider', () => {
   isConformant(Slider, {
-    constructorName: 'Slider',
     eventTargets: {
       onChange: 'input',
       onKeyDown: 'input',
diff --git a/packages/react/test/specs/components/Status/Status-test.tsx b/packages/react/test/specs/components/Status/Status-test.tsx
index 340132640e..019bc0511e 100644
--- a/packages/react/test/specs/components/Status/Status-test.tsx
+++ b/packages/react/test/specs/components/Status/Status-test.tsx
@@ -3,5 +3,5 @@ import { isConformant } from 'test/specs/commonTests'
 import Status from 'src/components/Status/Status'
 
 describe('Status', () => {
-  isConformant(Status, { constructorName: 'Status' })
+  isConformant(Status)
 })
diff --git a/packages/react/test/specs/components/Text/Text-test.tsx b/packages/react/test/specs/components/Text/Text-test.tsx
index 846fef69b3..e179ec4d2b 100644
--- a/packages/react/test/specs/components/Text/Text-test.tsx
+++ b/packages/react/test/specs/components/Text/Text-test.tsx
@@ -6,7 +6,7 @@ import { mountWithProvider } from 'test/utils'
 import Text from 'src/components/Text/Text'
 
 describe('Text', () => {
-  isConformant(Text, { constructorName: 'Text' })
+  isConformant(Text)
 
   test('renders children', () => {
     expect(mountWithProvider(<Text>children</Text>).text()).toEqual('children')
diff --git a/packages/react/test/specs/components/Tooltip/TooltipContent-test.ts b/packages/react/test/specs/components/Tooltip/TooltipContent-test.ts
index 10695fa212..afeda10e6b 100644
--- a/packages/react/test/specs/components/Tooltip/TooltipContent-test.ts
+++ b/packages/react/test/specs/components/Tooltip/TooltipContent-test.ts
@@ -3,7 +3,5 @@ import { isConformant } from 'test/specs/commonTests'
 import TooltipContent from 'src/components/Tooltip/TooltipContent'
 
 describe('TooltipContent', () => {
-  isConformant(TooltipContent, {
-    constructorName: 'TooltipContent',
-  })
+  isConformant(TooltipContent)
 })
diff --git a/packages/react/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap b/packages/react/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap
index 0868088a7d..8979e23521 100644
--- a/packages/react/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap
+++ b/packages/react/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap
@@ -14,7 +14,7 @@ exports[`felaRenderer CSS fallback values are rendered 1`] = `
 exports[`felaRenderer animations are not applied if animations are disabled 1`] = `
 "
 
-<div className=ui-provider dir=ltr>
+<div className=ui-provider__box dir=ltr>
   <div className=ui-box ui-animation />
 </div>;
 "
@@ -62,7 +62,7 @@ exports[`felaRenderer array returned by keyframe results in CSS fallback values
 }
 
 
-<div className=ui-provider dir=ltr>
+<div className=ui-provider__box dir=ltr>
   <div className=ui-box ui-animation a />
 </div>;
 "
@@ -111,7 +111,7 @@ exports[`felaRenderer keyframe colors are rendered 1`] = `
 }
 
 
-<div className=ui-provider dir=ltr>
+<div className=ui-provider__box dir=ltr>
   <div className=ui-box ui-animation a b />
 </div>;
 "
@@ -123,7 +123,7 @@ exports[`felaRenderer marginLeft is rendered into marginLeft due to RTL with \`n
 }
 
 
-<div className=ui-provider dir=rtl>
+<div className=ui-provider__box dir=rtl>
   <span className=ui-text a dir=auto>
     Hello
   </span>
@@ -137,7 +137,7 @@ exports[`felaRenderer marginLeft is rendered into marginRight due to RTL 1`] = `
 }
 
 
-<div className=ui-provider dir=rtl>
+<div className=ui-provider__box dir=rtl>
   <span className=ui-text a dir=auto>
     Hello
   </span>
diff --git a/packages/react/test/specs/utils/felaRenderer-test.tsx b/packages/react/test/specs/utils/felaRenderer-test.tsx
index 524ccafcc7..dce6e30627 100644
--- a/packages/react/test/specs/utils/felaRenderer-test.tsx
+++ b/packages/react/test/specs/utils/felaRenderer-test.tsx
@@ -6,6 +6,31 @@ import Animation from 'src/components/Animation/Animation'
 import Provider from 'src/components/Provider/Provider'
 import Text from 'src/components/Text/Text'
 import { felaRenderer } from 'src/utils'
+import {
+  ComponentAnimationProp,
+  unstable_createAnimationStyles as createAnimationStyles,
+} from '@fluentui/react-bindings'
+
+// Animation component depends on theme styles 💣
+// Issue: https://github.com/microsoft/fluent-ui-react/issues/2247
+// This adds required styles when needed.
+const AnimationComponentStyles = {
+  root: ({ props: p, theme }) => {
+    const animation: ComponentAnimationProp = {
+      name: p.name,
+      keyframeParams: p.keyframeParams,
+      duration: p.duration,
+      delay: p.delay,
+      iterationCount: p.iterationCount,
+      direction: p.direction,
+      fillMode: p.fillMode,
+      playState: p.playState,
+      timingFunction: p.timingFunction,
+    }
+
+    return createAnimationStyles(animation, theme)
+  },
+}
 
 describe('felaRenderer', () => {
   test('basic styles are rendered', () => {
@@ -50,6 +75,7 @@ describe('felaRenderer', () => {
     const snapshot = createSnapshot(
       <Provider
         theme={{
+          componentStyles: { Animation: AnimationComponentStyles },
           animations: { colorChanger },
         }}
       >
@@ -80,6 +106,7 @@ describe('felaRenderer', () => {
     const snapshot = createSnapshot(
       <Provider
         theme={{
+          componentStyles: { Animation: AnimationComponentStyles },
           animations: { colorChanger },
         }}
       >
@@ -111,6 +138,7 @@ describe('felaRenderer', () => {
       <Provider
         disableAnimations
         theme={{
+          componentStyles: { Animation: AnimationComponentStyles },
           animations: { spinner },
         }}
       >
diff --git a/packages/react/test/utils/withProvider.tsx b/packages/react/test/utils/withProvider.tsx
index 30a3ffc919..03ce491b36 100644
--- a/packages/react/test/utils/withProvider.tsx
+++ b/packages/react/test/utils/withProvider.tsx
@@ -10,11 +10,11 @@ export const EmptyThemeProvider: React.FunctionComponent = ({ children }) => {
   const theme: ProviderContextPrepared = {
     renderer: felaRenderer,
     target: document,
+    _internal_resolvedComponentVariables: {},
     disableAnimations: false,
     rtl: false,
     theme: emptyTheme,
     telemetry: undefined,
-    performance: {},
   }
 
   return <ThemeProvider theme={theme}>{children}</ThemeProvider>
diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
index ce400f030e..61bd5687e9 100644
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -17,7 +17,6 @@
     { "path": "../react-component-event-listener" },
     { "path": "../react-component-nesting-registry" },
     { "path": "../react-component-ref" },
-    { "path": "../react-context-selector" },
     { "path": "../react-proptypes" }
   ]
 }
diff --git a/packages/state/package.json b/packages/state/package.json
index de26917272..dc070e337d 100644
--- a/packages/state/package.json
+++ b/packages/state/package.json
@@ -1,14 +1,14 @@
 {
   "name": "@fluentui/state",
   "description": "A set of utils to create framework agnostic and reusable state managers",
-  "version": "0.44.0",
+  "version": "0.43.0",
   "author": "Oleksandr Fediashov <a@fedyashov.com>",
   "bugs": "https://github.com/microsoft/fluent-ui-react/issues",
   "dependencies": {
-    "@babel/runtime": "^7.7.6"
+    "@babel/runtime": "^7.1.2"
   },
   "devDependencies": {
-    "@fluentui/internal-tooling": "^0.44.0",
+    "@fluentui/internal-tooling": "^0.43.0",
     "lerna-alias": "^3.0.3-0"
   },
   "files": [
diff --git a/packages/state/src/index.ts b/packages/state/src/index.ts
index a326eb9b85..72dd19ab3e 100644
--- a/packages/state/src/index.ts
+++ b/packages/state/src/index.ts
@@ -1,7 +1,6 @@
-export * from './managers/checkboxManager'
 export * from './managers/dialogManager'
 export * from './managers/dropdownManager'
-export * from './managers/sliderManager'
+export * from './managers/listManager'
 
 export { default as createManager } from './createManager'
 export * from './types'
diff --git a/packages/state/src/managers/checkboxManager.ts b/packages/state/src/managers/checkboxManager.ts
deleted file mode 100644
index d604048e93..0000000000
--- a/packages/state/src/managers/checkboxManager.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import createManager from '../createManager'
-import { Manager, ManagerConfig } from '../types'
-
-export type CheckboxActions = {
-  toggle: (checked: boolean) => void
-}
-
-export type CheckboxState = {
-  checked: boolean
-}
-
-export type CheckboxManager = Manager<CheckboxState, CheckboxActions>
-
-export const createCheckboxManager = (
-  config: Partial<ManagerConfig<CheckboxState, CheckboxActions>> = {},
-): CheckboxManager =>
-  createManager<CheckboxState, CheckboxActions>({
-    ...config,
-    state: {
-      checked: false,
-      ...config.state,
-    },
-    actions: {
-      toggle: checked => () => ({ checked }),
-      ...config.actions,
-    },
-  })
diff --git a/packages/state/src/managers/listManager.ts b/packages/state/src/managers/listManager.ts
new file mode 100644
index 0000000000..4ff9c73926
--- /dev/null
+++ b/packages/state/src/managers/listManager.ts
@@ -0,0 +1,26 @@
+import createManager from '../createManager'
+import { Manager, ManagerConfig } from '../types'
+
+export type ListState = {
+  selectedIndex?: number
+}
+
+export type ListActions = {
+  select: (index: number) => void
+}
+
+export type ListManager = Manager<ListState, ListActions>
+
+export const createListManager = (
+  config: Partial<ManagerConfig<ListState, ListActions>> = {},
+): ListManager =>
+  createManager<ListState, ListActions>({
+    ...config,
+    actions: {
+      select: index => () => ({ selectedIndex: index }),
+    },
+    state: {
+      selectedIndex: -1,
+      ...config.state,
+    },
+  })
diff --git a/packages/state/src/managers/sliderManager.ts b/packages/state/src/managers/sliderManager.ts
deleted file mode 100644
index 30e5ee7e55..0000000000
--- a/packages/state/src/managers/sliderManager.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import createManager from '../createManager'
-import { Manager, ManagerConfig } from '../types'
-
-export type SliderActions = {
-  change: (value: string) => void
-}
-
-export type SliderState = {
-  value: string
-}
-
-export type SliderManager = Manager<SliderState, SliderActions>
-
-export const createSliderManager = (
-  config: Partial<ManagerConfig<SliderState, SliderActions>> = {},
-): SliderManager =>
-  createManager<SliderState, SliderActions>({
-    ...config,
-    state: {
-      value: '50',
-      ...config.state,
-    },
-    actions: {
-      change: value => () => ({ value }),
-      ...config.actions,
-    },
-  })
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 7be4c13656..51ad1d7e8a 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -1,16 +1,16 @@
 {
   "name": "@fluentui/styles",
   "description": "A set of styling utilities for CSS-in-JS.",
-  "version": "0.44.0",
+  "version": "0.43.0",
   "author": "Marija Najdova <mnajdova@gmail.com>",
   "bugs": "https://github.com/microsoft/fluent-ui-react/issues",
   "dependencies": {
-    "@babel/runtime": "^7.7.6",
-    "csstype": "^2.6.7",
-    "lodash": "^4.17.15"
+    "@babel/runtime": "^7.1.2",
+    "lodash": "^4.17.15",
+    "csstype": "^2.6.7"
   },
   "devDependencies": {
-    "@fluentui/internal-tooling": "^0.44.0",
+    "@fluentui/internal-tooling": "^0.43.0",
     "lerna-alias": "^3.0.3-0"
   },
   "files": [
diff --git a/packages/styles/src/types.ts b/packages/styles/src/types.ts
index b6f3c2cf4a..5fc88bbfd2 100644
--- a/packages/styles/src/types.ts
+++ b/packages/styles/src/types.ts
@@ -188,8 +188,6 @@ export interface ComponentSlotStylesInput<TProps = {}, TVars = {}>
 export interface ComponentSlotStylesPrepared<TProps = {}, TVars = {}>
   extends Record<string, ComponentSlotStyleFunction<TProps, TVars>> {}
 
-export interface ComponentSlotStylesResolved extends Record<string, ICSSInJSStyle> {}
-
 export interface ComponentStyleFunctionParam<
   TProps extends PropsWithVarsAndStyles = PropsWithVarsAndStyles,
   TVars extends ComponentVariablesObject = ComponentVariablesObject
diff --git a/perf/package.json b/perf/package.json
index 7f734d74d1..6a97b12353 100644
--- a/perf/package.json
+++ b/perf/package.json
@@ -1,12 +1,12 @@
 {
   "name": "@fluentui/perf",
-  "version": "0.44.0",
+  "version": "0.43.0",
   "private": true,
   "license": "MIT",
   "devDependencies": {
     "@babel/polyfill": "^7.7.0",
-    "@fluentui/internal-tooling": "^0.44.0",
-    "@fluentui/react": "^0.44.0",
+    "@fluentui/internal-tooling": "^0.43.0",
+    "@fluentui/react": "^0.43.0",
     "@types/webpack-env": "^1.14.1",
     "minimatch": "^3.0.4"
   },
diff --git a/scripts/package.json b/scripts/package.json
index 29b4976ef3..aa5a4ca527 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/scripts",
-  "version": "0.44.0",
+  "version": "0.43.0",
   "license": "MIT",
   "main": "index.ts",
   "bin": {
@@ -10,7 +10,7 @@
     "projrefs": "just-scripts projrefs"
   },
   "dependencies": {
-    "@babel/core": "^7.7.7",
+    "@babel/core": "^7.6.4",
     "@storybook/addon-a11y": "^5.2.5",
     "@storybook/addon-actions": "^5.2.5",
     "@storybook/addon-info": "^5.2.5",
diff --git a/yarn.lock b/yarn.lock
index a2ec702472..4123bbcc7e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16,22 +16,6 @@
   dependencies:
     "@babel/highlight" "^7.0.0"
 
-"@babel/code-frame@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.8.3.tgz#33e25903d7481181534e12ec0a25f16b6fcf419e"
-  integrity sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==
-  dependencies:
-    "@babel/highlight" "^7.8.3"
-
-"@babel/compat-data@^7.8.4":
-  version "7.8.5"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.8.5.tgz#d28ce872778c23551cbb9432fc68d28495b613b9"
-  integrity sha512-jWYUqQX/ObOhG1UiEkbH5SANsE/8oKXiQWjj7p7xgj9Zmnt//aUvyz4dBkK0HNsS8/cbyC5NmmH87VekW+mXFg==
-  dependencies:
-    browserslist "^4.8.5"
-    invariant "^2.2.4"
-    semver "^5.5.0"
-
 "@babel/core@7.6.0":
   version "7.6.0"
   resolved "https://registry.npmjs.org/@babel/core/-/core-7.6.0.tgz#9b00f73554edd67bebc86df8303ef678be3d7b48"
@@ -92,21 +76,20 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/core@^7.7.7":
-  version "7.8.4"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.8.4.tgz#d496799e5c12195b3602d0fddd77294e3e38e80e"
-  integrity sha512-0LiLrB2PwrVI+a2/IEskBopDYSd8BCb3rOvH7D5tzoWd696TBEduBvuLVm4Nx6rltrLZqvI3MCalB2K2aVzQjA==
-  dependencies:
-    "@babel/code-frame" "^7.8.3"
-    "@babel/generator" "^7.8.4"
-    "@babel/helpers" "^7.8.4"
-    "@babel/parser" "^7.8.4"
-    "@babel/template" "^7.8.3"
-    "@babel/traverse" "^7.8.4"
-    "@babel/types" "^7.8.3"
-    convert-source-map "^1.7.0"
+"@babel/core@^7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.6.4.tgz#6ebd9fe00925f6c3e177bb726a188b5f578088ff"
+  integrity sha512-Rm0HGw101GY8FTzpWSyRbki/jzq+/PkNQJ+nSulrdY6gFGOsNseCqD6KHRYe2E+EdzuBdr2pxCp6s4Uk6eJ+XQ==
+  dependencies:
+    "@babel/code-frame" "^7.5.5"
+    "@babel/generator" "^7.6.4"
+    "@babel/helpers" "^7.6.2"
+    "@babel/parser" "^7.6.4"
+    "@babel/template" "^7.6.0"
+    "@babel/traverse" "^7.6.3"
+    "@babel/types" "^7.6.3"
+    convert-source-map "^1.1.0"
     debug "^4.1.0"
-    gensync "^1.0.0-beta.1"
     json5 "^2.1.0"
     lodash "^4.17.13"
     resolve "^1.3.2"
@@ -134,22 +117,22 @@
     lodash "^4.17.13"
     source-map "^0.5.0"
 
-"@babel/generator@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.4.tgz#db651e2840ca9aa66f327dcec1dc5f5fa9611369"
-  integrity sha512-m5qo2WgdOJeyYngKImbkyQrnUN1mPceaG5BV+G0E3gWsa4l/jCSryWJdM2x8OuGAOyh+3d5pVYfZWCiNFtynxg==
+"@babel/generator@^7.6.3", "@babel/generator@^7.6.4":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.6.4.tgz#a4f8437287bf9671b07f483b76e3bb731bc97671"
+  integrity sha512-jsBuXkFoZxk0yWLyGI9llT9oiQ2FeTASmRFE32U+aaDTfoE92t78eroO7PTpU/OrYq38hlcDM6vbfLDaOLy+7w==
   dependencies:
-    "@babel/types" "^7.7.4"
+    "@babel/types" "^7.6.3"
     jsesc "^2.5.1"
     lodash "^4.17.13"
     source-map "^0.5.0"
 
-"@babel/generator@^7.8.4":
-  version "7.8.4"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.8.4.tgz#35bbc74486956fe4251829f9f6c48330e8d0985e"
-  integrity sha512-PwhclGdRpNAf3IxZb0YVuITPZmmrXz9zf6fH8lT4XbrmfQKr6ryBzhv593P5C6poJRciFCL/eHGW2NuGrgEyxA==
+"@babel/generator@^7.7.4":
+  version "7.7.4"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.4.tgz#db651e2840ca9aa66f327dcec1dc5f5fa9611369"
+  integrity sha512-m5qo2WgdOJeyYngKImbkyQrnUN1mPceaG5BV+G0E3gWsa4l/jCSryWJdM2x8OuGAOyh+3d5pVYfZWCiNFtynxg==
   dependencies:
-    "@babel/types" "^7.8.3"
+    "@babel/types" "^7.7.4"
     jsesc "^2.5.1"
     lodash "^4.17.13"
     source-map "^0.5.0"
@@ -175,13 +158,6 @@
   dependencies:
     "@babel/types" "^7.7.4"
 
-"@babel/helper-annotate-as-pure@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.8.3.tgz#60bc0bc657f63a0924ff9a4b4a0b24a13cf4deee"
-  integrity sha512-6o+mJrZBxOoEX77Ezv9zwW7WV8DdluouRKNY/IR5u/YTMuKHgugHOzYWlYvYLpLA9nPsQCAAASpCIbjI9Mv+Uw==
-  dependencies:
-    "@babel/types" "^7.8.3"
-
 "@babel/helper-builder-binary-assignment-operator-visitor@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.1.0.tgz#6b69628dfe4087798e0c4ed98e3d4a6b2fbd2f5f"
@@ -198,14 +174,6 @@
     "@babel/helper-explode-assignable-expression" "^7.7.4"
     "@babel/types" "^7.7.4"
 
-"@babel/helper-builder-binary-assignment-operator-visitor@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.8.3.tgz#c84097a427a061ac56a1c30ebf54b7b22d241503"
-  integrity sha512-5eFOm2SyFPK4Rh3XMMRDjN7lBH0orh3ss0g3rTYZnBQ+r6YPj7lgDyCvPphynHvUrobJmeMignBr6Acw9mAPlw==
-  dependencies:
-    "@babel/helper-explode-assignable-expression" "^7.8.3"
-    "@babel/types" "^7.8.3"
-
 "@babel/helper-builder-react-jsx@^7.3.0":
   version "7.3.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.3.0.tgz#a1ac95a5d2b3e88ae5e54846bf462eeb81b318a4"
@@ -230,14 +198,6 @@
     "@babel/types" "^7.7.4"
     esutils "^2.0.0"
 
-"@babel/helper-builder-react-jsx@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.8.3.tgz#dee98d7d79cc1f003d80b76fe01c7f8945665ff6"
-  integrity sha512-JT8mfnpTkKNCboTqZsQTdGo3l3Ik3l7QIt9hh0O9DYiwVel37VoJpILKM4YFbP2euF32nkQSb+F9cUk9b7DDXQ==
-  dependencies:
-    "@babel/types" "^7.8.3"
-    esutils "^2.0.0"
-
 "@babel/helper-call-delegate@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-call-delegate/-/helper-call-delegate-7.4.4.tgz#87c1f8ca19ad552a736a7a27b1c1fcf8b1ff1f43"
@@ -256,26 +216,6 @@
     "@babel/traverse" "^7.7.4"
     "@babel/types" "^7.7.4"
 
-"@babel/helper-call-delegate@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-call-delegate/-/helper-call-delegate-7.8.3.tgz#de82619898aa605d409c42be6ffb8d7204579692"
-  integrity sha512-6Q05px0Eb+N4/GTyKPPvnkig7Lylw+QzihMpws9iiZQv7ZImf84ZsZpQH7QoWN4n4tm81SnSzPgHw2qtO0Zf3A==
-  dependencies:
-    "@babel/helper-hoist-variables" "^7.8.3"
-    "@babel/traverse" "^7.8.3"
-    "@babel/types" "^7.8.3"
-
-"@babel/helper-compilation-targets@^7.8.4":
-  version "7.8.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.8.4.tgz#03d7ecd454b7ebe19a254f76617e61770aed2c88"
-  integrity sha512-3k3BsKMvPp5bjxgMdrFyq0UaEO48HciVrOVF0+lon8pp95cyJ2ujAh0TrBHNMnJGT2rr0iKOJPFFbSqjDyf/Pg==
-  dependencies:
-    "@babel/compat-data" "^7.8.4"
-    browserslist "^4.8.5"
-    invariant "^2.2.4"
-    levenary "^1.1.1"
-    semver "^5.5.0"
-
 "@babel/helper-create-class-features-plugin@^7.5.5", "@babel/helper-create-class-features-plugin@^7.6.0":
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.6.0.tgz#769711acca889be371e9bc2eb68641d55218021f"
@@ -312,18 +252,6 @@
     "@babel/helper-replace-supers" "^7.7.4"
     "@babel/helper-split-export-declaration" "^7.7.4"
 
-"@babel/helper-create-class-features-plugin@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.8.3.tgz#5b94be88c255f140fd2c10dd151e7f98f4bff397"
-  integrity sha512-qmp4pD7zeTxsv0JNecSBsEmG1ei2MqwJq4YQcK3ZWm/0t07QstWfvuV/vm3Qt5xNMFETn2SZqpMx2MQzbtq+KA==
-  dependencies:
-    "@babel/helper-function-name" "^7.8.3"
-    "@babel/helper-member-expression-to-functions" "^7.8.3"
-    "@babel/helper-optimise-call-expression" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/helper-replace-supers" "^7.8.3"
-    "@babel/helper-split-export-declaration" "^7.8.3"
-
 "@babel/helper-create-regexp-features-plugin@^7.7.0":
   version "7.7.2"
   resolved "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.7.2.tgz#6f20443778c8fce2af2ff4206284afc0ced65db6"
@@ -340,14 +268,6 @@
     "@babel/helper-regex" "^7.4.4"
     regexpu-core "^4.6.0"
 
-"@babel/helper-create-regexp-features-plugin@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.8.3.tgz#c774268c95ec07ee92476a3862b75cc2839beb79"
-  integrity sha512-Gcsm1OHCUr9o9TcJln57xhWHtdXbA2pgQ58S0Lxlks0WMGNXuki4+GLfX0p+L2ZkINUGZvfkz8rzoqJQSthI+Q==
-  dependencies:
-    "@babel/helper-regex" "^7.8.3"
-    regexpu-core "^4.6.0"
-
 "@babel/helper-define-map@^7.7.0":
   version "7.7.0"
   resolved "https://registry.npmjs.org/@babel/helper-define-map/-/helper-define-map-7.7.0.tgz#60b0e9fd60def9de5054c38afde8c8ee409c7529"
@@ -366,15 +286,6 @@
     "@babel/types" "^7.7.4"
     lodash "^4.17.13"
 
-"@babel/helper-define-map@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.8.3.tgz#a0655cad5451c3760b726eba875f1cd8faa02c15"
-  integrity sha512-PoeBYtxoZGtct3md6xZOCWPcKuMuk3IHhgxsRRNtnNShebf4C8YonTSblsK4tvDbm+eJAw2HAPOfCr+Q/YRG/g==
-  dependencies:
-    "@babel/helper-function-name" "^7.8.3"
-    "@babel/types" "^7.8.3"
-    lodash "^4.17.13"
-
 "@babel/helper-explode-assignable-expression@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.1.0.tgz#537fa13f6f1674df745b0c00ec8fe4e99681c8f6"
@@ -391,14 +302,6 @@
     "@babel/traverse" "^7.7.4"
     "@babel/types" "^7.7.4"
 
-"@babel/helper-explode-assignable-expression@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.8.3.tgz#a728dc5b4e89e30fc2dfc7d04fa28a930653f982"
-  integrity sha512-N+8eW86/Kj147bO9G2uclsg5pwfs/fqqY5rwgIL7eTBklgXjcOJ3btzS5iM6AitJcftnY7pm2lGsrJVYLGjzIw==
-  dependencies:
-    "@babel/traverse" "^7.8.3"
-    "@babel/types" "^7.8.3"
-
 "@babel/helper-function-name@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.1.0.tgz#a0ceb01685f73355d4360c1247f582bfafc8ff53"
@@ -426,15 +329,6 @@
     "@babel/template" "^7.7.4"
     "@babel/types" "^7.7.4"
 
-"@babel/helper-function-name@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.8.3.tgz#eeeb665a01b1f11068e9fb86ad56a1cb1a824cca"
-  integrity sha512-BCxgX1BC2hD/oBlIFUgOCQDOPV8nSINxCwM3o93xP4P9Fq6aV5sgv2cOOITDMtCfQ+3PvHp3l689XZvAM9QyOA==
-  dependencies:
-    "@babel/helper-get-function-arity" "^7.8.3"
-    "@babel/template" "^7.8.3"
-    "@babel/types" "^7.8.3"
-
 "@babel/helper-get-function-arity@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0.tgz#83572d4320e2a4657263734113c42868b64e49c3"
@@ -456,13 +350,6 @@
   dependencies:
     "@babel/types" "^7.7.4"
 
-"@babel/helper-get-function-arity@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz#b894b947bd004381ce63ea1db9f08547e920abd5"
-  integrity sha512-FVDR+Gd9iLjUMY1fzE2SR0IuaJToR4RkCDARVfsBBPSP53GEqSFjD8gNyxg246VUyc/ALRxFaAK8rVG7UT7xRA==
-  dependencies:
-    "@babel/types" "^7.8.3"
-
 "@babel/helper-hoist-variables@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.4.4.tgz#0298b5f25c8c09c53102d52ac4a98f773eb2850a"
@@ -484,13 +371,6 @@
   dependencies:
     "@babel/types" "^7.7.4"
 
-"@babel/helper-hoist-variables@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.8.3.tgz#1dbe9b6b55d78c9b4183fc8cdc6e30ceb83b7134"
-  integrity sha512-ky1JLOjcDUtSc+xkt0xhYff7Z6ILTAHKmZLHPxAhOP0Nd77O+3nCsd6uSVYur6nJnCI029CrNbYlc0LoPfAPQg==
-  dependencies:
-    "@babel/types" "^7.8.3"
-
 "@babel/helper-member-expression-to-functions@^7.5.5":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.5.5.tgz#1fb5b8ec4453a93c439ee9fe3aeea4a84b76b590"
@@ -512,13 +392,6 @@
   dependencies:
     "@babel/types" "^7.7.4"
 
-"@babel/helper-member-expression-to-functions@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.8.3.tgz#659b710498ea6c1d9907e0c73f206eee7dadc24c"
-  integrity sha512-fO4Egq88utkQFjbPrSHGmGLFqmrshs11d46WI+WZDESt7Wu7wN2G2Iu+NMMZJFDOVRHAMIkB5SNh30NtwCA7RA==
-  dependencies:
-    "@babel/types" "^7.8.3"
-
 "@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.0.0-beta.49":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz#96081b7111e486da4d2cd971ad1a4fe216cc2e3d"
@@ -540,13 +413,6 @@
   dependencies:
     "@babel/types" "^7.7.4"
 
-"@babel/helper-module-imports@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz#7fe39589b39c016331b6b8c3f441e8f0b1419498"
-  integrity sha512-R0Bx3jippsbAEtzkpZ/6FIiuzOURPcMjHp+Z6xPe6DtApDJx+w7UYyOLanZqO8+wKR9G10s/FmHXvxaMd9s6Kg==
-  dependencies:
-    "@babel/types" "^7.8.3"
-
 "@babel/helper-module-transforms@^7.1.0", "@babel/helper-module-transforms@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.4.4.tgz#96115ea42a2f139e619e98ed46df6019b94414b8"
@@ -583,18 +449,6 @@
     "@babel/types" "^7.7.4"
     lodash "^4.17.13"
 
-"@babel/helper-module-transforms@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.8.3.tgz#d305e35d02bee720fbc2c3c3623aa0c316c01590"
-  integrity sha512-C7NG6B7vfBa/pwCOshpMbOYUmrYQDfCpVL/JCRu0ek8B5p8kue1+BCXpg2vOYs7w5ACB9GTOBYQ5U6NwrMg+3Q==
-  dependencies:
-    "@babel/helper-module-imports" "^7.8.3"
-    "@babel/helper-simple-access" "^7.8.3"
-    "@babel/helper-split-export-declaration" "^7.8.3"
-    "@babel/template" "^7.8.3"
-    "@babel/types" "^7.8.3"
-    lodash "^4.17.13"
-
 "@babel/helper-optimise-call-expression@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.0.0.tgz#a2920c5702b073c15de51106200aa8cad20497d5"
@@ -616,23 +470,11 @@
   dependencies:
     "@babel/types" "^7.7.4"
 
-"@babel/helper-optimise-call-expression@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.8.3.tgz#7ed071813d09c75298ef4f208956006b6111ecb9"
-  integrity sha512-Kag20n86cbO2AvHca6EJsvqAd82gc6VMGule4HwebwMlwkpXuVqrNRj6CkCV2sKxgi9MyAUnZVnZ6lJ1/vKhHQ==
-  dependencies:
-    "@babel/types" "^7.8.3"
-
 "@babel/helper-plugin-utils@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250"
   integrity sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==
 
-"@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670"
-  integrity sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==
-
 "@babel/helper-regex@^7.0.0", "@babel/helper-regex@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.4.4.tgz#a47e02bc91fb259d2e6727c2a30013e3ac13c4a2"
@@ -640,13 +482,6 @@
   dependencies:
     lodash "^4.17.11"
 
-"@babel/helper-regex@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.8.3.tgz#139772607d51b93f23effe72105b319d2a4c6965"
-  integrity sha512-BWt0QtYv/cg/NecOAZMdcn/waj/5P26DR4mVLXfFtDokSR6fyuG0Pj+e2FqtSME+MqED1khnSMulkmGl8qWiUQ==
-  dependencies:
-    lodash "^4.17.13"
-
 "@babel/helper-remap-async-to-generator@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.1.0.tgz#361d80821b6f38da75bd3f0785ece20a88c5fe7f"
@@ -680,17 +515,6 @@
     "@babel/traverse" "^7.7.4"
     "@babel/types" "^7.7.4"
 
-"@babel/helper-remap-async-to-generator@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.8.3.tgz#273c600d8b9bf5006142c1e35887d555c12edd86"
-  integrity sha512-kgwDmw4fCg7AVgS4DukQR/roGp+jP+XluJE5hsRZwxCYGg+Rv9wSGErDWhlI90FODdYfd4xG4AQRiMDjjN0GzA==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.8.3"
-    "@babel/helper-wrap-function" "^7.8.3"
-    "@babel/template" "^7.8.3"
-    "@babel/traverse" "^7.8.3"
-    "@babel/types" "^7.8.3"
-
 "@babel/helper-replace-supers@^7.5.5", "@babel/helper-replace-supers@^7.7.0":
   version "7.7.0"
   resolved "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.7.0.tgz#d5365c8667fe7cbd13b8ddddceb9bd7f2b387512"
@@ -711,16 +535,6 @@
     "@babel/traverse" "^7.7.4"
     "@babel/types" "^7.7.4"
 
-"@babel/helper-replace-supers@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.8.3.tgz#91192d25f6abbcd41da8a989d4492574fb1530bc"
-  integrity sha512-xOUssL6ho41U81etpLoT2RTdvdus4VfHamCuAm4AHxGr+0it5fnwoVdwUJ7GFEqCsQYzJUhcbsN9wB9apcYKFA==
-  dependencies:
-    "@babel/helper-member-expression-to-functions" "^7.8.3"
-    "@babel/helper-optimise-call-expression" "^7.8.3"
-    "@babel/traverse" "^7.8.3"
-    "@babel/types" "^7.8.3"
-
 "@babel/helper-simple-access@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.1.0.tgz#65eeb954c8c245beaa4e859da6188f39d71e585c"
@@ -745,14 +559,6 @@
     "@babel/template" "^7.7.4"
     "@babel/types" "^7.7.4"
 
-"@babel/helper-simple-access@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.8.3.tgz#7f8109928b4dab4654076986af575231deb639ae"
-  integrity sha512-VNGUDjx5cCWg4vvCTR8qQ7YJYZ+HBjxOgXEl7ounz+4Sn7+LMD3CFrCTEU6/qXKbA2nKg21CwhhBzO0RpRbdCw==
-  dependencies:
-    "@babel/template" "^7.8.3"
-    "@babel/types" "^7.8.3"
-
 "@babel/helper-split-export-declaration@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz#ff94894a340be78f53f06af038b205c49d993677"
@@ -774,13 +580,6 @@
   dependencies:
     "@babel/types" "^7.7.4"
 
-"@babel/helper-split-export-declaration@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz#31a9f30070f91368a7182cf05f831781065fc7a9"
-  integrity sha512-3x3yOeyBhW851hroze7ElzdkeRXQYQbFIb7gLK1WQYsw2GWDay5gAJNw1sWJ0VFP6z5J1whqeXH/WCdCjZv6dA==
-  dependencies:
-    "@babel/types" "^7.8.3"
-
 "@babel/helper-wrap-function@^7.1.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.2.0.tgz#c4e0012445769e2815b55296ead43a958549f6fa"
@@ -811,16 +610,6 @@
     "@babel/traverse" "^7.7.4"
     "@babel/types" "^7.7.4"
 
-"@babel/helper-wrap-function@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.8.3.tgz#9dbdb2bb55ef14aaa01fe8c99b629bd5352d8610"
-  integrity sha512-LACJrbUET9cQDzb6kG7EeD7+7doC3JNvUgTEQOx2qaO1fKlzE/Bf05qs9w1oXQMmXlPO65lC3Tq9S6gZpTErEQ==
-  dependencies:
-    "@babel/helper-function-name" "^7.8.3"
-    "@babel/template" "^7.8.3"
-    "@babel/traverse" "^7.8.3"
-    "@babel/types" "^7.8.3"
-
 "@babel/helpers@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.4.4.tgz#868b0ef59c1dd4e78744562d5ce1b59c89f2f2a5"
@@ -839,14 +628,14 @@
     "@babel/traverse" "^7.7.0"
     "@babel/types" "^7.7.0"
 
-"@babel/helpers@^7.8.4":
-  version "7.8.4"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.8.4.tgz#754eb3ee727c165e0a240d6c207de7c455f36f73"
-  integrity sha512-VPbe7wcQ4chu4TDQjimHv/5tj73qz88o12EPkO2ValS2QiQS/1F2SsjyIGNnAD0vF/nZS6Cf9i+vW6HIlnaR8w==
+"@babel/helpers@^7.6.2":
+  version "7.6.2"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.6.2.tgz#681ffe489ea4dcc55f23ce469e58e59c1c045153"
+  integrity sha512-3/bAUL8zZxYs1cdX2ilEE0WobqbCmKWr/889lf2SS0PpDcpEIY8pb1CCyz0pEcX3pEb+MCbks1jIokz2xLtGTA==
   dependencies:
-    "@babel/template" "^7.8.3"
-    "@babel/traverse" "^7.8.4"
-    "@babel/types" "^7.8.3"
+    "@babel/template" "^7.6.0"
+    "@babel/traverse" "^7.6.2"
+    "@babel/types" "^7.6.0"
 
 "@babel/highlight@^7.0.0":
   version "7.0.0"
@@ -857,21 +646,12 @@
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
-"@babel/highlight@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.8.3.tgz#28f173d04223eaaa59bc1d439a3836e6d1265797"
-  integrity sha512-PX4y5xQUvy0fnEVHrYOarRPXVWafSjTW9T0Hab8gVIawpl2Sj0ORyrygANq+KjcNlSSTw0YCLSNA8OyZ1I4yEg==
-  dependencies:
-    chalk "^2.0.0"
-    esutils "^2.0.2"
-    js-tokens "^4.0.0"
-
 "@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.4.4", "@babel/parser@^7.4.5":
   version "7.4.5"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.4.5.tgz#04af8d5d5a2b044a2a1bffacc1e5e6673544e872"
   integrity sha512-9mUqkL1FF5T7f0WDFfAoDdiMVPWsdD1gZYzSnaXsxUCUqzuch/8of9G3VUSNiZmMBoRxT3neyVsqeiL/ZPcjew==
 
-"@babel/parser@^7.6.0":
+"@babel/parser@^7.6.0", "@babel/parser@^7.6.3", "@babel/parser@^7.6.4":
   version "7.6.4"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.6.4.tgz#cb9b36a7482110282d5cb6dd424ec9262b473d81"
   integrity sha512-D8RHPW5qd0Vbyo3qb+YjO5nvUVRTXFLQ/FsDxJU2Nqz4uB5EnUN0ZQSEYpvTIbRuttig1XbHWU5oMeQwQSAA+A==
@@ -886,11 +666,6 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.4.tgz#75ab2d7110c2cf2fa949959afb05fa346d2231bb"
   integrity sha512-jIwvLO0zCL+O/LmEJQjWA75MQTWwx3c3u2JOTDK5D3/9egrWRRA0/0hk9XXywYnXZVVpzrBYeIQTmhwUaePI9g==
 
-"@babel/parser@^7.8.3", "@babel/parser@^7.8.4":
-  version "7.8.4"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.8.4.tgz#d1dbe64691d60358a974295fa53da074dd2ce8e8"
-  integrity sha512-0fKu/QqildpXmPVaRBoXOlyBb3MC+J0A66x97qEfLOMkn3u6nfY5esWogQwi/K0BjASYy4DbnsEWnpNL6qT5Mw==
-
 "@babel/plugin-proposal-async-generator-functions@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.2.0.tgz#b289b306669dce4ad20b0252889a15768c9d417e"
@@ -918,16 +693,7 @@
     "@babel/helper-remap-async-to-generator" "^7.7.4"
     "@babel/plugin-syntax-async-generators" "^7.7.4"
 
-"@babel/plugin-proposal-async-generator-functions@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.8.3.tgz#bad329c670b382589721b27540c7d288601c6e6f"
-  integrity sha512-NZ9zLv848JsV3hs8ryEh7Uaz/0KsmPLqv0+PdkDJL1cJy0K4kOCFa8zc1E3mp+RHPQcpdfb/6GovEsW4VDrOMw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/helper-remap-async-to-generator" "^7.8.3"
-    "@babel/plugin-syntax-async-generators" "^7.8.0"
-
-"@babel/plugin-proposal-class-properties@7.5.5":
+"@babel/plugin-proposal-class-properties@7.5.5", "@babel/plugin-proposal-class-properties@^7.5.5":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.5.5.tgz#a974cfae1e37c3110e71f3c6a2e48b8e71958cd4"
   integrity sha512-AF79FsnWFxjlaosgdi421vmYG6/jg79bVD0dpD44QdgobzHKuLZ6S3vl8la9qIeSwGi8i1fS0O1mfuDAAdo1/A==
@@ -951,14 +717,6 @@
     "@babel/helper-create-class-features-plugin" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-proposal-class-properties@^7.7.4":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.8.3.tgz#5e06654af5cd04b608915aada9b2a6788004464e"
-  integrity sha512-EqFhbo7IosdgPgZggHaNObkmO1kNUe3slaKu54d5OWvy+p9QIKOzK1GAEpAIsZtWVtPXUHSMcT4smvDrCfY4AA==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/plugin-proposal-decorators@7.6.0":
   version "7.6.0"
   resolved "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.6.0.tgz#6659d2572a17d70abd68123e89a12a43d90aa30c"
@@ -984,14 +742,6 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-dynamic-import" "^7.7.4"
 
-"@babel/plugin-proposal-dynamic-import@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.8.3.tgz#38c4fe555744826e97e2ae930b0fb4cc07e66054"
-  integrity sha512-NyaBbyLFXFLT9FP+zk0kYlUlA8XtCUbehs67F0nnEg7KICgMc2mNkIeu9TYhKzyXMkrapZFwAhXLdnt4IYHy1w==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
-
 "@babel/plugin-proposal-json-strings@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.2.0.tgz#568ecc446c6148ae6b267f02551130891e29f317"
@@ -1008,22 +758,6 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-json-strings" "^7.7.4"
 
-"@babel/plugin-proposal-json-strings@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.8.3.tgz#da5216b238a98b58a1e05d6852104b10f9a70d6b"
-  integrity sha512-KGhQNZ3TVCQG/MjRbAUwuH+14y9q0tpxs1nWWs3pbSleRdDro9SAMMDyye8HhY1gqZ7/NqIc8SKhya0wRDgP1Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-json-strings" "^7.8.0"
-
-"@babel/plugin-proposal-nullish-coalescing-operator@^7.7.4", "@babel/plugin-proposal-nullish-coalescing-operator@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.8.3.tgz#e4572253fdeed65cddeecfdab3f928afeb2fd5d2"
-  integrity sha512-TS9MlfzXpXKt6YYomudb/KU7nQI6/xnapG6in1uZxoxDghuSMZsPb6D2fyUwNYSAp4l1iR7QtFOjkqcRYcUsfw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
-
 "@babel/plugin-proposal-object-rest-spread@7.5.5":
   version "7.5.5"
   resolved "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.5.5.tgz#61939744f71ba76a3ae46b5eea18a54c16d22e58"
@@ -1056,14 +790,6 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-object-rest-spread" "^7.7.4"
 
-"@babel/plugin-proposal-object-rest-spread@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.8.3.tgz#eb5ae366118ddca67bed583b53d7554cad9951bb"
-  integrity sha512-8qvuPwU/xxUCt78HocNlv0mXXo0wdh9VT1R04WU8HGOfaOob26pF+9P5/lYjN/q7DHOX1bvX60hnhOvuQUJdbA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
-
 "@babel/plugin-proposal-optional-catch-binding@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.2.0.tgz#135d81edb68a081e55e56ec48541ece8065c38f5"
@@ -1080,22 +806,6 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-optional-catch-binding" "^7.7.4"
 
-"@babel/plugin-proposal-optional-catch-binding@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.8.3.tgz#9dee96ab1650eed88646ae9734ca167ac4a9c5c9"
-  integrity sha512-0gkX7J7E+AtAw9fcwlVQj8peP61qhdg/89D5swOkjYbkboA2CVckn3kiyum1DE0wskGb7KJJxBdyEBApDLLVdw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
-
-"@babel/plugin-proposal-optional-chaining@^7.7.5", "@babel/plugin-proposal-optional-chaining@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.8.3.tgz#ae10b3214cb25f7adb1f3bc87ba42ca10b7e2543"
-  integrity sha512-QIoIR9abkVn+seDE3OjA08jWcs3eZ9+wJCKSRgo3WdEU2csFYgdScb+8qHB3+WXsGJD55u+5hWCISI7ejXS+kg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
-
 "@babel/plugin-proposal-unicode-property-regex@^7.4.4", "@babel/plugin-proposal-unicode-property-regex@^7.7.0":
   version "7.7.0"
   resolved "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.7.0.tgz#549fe1717a1bd0a2a7e63163841cb37e78179d5d"
@@ -1104,6 +814,15 @@
     "@babel/helper-create-regexp-features-plugin" "^7.7.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-proposal-unicode-property-regex@^7.6.2":
+  version "7.6.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.6.2.tgz#05413762894f41bfe42b9a5e80919bd575dcc802"
+  integrity sha512-NxHETdmpeSCtiatMRYWVJo7266rrvAC3DTeG5exQBIH/fMIUK7ejDNznBbn3HQl/o9peymRRg7Yqkx6PdUXmMw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-regex" "^7.4.4"
+    regexpu-core "^4.6.0"
+
 "@babel/plugin-proposal-unicode-property-regex@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.7.4.tgz#7c239ccaf09470dbe1d453d50057460e84517ebb"
@@ -1112,14 +831,6 @@
     "@babel/helper-create-regexp-features-plugin" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-proposal-unicode-property-regex@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.8.3.tgz#b646c3adea5f98800c9ab45105ac34d06cd4a47f"
-  integrity sha512-1/1/rEZv2XGweRwwSkLpY+s60za9OZ1hJs4YDqFHCw0kYWYwL5IFljVY1MYBL+weT1l9pokDO2uhSTLVxzoHkQ==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/plugin-syntax-async-generators@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.2.0.tgz#69e1f0db34c6f5a0cf7e2b3323bf159a76c8cb7f"
@@ -1134,13 +845,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-syntax-async-generators@^7.8.0":
-  version "7.8.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
-  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
 "@babel/plugin-syntax-decorators@^7.2.0":
   version "7.2.0"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.2.0.tgz#c50b1b957dcc69e4b1127b65e1c33eef61570c1b"
@@ -1162,13 +866,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-syntax-dynamic-import@^7.8.0":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
-  integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
 "@babel/plugin-syntax-flow@^7.2.0":
   version "7.7.0"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.7.0.tgz#5c9465bcd26354d5215294ea90ab1c706a571386"
@@ -1190,13 +887,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-syntax-json-strings@^7.8.0":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
-  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
 "@babel/plugin-syntax-jsx@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.2.0.tgz#0b85a3b4bc7cdf4cc4b8bf236335b907ca22e7c7"
@@ -1211,20 +901,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-syntax-jsx@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.8.3.tgz#521b06c83c40480f1e58b4fd33b92eceb1d6ea94"
-  integrity sha512-WxdW9xyLgBdefoo0Ynn3MRSkhe5tFVxxKNVdnZSh318WrG2e2jH+E9wd/++JsqcLJZPfz87njQJ8j2Upjm0M0A==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
-  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
 "@babel/plugin-syntax-object-rest-spread@^7.0.0", "@babel/plugin-syntax-object-rest-spread@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.2.0.tgz#3b7a3e733510c57e820b9142a6579ac8b0dfad2e"
@@ -1239,13 +915,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-syntax-object-rest-spread@^7.8.0":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
-  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
 "@babel/plugin-syntax-optional-catch-binding@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.2.0.tgz#a94013d6eda8908dfe6a477e7f9eda85656ecf5c"
@@ -1260,20 +929,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-syntax-optional-catch-binding@^7.8.0":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
-  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-optional-chaining@^7.8.0":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
-  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
 "@babel/plugin-syntax-top-level-await@^7.7.0":
   version "7.7.0"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.7.0.tgz#f5699549f50bbe8d12b1843a4e82f0a37bb65f4d"
@@ -1288,13 +943,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-syntax-top-level-await@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.8.3.tgz#3acdece695e6b13aaf57fc291d1a800950c71391"
-  integrity sha512-kwj1j9lL/6Wd0hROD3b/OZZ7MSrZLqqn9RAZ5+cYYsflQ9HZBIKCUkr3+uL1MEJ1NePiUbf98jjiMQSv0NMR9g==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/plugin-syntax-typescript@^7.2.0":
   version "7.3.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.3.3.tgz#a7cc3f66119a9f7ebe2de5383cce193473d65991"
@@ -1302,13 +950,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-syntax-typescript@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.8.3.tgz#c1f659dda97711a569cef75275f7e15dcaa6cabc"
-  integrity sha512-GO1MQ/SGGGoiEXY0e0bSpHimJvxqB7lktLLIq2pv8xG7WZ8IMEle74jIe1FhprHBWjwjZtXHkycDLZXIWM5Wfg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/plugin-transform-arrow-functions@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.2.0.tgz#9aeafbe4d6ffc6563bf8f8372091628f00779550"
@@ -1323,13 +964,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-arrow-functions@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.8.3.tgz#82776c2ed0cd9e1a49956daeb896024c9473b8b6"
-  integrity sha512-0MRF+KC8EqH4dbuITCWwPSzsyO3HIWWlm30v8BbbpOrS1B++isGxPnnuq/IZvOX5J2D/p7DQalQm+/2PnlKGxg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/plugin-transform-async-to-generator@^7.5.0", "@babel/plugin-transform-async-to-generator@^7.7.0":
   version "7.7.0"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.7.0.tgz#e2b84f11952cf5913fe3438b7d2585042772f492"
@@ -1348,15 +982,6 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/helper-remap-async-to-generator" "^7.7.4"
 
-"@babel/plugin-transform-async-to-generator@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.8.3.tgz#4308fad0d9409d71eafb9b1a6ee35f9d64b64086"
-  integrity sha512-imt9tFLD9ogt56Dd5CI/6XgpukMwd/fLGSrix2httihVe7LOGVPhyhMh1BU5kDM7iHD08i8uUtmV2sWaBFlHVQ==
-  dependencies:
-    "@babel/helper-module-imports" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/helper-remap-async-to-generator" "^7.8.3"
-
 "@babel/plugin-transform-block-scoped-functions@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.2.0.tgz#5d3cc11e8d5ddd752aa64c9148d0db6cb79fd190"
@@ -1371,13 +996,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-block-scoped-functions@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.8.3.tgz#437eec5b799b5852072084b3ae5ef66e8349e8a3"
-  integrity sha512-vo4F2OewqjbB1+yaJ7k2EJFHlTP3jR634Z9Cj9itpqNjuLXvhlVxgnjsHsdRgASR8xYDrx6onw4vW5H6We0Jmg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/plugin-transform-block-scoping@^7.6.0", "@babel/plugin-transform-block-scoping@^7.6.3":
   version "7.6.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.6.3.tgz#6e854e51fbbaa84351b15d4ddafe342f3a5d542a"
@@ -1394,14 +1012,6 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     lodash "^4.17.13"
 
-"@babel/plugin-transform-block-scoping@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.8.3.tgz#97d35dab66857a437c166358b91d09050c868f3a"
-  integrity sha512-pGnYfm7RNRgYRi7bids5bHluENHqJhrV4bCZRwc5GamaWIIs07N4rZECcmJL6ZClwjDz1GbdMZFtPs27hTB06w==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    lodash "^4.17.13"
-
 "@babel/plugin-transform-classes@^7.5.5", "@babel/plugin-transform-classes@^7.7.0":
   version "7.7.0"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.7.0.tgz#b411ecc1b8822d24b81e5d184f24149136eddd4a"
@@ -1430,20 +1040,6 @@
     "@babel/helper-split-export-declaration" "^7.7.4"
     globals "^11.1.0"
 
-"@babel/plugin-transform-classes@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.8.3.tgz#46fd7a9d2bb9ea89ce88720477979fe0d71b21b8"
-  integrity sha512-SjT0cwFJ+7Rbr1vQsvphAHwUHvSUPmMjMU/0P59G8U2HLFqSa082JO7zkbDNWs9kH/IUqpHI6xWNesGf8haF1w==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.8.3"
-    "@babel/helper-define-map" "^7.8.3"
-    "@babel/helper-function-name" "^7.8.3"
-    "@babel/helper-optimise-call-expression" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/helper-replace-supers" "^7.8.3"
-    "@babel/helper-split-export-declaration" "^7.8.3"
-    globals "^11.1.0"
-
 "@babel/plugin-transform-computed-properties@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.2.0.tgz#83a7df6a658865b1c8f641d510c6f3af220216da"
@@ -1458,13 +1054,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-computed-properties@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.8.3.tgz#96d0d28b7f7ce4eb5b120bb2e0e943343c86f81b"
-  integrity sha512-O5hiIpSyOGdrQZRQ2ccwtTVkgUDBBiCuK//4RJ6UfePllUTCENOzKxfh6ulckXKc0DixTFLCfb2HVkNA7aDpzA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/plugin-transform-destructuring@7.6.0", "@babel/plugin-transform-destructuring@^7.6.0":
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.6.0.tgz#44bbe08b57f4480094d57d9ffbcd96d309075ba6"
@@ -1479,13 +1068,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-destructuring@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.8.3.tgz#20ddfbd9e4676906b1056ee60af88590cc7aaa0b"
-  integrity sha512-H4X646nCkiEcHZUZaRkhE2XVsoz0J/1x3VVujnn96pSoGCtKPA99ZZA+va+gK+92Zycd6OBKCD8tDb/731bhgQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/plugin-transform-dotall-regex@^7.4.4", "@babel/plugin-transform-dotall-regex@^7.7.0":
   version "7.7.0"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.7.0.tgz#c5c9ecacab3a5e0c11db6981610f0c32fd698b3b"
@@ -1494,6 +1076,15 @@
     "@babel/helper-create-regexp-features-plugin" "^7.7.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-dotall-regex@^7.6.2":
+  version "7.6.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.6.2.tgz#44abb948b88f0199a627024e1508acaf8dc9b2f9"
+  integrity sha512-KGKT9aqKV+9YMZSkowzYoYEiHqgaDhGmPNZlZxX6UeHC4z30nC1J9IrZuGqbYFB1jaIGdv91ujpze0exiVK8bA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-regex" "^7.4.4"
+    regexpu-core "^4.6.0"
+
 "@babel/plugin-transform-dotall-regex@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.7.4.tgz#f7ccda61118c5b7a2599a72d5e3210884a021e96"
@@ -1502,14 +1093,6 @@
     "@babel/helper-create-regexp-features-plugin" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-dotall-regex@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.8.3.tgz#c3c6ec5ee6125c6993c5cbca20dc8621a9ea7a6e"
-  integrity sha512-kLs1j9Nn4MQoBYdRXH6AeaXMbEJFaFu/v1nQkvib6QzTj8MZI5OQzqmD83/2jEM1z0DLilra5aWO5YpyC0ALIw==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/plugin-transform-duplicate-keys@^7.5.0":
   version "7.5.0"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.5.0.tgz#c5dbf5106bf84cdf691222c0974c12b1df931853"
@@ -1524,13 +1107,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-duplicate-keys@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.8.3.tgz#8d12df309aa537f272899c565ea1768e286e21f1"
-  integrity sha512-s8dHiBUbcbSgipS4SMFuWGqCvyge5V2ZeAWzR6INTVC3Ltjig/Vw1G2Gztv0vU/hRG9X8IvKvYdoksnUfgXOEQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/plugin-transform-exponentiation-operator@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.2.0.tgz#a63868289e5b4007f7054d46491af51435766008"
@@ -1547,14 +1123,6 @@
     "@babel/helper-builder-binary-assignment-operator-visitor" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-exponentiation-operator@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.8.3.tgz#581a6d7f56970e06bf51560cd64f5e947b70d7b7"
-  integrity sha512-zwIpuIymb3ACcInbksHaNcR12S++0MDLKkiqXHl3AzpgdKlFNhog+z/K0+TGW+b0w5pgTq4H6IwV/WhxbGYSjQ==
-  dependencies:
-    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/plugin-transform-flow-strip-types@7.4.4":
   version "7.4.4"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.4.4.tgz#d267a081f49a8705fc9146de0768c6b58dccd8f7"
@@ -1585,13 +1153,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-for-of@^7.8.4":
-  version "7.8.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.8.4.tgz#6fe8eae5d6875086ee185dd0b098a8513783b47d"
-  integrity sha512-iAXNlOWvcYUYoV8YIxwS7TxGRJcxyl8eQCfT+A5j8sKUzRFvJdcyjp97jL2IghWSRDaL2PU2O2tX8Cu9dTBq5A==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/plugin-transform-function-name@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.4.4.tgz#e1436116abb0610c2259094848754ac5230922ad"
@@ -1616,14 +1177,6 @@
     "@babel/helper-function-name" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-function-name@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.8.3.tgz#279373cb27322aaad67c2683e776dfc47196ed8b"
-  integrity sha512-rO/OnDS78Eifbjn5Py9v8y0aR+aSYhDhqAwVfsTl0ERuMZyr05L1aFSCJnbv2mmsLkit/4ReeQ9N2BgLnOcPCQ==
-  dependencies:
-    "@babel/helper-function-name" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/plugin-transform-literals@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.2.0.tgz#690353e81f9267dad4fd8cfd77eafa86aba53ea1"
@@ -1638,13 +1191,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-literals@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.8.3.tgz#aef239823d91994ec7b68e55193525d76dbd5dc1"
-  integrity sha512-3Tqf8JJ/qB7TeldGl+TT55+uQei9JfYaregDcEAyBZ7akutriFrt6C/wLYIer6OYhleVQvH/ntEhjE/xMmy10A==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/plugin-transform-member-expression-literals@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.2.0.tgz#fa10aa5c58a2cb6afcf2c9ffa8cb4d8b3d489a2d"
@@ -1659,13 +1205,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-member-expression-literals@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.8.3.tgz#963fed4b620ac7cbf6029c755424029fa3a40410"
-  integrity sha512-3Wk2EXhnw+rP+IDkK6BdtPKsUE5IeZ6QOGrPYvw52NwBStw9V1ZVzxgK6fSKSxqUvH9eQPR3tm3cOq79HlsKYA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/plugin-transform-modules-amd@^7.5.0":
   version "7.5.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.5.0.tgz#ef00435d46da0a5961aa728a1d2ecff063e4fb91"
@@ -1684,15 +1223,6 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     babel-plugin-dynamic-import-node "^2.3.0"
 
-"@babel/plugin-transform-modules-amd@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.8.3.tgz#65606d44616b50225e76f5578f33c568a0b876a5"
-  integrity sha512-MadJiU3rLKclzT5kBH4yxdry96odTUwuqrZM+GllFI/VhxfPz+k9MshJM+MwhfkCdxxclSbSBbUGciBngR+kEQ==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-    babel-plugin-dynamic-import-node "^2.3.0"
-
 "@babel/plugin-transform-modules-commonjs@^7.6.0":
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.6.0.tgz#39dfe957de4420445f1fcf88b68a2e4aa4515486"
@@ -1723,16 +1253,6 @@
     "@babel/helper-simple-access" "^7.7.4"
     babel-plugin-dynamic-import-node "^2.3.0"
 
-"@babel/plugin-transform-modules-commonjs@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.8.3.tgz#df251706ec331bd058a34bdd72613915f82928a5"
-  integrity sha512-JpdMEfA15HZ/1gNuB9XEDlZM1h/gF/YOH7zaZzQu2xCFRfwc01NXBMHHSTT6hRjlXJJs5x/bfODM3LiCk94Sxg==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/helper-simple-access" "^7.8.3"
-    babel-plugin-dynamic-import-node "^2.3.0"
-
 "@babel/plugin-transform-modules-systemjs@^7.5.0", "@babel/plugin-transform-modules-systemjs@^7.7.0":
   version "7.7.0"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.7.0.tgz#9baf471213af9761c1617bb12fd278e629041417"
@@ -1751,16 +1271,6 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     babel-plugin-dynamic-import-node "^2.3.0"
 
-"@babel/plugin-transform-modules-systemjs@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.8.3.tgz#d8bbf222c1dbe3661f440f2f00c16e9bb7d0d420"
-  integrity sha512-8cESMCJjmArMYqa9AO5YuMEkE4ds28tMpZcGZB/jl3n0ZzlsxOAi3mC+SKypTfT8gjMupCnd3YiXCkMjj2jfOg==
-  dependencies:
-    "@babel/helper-hoist-variables" "^7.8.3"
-    "@babel/helper-module-transforms" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-    babel-plugin-dynamic-import-node "^2.3.0"
-
 "@babel/plugin-transform-modules-umd@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.2.0.tgz#7678ce75169f0877b8eb2235538c074268dd01ae"
@@ -1785,14 +1295,6 @@
     "@babel/helper-module-transforms" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-modules-umd@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.8.3.tgz#592d578ce06c52f5b98b02f913d653ffe972661a"
-  integrity sha512-evhTyWhbwbI3/U6dZAnx/ePoV7H6OUG+OjiJFHmhr9FPn0VShjwC2kdxqIuQ/+1P50TMrneGzMeyMTFOjKSnAw==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/plugin-transform-named-capturing-groups-regex@^7.6.0", "@babel/plugin-transform-named-capturing-groups-regex@^7.7.0":
   version "7.7.0"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.7.0.tgz#358e6fd869b9a4d8f5cbc79e4ed4fc340e60dcaf"
@@ -1800,6 +1302,13 @@
   dependencies:
     "@babel/helper-create-regexp-features-plugin" "^7.7.0"
 
+"@babel/plugin-transform-named-capturing-groups-regex@^7.6.3":
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.6.3.tgz#aaa6e409dd4fb2e50b6e2a91f7e3a3149dbce0cf"
+  integrity sha512-jTkk7/uE6H2s5w6VlMHeWuH+Pcy2lmdwFoeWCVnvIrDUnB5gQqTVI8WfmEAhF2CDEarGrknZcmSFg1+bkfCoSw==
+  dependencies:
+    regexpu-core "^4.6.0"
+
 "@babel/plugin-transform-named-capturing-groups-regex@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.7.4.tgz#fb3bcc4ee4198e7385805007373d6b6f42c98220"
@@ -1807,13 +1316,6 @@
   dependencies:
     "@babel/helper-create-regexp-features-plugin" "^7.7.4"
 
-"@babel/plugin-transform-named-capturing-groups-regex@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.8.3.tgz#a2a72bffa202ac0e2d0506afd0939c5ecbc48c6c"
-  integrity sha512-f+tF/8UVPU86TrCb06JoPWIdDpTNSGGcAtaD9mLP0aYGA0OS0j7j7DHJR0GTFrUZPUU6loZhbsVZgTh0N+Qdnw==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.8.3"
-
 "@babel/plugin-transform-new-target@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.4.4.tgz#18d120438b0cc9ee95a47f2c72bc9768fbed60a5"
@@ -1828,13 +1330,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-new-target@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.8.3.tgz#60cc2ae66d85c95ab540eb34babb6434d4c70c43"
-  integrity sha512-QuSGysibQpyxexRyui2vca+Cmbljo8bcRckgzYV4kRIsHpVeyeC3JDO63pY+xFZ6bWOBn7pfKZTqV4o/ix9sFw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/plugin-transform-object-super@^7.5.5":
   version "7.5.5"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.5.5.tgz#c70021df834073c65eb613b8679cc4a381d1a9f9"
@@ -1851,14 +1346,6 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/helper-replace-supers" "^7.7.4"
 
-"@babel/plugin-transform-object-super@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.8.3.tgz#ebb6a1e7a86ffa96858bd6ac0102d65944261725"
-  integrity sha512-57FXk+gItG/GejofIyLIgBKTas4+pEU47IXKDBWFTxdPd7F80H8zybyAY7UoblVfBhBGs2EKM+bJUu2+iUYPDQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/helper-replace-supers" "^7.8.3"
-
 "@babel/plugin-transform-parameters@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.4.4.tgz#7556cf03f318bd2719fe4c922d2d808be5571e16"
@@ -1877,15 +1364,6 @@
     "@babel/helper-get-function-arity" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-parameters@^7.8.4":
-  version "7.8.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.8.4.tgz#1d5155de0b65db0ccf9971165745d3bb990d77d3"
-  integrity sha512-IsS3oTxeTsZlE5KqzTbcC2sV0P9pXdec53SU+Yxv7o/6dvGM5AkTotQKhoSffhNgZ/dftsSiOoxy7evCYJXzVA==
-  dependencies:
-    "@babel/helper-call-delegate" "^7.8.3"
-    "@babel/helper-get-function-arity" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/plugin-transform-property-literals@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.2.0.tgz#03e33f653f5b25c4eb572c98b9485055b389e905"
@@ -1900,13 +1378,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-property-literals@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.8.3.tgz#33194300d8539c1ed28c62ad5087ba3807b98263"
-  integrity sha512-uGiiXAZMqEoQhRWMK17VospMZh5sXWg+dlh2soffpkAl96KAm+WZuJfa6lcELotSRmooLqg0MWdH6UUq85nmmg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/plugin-transform-react-constant-elements@^7.0.0", "@babel/plugin-transform-react-constant-elements@^7.2.0":
   version "7.6.3"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.6.3.tgz#9fc9ea060b983c7c035acbe481cbe1fb1245bfff"
@@ -1937,13 +1408,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-react-display-name@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.8.3.tgz#70ded987c91609f78353dd76d2fb2a0bb991e8e5"
-  integrity sha512-3Jy/PCw8Fe6uBKtEgz3M82ljt+lTg+xJaM4og+eyu83qLT87ZUSckn0wy7r31jflURWLO83TW6Ylf7lyXj3m5A==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/plugin-transform-react-jsx-self@^7.0.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.2.0.tgz#461e21ad9478f1031dd5e276108d027f1b5240ba"
@@ -1960,14 +1424,6 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-jsx" "^7.7.4"
 
-"@babel/plugin-transform-react-jsx-self@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.8.3.tgz#c4f178b2aa588ecfa8d077ea80d4194ee77ed702"
-  integrity sha512-01OT7s5oa0XTLf2I8XGsL8+KqV9lx3EZV+jxn/L2LQ97CGKila2YMroTkCEIE0HV/FF7CMSRsIAybopdN9NTdg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-jsx" "^7.8.3"
-
 "@babel/plugin-transform-react-jsx-source@^7.0.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.2.0.tgz#20c8c60f0140f5dd3cd63418d452801cf3f7180f"
@@ -1984,14 +1440,6 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-jsx" "^7.7.4"
 
-"@babel/plugin-transform-react-jsx-source@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.8.3.tgz#951e75a8af47f9f120db731be095d2b2c34920e0"
-  integrity sha512-PLMgdMGuVDtRS/SzjNEQYUT8f4z1xb2BAT54vM1X5efkVuYBf5WyGUMbpmARcfq3NaglIwz08UVQK4HHHbC6ag==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-jsx" "^7.8.3"
-
 "@babel/plugin-transform-react-jsx@^7.0.0":
   version "7.3.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.3.0.tgz#f2cab99026631c767e2745a5368b331cfe8f5290"
@@ -2019,15 +1467,6 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-jsx" "^7.7.4"
 
-"@babel/plugin-transform-react-jsx@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.8.3.tgz#4220349c0390fdefa505365f68c103562ab2fc4a"
-  integrity sha512-r0h+mUiyL595ikykci+fbwm9YzmuOrUBi0b+FDIKmi3fPQyFokWVEMJnRWHJPPQEjyFJyna9WZC6Viv6UHSv1g==
-  dependencies:
-    "@babel/helper-builder-react-jsx" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-jsx" "^7.8.3"
-
 "@babel/plugin-transform-regenerator@^7.4.5", "@babel/plugin-transform-regenerator@^7.7.0":
   version "7.7.0"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.7.0.tgz#f1b20b535e7716b622c99e989259d7dd942dd9cc"
@@ -2042,13 +1481,6 @@
   dependencies:
     regenerator-transform "^0.14.0"
 
-"@babel/plugin-transform-regenerator@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.8.3.tgz#b31031e8059c07495bf23614c97f3d9698bc6ec8"
-  integrity sha512-qt/kcur/FxrQrzFR432FGZznkVAjiyFtCOANjkAKwCbt465L6ZCiUQh2oMYGU3Wo8LRFJxNDFwWn106S5wVUNA==
-  dependencies:
-    regenerator-transform "^0.14.0"
-
 "@babel/plugin-transform-reserved-words@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.2.0.tgz#4792af87c998a49367597d07fedf02636d2e1634"
@@ -2063,13 +1495,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-reserved-words@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.8.3.tgz#9a0635ac4e665d29b162837dd3cc50745dfdf1f5"
-  integrity sha512-mwMxcycN3omKFDjDQUl+8zyMsBfjRFr0Zn/64I41pmjv4NJuqcYlEtezwYtw9TFd9WR1vN5kiM+O0gMZzO6L0A==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/plugin-transform-runtime@7.6.0":
   version "7.6.0"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.6.0.tgz#85a3cce402b28586138e368fce20ab3019b9713e"
@@ -2080,13 +1505,13 @@
     resolve "^1.8.1"
     semver "^5.5.1"
 
-"@babel/plugin-transform-runtime@^7.7.6":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.8.3.tgz#c0153bc0a5375ebc1f1591cb7eea223adea9f169"
-  integrity sha512-/vqUt5Yh+cgPZXXjmaG9NT8aVfThKk7G4OqkVhrXqwsC5soMn/qTCxs36rZ2QFhpfTJcjw4SNDIZ4RUb8OL4jQ==
+"@babel/plugin-transform-runtime@^7.6.2":
+  version "7.6.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.6.2.tgz#2669f67c1fae0ae8d8bf696e4263ad52cb98b6f8"
+  integrity sha512-cqULw/QB4yl73cS5Y0TZlQSjDvNkzDbu0FurTZyHlJpWE5T3PCMdnyV+xXoH1opr1ldyHODe3QAX3OMAii5NxA==
   dependencies:
-    "@babel/helper-module-imports" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
     resolve "^1.8.1"
     semver "^5.5.1"
 
@@ -2104,13 +1529,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-shorthand-properties@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.8.3.tgz#28545216e023a832d4d3a1185ed492bcfeac08c8"
-  integrity sha512-I9DI6Odg0JJwxCHzbzW08ggMdCezoWcuQRz3ptdudgwaHxTjxw5HgdFJmZIkIMlRymL6YiZcped4TTCB0JcC8w==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/plugin-transform-spread@^7.2.0", "@babel/plugin-transform-spread@^7.6.2":
   version "7.6.2"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.6.2.tgz#fc77cf798b24b10c46e1b51b1b88c2bf661bb8dd"
@@ -2125,13 +1543,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-spread@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.8.3.tgz#9c8ffe8170fdfb88b114ecb920b82fb6e95fe5e8"
-  integrity sha512-CkuTU9mbmAoFOI1tklFWYYbzX5qCIZVXPVy0jpXgGwkplCndQAa58s2jr66fTeQnA64bDox0HL4U56CFYoyC7g==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/plugin-transform-sticky-regex@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.2.0.tgz#a1e454b5995560a9c1e0d537dfc15061fd2687e1"
@@ -2148,14 +1559,6 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/helper-regex" "^7.0.0"
 
-"@babel/plugin-transform-sticky-regex@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.8.3.tgz#be7a1290f81dae767475452199e1f76d6175b100"
-  integrity sha512-9Spq0vGCD5Bb4Z/ZXXSK5wbbLFMG085qd2vhL1JYu1WcQ5bXqZBAYRzU1d+p79GcHs2szYv5pVQCX13QgldaWw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/helper-regex" "^7.8.3"
-
 "@babel/plugin-transform-template-literals@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.4.4.tgz#9d28fea7bbce637fb7612a0750989d8321d4bcb0"
@@ -2172,14 +1575,6 @@
     "@babel/helper-annotate-as-pure" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-template-literals@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.8.3.tgz#7bfa4732b455ea6a43130adc0ba767ec0e402a80"
-  integrity sha512-820QBtykIQOLFT8NZOcTRJ1UNuztIELe4p9DCgvj4NK+PwluSJ49we7s9FB1HIGNIYT7wFUJ0ar2QpCDj0escQ==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/plugin-transform-typeof-symbol@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.2.0.tgz#117d2bcec2fbf64b4b59d1f9819894682d29f2b2"
@@ -2194,13 +1589,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-typeof-symbol@^7.8.4":
-  version "7.8.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.8.4.tgz#ede4062315ce0aaf8a657a920858f1a2f35fc412"
-  integrity sha512-2QKyfjGdvuNfHsb7qnBBlKclbD4CfshH2KvDabiijLMGXPHJXGxtDzwIF7bQP+T0ysw8fYTtxPafgfs/c1Lrqg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/plugin-transform-typescript@^7.6.0":
   version "7.6.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.6.3.tgz#dddb50cf3b8b2ef70b22e5326e9a91f05a1db13b"
@@ -2210,15 +1598,6 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-typescript" "^7.2.0"
 
-"@babel/plugin-transform-typescript@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.8.3.tgz#be6f01a7ef423be68e65ace1f04fc407e6d88917"
-  integrity sha512-Ebj230AxcrKGZPKIp4g4TdQLrqX95TobLUWKd/CwG7X1XHUH1ZpkpFvXuXqWbtGRWb7uuEWNlrl681wsOArAdQ==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-typescript" "^7.8.3"
-
 "@babel/plugin-transform-unicode-regex@^7.4.4", "@babel/plugin-transform-unicode-regex@^7.7.0":
   version "7.7.0"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.7.0.tgz#743d9bcc44080e3cc7d49259a066efa30f9187a3"
@@ -2227,6 +1606,15 @@
     "@babel/helper-create-regexp-features-plugin" "^7.7.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-unicode-regex@^7.6.2":
+  version "7.6.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.6.2.tgz#b692aad888a7e8d8b1b214be6b9dc03d5031f698"
+  integrity sha512-orZI6cWlR3nk2YmYdb0gImrgCUwb5cBUwjf6Ks6dvNVvXERkwtJWOQaEOjPiu0Gu1Tq6Yq/hruCZZOOi9F34Dw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-regex" "^7.4.4"
+    regexpu-core "^4.6.0"
+
 "@babel/plugin-transform-unicode-regex@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.7.4.tgz#a3c0f65b117c4c81c5b6484f2a5e7b95346b83ae"
@@ -2235,14 +1623,6 @@
     "@babel/helper-create-regexp-features-plugin" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-unicode-regex@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.8.3.tgz#0cef36e3ba73e5c57273effb182f46b91a1ecaad"
-  integrity sha512-+ufgJjYdmWfSQ+6NS9VGUR2ns8cjJjYbrbi11mZBTaWm+Fui/ncTLFF28Ei1okavY+xkojGr1eJxNsWYeA5aZw==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/polyfill@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.0.0.tgz#c8ff65c9ec3be6a1ba10113ebd40e8750fb90bff"
@@ -2372,6 +1752,62 @@
     js-levenshtein "^1.1.3"
     semver "^5.5.0"
 
+"@babel/preset-env@^7.6.3":
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.6.3.tgz#9e1bf05a2e2d687036d24c40e4639dc46cef2271"
+  integrity sha512-CWQkn7EVnwzlOdR5NOm2+pfgSNEZmvGjOhlCHBDq0J8/EStr+G+FvPEiz9B56dR6MoiUFjXhfE4hjLoAKKJtIQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-proposal-async-generator-functions" "^7.2.0"
+    "@babel/plugin-proposal-dynamic-import" "^7.5.0"
+    "@babel/plugin-proposal-json-strings" "^7.2.0"
+    "@babel/plugin-proposal-object-rest-spread" "^7.6.2"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.2.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.6.2"
+    "@babel/plugin-syntax-async-generators" "^7.2.0"
+    "@babel/plugin-syntax-dynamic-import" "^7.2.0"
+    "@babel/plugin-syntax-json-strings" "^7.2.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.2.0"
+    "@babel/plugin-transform-arrow-functions" "^7.2.0"
+    "@babel/plugin-transform-async-to-generator" "^7.5.0"
+    "@babel/plugin-transform-block-scoped-functions" "^7.2.0"
+    "@babel/plugin-transform-block-scoping" "^7.6.3"
+    "@babel/plugin-transform-classes" "^7.5.5"
+    "@babel/plugin-transform-computed-properties" "^7.2.0"
+    "@babel/plugin-transform-destructuring" "^7.6.0"
+    "@babel/plugin-transform-dotall-regex" "^7.6.2"
+    "@babel/plugin-transform-duplicate-keys" "^7.5.0"
+    "@babel/plugin-transform-exponentiation-operator" "^7.2.0"
+    "@babel/plugin-transform-for-of" "^7.4.4"
+    "@babel/plugin-transform-function-name" "^7.4.4"
+    "@babel/plugin-transform-literals" "^7.2.0"
+    "@babel/plugin-transform-member-expression-literals" "^7.2.0"
+    "@babel/plugin-transform-modules-amd" "^7.5.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.6.0"
+    "@babel/plugin-transform-modules-systemjs" "^7.5.0"
+    "@babel/plugin-transform-modules-umd" "^7.2.0"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.6.3"
+    "@babel/plugin-transform-new-target" "^7.4.4"
+    "@babel/plugin-transform-object-super" "^7.5.5"
+    "@babel/plugin-transform-parameters" "^7.4.4"
+    "@babel/plugin-transform-property-literals" "^7.2.0"
+    "@babel/plugin-transform-regenerator" "^7.4.5"
+    "@babel/plugin-transform-reserved-words" "^7.2.0"
+    "@babel/plugin-transform-shorthand-properties" "^7.2.0"
+    "@babel/plugin-transform-spread" "^7.6.2"
+    "@babel/plugin-transform-sticky-regex" "^7.2.0"
+    "@babel/plugin-transform-template-literals" "^7.4.4"
+    "@babel/plugin-transform-typeof-symbol" "^7.2.0"
+    "@babel/plugin-transform-unicode-regex" "^7.6.2"
+    "@babel/types" "^7.6.3"
+    browserslist "^4.6.0"
+    core-js-compat "^3.1.1"
+    invariant "^2.2.2"
+    js-levenshtein "^1.1.3"
+    semver "^5.5.0"
+
 "@babel/preset-env@^7.7.1":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.7.4.tgz#ccaf309ae8d1ee2409c85a4e2b5e280ceee830f8"
@@ -2429,69 +1865,6 @@
     js-levenshtein "^1.1.3"
     semver "^5.5.0"
 
-"@babel/preset-env@^7.7.6":
-  version "7.8.4"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.8.4.tgz#9dac6df5f423015d3d49b6e9e5fa3413e4a72c4e"
-  integrity sha512-HihCgpr45AnSOHRbS5cWNTINs0TwaR8BS8xIIH+QwiW8cKL0llV91njQMpeMReEPVs+1Ao0x3RLEBLtt1hOq4w==
-  dependencies:
-    "@babel/compat-data" "^7.8.4"
-    "@babel/helper-compilation-targets" "^7.8.4"
-    "@babel/helper-module-imports" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-proposal-async-generator-functions" "^7.8.3"
-    "@babel/plugin-proposal-dynamic-import" "^7.8.3"
-    "@babel/plugin-proposal-json-strings" "^7.8.3"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.8.3"
-    "@babel/plugin-proposal-object-rest-spread" "^7.8.3"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.8.3"
-    "@babel/plugin-proposal-optional-chaining" "^7.8.3"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.8.3"
-    "@babel/plugin-syntax-async-generators" "^7.8.0"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
-    "@babel/plugin-syntax-json-strings" "^7.8.0"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
-    "@babel/plugin-syntax-top-level-await" "^7.8.3"
-    "@babel/plugin-transform-arrow-functions" "^7.8.3"
-    "@babel/plugin-transform-async-to-generator" "^7.8.3"
-    "@babel/plugin-transform-block-scoped-functions" "^7.8.3"
-    "@babel/plugin-transform-block-scoping" "^7.8.3"
-    "@babel/plugin-transform-classes" "^7.8.3"
-    "@babel/plugin-transform-computed-properties" "^7.8.3"
-    "@babel/plugin-transform-destructuring" "^7.8.3"
-    "@babel/plugin-transform-dotall-regex" "^7.8.3"
-    "@babel/plugin-transform-duplicate-keys" "^7.8.3"
-    "@babel/plugin-transform-exponentiation-operator" "^7.8.3"
-    "@babel/plugin-transform-for-of" "^7.8.4"
-    "@babel/plugin-transform-function-name" "^7.8.3"
-    "@babel/plugin-transform-literals" "^7.8.3"
-    "@babel/plugin-transform-member-expression-literals" "^7.8.3"
-    "@babel/plugin-transform-modules-amd" "^7.8.3"
-    "@babel/plugin-transform-modules-commonjs" "^7.8.3"
-    "@babel/plugin-transform-modules-systemjs" "^7.8.3"
-    "@babel/plugin-transform-modules-umd" "^7.8.3"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.8.3"
-    "@babel/plugin-transform-new-target" "^7.8.3"
-    "@babel/plugin-transform-object-super" "^7.8.3"
-    "@babel/plugin-transform-parameters" "^7.8.4"
-    "@babel/plugin-transform-property-literals" "^7.8.3"
-    "@babel/plugin-transform-regenerator" "^7.8.3"
-    "@babel/plugin-transform-reserved-words" "^7.8.3"
-    "@babel/plugin-transform-shorthand-properties" "^7.8.3"
-    "@babel/plugin-transform-spread" "^7.8.3"
-    "@babel/plugin-transform-sticky-regex" "^7.8.3"
-    "@babel/plugin-transform-template-literals" "^7.8.3"
-    "@babel/plugin-transform-typeof-symbol" "^7.8.4"
-    "@babel/plugin-transform-unicode-regex" "^7.8.3"
-    "@babel/types" "^7.8.3"
-    browserslist "^4.8.5"
-    core-js-compat "^3.6.2"
-    invariant "^2.2.2"
-    levenary "^1.1.1"
-    semver "^5.5.0"
-
 "@babel/preset-flow@^7.0.0":
   version "7.0.0"
   resolved "https://registry.npmjs.org/@babel/preset-flow/-/preset-flow-7.0.0.tgz#afd764835d9535ec63d8c7d4caf1c06457263da2"
@@ -2522,6 +1895,17 @@
     "@babel/plugin-transform-react-jsx-self" "^7.0.0"
     "@babel/plugin-transform-react-jsx-source" "^7.0.0"
 
+"@babel/preset-react@^7.6.3":
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.6.3.tgz#d5242c828322520205ae4eda5d4f4f618964e2f6"
+  integrity sha512-07yQhmkZmRAfwREYIQgW0HEwMY9GBJVuPY4Q12UC72AbfaawuupVWa8zQs2tlL+yun45Nv/1KreII/0PLfEsgA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-transform-react-display-name" "^7.0.0"
+    "@babel/plugin-transform-react-jsx" "^7.0.0"
+    "@babel/plugin-transform-react-jsx-self" "^7.0.0"
+    "@babel/plugin-transform-react-jsx-source" "^7.0.0"
+
 "@babel/preset-react@^7.7.0":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.7.4.tgz#3fe2ea698d8fb536d8e7881a592c3c1ee8bf5707"
@@ -2533,18 +1917,7 @@
     "@babel/plugin-transform-react-jsx-self" "^7.7.4"
     "@babel/plugin-transform-react-jsx-source" "^7.7.4"
 
-"@babel/preset-react@^7.7.4":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.8.3.tgz#23dc63f1b5b0751283e04252e78cf1d6589273d2"
-  integrity sha512-9hx0CwZg92jGb7iHYQVgi0tOEHP/kM60CtWJQnmbATSPIQQ2xYzfoCI3EdqAhFBeeJwYMdWQuDUHMsuDbH9hyQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-transform-react-display-name" "^7.8.3"
-    "@babel/plugin-transform-react-jsx" "^7.8.3"
-    "@babel/plugin-transform-react-jsx-self" "^7.8.3"
-    "@babel/plugin-transform-react-jsx-source" "^7.8.3"
-
-"@babel/preset-typescript@7.6.0":
+"@babel/preset-typescript@7.6.0", "@babel/preset-typescript@^7.6.0":
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.6.0.tgz#25768cb8830280baf47c45ab1a519a9977498c98"
   integrity sha512-4xKw3tTcCm0qApyT6PqM9qniseCE79xGHiUnNdKGdxNsGUc2X7WwZybqIpnTmoukg3nhPceI5KPNzNqLNeIJww==
@@ -2552,24 +1925,17 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-transform-typescript" "^7.6.0"
 
-"@babel/preset-typescript@^7.7.7":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.8.3.tgz#90af8690121beecd9a75d0cc26c6be39d1595d13"
-  integrity sha512-qee5LgPGui9zQ0jR1TeU5/fP9L+ovoArklEqY12ek8P/wV5ZeM/VYSQYwICeoT6FfpJTekG9Ilay5PhwsOpMHA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-transform-typescript" "^7.8.3"
-
-"@babel/register@^7.7.7":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.8.3.tgz#5d5d30cfcc918437535d724b8ac1e4a60c5db1f8"
-  integrity sha512-t7UqebaWwo9nXWClIPLPloa5pN33A2leVs8Hf0e9g9YwUP8/H9NeR7DJU+4CXo23QtjChQv5a3DjEtT83ih1rg==
+"@babel/register@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.4.4.tgz#370a68ba36f08f015a8b35d4864176c6b65d7a23"
+  integrity sha512-sn51H88GRa00+ZoMqCVgOphmswG4b7mhf9VOB0LUBAieykq2GnRFerlN+JQkO/ntT7wz4jaHNSRPg9IdMPEUkA==
   dependencies:
+    core-js "^3.0.0"
     find-cache-dir "^2.0.0"
-    lodash "^4.17.13"
-    make-dir "^2.1.0"
+    lodash "^4.17.11"
+    mkdirp "^0.5.1"
     pirates "^4.0.0"
-    source-map-support "^0.5.16"
+    source-map-support "^0.5.9"
 
 "@babel/runtime@7.6.0":
   version "7.6.0"
@@ -2599,17 +1965,10 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.7.6":
-  version "7.8.4"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.4.tgz#d79f5a2040f7caa24d53e563aad49cbc05581308"
-  integrity sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==
-  dependencies:
-    regenerator-runtime "^0.13.2"
-
-"@babel/standalone@^7.7.7":
-  version "7.8.4"
-  resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.8.4.tgz#c50ed8a93c12141e638ea87ca4cdf6b4665a0bac"
-  integrity sha512-c/PomWPyLeCAnldfMGL2wNbu4OcseDObGhpK6WGfwqHWW+t9TNB7ENF/uWw/GtWv1wOnbPOb6U+uj2Q5ki1HLg==
+"@babel/standalone@^7.3.2":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.4.4.tgz#a40fbed37254e0a6dd55ea2db142c7b357fc4299"
+  integrity sha512-b1iLEvcOK9SdG+howg7pcbUm9EaHFlZ4yMaj7/3vAz7eDfEnY0gb3o8BByBDCFueqAZyHSodj0AW+yVnK1+/qg==
 
 "@babel/template@^7.0.0", "@babel/template@^7.1.0", "@babel/template@^7.4.4":
   version "7.4.4"
@@ -2647,15 +2006,6 @@
     "@babel/parser" "^7.7.4"
     "@babel/types" "^7.7.4"
 
-"@babel/template@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.3.tgz#e02ad04fe262a657809327f578056ca15fd4d1b8"
-  integrity sha512-04m87AcQgAFdvuoyiQ2kgELr2tV8B4fP/xJAVUL3Yb3bkNdMedD3d0rlSQr3PegP0cms3eHjl1F7PWlvWbU8FQ==
-  dependencies:
-    "@babel/code-frame" "^7.8.3"
-    "@babel/parser" "^7.8.3"
-    "@babel/types" "^7.8.3"
-
 "@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.4.4", "@babel/traverse@^7.4.5":
   version "7.4.5"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.4.5.tgz#4e92d1728fd2f1897dafdd321efbff92156c3216"
@@ -2686,6 +2036,21 @@
     globals "^11.1.0"
     lodash "^4.17.13"
 
+"@babel/traverse@^7.6.2", "@babel/traverse@^7.6.3":
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.6.3.tgz#66d7dba146b086703c0fb10dd588b7364cec47f9"
+  integrity sha512-unn7P4LGsijIxaAJo/wpoU11zN+2IaClkQAxcJWBNCMS6cmVh802IyLHNkAjQ0iYnRS3nnxk5O3fuXW28IMxTw==
+  dependencies:
+    "@babel/code-frame" "^7.5.5"
+    "@babel/generator" "^7.6.3"
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/helper-split-export-declaration" "^7.4.4"
+    "@babel/parser" "^7.6.3"
+    "@babel/types" "^7.6.3"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.13"
+
 "@babel/traverse@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.7.4.tgz#9c1e7c60fb679fe4fcfaa42500833333c2058558"
@@ -2701,21 +2066,6 @@
     globals "^11.1.0"
     lodash "^4.17.13"
 
-"@babel/traverse@^7.8.3", "@babel/traverse@^7.8.4":
-  version "7.8.4"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.8.4.tgz#f0845822365f9d5b0e312ed3959d3f827f869e3c"
-  integrity sha512-NGLJPZwnVEyBPLI+bl9y9aSnxMhsKz42so7ApAv9D+b4vAFPpY013FTS9LdKxcABoIYFU52HcYga1pPlx454mg==
-  dependencies:
-    "@babel/code-frame" "^7.8.3"
-    "@babel/generator" "^7.8.4"
-    "@babel/helper-function-name" "^7.8.3"
-    "@babel/helper-split-export-declaration" "^7.8.3"
-    "@babel/parser" "^7.8.4"
-    "@babel/types" "^7.8.3"
-    debug "^4.1.0"
-    globals "^11.1.0"
-    lodash "^4.17.13"
-
 "@babel/types@^7.0.0", "@babel/types@^7.0.0-beta.49", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.4.4.tgz#8db9e9a629bb7c29370009b4b779ed93fe57d5f0"
@@ -2725,7 +2075,7 @@
     lodash "^4.17.11"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.5.5", "@babel/types@^7.6.0":
+"@babel/types@^7.5.5", "@babel/types@^7.6.0", "@babel/types@^7.6.3":
   version "7.6.3"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.6.3.tgz#3f07d96f854f98e2fbd45c64b0cb942d11e8ba09"
   integrity sha512-CqbcpTxMcpuQTMhjI37ZHVgjBkysg5icREQIEZ0eG1yCNwg3oy+5AaLiOKmjsCj6nqOsa6Hf0ObjRVwokb7srA==
@@ -2752,15 +2102,6 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.3.tgz#5a383dffa5416db1b73dedffd311ffd0788fb31c"
-  integrity sha512-jBD+G8+LWpMBBWvVcdr4QysjUE4mU/syrhN17o1u3gx0/WzJB1kwiVZAXRtWbsIPOwW8pF/YJV5+nmetPzepXg==
-  dependencies:
-    esutils "^2.0.2"
-    lodash "^4.17.13"
-    to-fast-properties "^2.0.0"
-
 "@cnakazawa/watch@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.3.tgz#099139eaec7ebf07a27c1786a3ff64f39464d2ef"
@@ -2890,25 +2231,6 @@
     reflect-metadata "^0.1.12"
     tslib "^1.8.1"
 
-"@gulp-sourcemaps/identity-map@1.X":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@gulp-sourcemaps/identity-map/-/identity-map-1.0.2.tgz#1e6fe5d8027b1f285dc0d31762f566bccd73d5a9"
-  integrity sha512-ciiioYMLdo16ShmfHBXJBOFm3xPC4AuwO4xeRpFeHz7WK9PYsWCmigagG2XyzZpubK4a3qNKoUBDhbzHfa50LQ==
-  dependencies:
-    acorn "^5.0.3"
-    css "^2.2.1"
-    normalize-path "^2.1.1"
-    source-map "^0.6.0"
-    through2 "^2.0.3"
-
-"@gulp-sourcemaps/map-sources@1.X":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@gulp-sourcemaps/map-sources/-/map-sources-1.0.0.tgz#890ae7c5d8c877f6d384860215ace9d7ec945bda"
-  integrity sha1-iQrnxdjId/bThIYCFazp1+yUW9o=
-  dependencies:
-    normalize-path "^2.0.1"
-    through2 "^2.0.3"
-
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -5720,6 +5042,11 @@ accepts@~1.3.5, accepts@~1.3.7:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
+acorn-dynamic-import@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz#482210140582a36b83c3e342e1cfebcaa9240948"
+  integrity sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw==
+
 acorn-globals@^4.1.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.0.tgz#e3b6f8da3c1552a95ae627571f7dd6923bb54103"
@@ -5738,12 +5065,12 @@ acorn-walk@^6.0.1, acorn-walk@^6.1.1:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.1.1.tgz#d363b66f5fac5f018ff9c3a1e7b6f8e310cc3913"
   integrity sha512-OtUw6JUTgxA2QoqqmrmQ7F2NYqiBPi/L2jqHyFtllhOUvXYQXf0Z1CYUinIfyT4bTCGmrA7gX9FvHA81uzCoVw==
 
-acorn@5.X, acorn@^5.0.3, acorn@^5.2.1, acorn@^5.5.3:
+acorn@^5.2.1, acorn@^5.5.3:
   version "5.7.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
   integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
 
-acorn@^6.0.1, acorn@^6.0.7:
+acorn@^6.0.1, acorn@^6.0.5, acorn@^6.0.7:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.1.1.tgz#7d25ae05bb8ad1f9b699108e1094ecd7884adc1f"
   integrity sha512-jPTiwtOxaHNaAPg/dmrJ/beuzLRnXtB0kQPQ8JpotKJgTB6rX6c8mlf315941pyjBSaPg8NHXS9fhP4u17DpGA==
@@ -6364,7 +5691,7 @@ async@^1.5.2:
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
   integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=
 
-async@^2.1.4, async@^2.5.0, async@^2.6.2:
+async@^2.1.4, async@^2.6.2:
   version "2.6.3"
   resolved "https://registry.npmjs.org/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
   integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
@@ -6383,7 +5710,7 @@ asynckit@^0.4.0:
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
   integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
 
-atob@^2.1.1, atob@^2.1.2:
+atob@^2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
@@ -7168,15 +6495,6 @@ browserslist@^4.7.3:
     electron-to-chromium "^1.3.306"
     node-releases "^1.1.40"
 
-browserslist@^4.8.3, browserslist@^4.8.5:
-  version "4.8.6"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.8.6.tgz#96406f3f5f0755d272e27a66f4163ca821590a7e"
-  integrity sha512-ZHao85gf0eZ0ESxLfCp73GG9O/VTytYDIkIiZDlURppLTI9wErSM/5yAKEq6rcUdxBLjMELmrYUJGg5sxGKMHg==
-  dependencies:
-    caniuse-lite "^1.0.30001023"
-    electron-to-chromium "^1.3.341"
-    node-releases "^1.1.47"
-
 bs-logger@0.x:
   version "0.2.6"
   resolved "https://registry.npmjs.org/bs-logger/-/bs-logger-0.2.6.tgz#eb7d365307a72cf974cc6cda76b68354ad336bd8"
@@ -7439,11 +6757,6 @@ caniuse-lite@^1.0.30000967, caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.300010
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001016.tgz#16ea48d7d6e8caf3cad3295c2d746fe38c4e7f66"
   integrity sha512-yYQ2QfotceRiH4U+h1Us86WJXtVHDmy3nEKIdYPsZCYnOV5/tMgGbmoIlrMzmh2VXlproqYtVaKeGDBkMZifFA==
 
-caniuse-lite@^1.0.30001023:
-  version "1.0.30001025"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001025.tgz#30336a8aca7f98618eb3cf38e35184e13d4e5fe6"
-  integrity sha512-SKyFdHYfXUZf5V85+PJgLYyit27q4wgvZuf8QTOk1osbypcROihMBlx9GRar2/pIcKH2r4OehdlBr9x6PXetAQ==
-
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -7630,6 +6943,13 @@ chownr@^1.0.1, chownr@^1.1.1:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.1.tgz#54726b8b8fff4df053c42187e801fb4412df1494"
   integrity sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==
 
+chrome-trace-event@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.0.tgz#45a91bd2c20c9411f0963b5aaeb9a1b95e09cc48"
+  integrity sha512-xDbVgyfDTT2piup/h8dK/y4QZfJRSa73bw1WZ8b4XM1o7fsFubUVGYcE+1ANtOzJJELGpYoG2961z0Z6OAld9A==
+  dependencies:
+    tslib "^1.9.0"
+
 chrome-trace-event@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4"
@@ -8274,13 +7594,6 @@ conventional-recommended-bump@^4.0.4:
     meow "^4.0.0"
     q "^1.5.1"
 
-convert-source-map@1.X, convert-source-map@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
-  integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
-  dependencies:
-    safe-buffer "~5.1.1"
-
 convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.6.0.tgz#51b537a8c43e0f04dec1993bffcdd504e758ac20"
@@ -8288,6 +7601,13 @@ convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0:
   dependencies:
     safe-buffer "~5.1.1"
 
+convert-source-map@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
+  integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
+  dependencies:
+    safe-buffer "~5.1.1"
+
 cookie-signature@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
@@ -8352,14 +7672,6 @@ core-js-compat@^3.1.1:
     browserslist "^4.7.2"
     semver "^6.3.0"
 
-core-js-compat@^3.6.2:
-  version "3.6.4"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.6.4.tgz#938476569ebb6cda80d339bcf199fae4f16fff17"
-  integrity sha512-zAa3IZPvsJ0slViBQ2z+vgyyTuhd3MFn1rBQjZSKVEgB0UMYhUkCj9jJUVPgGTGqWvsBVmfnruXgTcNyTlEiSA==
-  dependencies:
-    browserslist "^4.8.3"
-    semver "7.0.0"
-
 core-js-pure@^3.0.1:
   version "3.4.1"
   resolved "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.4.1.tgz#483dbc687016b45cab4c185cf998c2c59e772c2a"
@@ -8380,6 +7692,11 @@ core-js@^2.6.5:
   resolved "https://registry.npmjs.org/core-js/-/core-js-2.6.10.tgz#8a5b8391f8cc7013da703411ce5b585706300d7f"
   integrity sha512-I39t74+4t+zau64EN1fE5v2W31Adtc/REhzWN+gWRRXg6WH5qAsZm62DHpQ1+Yhe4047T55jvzz7MUqF/dBBlA==
 
+core-js@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.1.2.tgz#2549a2cfb3ca1a5d851c9f7838e8b282cef2f3ba"
+  integrity sha512-3poRGjbu56leCtZCZCzCgQ7GcKOflDFnjWIepaPFUsM0IXUBrne10sl3aa2Bkcz3+FjRdIxBe9dAMhIJmEnQNA==
+
 core-js@^3.0.1, core-js@^3.0.4:
   version "3.4.1"
   resolved "https://registry.npmjs.org/core-js/-/core-js-3.4.1.tgz#76dd6828412900ab27c8ce0b22e6114d7ce21b18"
@@ -8621,16 +7938,6 @@ css-what@^3.2.1:
   resolved "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz#f4a8f12421064621b456755e34a03a2c22df5da1"
   integrity sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==
 
-css@2.X, css@^2.2.1:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
-  integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==
-  dependencies:
-    inherits "^2.0.3"
-    source-map "^0.6.1"
-    source-map-resolve "^0.5.2"
-    urix "^0.1.0"
-
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@@ -8801,14 +8108,6 @@ d@1:
   dependencies:
     es5-ext "^0.10.9"
 
-d@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
-  integrity sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==
-  dependencies:
-    es5-ext "^0.10.50"
-    type "^1.0.1"
-
 damerau-levenshtein@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.4.tgz#03191c432cb6eea168bb77f3a55ffdccb8978514"
@@ -8895,15 +8194,6 @@ dateformat@^3.0.0:
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
   integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
 
-debug-fabulous@1.X:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/debug-fabulous/-/debug-fabulous-1.1.0.tgz#af8a08632465224ef4174a9f06308c3c2a1ebc8e"
-  integrity sha512-GZqvGIgKNlUnHUPQhepnUZFIMoi3dgZKQBzKDeL2g7oJF9SNAji/AAu36dusFUas0O+pae74lNeoIPHqXWDkLg==
-  dependencies:
-    debug "3.X"
-    memoizee "0.4.X"
-    object-assign "4.X"
-
 debug@2.6.9, debug@^2.1.3, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -8918,7 +8208,7 @@ debug@3.1.0:
   dependencies:
     ms "2.0.0"
 
-debug@3.X, debug@^3.0.0, debug@^3.1.0, debug@^3.1.1, debug@^3.2.5, debug@^3.2.6:
+debug@^3.0.0, debug@^3.1.0, debug@^3.1.1, debug@^3.2.5, debug@^3.2.6:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
   integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
@@ -9125,7 +8415,7 @@ detect-libc@^1.0.2:
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
   integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
 
-detect-newline@2.X, detect-newline@^2.1.0:
+detect-newline@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
   integrity sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=
@@ -9507,11 +8797,6 @@ electron-to-chromium@^1.3.295:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.299.tgz#9113b733247c68b87e07cb7c940a22913fb74d38"
   integrity sha512-aH3lKMQFPuNk4w7W3hQDqnjfYKJQLzbp5Adn6xgTz5547kKSGOmAU7cQWxH953L4ntZL4HsZ8XWqfcMTvTcEMw==
 
-electron-to-chromium@^1.3.341:
-  version "1.3.345"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.345.tgz#2569d0d54a64ef0f32a4b7e8c80afa5fe57c5d98"
-  integrity sha512-f8nx53+Z9Y+SPWGg3YdHrbYYfIJAtbUjpFfW4X1RwTZ94iUG7geg9tV8HqzAXX7XTNgyWgAFvce4yce8ZKxKmg==
-
 elegant-spinner@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
@@ -9585,22 +8870,22 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
-enhanced-resolve@4.1.0, enhanced-resolve@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz#41c7e0bfdfe74ac1ffe1e57ad6a5c6c9f3742a7f"
-  integrity sha512-F/7vkyTtyc/llOIn8oWclcB25KdRaiPBpZYDgJHgh/UHtpgT2p2eldQgtQnLtUvfMKPKxbRaQM/hHkvLHt1Vng==
-  dependencies:
-    graceful-fs "^4.1.2"
-    memory-fs "^0.4.0"
-    tapable "^1.0.0"
-
 enhanced-resolve@^4.0.0:
   version "4.1.1"
   resolved "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.1.1.tgz#2937e2b8066cd0fe7ce0990a98f0d71a35189f66"
   integrity sha512-98p2zE+rL7/g/DzMHMTF4zZlCgeVdJ7yr6xzEpJRYwFYrGi9ANdn5DnJURg6RpBkyk60XYDnWIv51VfIhfNGuA==
   dependencies:
     graceful-fs "^4.1.2"
-    memory-fs "^0.5.0"
+    memory-fs "^0.5.0"
+    tapable "^1.0.0"
+
+enhanced-resolve@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz#41c7e0bfdfe74ac1ffe1e57ad6a5c6c9f3742a7f"
+  integrity sha512-F/7vkyTtyc/llOIn8oWclcB25KdRaiPBpZYDgJHgh/UHtpgT2p2eldQgtQnLtUvfMKPKxbRaQM/hHkvLHt1Vng==
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.4.0"
     tapable "^1.0.0"
 
 entities@^1.1.1, entities@~1.1.1:
@@ -9781,21 +9066,12 @@ es5-ext@^0.10.14, es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.14:
     es6-symbol "~3.1.1"
     next-tick "1"
 
-es5-ext@^0.10.45, es5-ext@^0.10.46, es5-ext@^0.10.50, es5-ext@~0.10.2, es5-ext@~0.10.46:
-  version "0.10.53"
-  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.53.tgz#93c5a3acfdbef275220ad72644ad02ee18368de1"
-  integrity sha512-Xs2Stw6NiNHWypzRTY1MtaG/uJlwCk8kH81920ma8mvN8Xq1gsfhZvpkImLQArw8AHnv8MT2I45J3c0R8slE+Q==
-  dependencies:
-    es6-iterator "~2.0.3"
-    es6-symbol "~3.1.3"
-    next-tick "~1.0.0"
-
 es5-shim@^4.5.13:
   version "4.5.13"
   resolved "https://registry.npmjs.org/es5-shim/-/es5-shim-4.5.13.tgz#5d88062de049f8969f83783f4a4884395f21d28b"
   integrity sha512-xi6hh6gsvDE0MaW4Vp1lgNEBpVcCXRWfPXj5egDvtgLz4L9MEvNwYEMdJH+JJinWkwa8c3c3o5HduV7dB/e1Hw==
 
-es6-iterator@^2.0.1, es6-iterator@^2.0.3, es6-iterator@~2.0.3:
+es6-iterator@^2.0.1, es6-iterator@~2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
   integrity sha1-p96IkUGgWpSwhUQDstCg+/qY87c=
@@ -9829,14 +9105,6 @@ es6-symbol@^3.1.1, es6-symbol@~3.1.1:
     d "1"
     es5-ext "~0.10.14"
 
-es6-symbol@~3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.3.tgz#bad5d3c1bcdac28269f4cb331e431c78ac705d18"
-  integrity sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==
-  dependencies:
-    d "^1.0.1"
-    ext "^1.1.2"
-
 es6-weak-map@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.2.tgz#5e3ab32251ffd1538a1f8e5ffa1357772f92d96f"
@@ -9847,16 +9115,6 @@ es6-weak-map@^2.0.1:
     es6-iterator "^2.0.1"
     es6-symbol "^3.1.1"
 
-es6-weak-map@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.3.tgz#b6da1f16cc2cc0d9be43e6bdbfc5e7dfcdf31d53"
-  integrity sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==
-  dependencies:
-    d "1"
-    es5-ext "^0.10.46"
-    es6-iterator "^2.0.3"
-    es6-symbol "^3.1.1"
-
 escape-html@^1.0.3, escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
@@ -10124,14 +9382,6 @@ etag@~1.8.1:
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
   integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
 
-event-emitter@^0.3.5:
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39"
-  integrity sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=
-  dependencies:
-    d "1"
-    es5-ext "~0.10.14"
-
 eventemitter3@1.x.x:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
@@ -10314,13 +9564,6 @@ express@^4.15.4, express@^4.16.3, express@^4.17.0:
     utils-merge "1.0.1"
     vary "~1.1.2"
 
-ext@^1.1.2:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/ext/-/ext-1.4.0.tgz#89ae7a07158f79d35517882904324077e4379244"
-  integrity sha512-Key5NIsUxdqKg3vIsdw9dSuXpPCQ297y6wBjL30edxwPgt2E44WcWBZey/ZvUc6sERLTxKdyCu4gZFmUbk1Q7A==
-  dependencies:
-    type "^2.0.0"
-
 extend-shallow@^1.1.2:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-1.1.4.tgz#19d6bf94dfc09d76ba711f39b872d21ff4dd9071"
@@ -10836,16 +10079,6 @@ find-up@^4.0.0:
     locate-path "^5.0.0"
     path-exists "^4.0.0"
 
-findup-sync@3.0.0, findup-sync@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-3.0.0.tgz#17b108f9ee512dfb7a5c7f3c8b27ea9e1a9c08d1"
-  integrity sha512-YbffarhcicEhOrm4CtrwdKBdCuz576RLdhJDsIfvNtxUuhdRet1qZcsMjqbePtAseKdAnDyM/IyXbu7PRPRLYg==
-  dependencies:
-    detect-file "^1.0.0"
-    is-glob "^4.0.0"
-    micromatch "^3.0.4"
-    resolve-dir "^1.0.1"
-
 findup-sync@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-2.0.0.tgz#9326b1488c22d1a6088650a86901b2d9a90a2cbc"
@@ -10856,6 +10089,16 @@ findup-sync@^2.0.0:
     micromatch "^3.0.4"
     resolve-dir "^1.0.1"
 
+findup-sync@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-3.0.0.tgz#17b108f9ee512dfb7a5c7f3c8b27ea9e1a9c08d1"
+  integrity sha512-YbffarhcicEhOrm4CtrwdKBdCuz576RLdhJDsIfvNtxUuhdRet1qZcsMjqbePtAseKdAnDyM/IyXbu7PRPRLYg==
+  dependencies:
+    detect-file "^1.0.0"
+    is-glob "^4.0.0"
+    micromatch "^3.0.4"
+    resolve-dir "^1.0.1"
+
 fined@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/fined/-/fined-1.1.0.tgz#b37dc844b76a2f5e7081e884f7c0ae344f153476"
@@ -11182,11 +10425,6 @@ genfun@^5.0.0:
   resolved "https://registry.yarnpkg.com/genfun/-/genfun-5.0.0.tgz#9dd9710a06900a5c4a5bf57aca5da4e52fe76537"
   integrity sha512-KGDOARWVga7+rnB3z9Sd2Letx515owfk0hSxHGuqjANb1M+x2bGZGqHLiozPsYMdM2OubeMni/Hpwmjq6qIUhA==
 
-gensync@^1.0.0-beta.1:
-  version "1.0.0-beta.1"
-  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269"
-  integrity sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==
-
 get-caller-file@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
@@ -11604,16 +10842,16 @@ graceful-fs@4.1.11:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
   integrity sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=
 
-graceful-fs@4.X, graceful-fs@^4.1.9, graceful-fs@^4.2.2:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
-  integrity sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==
-
 graceful-fs@^4.0.0, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.1.tgz#1c1f0c364882c868f5bff6512146328336a11b1d"
   integrity sha512-b9usnbDGnD928gJB3LrCmxoibr3VE4U2SMo5PBuBnokWyDADTqDPXg4YpwKF1trpH+UbGp7QLicO3+aWEy0+mw==
 
+graceful-fs@^4.1.9, graceful-fs@^4.2.2:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
+  integrity sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==
+
 "graceful-readlink@>= 1.0.0":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
@@ -11684,23 +10922,6 @@ gulp-remember@^1.0.1:
     plugin-error "^0.1.2"
     through2 "^0.5.0"
 
-gulp-sourcemaps@^2.6.5:
-  version "2.6.5"
-  resolved "https://registry.yarnpkg.com/gulp-sourcemaps/-/gulp-sourcemaps-2.6.5.tgz#a3f002d87346d2c0f3aec36af7eb873f23de8ae6"
-  integrity sha512-SYLBRzPTew8T5Suh2U8jCSDKY+4NARua4aqjj8HOysBh2tSgT9u4jc1FYirAdPx1akUxxDeK++fqw6Jg0LkQRg==
-  dependencies:
-    "@gulp-sourcemaps/identity-map" "1.X"
-    "@gulp-sourcemaps/map-sources" "1.X"
-    acorn "5.X"
-    convert-source-map "1.X"
-    css "2.X"
-    debug-fabulous "1.X"
-    detect-newline "2.X"
-    graceful-fs "4.X"
-    source-map "~0.6.0"
-    strip-bom-string "1.X"
-    through2 "2.X"
-
 gulp-util@^3.0.8:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-3.0.8.tgz#0054e1e744502e27c04c187c3ecc505dd54bbb4f"
@@ -12392,14 +11613,6 @@ import-lazy@^2.1.0:
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
   integrity sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=
 
-import-local@2.0.0, import-local@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
-  integrity sha512-b6s04m3O+s3CGSbqDIyP4R6aAwAeYlVq9+WUWep6iHa8ETRf9yei1U48C5MmfJmV9AiLYYBKPMq/W+/WRpQmCQ==
-  dependencies:
-    pkg-dir "^3.0.0"
-    resolve-cwd "^2.0.0"
-
 import-local@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/import-local/-/import-local-1.0.0.tgz#5e4ffdc03f4fe6c009c6729beb29631c2f8227bc"
@@ -12408,6 +11621,14 @@ import-local@^1.0.0:
     pkg-dir "^2.0.0"
     resolve-cwd "^2.0.0"
 
+import-local@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
+  integrity sha512-b6s04m3O+s3CGSbqDIyP4R6aAwAeYlVq9+WUWep6iHa8ETRf9yei1U48C5MmfJmV9AiLYYBKPMq/W+/WRpQmCQ==
+  dependencies:
+    pkg-dir "^3.0.0"
+    resolve-cwd "^2.0.0"
+
 imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
@@ -12442,6 +11663,11 @@ indexes-of@^1.0.1:
   resolved "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
   integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
 
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+  integrity sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=
+
 infer-owner@^1.0.3:
   version "1.0.4"
   resolved "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
@@ -12558,7 +11784,7 @@ inquirer@^7.0.0:
     strip-ansi "^5.1.0"
     through "^2.3.6"
 
-interpret@1.2.0, interpret@^1.0.0, interpret@^1.1.0, interpret@^1.2.0:
+interpret@^1.0.0, interpret@^1.1.0, interpret@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
   integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==
@@ -12918,7 +12144,7 @@ is-plain-object@^3.0.0:
   dependencies:
     isobject "^4.0.0"
 
-is-promise@^2.1, is-promise@^2.1.0:
+is-promise@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
   integrity sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=
@@ -14313,13 +13539,6 @@ leven@^3.1.0:
   resolved "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
   integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
 
-levenary@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/levenary/-/levenary-1.1.1.tgz#842a9ee98d2075aa7faeedbe32679e9205f46f77"
-  integrity sha512-mkAdOIt79FD6irqjYSs4rdbnlT5vRonMEvBVPVb3XmevfS8kgRXwfes0dhPdEtzTWD/1eNE/Bm/G1iRt6DcnQQ==
-  dependencies:
-    leven "^3.1.0"
-
 levn@^0.3.0, levn@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
@@ -14496,7 +13715,7 @@ load-json-file@^4.0.0:
     pify "^3.0.0"
     strip-bom "^3.0.0"
 
-loader-runner@^2.4.0:
+loader-runner@^2.3.0, loader-runner@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
   integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
@@ -14892,13 +14111,6 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
-lru-queue@0.1:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/lru-queue/-/lru-queue-0.1.0.tgz#2738bd9f0d3cf4f84490c5736c48699ac632cda3"
-  integrity sha1-Jzi9nw089PhEkMVzbEhpmsYyzaM=
-  dependencies:
-    es5-ext "~0.10.2"
-
 lz-string@^1.4.4:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
@@ -14916,7 +14128,7 @@ make-dir@^1.0.0, make-dir@^1.3.0:
   dependencies:
     pify "^3.0.0"
 
-make-dir@^2.0.0, make-dir@^2.1.0:
+make-dir@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
   integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
@@ -15168,20 +14380,6 @@ memoize-one@^5.0.0:
   resolved "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
   integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
 
-memoizee@0.4.X:
-  version "0.4.14"
-  resolved "https://registry.yarnpkg.com/memoizee/-/memoizee-0.4.14.tgz#07a00f204699f9a95c2d9e77218271c7cd610d57"
-  integrity sha512-/SWFvWegAIYAO4NQMpcX+gcra0yEZu4OntmUdrBaWrJncxOqAziGFlHxc7yjKVK2uu3lpPW27P27wkR82wA8mg==
-  dependencies:
-    d "1"
-    es5-ext "^0.10.45"
-    es6-weak-map "^2.0.2"
-    event-emitter "^0.3.5"
-    is-promise "^2.1"
-    lru-queue "0.1"
-    next-tick "1"
-    timers-ext "^0.1.5"
-
 memoizerific@^1.11.3:
   version "1.11.3"
   resolved "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a"
@@ -15189,7 +14387,7 @@ memoizerific@^1.11.3:
   dependencies:
     map-or-similar "^1.5.0"
 
-memory-fs@^0.4.0, memory-fs@^0.4.1:
+memory-fs@^0.4.0, memory-fs@^0.4.1, memory-fs@~0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
   integrity sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=
@@ -15334,7 +14532,7 @@ mime@1.6.0, mime@^1.6.0:
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
-mime@^2.0.3:
+mime@^2.0.3, mime@^2.4.2:
   version "2.4.3"
   resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.3.tgz#229687331e86f68924e6cb59e1cdd937f18275fe"
   integrity sha512-QgrPRJfE+riq5TPZMcHZOtm8c6K/yYrMbKIoRfapfiGLxS8OTeIfRhUGW5LU7MlRa52KOAGCfUNruqLrIBvWZw==
@@ -15625,7 +14823,7 @@ nested-object-assign@^1.0.3:
   resolved "https://registry.npmjs.org/nested-object-assign/-/nested-object-assign-1.0.3.tgz#5aca69390d9affe5a612152b5f0843ae399ac597"
   integrity sha512-kgq1CuvLyUcbcIuTiCA93cQ2IJFSlRwXcN+hLcb2qLJwC2qrePHGZZa7IipyWqaWF6tQjdax2pQnVxdq19Zzwg==
 
-next-tick@1, next-tick@~1.0.0:
+next-tick@1:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
   integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
@@ -15711,6 +14909,35 @@ node-int64@^0.4.0:
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
   integrity sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=
 
+node-libs-browser@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.2.0.tgz#c72f60d9d46de08a940dedbb25f3ffa2f9bbaa77"
+  integrity sha512-5MQunG/oyOaBdttrL40dA7bUfPORLRWMUJLQtMg7nluxUvk5XwnLdL9twQHFAjRx/y7mIMkLKT9++qPbbk6BZA==
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "^0.2.0"
+    buffer "^4.3.0"
+    console-browserify "^1.1.0"
+    constants-browserify "^1.0.0"
+    crypto-browserify "^3.11.0"
+    domain-browser "^1.1.1"
+    events "^3.0.0"
+    https-browserify "^1.0.0"
+    os-browserify "^0.3.0"
+    path-browserify "0.0.0"
+    process "^0.11.10"
+    punycode "^1.2.4"
+    querystring-es3 "^0.2.0"
+    readable-stream "^2.3.3"
+    stream-browserify "^2.0.1"
+    stream-http "^2.7.2"
+    string_decoder "^1.0.0"
+    timers-browserify "^2.0.4"
+    tty-browserify "0.0.0"
+    url "^0.11.0"
+    util "^0.11.0"
+    vm-browserify "0.0.4"
+
 node-libs-browser@^2.2.1:
   version "2.2.1"
   resolved "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.2.1.tgz#b64f513d18338625f90346d27b0d235e631f6425"
@@ -15798,13 +15025,6 @@ node-releases@^1.1.38:
   dependencies:
     semver "^6.3.0"
 
-node-releases@^1.1.47:
-  version "1.1.47"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.47.tgz#c59ef739a1fd7ecbd9f0b7cf5b7871e8a8b591e4"
-  integrity sha512-k4xjVPx5FpwBUj0Gw7uvFOTF4Ep8Hok1I6qjwL3pLfwe7Y0REQSAqOwwv9TWBCUtMHxcXfY4PgRLRozcChvTcA==
-  dependencies:
-    semver "^6.3.0"
-
 nomnom@~1.6.2:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/nomnom/-/nomnom-1.6.2.tgz#84a66a260174408fc5b77a18f888eccc44fb6971"
@@ -15845,7 +15065,7 @@ normalize-package-data@^2.0.0, normalize-package-data@^2.3.0, normalize-package-
     semver "2 || 3 || 4 || 5"
     validate-npm-package-license "^3.0.1"
 
-normalize-path@^2.0.1, normalize-path@^2.1.1:
+normalize-path@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
   integrity sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=
@@ -16019,11 +15239,6 @@ oauth-sign@~0.9.0:
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
   integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
 
-object-assign@4.X, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
-
 object-assign@^2.0.0:
   version "2.1.1"
   resolved "https://registry.npmjs.org/object-assign/-/object-assign-2.1.1.tgz#43c36e5d569ff8e4816c4efa8be02d26967c18aa"
@@ -16034,6 +15249,11 @@ object-assign@^3.0.0:
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2"
   integrity sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I=
 
+object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+
 object-copy@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
@@ -16314,7 +15534,7 @@ os-locale@^2.0.0:
     lcid "^1.0.0"
     mem "^1.1.0"
 
-os-locale@^3.0.0, os-locale@^3.1.0:
+os-locale@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-3.1.0.tgz#a802a6ee17f24c10483ab9935719cef4ed16bf1a"
   integrity sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==
@@ -16687,6 +15907,11 @@ pascalcase@^0.1.1:
   resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
   integrity sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=
 
+path-browserify@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
+  integrity sha1-oLhwcpquIUAFt9UDLsLLuw+0RRo=
+
 path-browserify@0.0.1:
   version "0.0.1"
   resolved "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.1.tgz#e6c4ddd7ed3aa27c68a20cc4e50e1a4ee83bbc4a"
@@ -17626,7 +16851,17 @@ react-document-title@^2.0.3:
     prop-types "^15.5.6"
     react-side-effect "^1.0.2"
 
-react-dom@^16.8.0, react-dom@^16.8.3, react-dom@^16.8.6:
+react-dom@^16.8.0, react-dom@^16.8.3:
+  version "16.12.0"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-16.12.0.tgz#0da4b714b8d13c2038c9396b54a92baea633fe11"
+  integrity sha512-LMxFfAGrcS3kETtQaCkTKjMiifahaMySFDn71fZUNpPHZQEzmk/GiAeIT8JSOrHB23fnuCOMruL2a8NYlw+8Gw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.18.0"
+
+react-dom@^16.8.6:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
   integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==
@@ -17983,7 +17218,16 @@ react@^0.14.0:
     envify "^3.0.0"
     fbjs "^0.6.1"
 
-react@^16.8.0, react@^16.8.3, react@^16.8.6:
+react@^16.8.0, react@^16.8.3:
+  version "16.12.0"
+  resolved "https://registry.npmjs.org/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"
+  integrity sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJgzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+
+react@^16.8.6:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
   integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
@@ -18956,6 +18200,14 @@ scheduler@^0.13.6:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.18.0.tgz#5901ad6659bc1d8f3fdaf36eb7a67b0d6746b1c4"
+  integrity sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
@@ -19043,11 +18295,6 @@ semver@6.2.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.2.0.tgz#4d813d9590aaf8a9192693d6c85b9344de5901db"
   integrity sha512-jdFC1VdUGT/2Scgbimf7FSx9iJLXoqfglSF+gJeuNWVpiE37OIbc1jywR/GJyFdz3mnkz2/id0L0J/cr0izR5A==
 
-semver@7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
-  integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
-
 semver@^5.5:
   version "5.7.1"
   resolved "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
@@ -19095,11 +18342,6 @@ serialize-javascript@^1.4.0, serialize-javascript@^1.7.0:
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.7.0.tgz#d6e0dfb2a3832a8c94468e6eb1db97e55a192a65"
   integrity sha512-ke8UG8ulpFOxO8f8gRYabHQe/ZntKlcig2Mp+8+URDP1D8vJZ0KUt7LYo07q25Z/+JVSgpr/cui9PIp5H6/+nA==
 
-serialize-javascript@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
-  integrity sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==
-
 serve-favicon@^2.5.0:
   version "2.5.0"
   resolved "https://registry.npmjs.org/serve-favicon/-/serve-favicon-2.5.0.tgz#935d240cdfe0f5805307fdfe967d88942a2cbcf0"
@@ -19390,14 +18632,6 @@ source-list-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-source-map-loader@^0.2.4:
-  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-0.2.4.tgz#c18b0dc6e23bf66f6792437557c569a11e072271"
-  integrity sha512-OU6UJUty+i2JDpTItnizPrlpOIBLmQbWMuBg9q5bVtnHACqw1tn9nNwqJLbv0/00JjnJb/Ee5g5WS5vrRv7zIQ==
-  dependencies:
-    async "^2.5.0"
-    loader-utils "^1.1.0"
-
 source-map-resolve@^0.5.0:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259"
@@ -19409,18 +18643,15 @@ source-map-resolve@^0.5.0:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
-source-map-resolve@^0.5.2:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
-  integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==
+source-map-support@^0.5.6, source-map-support@^0.5.9, source-map-support@~0.5.10:
+  version "0.5.13"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.13.tgz#31b24a9c2e73c2de85066c0feb7d44767ed52932"
+  integrity sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==
   dependencies:
-    atob "^2.1.2"
-    decode-uri-component "^0.2.0"
-    resolve-url "^0.2.1"
-    source-map-url "^0.4.0"
-    urix "^0.1.0"
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
 
-source-map-support@^0.5.16, source-map-support@~0.5.12:
+source-map-support@~0.5.12:
   version "0.5.16"
   resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.16.tgz#0ae069e7fe3ba7538c64c98515e35339eac5a042"
   integrity sha512-efyLRJDr68D9hBBNIPWFjhpFzURh+KJykQwvMyW5UiZzYwoF6l4YMMDIJJEyFWxWCqfyxLzz6tSfUFR+kXXsVQ==
@@ -19428,14 +18659,6 @@ source-map-support@^0.5.16, source-map-support@~0.5.12:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map-support@^0.5.6:
-  version "0.5.13"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.13.tgz#31b24a9c2e73c2de85066c0feb7d44767ed52932"
-  integrity sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==
-  dependencies:
-    buffer-from "^1.0.0"
-    source-map "^0.6.0"
-
 source-map-url@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
@@ -19828,11 +19051,6 @@ strip-ansi@^6.0.0:
   dependencies:
     ansi-regex "^5.0.0"
 
-strip-bom-string@1.X:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/strip-bom-string/-/strip-bom-string-1.0.0.tgz#e5211e9224369fbb81d633a2f00044dc8cedad92"
-  integrity sha1-5SEekiQ2n7uB1jOi8ABE3IztrZI=
-
 strip-bom@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
@@ -19915,13 +19133,6 @@ style-to-object@^0.2.1:
   dependencies:
     inline-style-parser "0.1.1"
 
-supports-color@6.1.0, supports-color@^6.0.0, supports-color@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
-  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
-  dependencies:
-    has-flag "^3.0.0"
-
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -19934,6 +19145,13 @@ supports-color@^5.0.0, supports-color@^5.3.0:
   dependencies:
     has-flag "^3.0.0"
 
+supports-color@^6.0.0, supports-color@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
+  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
+  dependencies:
+    has-flag "^3.0.0"
+
 supports-hyperlinks@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-1.0.1.tgz#71daedf36cc1060ac5100c351bb3da48c29c0ef7"
@@ -20092,36 +19310,45 @@ term-size@^1.2.0:
   dependencies:
     execa "^0.7.0"
 
-terser-webpack-plugin@^1.2.4:
-  version "1.4.1"
-  resolved "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.1.tgz#61b18e40eaee5be97e771cdbb10ed1280888c2b4"
-  integrity sha512-ZXmmfiwtCLfz8WKZyYUuuHf3dMYEjg8NrjHMb0JqHVHVOSkzp3cW2/XG1fP3tRhqEqSzMwzzRQGtAPbs4Cncxg==
+terser-webpack-plugin@^1.1.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.2.4.tgz#56f87540c28dd5265753431009388f473b5abba3"
+  integrity sha512-64IiILNQlACWZLzFlpzNaG0bpQ4ytaB7fwOsbpsdIV70AfLUmIGGeuKL0YV2WmtcrURjE2aOvHD4/lrFV3Rg+Q==
   dependencies:
-    cacache "^12.0.2"
-    find-cache-dir "^2.1.0"
+    cacache "^11.3.2"
+    find-cache-dir "^2.0.0"
     is-wsl "^1.1.0"
     schema-utils "^1.0.0"
     serialize-javascript "^1.7.0"
     source-map "^0.6.1"
-    terser "^4.1.2"
-    webpack-sources "^1.4.0"
+    terser "^3.17.0"
+    webpack-sources "^1.3.0"
     worker-farm "^1.7.0"
 
-terser-webpack-plugin@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.3.tgz#5ecaf2dbdc5fb99745fd06791f46fc9ddb1c9a7c"
-  integrity sha512-QMxecFz/gHQwteWwSo5nTc6UaICqN1bMedC5sMtUc7y3Ha3Q8y6ZO0iCR8pq4RJC8Hjf0FEPEHZqcMB/+DFCrA==
+terser-webpack-plugin@^1.2.4, terser-webpack-plugin@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.1.tgz#61b18e40eaee5be97e771cdbb10ed1280888c2b4"
+  integrity sha512-ZXmmfiwtCLfz8WKZyYUuuHf3dMYEjg8NrjHMb0JqHVHVOSkzp3cW2/XG1fP3tRhqEqSzMwzzRQGtAPbs4Cncxg==
   dependencies:
     cacache "^12.0.2"
     find-cache-dir "^2.1.0"
     is-wsl "^1.1.0"
     schema-utils "^1.0.0"
-    serialize-javascript "^2.1.2"
+    serialize-javascript "^1.7.0"
     source-map "^0.6.1"
     terser "^4.1.2"
     webpack-sources "^1.4.0"
     worker-farm "^1.7.0"
 
+terser@^3.17.0:
+  version "3.17.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-3.17.0.tgz#f88ffbeda0deb5637f9d24b0da66f4e15ab10cb2"
+  integrity sha512-/FQzzPJmCpjAH9Xvk2paiWrFq+5M6aVOf+2KRbwhByISDX/EujxsK+BAvrhb6H+2rtrLCHK9N01wO014vrIwVQ==
+  dependencies:
+    commander "^2.19.0"
+    source-map "~0.6.1"
+    source-map-support "~0.5.10"
+
 terser@^4.1.2, terser@^4.3.9:
   version "4.4.0"
   resolved "https://registry.npmjs.org/terser/-/terser-4.4.0.tgz#22c46b4817cf4c9565434bfe6ad47336af259ac3"
@@ -20169,14 +19396,6 @@ through2-filter@^2.0.0:
     through2 "~2.0.0"
     xtend "~4.0.0"
 
-through2@2.X, through2@^2.0.0, through2@^2.0.2, through2@^2.0.3, through2@~2.0.0:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
-  integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
-  dependencies:
-    readable-stream "~2.3.6"
-    xtend "~4.0.1"
-
 through2@^0.5.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/through2/-/through2-0.5.1.tgz#dfdd012eb9c700e2323fd334f38ac622ab372da7"
@@ -20185,6 +19404,14 @@ through2@^0.5.0:
     readable-stream "~1.0.17"
     xtend "~3.0.0"
 
+through2@^2.0.0, through2@^2.0.2, through2@^2.0.3, through2@~2.0.0:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
+  integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
+  dependencies:
+    readable-stream "~2.3.6"
+    xtend "~4.0.1"
+
 through@2, "through@>=2.2.7 <3", through@^2.3.4, through@^2.3.6, through@~2.3.4:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
@@ -20207,14 +19434,6 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
-timers-ext@^0.1.5:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/timers-ext/-/timers-ext-0.1.7.tgz#6f57ad8578e07a3fb9f91d9387d65647555e25c6"
-  integrity sha512-b85NUNzTSdodShTIbky6ZF02e8STtVVfD+fu4aXXShEELpozH+bCpJLYMPZbsABN2wDH7fJpqIoXxJpzbf0NqQ==
-  dependencies:
-    es5-ext "~0.10.46"
-    next-tick "1"
-
 timsort@~0.3.0:
   version "0.3.0"
   resolved "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
@@ -20654,16 +19873,6 @@ type-is@~1.6.17, type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
-type@^1.0.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/type/-/type-1.2.0.tgz#848dd7698dafa3e54a6c479e759c4bc3f18847a0"
-  integrity sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==
-
-type@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/type/-/type-2.0.0.tgz#5f16ff6ef2eb44f260494dae271033b29c09a9c3"
-  integrity sha512-KBt58xCHry4Cejnc2ISQAF7QY+ORngsWfxezO68+12hKV6lQY8P/psIkcbjeHWn7MqcgciWJyCCevFMJdIXpow==
-
 typed-styles@^0.0.7:
   version "0.0.7"
   resolved "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9"
@@ -21116,11 +20325,6 @@ uuid@^3.0.0, uuid@^3.0.1, uuid@^3.1.0, uuid@^3.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
   integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==
 
-v8-compile-cache@2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.0.3.tgz#00f7494d2ae2b688cfe2899df6ed2c54bef91dbe"
-  integrity sha512-CNmdbwQMBjwr9Gsmohvm0pbL954tJrNzf6gWL3K+QMQf00PF7ERGrEiLgjuU3mKreLC2MeGhUsNV9ybTbLgd3w==
-
 v8-compile-cache@^2.0.3:
   version "2.1.0"
   resolved "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"
@@ -21278,6 +20482,13 @@ vinyl@^2.0.0, vinyl@^2.1.0:
     remove-trailing-separator "^1.0.1"
     replace-ext "^1.0.0"
 
+vm-browserify@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
+  integrity sha1-XX6kW7755Kb/ZflUOOCofDV9WnM=
+  dependencies:
+    indexof "0.0.1"
+
 vm-browserify@^1.0.1:
   version "1.1.2"
   resolved "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
@@ -21341,7 +20552,7 @@ warning@^4.0.2, warning@^4.0.3:
   dependencies:
     loose-envify "^1.0.0"
 
-watchpack@^1.6.0:
+watchpack@^1.5.0, watchpack@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"
   integrity sha512-i6dHe3EyLjMmDlU1/bGQpEw25XSjkJULPuAVKCbNRefQVq48yXKUpwg538F7AZTf9kyr57zj++pQFltUa5H7yA==
@@ -21367,10 +20578,10 @@ webidl-conversions@^4.0.2:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
   integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
 
-webpack-bundle-analyzer@^3.6.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.6.0.tgz#39b3a8f829ca044682bc6f9e011c95deb554aefd"
-  integrity sha512-orUfvVYEfBMDXgEKAKVvab5iQ2wXneIEorGNsyuOyVYpjYrI7CUOhhXNDd3huMwQ3vNNWWlGP+hzflMFYNzi2g==
+webpack-bundle-analyzer@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.3.2.tgz#3da733a900f515914e729fcebcd4c40dde71fc6f"
+  integrity sha512-7qvJLPKB4rRWZGjVp5U1KEjwutbDHSKboAl0IfafnrdXMrgC0tOtZbQD6Rw0u4cmpgRN4O02Fc0t8eAT+FgGzA==
   dependencies:
     acorn "^6.0.7"
     acorn-walk "^6.1.1"
@@ -21381,31 +20592,24 @@ webpack-bundle-analyzer@^3.6.0:
     express "^4.16.3"
     filesize "^3.6.1"
     gzip-size "^5.0.0"
-    lodash "^4.17.15"
+    lodash "^4.17.10"
     mkdirp "^0.5.1"
     opener "^1.5.1"
     ws "^6.0.0"
 
-webpack-cli@^3.3.10:
-  version "3.3.10"
-  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.3.10.tgz#17b279267e9b4fb549023fae170da8e6e766da13"
-  integrity sha512-u1dgND9+MXaEt74sJR4PR7qkPxXUSQ0RXYq8x1L6Jg1MYVEmGPrH6Ah6C4arD4r0J1P5HKjRqpab36k0eIzPqg==
+webpack-dev-middleware@^3.6.2:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.7.0.tgz#ef751d25f4e9a5c8a35da600c5fda3582b5c6cff"
+  integrity sha512-qvDesR1QZRIAZHOE3iQ4CXLZZSQ1lAUsSpnQmlB1PBfoN/xdRjmge3Dok0W4IdaVLJOGJy3sGI4sZHwjRU0PCA==
   dependencies:
-    chalk "2.4.2"
-    cross-spawn "6.0.5"
-    enhanced-resolve "4.1.0"
-    findup-sync "3.0.0"
-    global-modules "2.0.0"
-    import-local "2.0.0"
-    interpret "1.2.0"
-    loader-utils "1.2.3"
-    supports-color "6.1.0"
-    v8-compile-cache "2.0.3"
-    yargs "13.2.4"
+    memory-fs "^0.4.1"
+    mime "^2.4.2"
+    range-parser "^1.2.1"
+    webpack-log "^2.0.0"
 
-webpack-dev-middleware@^3.6.2, webpack-dev-middleware@^3.7.0:
+webpack-dev-middleware@^3.7.0:
   version "3.7.2"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.7.2.tgz#0019c3db716e3fa5cecbf64f2ab88a74bab331f3"
+  resolved "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.7.2.tgz#0019c3db716e3fa5cecbf64f2ab88a74bab331f3"
   integrity sha512-1xC42LxbYoqLNAhV6YzTYacicgMZQTqRd27Sim9wn5hJrX3I5nxYy1SxSd4+gjUFsz1dQFj+yEe6zEVmSkeJjw==
   dependencies:
     memory-fs "^0.4.1"
@@ -21457,7 +20661,7 @@ webpack-sources@^1.0.1, webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack-sources@^1.2.0:
+webpack-sources@^1.2.0, webpack-sources@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.3.0.tgz#2a28dcb9f1f45fe960d8f1493252b5ee6530fa85"
   integrity sha512-OiVgSrbGu7NEnEvQJJgdSFPl2qWKkWq5lHMhgiToIiN9w34EBnjYzSYs+VbL5KoYiLNtFFa7BZIKxRED3I32pA==
@@ -21465,10 +20669,10 @@ webpack-sources@^1.2.0:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack@^4.33.0, webpack@^4.35.0, webpack@^4.38.0:
-  version "4.41.5"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.41.5.tgz#3210f1886bce5310e62bb97204d18c263341b77c"
-  integrity sha512-wp0Co4vpyumnp3KlkmpM5LWuzvZYayDwM2n17EHFr4qxBBbRokC7DJawPJC7TfSFZ9HZ6GsdH40EBj4UV0nmpw==
+webpack@^4.33.0, webpack@^4.38.0:
+  version "4.41.2"
+  resolved "https://registry.npmjs.org/webpack/-/webpack-4.41.2.tgz#c34ec76daa3a8468c9b61a50336d8e3303dce74e"
+  integrity sha512-Zhw69edTGfbz9/8JJoyRQ/pq8FYUoY0diOXqW0T6yhgdhCv6wr0hra5DwwWexNRns2Z2+gsnrNcbe9hbGBgk/A==
   dependencies:
     "@webassemblyjs/ast" "1.8.5"
     "@webassemblyjs/helper-module-context" "1.8.5"
@@ -21490,10 +20694,40 @@ webpack@^4.33.0, webpack@^4.35.0, webpack@^4.38.0:
     node-libs-browser "^2.2.1"
     schema-utils "^1.0.0"
     tapable "^1.1.3"
-    terser-webpack-plugin "^1.4.3"
+    terser-webpack-plugin "^1.4.1"
     watchpack "^1.6.0"
     webpack-sources "^1.4.1"
 
+webpack@^4.35.0:
+  version "4.35.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.35.0.tgz#ad3f0f8190876328806ccb7a36f3ce6e764b8378"
+  integrity sha512-M5hL3qpVvtr8d4YaJANbAQBc4uT01G33eDpl/psRTBCfjxFTihdhin1NtAKB1ruDwzeVdcsHHV3NX+QsAgOosw==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/helper-module-context" "1.8.5"
+    "@webassemblyjs/wasm-edit" "1.8.5"
+    "@webassemblyjs/wasm-parser" "1.8.5"
+    acorn "^6.0.5"
+    acorn-dynamic-import "^4.0.0"
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
+    chrome-trace-event "^1.0.0"
+    enhanced-resolve "^4.1.0"
+    eslint-scope "^4.0.0"
+    json-parse-better-errors "^1.0.2"
+    loader-runner "^2.3.0"
+    loader-utils "^1.1.0"
+    memory-fs "~0.4.1"
+    micromatch "^3.1.8"
+    mkdirp "~0.5.0"
+    neo-async "^2.5.0"
+    node-libs-browser "^2.0.0"
+    schema-utils "^1.0.0"
+    tapable "^1.1.0"
+    terser-webpack-plugin "^1.1.0"
+    watchpack "^1.5.0"
+    webpack-sources "^1.3.0"
+
 websocket-driver@>=0.5.1:
   version "0.7.3"
   resolved "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.3.tgz#a2d4e0d4f4f116f1e6297eba58b05d430100e9f9"
@@ -21808,23 +21042,6 @@ yargs-parser@^9.0.2:
   dependencies:
     camelcase "^4.1.0"
 
-yargs@13.2.4:
-  version "13.2.4"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.2.4.tgz#0b562b794016eb9651b98bd37acf364aa5d6dc83"
-  integrity sha512-HG/DWAJa1PAnHT9JAhNa8AbAv3FPaiLzioSjCcmuXXhP8MlpHO5vwls4g4j6n30Z74GVQj8Xa62dWVx1QCGklg==
-  dependencies:
-    cliui "^5.0.0"
-    find-up "^3.0.0"
-    get-caller-file "^2.0.1"
-    os-locale "^3.1.0"
-    require-directory "^2.1.1"
-    require-main-filename "^2.0.0"
-    set-blocking "^2.0.0"
-    string-width "^3.0.0"
-    which-module "^2.0.0"
-    y18n "^4.0.0"
-    yargs-parser "^13.1.0"
-
 yargs@^11.0.0:
   version "11.1.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-11.1.0.tgz#90b869934ed6e871115ea2ff58b03f4724ed2d77"

From b113e78c42d98af654c304cab8e1ce164df0c203 Mon Sep 17 00:00:00 2001
From: Milan Turon <mituron@microsoft.com>
Date: Mon, 24 Feb 2020 17:09:56 +0100
Subject: [PATCH 15/17] fix based on review, stop animation - fix for narration

---
 .../src/behaviors/Carousel/carouselBehavior.ts           | 8 ++------
 .../src/behaviors/Carousel/carouselItemBehavior.ts       | 4 ++--
 packages/react/src/components/Carousel/Carousel.tsx      | 9 +++------
 3 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/packages/accessibility/src/behaviors/Carousel/carouselBehavior.ts b/packages/accessibility/src/behaviors/Carousel/carouselBehavior.ts
index 19352a832f..7e9eee6f6c 100644
--- a/packages/accessibility/src/behaviors/Carousel/carouselBehavior.ts
+++ b/packages/accessibility/src/behaviors/Carousel/carouselBehavior.ts
@@ -25,17 +25,13 @@ import * as keyboardKey from 'keyboard-key'
 const carouselBehavior: Accessibility<CarouselBehaviorProps> = props => ({
   attributes: {
     root: {
-      role: props.navigation ? undefined : 'region',
-      'aria-roledescription': props.navigation ? undefined : props.ariaRoleDescription,
-      'aria-label': props.navigation ? undefined : props.ariaLabel,
+      ...(!props.navigation && { role: 'region', 'aria-roledescription': props.ariaRoleDescription, 'aria-label': props.ariaLabel }),      
     },
     itemsContainerWrapper: {
       'aria-live': props.ariaLiveOn ? 'polite' : 'off',
     },
     itemsContainer: {
-      role: props.navigation ? 'group' : undefined,
-      'aria-roledescription': props.navigation ? props.ariaRoleDescription : undefined,
-      'aria-label': props.navigation ? props.ariaLabel : undefined,
+      ...(props.navigation && { role: 'region', 'aria-roledescription': props.ariaRoleDescription, 'aria-label': props.ariaLabel }),          
     },
 
     paddleNext: {
diff --git a/packages/accessibility/src/behaviors/Carousel/carouselItemBehavior.ts b/packages/accessibility/src/behaviors/Carousel/carouselItemBehavior.ts
index 08f4c09d27..232e364d97 100644
--- a/packages/accessibility/src/behaviors/Carousel/carouselItemBehavior.ts
+++ b/packages/accessibility/src/behaviors/Carousel/carouselItemBehavior.ts
@@ -14,8 +14,8 @@ const carouselItemBehavior: Accessibility<CarouselItemProps> = props => ({
   attributes: {
     root: {
       role: props.navigation ? 'tabpanel' : 'group',
-      'aria-hidden': props.active ? 'false' : 'true',
-      tabIndex: props.navigation ? (props.active ? 0 : -1) : -1,
+      'aria-hidden': props.active ? 'false' : 'true',      
+       tabIndex: (props.navigation && props.active) ? 0 : -1,       
     },
   },
 
diff --git a/packages/react/src/components/Carousel/Carousel.tsx b/packages/react/src/components/Carousel/Carousel.tsx
index 6e8f208170..0825773dd6 100644
--- a/packages/react/src/components/Carousel/Carousel.tsx
+++ b/packages/react/src/components/Carousel/Carousel.tsx
@@ -306,12 +306,9 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
                 slideToNext = false
               }
 
-              return (
+              return active ?  (
                 <Animation
                   key={item['key'] || index}
-                  mountOnEnter
-                  unmountOnExit
-                  visible={active}
                   name={
                     initialMounting
                       ? ''
@@ -337,8 +334,8 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
                       overrideProps: this.overrideItemProps,
                     })}
                   </Ref>
-                </Animation>
-              )
+                </Animation> 
+              ) : null
             })}
         </div>
       </div>

From a5a4ac44a44f744504df0dd3a49be6cb1365958f Mon Sep 17 00:00:00 2001
From: Milan Turon <mituron@microsoft.com>
Date: Mon, 24 Feb 2020 17:26:26 +0100
Subject: [PATCH 16/17] disable navigation for VC adding role none

---
 .../src/behaviors/Carousel/carouselItemBehavior.ts              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/accessibility/src/behaviors/Carousel/carouselItemBehavior.ts b/packages/accessibility/src/behaviors/Carousel/carouselItemBehavior.ts
index 232e364d97..261c1a36b7 100644
--- a/packages/accessibility/src/behaviors/Carousel/carouselItemBehavior.ts
+++ b/packages/accessibility/src/behaviors/Carousel/carouselItemBehavior.ts
@@ -13,7 +13,7 @@ import * as keyboardKey from 'keyboard-key'
 const carouselItemBehavior: Accessibility<CarouselItemProps> = props => ({
   attributes: {
     root: {
-      role: props.navigation ? 'tabpanel' : 'group',
+      role: props.navigation ? 'tabpanel' : 'none',
       'aria-hidden': props.active ? 'false' : 'true',      
        tabIndex: (props.navigation && props.active) ? 0 : -1,       
     },

From 75a3e55d6b67f7cefe230a0e59d2ac0d75ef1b93 Mon Sep 17 00:00:00 2001
From: Milan Turon <mituron@microsoft.com>
Date: Mon, 24 Feb 2020 18:16:02 +0100
Subject: [PATCH 17/17] fix for stealing focus when rotating with arrow keys on
 carousel item element

---
 .../src/components/Carousel/Carousel.tsx      | 64 +++++++++++--------
 1 file changed, 37 insertions(+), 27 deletions(-)

diff --git a/packages/react/src/components/Carousel/Carousel.tsx b/packages/react/src/components/Carousel/Carousel.tsx
index 0825773dd6..cd9acd2c87 100644
--- a/packages/react/src/components/Carousel/Carousel.tsx
+++ b/packages/react/src/components/Carousel/Carousel.tsx
@@ -80,8 +80,8 @@ export interface CarouselProps extends UIComponentProps, ChildrenComponentProps
 
   /** Shorthand array of props for the buttons of the CarouselNavigation. */
   navigation?:
-    | ShorthandValue<CarouselNavigationProps>
-    | ShorthandCollection<CarouselNavigationItemProps>
+  | ShorthandValue<CarouselNavigationProps>
+  | ShorthandCollection<CarouselNavigationItemProps>
 
   /**
    * A Carousel can position its navigation below the content by default,
@@ -199,10 +199,12 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
     showNextSlideByPaddlePress: e => {
       e.preventDefault()
       this.showNextSlide(e, false)
+      this.handleNextPaddleFocus()
     },
     showPreviousSlideByPaddlePress: e => {
       e.preventDefault()
       this.showPreviousSlide(e, false)
+      this.handlePreviousPaddleFocus()
     },
   }
 
@@ -284,7 +286,7 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
         {...accessibility.attributes.itemsContainerWrapper}
       >
         <div
-          className={cx(Carousel.slotClassNames.itemsContainer, classes.itemsContainer)}          
+          className={cx(Carousel.slotClassNames.itemsContainer, classes.itemsContainer)}
           {...accessibility.attributes.itemsContainer}
           {...applyAccessibilityKeyHandlers(
             accessibility.keyHandlers.itemsContainer,
@@ -306,19 +308,19 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
                 slideToNext = false
               }
 
-              return active ?  (
+              return active ? (
                 <Animation
                   key={item['key'] || index}
                   name={
                     initialMounting
                       ? ''
                       : active
-                      ? slideToNext
-                        ? 'carousel-slide-to-next-enter'
-                        : 'carousel-slide-to-previous-enter'
-                      : slideToNext
-                      ? 'carousel-slide-to-next-exit'
-                      : 'carousel-slide-to-previous-exit'
+                        ? slideToNext
+                          ? 'carousel-slide-to-next-enter'
+                          : 'carousel-slide-to-previous-enter'
+                        : slideToNext
+                          ? 'carousel-slide-to-next-exit'
+                          : 'carousel-slide-to-previous-exit'
                   }
                 >
                   <Ref innerRef={itemRef}>
@@ -334,7 +336,7 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
                       overrideProps: this.overrideItemProps,
                     })}
                   </Ref>
-                </Animation> 
+                </Animation>
               ) : null
             })}
         </div>
@@ -344,14 +346,13 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
 
   showPreviousSlide = (e: React.SyntheticEvent, focusItem: boolean) => {
     this.setActiveIndex(e, this.state.activeIndex - 1, focusItem)
-    // if 'previous' paddle will disappear, will focus 'next' one.
-    if (!this.props.navigation && this.state.activeIndex <= 1 && !this.props.circular) {
-      this.paddleNextRef.current.focus()
-    }
   }
 
   showNextSlide = (e: React.SyntheticEvent, focusItem: boolean) => {
     this.setActiveIndex(e, this.state.activeIndex + 1, focusItem)
+  }
+
+  handleNextPaddleFocus = () => {
     // if 'next' paddle will disappear, will focus 'previous' one.
     if (
       !this.props.navigation &&
@@ -362,13 +363,22 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
     }
   }
 
+  handlePreviousPaddleFocus = () => {
+    // if 'previous' paddle will disappear, will focus 'next' one.
+    if (!this.props.navigation && this.state.activeIndex <= 1 && !this.props.circular) {
+      this.paddleNextRef.current.focus()
+    }
+  }
+
   handlePaddleOverrides = (predefinedProps: ButtonProps, paddleName: string) => ({
     onClick: (e: React.SyntheticEvent, buttonProps: ButtonProps) => {
       _.invoke(predefinedProps, 'onClick', e, buttonProps)
       if (paddleName === 'paddleNext') {
         this.showNextSlide(e, false)
+        this.handleNextPaddleFocus()
       } else if (paddleName === 'paddlePrevious') {
         this.showPreviousSlide(e, false)
+        this.handlePreviousPaddleFocus()
       }
     },
     onBlur: (e: React.FocusEvent, buttonProps: ButtonProps) => {
@@ -451,12 +461,12 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
         }),
       })
     ) : (
-      <Text
-        aria-hidden="true"
-        className={Carousel.slotClassNames.pagination}
-        content={getItemPositionText(activeIndex, items.length)}
-      />
-    )
+        <Text
+          aria-hidden="true"
+          className={Carousel.slotClassNames.pagination}
+          content={getItemPositionText(activeIndex, items.length)}
+        />
+      )
   }
 
   renderComponent({ ElementType, classes, styles, accessibility, unhandledProps }) {
@@ -471,12 +481,12 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
         {childrenExist(children) ? (
           children
         ) : (
-          <>
-            {this.renderContent(accessibility, classes, unhandledProps)}
-            {this.renderPaddles(accessibility, styles)}
-            {this.renderNavigation()}
-          </>
-        )}
+            <>
+              {this.renderContent(accessibility, classes, unhandledProps)}
+              {this.renderPaddles(accessibility, styles)}
+              {this.renderNavigation()}
+            </>
+          )}
       </ElementType>
     )
   }