Repository: uber-web/baseui
Pull request #703 (2019-01-03 18:59:34)

fix(datepicker): handles value and navigation states separately


Patch:
diff --git a/docs/pages/theming/custom-themes.md b/docs/pages/theming/custom-themes.md
index 107935820..f502cbd25 100644
--- a/docs/pages/theming/custom-themes.md
+++ b/docs/pages/theming/custom-themes.md
@@ -9,23 +9,6 @@ Base UI ships by default with the `Light` theme. We understand that in some case
 you want to change the look and feel of the components. To do so, follow the steps
 outlined here
 
-## Using themeable values in component overrides
-
-All themeable values are available within components that provide the `overrides` prop.
-
-```jsx
-<Input
-  overrides={{
-    Input: {
-      style: ({$theme}) => ({color: $theme.colors.primary}),
-    },
-  }}
-  placeholder="Custom input that uses themeable values"
-/>
-```
-
-To learn more on how overrides work, check out [Better Reusable React Components with the Overrides Pattern](https://medium.com/@dschnr/better-reusable-react-components-with-the-overrides-pattern-9eca2339f646) article.
-
 ## Creating a custom theme
 
 ### Define your primitives
diff --git a/documentation-site/components/component-menu.js b/documentation-site/components/component-menu.js
index cd84e9ddb..58d6ad8ca 100644
--- a/documentation-site/components/component-menu.js
+++ b/documentation-site/components/component-menu.js
@@ -24,13 +24,14 @@ function Column(props) {
       <Block font="font350" paddingBottom="scale400">
         {props.text}
       </Block>
-      {props.components.map((component, index) => (
-        <Block key={index} font="font300" paddingBottom="scale300">
-          <Link passHref={true} href={component.path} prefetch>
-            <NavLink tabIndex="0">{component.text}</NavLink>
-          </Link>
-        </Block>
-      ))}
+      {props.components &&
+        props.components.map((component, index) => (
+          <Block key={index} font="font300" paddingBottom="scale300">
+            <Link passHref={true} href={component.path} prefetch>
+              <NavLink tabIndex="0">{component.text}</NavLink>
+            </Link>
+          </Block>
+        ))}
     </Block>
   );
 }
diff --git a/documentation-site/components/example.js b/documentation-site/components/example.js
index b672e3f03..a08c5c874 100644
--- a/documentation-site/components/example.js
+++ b/documentation-site/components/example.js
@@ -51,7 +51,9 @@ function Source(props: {children: ?React.Node}) {
     <Block
       as="pre"
       padding="scale800"
-      overrides={{Block: {style: {fontFamily: 'courier'}}}}
+      overrides={{
+        Block: {style: {fontFamily: 'courier', whiteSpace: 'pre-wrap'}},
+      }}
     >
       {props.children}
     </Block>
diff --git a/documentation-site/components/markdown-elements.js b/documentation-site/components/markdown-elements.js
index 0ef954b5f..57df8311a 100644
--- a/documentation-site/components/markdown-elements.js
+++ b/documentation-site/components/markdown-elements.js
@@ -44,7 +44,7 @@ const Heading = (props: Props) => (
 const ListItem = (props: Props) => <Paragraph>- {props.children}</Paragraph>;
 
 const Paragraph = (props: Props) => (
-  <Block as="p" font="font300">
+  <Block as="p" font="font300" style={{maxWidth: '50em', lineHeight: '2.0em'}}>
     {props.children}
   </Block>
 );
diff --git a/documentation-site/components/theming-values/typography.js b/documentation-site/components/theming-values/typography.js
index bde69ce29..6dd1b0157 100644
--- a/documentation-site/components/theming-values/typography.js
+++ b/documentation-site/components/theming-values/typography.js
@@ -8,17 +8,23 @@ LICENSE file in the root directory of this source tree.
 
 import React from 'react';
 
+import {LightTheme} from 'baseui';
 import {Block} from 'baseui/block';
 
 import {Header} from './common';
 
 function TypographyPreview({font}) {
+  const {fontSize, fontWeight, lineHeight} = LightTheme.typography[font];
+
   return (
     <Block margin="scale800">
       <Block font="font400">{font}</Block>
       <Block font={font}>
         We ignite opportunity by setting the world in motion.
       </Block>
+      <Block font="font100">
+        {`(font-size: ${fontSize}, font-weight: ${fontWeight}, line-height: ${lineHeight})`}
+      </Block>
     </Block>
   );
 }
diff --git a/documentation-site/pages/components/accordion.mdx b/documentation-site/pages/components/accordion.mdx
new file mode 100644
index 000000000..9b21905fc
--- /dev/null
+++ b/documentation-site/pages/components/accordion.mdx
@@ -0,0 +1,35 @@
+<!--
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+import Example from '../../components/example';
+import API from '../../components/api';
+import Layout from '../../components/layout';
+
+import BasicAccordion from 'examples/accordion/basic.js';
+import StatefulAccordion from 'examples/accordion/stateful.js';
+
+export default Layout;
+
+# Accordion
+
+A design structure to organize and hide content, so as not to overwhelm the user.
+
+## Examples
+
+<Example title="Accordion Basic Usage" path="examples/accordion/basic.js">
+  <BasicAccordion />
+</Example>
+
+<Example title="Accordion as a Stateful Component" path="examples/accordion/stateful.js">
+  <StatefulAccordion />
+</Example>
+
+<API heading="Accordion API" api={require('!!extract-react-types-loader!../../../src/accordion/accordion.js')}/>
+
+<API heading="Panel API" api={require('!!extract-react-types-loader!../../../src/accordion/panel.js')}/>
+
+<API heading="Stateful Panel API" api={require('!!extract-react-types-loader!../../../src/accordion/stateful-panel.js')}/>
diff --git a/documentation-site/pages/components/avatar.mdx b/documentation-site/pages/components/avatar.mdx
new file mode 100644
index 000000000..f0d41da4d
--- /dev/null
+++ b/documentation-site/pages/components/avatar.mdx
@@ -0,0 +1,44 @@
+<!--
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+import Example from '../../components/example';
+import API from '../../components/api';
+import Layout from '../../components/layout';
+
+import Sizes from 'examples/avatar/sizes.js';
+import Error from 'examples/avatar/error.js';
+import Override from 'examples/avatar/override.js';
+
+export default Layout;
+
+# Avatar
+
+Adds additional visual information about a user.
+
+### When to use
+
+- When you want to show a user's image along contextual information.
+- When you want to attribute an action to a user.
+
+## Examples
+
+<Example title="Available Sizes" path="examples/avatar/sizes.js">
+  <Sizes />
+</Example>
+
+<Example title="Error Fallback" path="examples/avatar/error.js">
+  <Error />
+</Example>
+
+<Example title="Example Overrides" path="examples/avatar/override.js">
+  <Override />
+</Example>
+
+<API
+  heading="Avatar API"
+  api={require('!!extract-react-types-loader!../../../src/avatar/avatar.js')}
+/>
diff --git a/documentation-site/pages/components/block.mdx b/documentation-site/pages/components/block.mdx
new file mode 100644
index 000000000..09b60188f
--- /dev/null
+++ b/documentation-site/pages/components/block.mdx
@@ -0,0 +1,57 @@
+<!--
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+import Example from '../../components/example';
+import API from '../../components/api';
+import Layout from '../../components/layout';
+
+import Basic from 'examples/block/basic.js';
+import Fonts from 'examples/block/fonts.js';
+import Flexbox from 'examples/block/flexbox.js';
+import Grid from 'examples/block/grid.js';
+import Override from 'examples/block/override.js';
+
+export default Layout;
+
+# Block
+
+The `Block` component is a helper component that lets you write these common less-reusable elements more succinctly inline.
+
+One of the most common needs when building web apps is creating layout elements that have certain layout and typography styles.
+
+For more traditional apps that use global stylesheets, many of the popular CSS frameworks have helper classes to quickly create
+styled elements (see [Bootstrap](https://getbootstrap.com/docs/4.1/utilities/sizing/), [Tachyons](http://tachyons.io/docs/layout/spacing/)).
+Uber's superfine css framework also had this and it was used very widely–just search something like `push-large` in sourcegraph.
+
+The move to CSS-in-JS sort of eliminates these classes in favor of encapsulating styles within components. This is a generally a good thing because it promotes reusability, however the reality is that there are dozens or hundreds of different layout/spacing/typography combinations in any app, and there's not always a clear semantic meaning or potential for reuse. In practice you end up just defining and naming a bunch of things at the top of the file:
+
+## Examples
+
+<Example title="Basic Usage" path="examples/block/basic.js">
+  <Basic />
+</Example>
+
+<Example title="Font Customization" path="examples/block/fonts.js">
+  <Fonts />
+</Example>
+
+<Example title="Flexbox" path="examples/block/flexbox.js">
+  <Flexbox />
+</Example>
+
+<Example title="Grid" path="examples/block/grid.js">
+  <Grid />
+</Example>
+
+<Example title="Overrides" path="examples/block/override.js">
+  <Override />
+</Example>
+
+<API
+  heading="Block API"
+  api={require('!!extract-react-types-loader!../../../src/block/block.js')}
+/>
diff --git a/documentation-site/pages/components/breadcrumbs.mdx b/documentation-site/pages/components/breadcrumbs.mdx
new file mode 100644
index 000000000..3a4bf2f26
--- /dev/null
+++ b/documentation-site/pages/components/breadcrumbs.mdx
@@ -0,0 +1,27 @@
+<!--
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+import Example from '../../components/example';
+import API from '../../components/api';
+import Layout from '../../components/layout';
+
+import BasicBreadcrumbs from 'examples/breadcrumbs/basic.js';
+
+export default Layout;
+
+# Breadcrumbs
+
+The Breadcrumbs component is secondary navigation scheme that reveals
+the user’s location in an application.
+
+## Examples
+
+<Example title="Breadcrumbs Basic Usage" path="examples/breadcrumbs/basic.js">
+  <BasicBreadcrumbs />
+</Example>
+
+<API heading="Breadcrumbs API" api={require('!!extract-react-types-loader!../../../src/breadcrumbs/breadcrumbs.js')}/>
diff --git a/documentation-site/pages/components/button-group.mdx b/documentation-site/pages/components/button-group.mdx
new file mode 100644
index 000000000..4a87886b0
--- /dev/null
+++ b/documentation-site/pages/components/button-group.mdx
@@ -0,0 +1,64 @@
+<!--
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+import Example from '../../components/example';
+import API from '../../components/api';
+import Layout from '../../components/layout';
+
+import Basic from 'examples/button-group/basic.js';
+import RadioMode from 'examples/button-group/radio-mode.js';
+import CheckboxMode from 'examples/button-group/checkbox-mode.js';
+import Disabled from 'examples/button-group/disabled.js';
+import Controlled from 'examples/button-group/controlled.js';
+
+export default Layout;
+
+# ButtonGroup
+
+Groups a collection of similar actions together.
+
+### When to use
+
+- If you need to emphasize context of similar actions.
+- If a single option or multiple options of the set may be selected.
+
+## Examples
+
+<Example title="Basic Usage" path="examples/button-group/basic.js">
+  <Basic />
+</Example>
+
+<Example title="Radio Mode" path="examples/button-group/radio-mode.js">
+  <RadioMode />
+</Example>
+
+<Example title="Checkbox Mode" path="examples/button-group/checkbox-mode.js">
+  <CheckboxMode />
+</Example>
+
+<Example title="Disabled Buttons" path="examples/button-group/disabled.js">
+  <Disabled />
+</Example>
+
+<Example title="Controlled Example" path="examples/button-group/controlled.js">
+  <Controlled />
+</Example>
+
+<API
+  heading="ButtonGroup API"
+  api={require('!!extract-react-types-loader!../../../src/button-group/button-group.js')}
+/>
+
+<API
+  heading="Stateful ButtonGroup API"
+  api={require('!!extract-react-types-loader!../../../src/button-group/stateful-button-group.js')}
+/>
+
+<API
+  heading="Stateful Container API"
+  api={require('!!extract-react-types-loader!../../../src/button-group/stateful-container.js')}
+/>
diff --git a/documentation-site/pages/components/button.mdx b/documentation-site/pages/components/button.mdx
new file mode 100644
index 000000000..a122738c4
--- /dev/null
+++ b/documentation-site/pages/components/button.mdx
@@ -0,0 +1,43 @@
+<!--
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+import Example from '../../components/example';
+import API from '../../components/api';
+import Layout from '../../components/layout';
+
+import BasicButton from 'examples/button/basic.js';
+import BasicButtonCompact from 'examples/button/basic-compact.js';
+import WithEnchancer from 'examples/button/with-enchancers.js';
+
+export default Layout;
+
+# Button
+
+Buttons enable users to commit a change, or complete steps in a task.
+
+## When to use
+
+When a person:
+
+* submits a form,
+* starts a new task / action.
+
+## Examples
+
+<Example title="Button Basic Usage" path="examples/button/basic.js">
+  <BasicButton />
+</Example>
+
+<Example title="Button Basic Usage - Compact" path="examples/button/basic-compact.js">
+  <BasicButtonCompact />
+</Example>
+
+<Example title="Button With Enchancers" path="examples/button/with-enchancers.js">
+  <WithEnchancer />
+</Example>
+
+<API heading="Button API" api={require('!!extract-react-types-loader!../../../src/button/button.js')}/>
diff --git a/documentation-site/pages/components/card.mdx b/documentation-site/pages/components/card.mdx
new file mode 100644
index 000000000..6111446e7
--- /dev/null
+++ b/documentation-site/pages/components/card.mdx
@@ -0,0 +1,34 @@
+<!--
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+import Example from '../../components/example';
+import API from '../../components/api';
+import Layout from '../../components/layout';
+
+import CardBasic from 'examples/card/basic.js';
+import CardWithImageCta from 'examples/card/image-cta.js';
+import CardWithThumbnailCta from 'examples/card/thumbnail-cta.js';
+
+export default Layout;
+
+# Card
+
+## Examples
+
+<Example title="Card Basic Usage" path="examples/card/basic.js">
+  <CardBasic />
+</Example>
+
+<Example title="Card With Image and CTA" path="examples/card/image-cta.js">
+  <CardWithImageCta />
+</Example>
+
+<Example title="Card With Thumbnail and CTA" path="examples/card/thumbnail-cta.js">
+  <CardWithThumbnailCta />
+</Example>
+
+<API heading="Card API" api={require('!!extract-react-types-loader!../../../src/card/card.js')}/>
diff --git a/documentation-site/pages/components/header-navigation.mdx b/documentation-site/pages/components/header-navigation.mdx
new file mode 100644
index 000000000..2fc529eaf
--- /dev/null
+++ b/documentation-site/pages/components/header-navigation.mdx
@@ -0,0 +1,30 @@
+<!--
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+import Example from '../../components/example';
+import API from '../../components/api';
+import Layout from '../../components/layout';
+
+import BasicHeader from 'examples/header-navigation/basic.js';
+import WithSearch from 'examples/header-navigation/with-search.js';
+
+export default Layout;
+
+# Header navigation
+
+## Examples
+
+<Example title="Header Navigation Basic Usage" path="examples/header-navigation/basic.js">
+  <BasicHeader />
+</Example>
+
+<Example title="Header Navigation with Search" path="examples/header-navigation/with-search.js">
+  <WithSearch />
+</Example>
+
+<API heading="HeaderNavigation API" api={require('!!extract-react-types-loader!../../../src/header-navigation/header-navigation.js')}/>
+
diff --git a/documentation-site/pages/components/input.mdx b/documentation-site/pages/components/input.mdx
index d2bcfbb52..353d5b887 100644
--- a/documentation-site/pages/components/input.mdx
+++ b/documentation-site/pages/components/input.mdx
@@ -31,27 +31,27 @@ An input enables a person to type in text information.
 
 ### Examples
 
-<Example title="Basic Usage" path="examples/input/basic-controlled.js">
+<Example title="Input Basic Usage" path="examples/input/basic-controlled.js">
   <BasicControlled />
 </Example>
 
-<Example title="Uncontrolled Input" path="examples/input/basic-uncontrolled.js">
+<Example title="Input as an Uncontrolled Component" path="examples/input/basic-uncontrolled.js">
   <BasicUncontrolled />
 </Example>
 
-<Example title="Compact Size" path="examples/input/compact-size.js">
+<Example title="Input Compact Size" path="examples/input/compact-size.js">
   <CompactSize />
 </Example>
 
-<Example title="Available States" path="examples/input/available-states.js">
+<Example title="Input with all Available States" path="examples/input/available-states.js">
   <AvailableStates />
 </Example>
 
-<Example title="Enhancers" path="examples/input/enhancers.js">
+<Example title="Input with Enhancers" path="examples/input/enhancers.js">
   <Enhancers />
 </Example>
 
-<Example title="Before and After" path="examples/input/before-after.js">
+<Example title="Input with Before and After Overrides" path="examples/input/before-after.js">
   <BeforeAfter />
 </Example>
 
@@ -59,11 +59,11 @@ An input enables a person to type in text information.
   <Mask />
 </Example>
 
-<Example title="Overrides" path="examples/input/overrides.js">
+<Example title="Input with Overrides" path="examples/input/overrides.js">
   <Overrides />
 </Example>
 
-<Example title="Focus with a ref" path="examples/input/focus.js">
+<Example title="Input Focus with a ref" path="examples/input/focus.js">
   <Focus />
 </Example>
 
diff --git a/documentation-site/pages/components/modal.mdx b/documentation-site/pages/components/modal.mdx
new file mode 100644
index 000000000..194983084
--- /dev/null
+++ b/documentation-site/pages/components/modal.mdx
@@ -0,0 +1,26 @@
+<!--
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+import Example from '../../components/example';
+import API from '../../components/api';
+import Layout from '../../components/layout';
+
+import ModalBasic from 'examples/modal/basic.js';
+
+export default Layout;
+
+# Modal
+
+A design structure to organize and hide content, so as not to overwhelm the user.
+
+## Examples
+
+<Example title="Modal With Button Trigger" path="examples/modal/basic.js">
+  <ModalBasic />
+</Example>
+
+<API heading="Modal API" api={require('!!extract-react-types-loader!../../../src/modal/modal.js')}/>
diff --git a/documentation-site/pages/components/progress-steps.mdx b/documentation-site/pages/components/progress-steps.mdx
new file mode 100644
index 000000000..6b67a41be
--- /dev/null
+++ b/documentation-site/pages/components/progress-steps.mdx
@@ -0,0 +1,34 @@
+<!--
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+import Example from '../../components/example';
+import API from '../../components/api';
+import Layout from '../../components/layout';
+
+import ProgressStepsDotted from 'examples/progress-steps/dotted';
+import ProgressStepsNumbered from 'examples/progress-steps/numbered';
+
+export default Layout;
+
+# Progress steps
+
+## Examples
+
+<Example title="Progress Steps Dotted Usage" path="examples/progress-steps/dotted.js">
+  <ProgressStepsDotted />
+</Example>
+
+<Example title="Progress Steps Numbered Usage" path="examples/progress-steps/numbered.js">
+  <ProgressStepsNumbered />
+</Example>
+
+<API heading="ProgressSteps API" api={require('!!extract-react-types-loader!../../../src/progress-steps/progress-steps.js')}/>
+
+<API heading="NumberedStep API" api={require('!!extract-react-types-loader!../../../src/progress-steps/numbered-step.js')}/>
+
+<API heading="Step API" api={require('!!extract-react-types-loader!../../../src/progress-steps/step.js')}/>
+
diff --git a/documentation-site/pages/components/select.mdx b/documentation-site/pages/components/select.mdx
new file mode 100644
index 000000000..76bca3b4c
--- /dev/null
+++ b/documentation-site/pages/components/select.mdx
@@ -0,0 +1,43 @@
+<!--
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+import Example from '../../components/example';
+import API from '../../components/api';
+import Layout from '../../components/layout';
+
+import SelectBasic from 'examples/select/basic.js';
+import SelectSinglePickSearch from 'examples/select/search-single-pick.js';
+import SelectMultiPickSearch from 'examples/select/search-multi-pick.js';
+import SelectWithManyOptions from 'examples/select/with-many-options.js';
+
+export default Layout;
+
+# Select
+
+The select and search controls allow the user to select an option or options.
+
+## Examples
+
+<Example title="Select Basic" path="examples/select/basic.js">
+  <SelectBasic />
+</Example>
+
+<Example title="Select Single Pick Search" path="examples/select/search-single-pick.js">
+  <SelectSinglePickSearch />
+</Example>
+
+<Example title="Select Multi Pick Search" path="examples/select/search-multi-pick.js">
+  <SelectMultiPickSearch />
+</Example>
+
+<Example title="Select With Many Options" path="examples/select/with-many-options.js">
+  <SelectWithManyOptions />
+</Example>
+
+<API heading="Select API" api={require('!!extract-react-types-loader!../../../src/select/select.js')}/>
+
+<API heading="StatefulSelectContainer API" api={require('!!extract-react-types-loader!../../../src/select/stateful-select-container.js')}/>
diff --git a/documentation-site/pages/components/tabs.mdx b/documentation-site/pages/components/tabs.mdx
new file mode 100644
index 000000000..9975c23a7
--- /dev/null
+++ b/documentation-site/pages/components/tabs.mdx
@@ -0,0 +1,40 @@
+<!--
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+import Example from '../../components/example';
+import API from '../../components/api';
+import Layout from '../../components/layout';
+
+import TabBasic from 'examples/tabs/basic.js';
+import TabVertical from 'examples/tabs/vertical.js';
+import TabControlled from 'examples/tabs/controlled.js';
+
+export default Layout;
+
+# Tab
+
+The Tab component is used for navigating frequently accessed, but distinct categories.
+
+## Examples
+
+<Example title="Tab Basic Usage" path="examples/tabs/basic.js">
+  <TabBasic />
+</Example>
+
+<Example title="Tab Vertical Usage" path="examples/tabs/vertical.js">
+  <TabVertical />
+</Example>
+
+<Example title="Tab Controlled Usage" path="examples/tabs/controlled.js">
+  <TabControlled />
+</Example>
+
+<API heading="Tabs API" api={require('!!extract-react-types-loader!../../../src/tabs/tabs.js')}/>
+
+<API heading="StatefulTabs API" api={require('!!extract-react-types-loader!../../../src/tabs/stateful-tabs.js')}/>
+
+<API heading="TabPanel API" api={require('!!extract-react-types-loader!../../../src/tabs/tab-panel.js')}/>
diff --git a/documentation-site/pages/components/textarea.mdx b/documentation-site/pages/components/textarea.mdx
new file mode 100644
index 000000000..950f16260
--- /dev/null
+++ b/documentation-site/pages/components/textarea.mdx
@@ -0,0 +1,27 @@
+<!--
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+import Example from '../../components/example';
+import API from '../../components/api';
+import Layout from '../../components/layout';
+
+import TextareaBasic from 'examples/textarea/basic.js';
+import TextareaRef from 'examples/textarea/ref.js';
+
+export default Layout;
+
+# Textarea
+
+## Examples
+
+<Example title="Textarea Basic Usage" path="examples/textarea/basic.js">
+  <TextareaBasic />
+</Example>
+
+<Example title="Textarea with ref" path="examples/textarea/ref.js">
+  <TextareaRef />
+</Example>
diff --git a/documentation-site/pages/components/toast.mdx b/documentation-site/pages/components/toast.mdx
new file mode 100644
index 000000000..674704c6d
--- /dev/null
+++ b/documentation-site/pages/components/toast.mdx
@@ -0,0 +1,31 @@
+<!--
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+import Example from '../../components/example';
+import API from '../../components/api';
+import Layout from '../../components/layout';
+
+import ToastBasic from 'examples/toast/basic.js';
+import ToastNotification from 'examples/toast/toast-notification.js';
+
+export default Layout;
+
+# Toast
+
+## Examples
+
+<Example title="Toaster Basic Usage" path="examples/toast/basic.js">
+  <ToastBasic />
+</Example>
+
+<Example title="Toast Notification Basic Usage" path="examples/toast/toast-notification.js">
+  <ToastNotification />
+</Example>
+
+<API heading="Toaster API" api={require('!!extract-react-types-loader!../../../src/toast/toaster.js')}/>
+
+<API heading="Toast API" api={require('!!extract-react-types-loader!../../../src/toast/toast.js')}/>
diff --git a/documentation-site/pages/understanding-overrides.mdx b/documentation-site/pages/understanding-overrides.mdx
new file mode 100644
index 000000000..24c423a4f
--- /dev/null
+++ b/documentation-site/pages/understanding-overrides.mdx
@@ -0,0 +1,62 @@
+<!--
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+import Layout from '../components/layout';
+import Example from '../components/example';
+
+import OverridesStyles from 'examples/overrides/style.js';
+import OverridesProps from 'examples/overrides/props.js';
+import OverridesComponent from 'examples/overrides/component.js';
+
+export default Layout;
+
+# Understanding Overrides
+
+At its core, Base UI is a foundational set of reusable React components,
+with an architecture that enables teams to create new design languages
+on top of it. By default, these components use the Base UI design language
+which, as the name suggests, acts as a base design language you can further customize.
+
+**If you'd like to build applications using the Base UI design language, in most cases
+you won't need to override components. This helps build consistent applications.**
+
+Every internal element is given an identifier that developers
+can target with changes/overrides. You can almost think of these like class names
+(but without the downsides of CSS cascade and global namespace).
+
+For each internal element, you can override the **props**, the **style**, and the **component**.
+
+**Use cases for style overrides:**
+
+* Buiding a design system on top of Base UI
+* You have a special case that Base UI does not cover
+
+<Example title="Overriding Styles" path="examples/overrides/style.js">
+  <OverridesStyles />
+</Example>
+
+**Use cases for prop overrides:**
+
+* You have to pass in a property for the underlying component, like "data-" attribitues for testing
+
+<Example title="Overriding Properties - Data Attribute" path="examples/overrides/props.js">
+  <OverridesProps />
+</Example>
+
+**Use cases for component overrides:**
+
+* You have to swap the whole subcomponent
+
+<Example title="Overriding Components" path="examples/overrides/component.js">
+  <OverridesComponent />
+</Example>
+
+To learn more about how overrides work, check out
+[Better Reusable React Components with the Overrides Pattern](https://medium.com/@dschnr/better-reusable-react-components-with-the-overrides-pattern-9eca2339f646)
+article.
+
+
diff --git a/documentation-site/routes.js b/documentation-site/routes.js
index f84fdc2f1..34560f186 100644
--- a/documentation-site/routes.js
+++ b/documentation-site/routes.js
@@ -37,6 +37,10 @@ const routes = [
         text: 'Theming values',
         path: getPath('/theming-values'),
       },
+      {
+        text: 'Understanding Overrides',
+        path: getPath('/understanding-overrides'),
+      },
     ],
   },
   {
@@ -44,12 +48,98 @@ const routes = [
     text: 'Components',
     children: [
       {
-        text: 'Data Entry',
+        text: 'Basic Inputs',
         children: [
+          {
+            text: 'Button',
+            path: getPath('/components/button'),
+          },
+          {
+            text: 'ButtonGroup',
+            path: getPath('/components/button-group'),
+          },
           {
             text: 'Input',
             path: getPath('/components/input'),
           },
+          {
+            text: 'Textarea',
+            path: getPath('/components/textarea'),
+          },
+        ],
+      },
+      {
+        text: 'Navigation',
+        children: [
+          {
+            text: 'Breadcrumbs',
+            path: getPath('/components/breadcrumbs'),
+          },
+          {
+            text: 'Header navigation',
+            path: getPath('/components/header-navigation'),
+          },
+          {
+            text: 'Tab',
+            path: getPath('/components/tabs'),
+          },
+        ],
+      },
+      {
+        text: 'Content',
+        children: [
+          {
+            text: 'Accordion',
+            path: getPath('/components/accordion'),
+          },
+          {
+            text: 'Avatar',
+            path: getPath('/components/avatar'),
+          },
+        ],
+      },
+      {
+        text: 'Pickers',
+        children: [
+          {
+            text: 'Select',
+            path: getPath('/components/select'),
+          },
+        ],
+      },
+      {
+        text: 'Progress & Validation',
+        children: [
+          {
+            text: 'Progress steps',
+            path: getPath('/components/progress-steps'),
+          },
+          {
+            text: 'Toast',
+            path: getPath('/components/toast'),
+          },
+        ],
+      },
+      {
+        text: 'Surfaces',
+        children: [
+          {
+            text: 'Card',
+            path: getPath('/components/card'),
+          },
+          {
+            text: 'Modal',
+            path: getPath('/components/modal'),
+          },
+        ],
+      },
+      {
+        text: 'Utility',
+        children: [
+          {
+            text: 'Block',
+            path: getPath('/components/block'),
+          },
         ],
       },
     ],
diff --git a/documentation-site/static/examples/accordion/basic.js b/documentation-site/static/examples/accordion/basic.js
new file mode 100644
index 000000000..3fda62e4d
--- /dev/null
+++ b/documentation-site/static/examples/accordion/basic.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import {Accordion, Panel} from 'baseui/accordion';
+
+const content =
+  'Praesent condimentum ante ac ipsum aliquam, ac scelerisque velit sagittis. Ut sit amet libero scelerisque, accumsan ante vitae, hendrerit tellus. Nullam metus est, vehicula a aliquet id, lobortis in mauris.';
+
+export default () => (
+  <Accordion>
+    <Panel title="Accordion panel 1">{content}</Panel>
+    <Panel title="Accordion panel 2">{content}</Panel>
+    <Panel title="Accordion panel 3">{content}</Panel>
+  </Accordion>
+);
diff --git a/documentation-site/static/examples/accordion/stateful.js b/documentation-site/static/examples/accordion/stateful.js
new file mode 100644
index 000000000..c28b0bf8e
--- /dev/null
+++ b/documentation-site/static/examples/accordion/stateful.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import {StatefulPanel} from 'baseui/accordion';
+
+const content =
+  'Praesent condimentum ante ac ipsum aliquam, ac scelerisque velit sagittis. Ut sit amet libero scelerisque, accumsan ante vitae, hendrerit tellus. Nullam metus est, vehicula a aliquet id, lobortis in mauris.';
+
+export default () => (
+  <StatefulPanel title="Expandable panel">{content}</StatefulPanel>
+);
diff --git a/documentation-site/static/examples/avatar/error.js b/documentation-site/static/examples/avatar/error.js
new file mode 100644
index 000000000..db23f34d8
--- /dev/null
+++ b/documentation-site/static/examples/avatar/error.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import {Avatar} from 'baseui/avatar';
+
+export default () => (
+  <React.Fragment>
+    {['scale800', 'scale1000', 'scale1200', 'scale1400', '64px'].map(
+      (size, index) => (
+        <Avatar
+          name={`user name # ${index}`}
+          size={size}
+          src="https://not-a-real-image.png"
+          key={size}
+        />
+      ),
+    )}
+  </React.Fragment>
+);
diff --git a/documentation-site/static/examples/avatar/override.js b/documentation-site/static/examples/avatar/override.js
new file mode 100644
index 000000000..cf9f552dd
--- /dev/null
+++ b/documentation-site/static/examples/avatar/override.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import {Avatar} from 'baseui/avatar';
+import {Block} from 'baseui/block';
+
+export default () => {
+  const borderOverrides = {
+    Root: {
+      style: ({$theme}) => ({
+        ...$theme.borders.border500,
+      }),
+    },
+  };
+
+  const squaredOverrides = {
+    Avatar: {
+      style: ({$theme}) => ({
+        borderRadius: $theme.borders.radius100,
+      }),
+    },
+    Root: {
+      style: ({$theme}) => ({
+        borderRadius: $theme.borders.radius100,
+      }),
+    },
+  };
+
+  return (
+    <React.Fragment>
+      <Block>
+        <Avatar
+          overrides={borderOverrides}
+          name="user name #1"
+          size="scale1400"
+          src="https://api.adorable.io/avatars/285/11@adorable.io.png"
+        />
+
+        <Avatar
+          overrides={borderOverrides}
+          name="user name #2"
+          size="scale1400"
+          src="https://not-a-real-image.png"
+        />
+      </Block>
+      <Block>
+        <Avatar
+          overrides={squaredOverrides}
+          name="user name #3"
+          size="scale1400"
+          src="https://api.adorable.io/avatars/285/12@adorable.io.png"
+        />
+
+        <Avatar
+          overrides={squaredOverrides}
+          name="user name #4"
+          size="scale1400"
+          src="https://not-a-real-image.png"
+        />
+      </Block>
+    </React.Fragment>
+  );
+};
diff --git a/documentation-site/static/examples/avatar/sizes.js b/documentation-site/static/examples/avatar/sizes.js
new file mode 100644
index 000000000..4a9528034
--- /dev/null
+++ b/documentation-site/static/examples/avatar/sizes.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import {Avatar} from 'baseui/avatar';
+
+export default () => (
+  <React.Fragment>
+    {['scale800', 'scale1000', 'scale1200', 'scale1400', '64px'].map(
+      (size, index) => (
+        <Avatar
+          name={`user name # ${index}`}
+          size={size}
+          src={`https://api.adorable.io/avatars/285/${index}@adorable.io.png`}
+          key={size}
+        />
+      ),
+    )}
+  </React.Fragment>
+);
diff --git a/documentation-site/static/examples/block/basic.js b/documentation-site/static/examples/block/basic.js
new file mode 100644
index 000000000..93c99807f
--- /dev/null
+++ b/documentation-site/static/examples/block/basic.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import {Block} from 'baseui/block';
+
+export default () => {
+  const colors = ['primary', 'negative', 'warning', 'positive'];
+  const elements = [];
+
+  for (const color of colors) {
+    for (let x = 100; x <= 700; x += 100) {
+      const colorString = `${color}${x}`;
+      elements.push(
+        <Block color={colorString} key={colorString}>
+          {colorString}
+        </Block>,
+      );
+    }
+  }
+
+  return elements;
+};
diff --git a/documentation-site/static/examples/block/flexbox.js b/documentation-site/static/examples/block/flexbox.js
new file mode 100644
index 000000000..ed397a0d8
--- /dev/null
+++ b/documentation-site/static/examples/block/flexbox.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import {Block} from 'baseui/block';
+
+export default () => {
+  const elements = [];
+
+  for (let x = 0; x < 4; x++) {
+    elements.push(
+      <Block
+        key={x}
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        width="200px"
+        height="200px"
+        margin="scale200"
+        font="font400"
+        color="primary"
+        $style={{border: 'grey solid 2px'}}
+      >
+        Positioned with flexbox
+      </Block>,
+    );
+  }
+
+  return (
+    <Block
+      display="flex"
+      direction="column"
+      padding="scale3200"
+      $style={{border: 'grey solid 4px'}}
+      flexWrap
+    >
+      {elements}
+    </Block>
+  );
+};
diff --git a/documentation-site/static/examples/block/fonts.js b/documentation-site/static/examples/block/fonts.js
new file mode 100644
index 000000000..d0cfd0d75
--- /dev/null
+++ b/documentation-site/static/examples/block/fonts.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import {Block} from 'baseui/block';
+
+export default () => {
+  const sizes = [
+    100,
+    200,
+    250,
+    300,
+    350,
+    400,
+    450,
+    500,
+    600,
+    700,
+    800,
+    900,
+    1000,
+  ];
+
+  return sizes.map(size => {
+    const fontString = `font${size}`;
+
+    return (
+      <Block key={size} font={fontString}>
+        {fontString}
+      </Block>
+    );
+  });
+};
diff --git a/documentation-site/static/examples/block/grid.js b/documentation-site/static/examples/block/grid.js
new file mode 100644
index 000000000..62cd29262
--- /dev/null
+++ b/documentation-site/static/examples/block/grid.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import {styled} from 'baseui';
+import {Block} from 'baseui/block';
+
+export default () => {
+  const Inner = styled('div', ({$theme}) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: $theme.colors.mono300,
+    border: `1px solid ${$theme.colors.mono900}`,
+    height: '50px',
+    width: '50px',
+  }));
+  return (
+    <Block
+      display="grid"
+      gridTemplateColumns="repeat(3,1fr)"
+      justifyItems="center"
+      gridGap="scale1000"
+    >
+      <Inner>1</Inner>
+      <Inner>2</Inner>
+      <Inner>3</Inner>
+      <Inner>4</Inner>
+      <Inner>5</Inner>
+      <Inner>6</Inner>
+    </Block>
+  );
+};
diff --git a/documentation-site/static/examples/block/override.js b/documentation-site/static/examples/block/override.js
new file mode 100644
index 000000000..7c548302c
--- /dev/null
+++ b/documentation-site/static/examples/block/override.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import {Block} from 'baseui/block';
+
+export default () => {
+  return (
+    <Block
+      as="h2"
+      font="font500"
+      overrides={{
+        Block: {
+          style: {color: 'red'},
+        },
+      }}
+    >
+      These styles are provided by styletron
+    </Block>
+  );
+};
diff --git a/documentation-site/static/examples/breadcrumbs/basic.js b/documentation-site/static/examples/breadcrumbs/basic.js
new file mode 100644
index 000000000..872fff4ef
--- /dev/null
+++ b/documentation-site/static/examples/breadcrumbs/basic.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import {Breadcrumbs} from 'baseui/breadcrumbs';
+import {StyledLink as Link} from 'baseui/link';
+
+export default () => (
+  <Breadcrumbs>
+    <Link href="#">Parent Page</Link>
+    <Link href="#">Sub-Parent Page</Link>
+    <span>Current Page</span>
+  </Breadcrumbs>
+);
diff --git a/documentation-site/static/examples/button-group/basic.js b/documentation-site/static/examples/button-group/basic.js
new file mode 100644
index 000000000..3673e1145
--- /dev/null
+++ b/documentation-site/static/examples/button-group/basic.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import {Button} from 'baseui/button';
+import {ButtonGroup} from 'baseui/button-group';
+import Upload from 'baseui/icon/upload.js';
+
+export default () => (
+  <React.Fragment>
+    <ButtonGroup kind="tertiary">
+      <Button>Label</Button>
+      <Button>Label</Button>
+      <Button>Label</Button>
+    </ButtonGroup>
+    <br />
+    <ButtonGroup kind="tertiary">
+      <Button>
+        <Upload size={24} />
+      </Button>
+      <Button>
+        <Upload size={24} />
+      </Button>
+      <Button>
+        <Upload size={24} />
+      </Button>
+    </ButtonGroup>
+    <br />
+    <ButtonGroup kind="tertiary">
+      <Button startEnhancer={() => <Upload size={24} />}>Label</Button>
+      <Button startEnhancer={() => <Upload size={24} />}>Label</Button>
+      <Button startEnhancer={() => <Upload size={24} />}>Label</Button>
+    </ButtonGroup>
+  </React.Fragment>
+);
diff --git a/documentation-site/static/examples/button-group/checkbox-mode.js b/documentation-site/static/examples/button-group/checkbox-mode.js
new file mode 100644
index 000000000..dcbe54377
--- /dev/null
+++ b/documentation-site/static/examples/button-group/checkbox-mode.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import {Button} from 'baseui/button';
+import {StatefulButtonGroup} from 'baseui/button-group';
+
+export default () => (
+  <StatefulButtonGroup
+    mode="checkbox"
+    kind="secondary"
+    initialState={{selected: [0, 1]}}
+  >
+    <Button>Label</Button>
+    <Button>Label</Button>
+    <Button>Label</Button>
+  </StatefulButtonGroup>
+);
diff --git a/documentation-site/static/examples/button-group/controlled.js b/documentation-site/static/examples/button-group/controlled.js
new file mode 100644
index 000000000..838af3208
--- /dev/null
+++ b/documentation-site/static/examples/button-group/controlled.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import {Block} from 'baseui/block';
+import {Button} from 'baseui/button';
+import {ButtonGroup} from 'baseui/button-group';
+
+export default class ControlledButtonGroup extends React.Component {
+  state = {selected: 1, boldClickCount: 0};
+
+  handleClick = (event, index) => {
+    if (this.state.selected !== index) {
+      this.setState({selected: index});
+    }
+  };
+
+  handleBold = event => {
+    this.setState(prevState => ({
+      boldClickCount: prevState.boldClickCount + 1,
+    }));
+  };
+
+  render() {
+    return (
+      <React.Fragment>
+        <ButtonGroup
+          selected={this.state.selected}
+          mode="radio"
+          onClick={this.handleClick}
+        >
+          <Button onClick={this.handleBold}>Bold</Button>
+          <Button>Normal</Button>
+        </ButtonGroup>
+
+        <Block
+          font={this.state.selected === 0 ? 'font450' : 'font400'}
+          paddingTop="scale400"
+        >
+          Lorem ipsum dolor sit amet, ea insolens deseruisse mnesarchum mea. An
+          munere utroque mentitum vis, ea rebum inani iudicabit has. Cu his
+          dolorum perpetua. Mea atqui tation partem ne, ei vim etiam volumus
+          nominavi. Cum id atqui cotidieque, quaeque nostrum salutandi cum at,
+          idque scaevola platonem mei ad.
+        </Block>
+
+        <Block paddingTop="scale800">
+          The Bold option has been selected {this.state.boldClickCount} times
+        </Block>
+      </React.Fragment>
+    );
+  }
+}
diff --git a/documentation-site/static/examples/button-group/disabled.js b/documentation-site/static/examples/button-group/disabled.js
new file mode 100644
index 000000000..e74006df1
--- /dev/null
+++ b/documentation-site/static/examples/button-group/disabled.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import {Block} from 'baseui/block';
+import {Button} from 'baseui/button';
+import {ButtonGroup} from 'baseui/button-group';
+
+export default () => (
+  <React.Fragment>
+    <Block paddingBottom="scale200">All disabled</Block>
+    <ButtonGroup disabled kind="minimal">
+      <Button>Label</Button>
+      <Button>Label</Button>
+      <Button>Label</Button>
+    </ButtonGroup>
+    <br />
+    <Block paddingBottom="scale200">Single disabled</Block>
+    <ButtonGroup kind="minimal">
+      <Button disabled>Label</Button>
+      <Button>Label</Button>
+      <Button>Label</Button>
+    </ButtonGroup>
+  </React.Fragment>
+);
diff --git a/documentation-site/static/examples/button-group/radio-mode.js b/documentation-site/static/examples/button-group/radio-mode.js
new file mode 100644
index 000000000..0747efbc4
--- /dev/null
+++ b/documentation-site/static/examples/button-group/radio-mode.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import {Button} from 'baseui/button';
+import {StatefulButtonGroup} from 'baseui/button-group';
+
+export default () => (
+  <StatefulButtonGroup mode="radio" initialState={{selected: 0}}>
+    <Button>Label</Button>
+    <Button>Label</Button>
+  </StatefulButtonGroup>
+);
diff --git a/documentation-site/static/examples/button/basic-compact.js b/documentation-site/static/examples/button/basic-compact.js
new file mode 100644
index 000000000..f80f71964
--- /dev/null
+++ b/documentation-site/static/examples/button/basic-compact.js
@@ -0,0 +1,4 @@
+import React from 'react';
+import {Button, SIZE} from 'baseui/button';
+
+export default () => <Button size={SIZE.compact}>Submit</Button>;
diff --git a/documentation-site/static/examples/button/basic.js b/documentation-site/static/examples/button/basic.js
new file mode 100644
index 000000000..a235afc28
--- /dev/null
+++ b/documentation-site/static/examples/button/basic.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import {Button, KIND} from 'baseui/button';
+
+export default () => (
+  <React.Fragment>
+    <Button>Primary</Button>
+    <Button kind={KIND.secondary}>Secondary</Button>
+    <Button kind={KIND.tertiary}>Tertiary</Button>
+    <Button kind={KIND.minimal}>Minimal</Button>
+  </React.Fragment>
+);
diff --git a/documentation-site/static/examples/button/with-enchancers.js b/documentation-site/static/examples/button/with-enchancers.js
new file mode 100644
index 000000000..98ca26dfa
--- /dev/null
+++ b/documentation-site/static/examples/button/with-enchancers.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import {Button} from 'baseui/button';
+import Upload from 'baseui/icon/upload';
+
+function UploadEnchancer() {
+  return <Upload size={24} />;
+}
+
+export default () => (
+  <Button endEnhancer={UploadEnchancer}>End Enhancer</Button>
+);
diff --git a/documentation-site/static/examples/card/basic.js b/documentation-site/static/examples/card/basic.js
new file mode 100644
index 000000000..e03d06d4b
--- /dev/null
+++ b/documentation-site/static/examples/card/basic.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import {Card, StyledBody} from 'baseui/card';
+
+export default () => (
+  <Card overrides={{Root: {style: {width: '328px'}}}}>
+    <StyledBody>
+      Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla ornare
+      faucibus ex, non facilisis nisl.
+    </StyledBody>
+  </Card>
+);
diff --git a/documentation-site/static/examples/card/image-cta.js b/documentation-site/static/examples/card/image-cta.js
new file mode 100644
index 000000000..6679c011d
--- /dev/null
+++ b/documentation-site/static/examples/card/image-cta.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import {Card, StyledBody, StyledAction} from 'baseui/card';
+import {Button} from 'baseui/button';
+
+export default () => (
+  <Card
+    overrides={{Root: {style: {width: '328px'}}}}
+    headerImage={'https://source.unsplash.com/user/erondu/700x400'}
+    title="Example card"
+  >
+    <StyledBody>
+      Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla ornare
+      faucibus ex, non facilisis nisl.
+    </StyledBody>
+    <StyledAction>
+      <Button style={{width: '100%'}}>Button Label</Button>
+    </StyledAction>
+  </Card>
+);
diff --git a/documentation-site/static/examples/card/thumbnail-cta.js b/documentation-site/static/examples/card/thumbnail-cta.js
new file mode 100644
index 000000000..5d213e457
--- /dev/null
+++ b/documentation-site/static/examples/card/thumbnail-cta.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import {Card, StyledBody, StyledAction, StyledThumbnail} from 'baseui/card';
+import {Button} from 'baseui/button';
+
+export default () => (
+  <Card overrides={{Root: {style: {width: '328px'}}}} title="Example card">
+    <StyledThumbnail src={'https://source.unsplash.com/user/erondu/300x300'} />
+    <StyledBody>
+      Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla ornare
+      faucibus ex, non facilisis nisl.
+    </StyledBody>
+    <StyledAction>
+      <Button style={{width: '100%'}}>Button Label</Button>
+    </StyledAction>
+  </Card>
+);
diff --git a/documentation-site/static/examples/header-navigation/basic.js b/documentation-site/static/examples/header-navigation/basic.js
new file mode 100644
index 000000000..7667e86cf
--- /dev/null
+++ b/documentation-site/static/examples/header-navigation/basic.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import {
+  HeaderNavigation,
+  ALIGN,
+  StyledNavigationItem as NavigationItem,
+  StyledNavigationList as NavigationList,
+} from 'baseui/header-navigation';
+import {StyledLink as Link} from 'baseui/link';
+import {Button} from 'baseui/button';
+
+export default () => (
+  <HeaderNavigation>
+    <NavigationList align={ALIGN.left}>
+      <NavigationItem>Uber</NavigationItem>
+    </NavigationList>
+    <NavigationList align={ALIGN.center} />
+    <NavigationList align={ALIGN.right}>
+      <NavigationItem>
+        <Link href="#">Tab Link One</Link>
+      </NavigationItem>
+      <NavigationItem>
+        <Link href="#">Tab Link Two</Link>
+      </NavigationItem>
+      <NavigationItem>
+        <Link href="#">Tab Link Three</Link>
+      </NavigationItem>
+    </NavigationList>
+    <NavigationList align={ALIGN.right}>
+      <NavigationItem>
+        <Button>Get started</Button>
+      </NavigationItem>
+    </NavigationList>
+  </HeaderNavigation>
+);
diff --git a/documentation-site/static/examples/header-navigation/with-search.js b/documentation-site/static/examples/header-navigation/with-search.js
new file mode 100644
index 000000000..dfa4f80d7
--- /dev/null
+++ b/documentation-site/static/examples/header-navigation/with-search.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import {
+  HeaderNavigation,
+  ALIGN,
+  StyledNavigationItem as NavigationItem,
+  StyledNavigationList as NavigationList,
+} from 'baseui/header-navigation';
+import {StyledLink as Link} from 'baseui/link';
+import {StatefulSelect as Search, TYPE} from 'baseui/select';
+
+const options = {
+  options: [
+    {id: 'AliceBlue', color: '#F0F8FF'},
+    {id: 'AntiqueWhite', color: '#FAEBD7'},
+    {id: 'Aqua', color: '#00FFFF'},
+    {id: 'Aquamarine', color: '#7FFFD4'},
+    {id: 'Azure', color: '#F0FFFF'},
+    {id: 'Beige', color: '#F5F5DC'},
+    {id: 'Bisque', color: '#FFE4C4'},
+    {id: 'Black', color: '#000000'},
+  ],
+  labelKey: 'id',
+  valueKey: 'color',
+  placeholder: 'Search colors',
+  maxDropdownHeight: '300px',
+};
+
+export default () => (
+  <HeaderNavigation>
+    <NavigationList align={ALIGN.left}>
+      <NavigationItem>Uber</NavigationItem>
+    </NavigationList>
+    <NavigationList align={ALIGN.center} />
+    <NavigationList align={ALIGN.right}>
+      <NavigationItem>
+        <Link href="#">Tab Link One</Link>
+      </NavigationItem>
+    </NavigationList>
+    <NavigationList align={ALIGN.right}>
+      <NavigationItem style={{width: '200px'}}>
+        <Search
+          {...options}
+          type={TYPE.search}
+          getOptionLabel={props => props.option.id || null}
+          onChange={() => {}}
+        />
+      </NavigationItem>
+    </NavigationList>
+  </HeaderNavigation>
+);
diff --git a/documentation-site/static/examples/modal/basic.js b/documentation-site/static/examples/modal/basic.js
new file mode 100644
index 000000000..cceffda24
--- /dev/null
+++ b/documentation-site/static/examples/modal/basic.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import {Button} from 'baseui/button';
+import {
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  ModalButton,
+} from 'baseui/modal';
+
+class ModalStateContainer extends React.Component {
+  static defaultProps = {
+    isInitiallyOpen: false,
+  };
+  state = {
+    isOpen: this.props.isInitiallyOpen,
+  };
+  toggle = (open = !this.state.isOpen) => {
+    this.setState({
+      isOpen: Boolean(open),
+    });
+  };
+  open = () => {
+    this.toggle(true);
+  };
+  close = () => {
+    this.toggle(false);
+  };
+  render() {
+    return this.props.children({
+      toggle: this.toggle,
+      open: this.open,
+      close: this.close,
+      setState: this.setState.bind(this),
+      ...this.state,
+    });
+  }
+}
+
+export default () => (
+  <ModalStateContainer>
+    {({open, close, isOpen}) => (
+      <React.Fragment>
+        <Button onClick={open} className="open-modal-button">
+          Open Modal
+        </Button>
+        <Modal onClose={close} isOpen={isOpen}>
+          <ModalHeader>Hello world</ModalHeader>
+          <ModalBody>
+            Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla ornare
+            faucibus ex, non facilisis nisl. Maecenas aliquet mauris ut tempus.
+          </ModalBody>
+          <ModalFooter>
+            <ModalButton onClick={close}>Cancel</ModalButton>
+            <ModalButton onClick={close}>Okay</ModalButton>
+          </ModalFooter>
+        </Modal>
+      </React.Fragment>
+    )}
+  </ModalStateContainer>
+);
diff --git a/documentation-site/static/examples/overrides/component.js b/documentation-site/static/examples/overrides/component.js
new file mode 100644
index 000000000..e66ccb339
--- /dev/null
+++ b/documentation-site/static/examples/overrides/component.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import {Button} from 'baseui/button';
+
+function customButton(props) {
+  return <button>{props.children}</button>;
+}
+
+export default () => (
+  <Button
+    overrides={{
+      BaseButton: customButton,
+    }}
+  >
+    Submit
+  </Button>
+);
diff --git a/documentation-site/static/examples/overrides/props.js b/documentation-site/static/examples/overrides/props.js
new file mode 100644
index 000000000..28997b01e
--- /dev/null
+++ b/documentation-site/static/examples/overrides/props.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import {Button} from 'baseui/button';
+
+export default () => (
+  <Button
+    overrides={{
+      BaseButton: {
+        props: {
+          'data-test': 'action-button',
+        },
+      },
+    }}
+  >
+    Submit
+  </Button>
+);
diff --git a/documentation-site/static/examples/overrides/style.js b/documentation-site/static/examples/overrides/style.js
new file mode 100644
index 000000000..509126c8e
--- /dev/null
+++ b/documentation-site/static/examples/overrides/style.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import {Button} from 'baseui/button';
+
+export default () => (
+  <Button
+    overrides={{
+      BaseButton: {
+        style: {
+          backgroundColor: 'red',
+        },
+      },
+    }}
+  >
+    Submit
+  </Button>
+);
diff --git a/documentation-site/static/examples/progress-steps/dotted.js b/documentation-site/static/examples/progress-steps/dotted.js
new file mode 100644
index 000000000..f0f2331d7
--- /dev/null
+++ b/documentation-site/static/examples/progress-steps/dotted.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import {ProgressSteps, Step} from 'baseui/progress-steps';
+import {Button} from 'baseui/button';
+import {Block} from 'baseui/block';
+import {styled} from 'baseui';
+
+const SpacedButton = styled(Button, ({$theme}) => ({
+  marginLeft: $theme.sizing.scale200,
+  marginRight: $theme.sizing.scale200,
+  marginTop: $theme.sizing.scale200,
+}));
+
+class ProgressStepsContainer extends React.Component {
+  state = {
+    current: 0,
+  };
+
+  render() {
+    return (
+      <ProgressSteps current={this.state.current}>
+        <Step title="Create Account">
+          <Block font="font400">Here is some step content</Block>
+          <SpacedButton disabled>Previous</SpacedButton>
+          <SpacedButton onClick={() => this.setState({current: 1})}>
+            Next
+          </SpacedButton>
+        </Step>
+        <Step title="Verify Payment">
+          <Block font="font400">Here is some some content</Block>
+          <SpacedButton onClick={() => this.setState({current: 0})}>
+            Previous
+          </SpacedButton>
+          <SpacedButton onClick={() => this.setState({current: 2})}>
+            Next
+          </SpacedButton>
+        </Step>
+        <Step title="Add Payment Method">
+          <Block font="font400">Here too!</Block>
+          <SpacedButton onClick={() => this.setState({current: 1})}>
+            Previous
+          </SpacedButton>
+          <SpacedButton disabled>Next</SpacedButton>
+        </Step>
+      </ProgressSteps>
+    );
+  }
+}
+
+export default ProgressStepsContainer;
diff --git a/documentation-site/static/examples/progress-steps/numbered.js b/documentation-site/static/examples/progress-steps/numbered.js
new file mode 100644
index 000000000..798b85b6e
--- /dev/null
+++ b/documentation-site/static/examples/progress-steps/numbered.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import {ProgressSteps, NumberedStep} from 'baseui/progress-steps';
+import {Button} from 'baseui/button';
+import {Block} from 'baseui/block';
+import {styled} from 'baseui';
+
+const SpacedButton = styled(Button, ({$theme}) => ({
+  marginLeft: $theme.sizing.scale200,
+  marginRight: $theme.sizing.scale200,
+  marginTop: $theme.sizing.scale200,
+}));
+
+class ProgressStepsContainer extends React.Component {
+  state = {
+    current: 0,
+  };
+
+  render() {
+    return (
+      <ProgressSteps current={this.state.current}>
+        <NumberedStep title="Create Account">
+          <Block font="font400">Here is some step content</Block>
+          <SpacedButton disabled>Previous</SpacedButton>
+          <SpacedButton onClick={() => this.setState({current: 1})}>
+            Next
+          </SpacedButton>
+        </NumberedStep>
+        <NumberedStep title="Verify Payment">
+          <Block font="font400">Here is some some content</Block>
+          <SpacedButton onClick={() => this.setState({current: 0})}>
+            Previous
+          </SpacedButton>
+          <SpacedButton onClick={() => this.setState({current: 2})}>
+            Next
+          </SpacedButton>
+        </NumberedStep>
+        <NumberedStep title="Add Payment Method">
+          <Block font="font400">Here too!</Block>
+          <SpacedButton onClick={() => this.setState({current: 1})}>
+            Previous
+          </SpacedButton>
+          <SpacedButton disabled>Next</SpacedButton>
+        </NumberedStep>
+      </ProgressSteps>
+    );
+  }
+}
+
+export default ProgressStepsContainer;
diff --git a/documentation-site/static/examples/select/basic.js b/documentation-site/static/examples/select/basic.js
new file mode 100644
index 000000000..d9088416f
--- /dev/null
+++ b/documentation-site/static/examples/select/basic.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import {StatefulSelect} from 'baseui/select';
+
+export default () => (
+  <StatefulSelect
+    options={[
+      {id: 'AliceBlue', color: '#F0F8FF'},
+      {id: 'AntiqueWhite', color: '#FAEBD7'},
+      {id: 'Aqua', color: '#00FFFF'},
+      {id: 'Aquamarine', color: '#7FFFD4'},
+      {id: 'Azure', color: '#F0FFFF'},
+      {id: 'Beige', color: '#F5F5DC'},
+    ]}
+    labelKey="id"
+    valueKey="color"
+    onChange={event => console.log(event)}
+  />
+);
diff --git a/documentation-site/static/examples/select/search-multi-pick.js b/documentation-site/static/examples/select/search-multi-pick.js
new file mode 100644
index 000000000..1c20d9681
--- /dev/null
+++ b/documentation-site/static/examples/select/search-multi-pick.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import {StatefulSelect, TYPE} from 'baseui/select';
+
+export default () => (
+  <StatefulSelect
+    options={[
+      {id: 'AliceBlue', color: '#F0F8FF'},
+      {id: 'AntiqueWhite', color: '#FAEBD7'},
+      {id: 'Aqua', color: '#00FFFF'},
+      {id: 'Aquamarine', color: '#7FFFD4'},
+      {id: 'Azure', color: '#F0FFFF'},
+      {id: 'Beige', color: '#F5F5DC'},
+    ]}
+    labelKey="id"
+    valueKey="color"
+    placeholder="Choose a color"
+    maxDropdownHeight="300px"
+    type={TYPE.search}
+    multi
+    onChange={event => console.log(event)}
+  />
+);
diff --git a/documentation-site/static/examples/select/search-single-pick.js b/documentation-site/static/examples/select/search-single-pick.js
new file mode 100644
index 000000000..27c2f7f4b
--- /dev/null
+++ b/documentation-site/static/examples/select/search-single-pick.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import {StatefulSelect, TYPE} from 'baseui/select';
+
+export default () => (
+  <StatefulSelect
+    options={[
+      {id: 'AliceBlue', color: '#F0F8FF'},
+      {id: 'AntiqueWhite', color: '#FAEBD7'},
+      {id: 'Aqua', color: '#00FFFF'},
+      {id: 'Aquamarine', color: '#7FFFD4'},
+      {id: 'Azure', color: '#F0FFFF'},
+      {id: 'Beige', color: '#F5F5DC'},
+    ]}
+    labelKey="id"
+    valueKey="color"
+    placeholder="Choose a color"
+    maxDropdownHeight="300px"
+    type={TYPE.search}
+    onChange={event => console.log(event)}
+  />
+);
diff --git a/documentation-site/static/examples/select/with-many-options.js b/documentation-site/static/examples/select/with-many-options.js
new file mode 100644
index 000000000..5f2824cfb
--- /dev/null
+++ b/documentation-site/static/examples/select/with-many-options.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import {styled} from 'baseui';
+import {StatefulSelect, StyledDropdownListItem} from 'baseui/select';
+import {StyledList} from 'baseui/menu';
+
+import List from 'react-virtualized/dist/commonjs/List';
+import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
+
+const ListItem = styled(StyledDropdownListItem, {
+  paddingTop: 0,
+  paddingBottom: 0,
+  display: 'flex',
+  alignItems: 'center',
+});
+
+const Container = styled(StyledList, {height: '500px'});
+
+function VirtualList(props) {
+  return (
+    <Container $ref={props.$ref}>
+      <AutoSizer>
+        {({width}) => (
+          <List
+            role={props.role}
+            height={500}
+            width={width}
+            rowCount={props.children.length}
+            rowHeight={36}
+            rowRenderer={({index, key, style}) => {
+              return (
+                <ListItem
+                  key={key}
+                  style={style}
+                  {...props.children[index].props}
+                >
+                  {props.children[index].props.item.id}
+                </ListItem>
+              );
+            }}
+          />
+        )}
+      </AutoSizer>
+    </Container>
+  );
+}
+
+const options = [];
+
+for (let i = 0; i < 10000; i += 1) {
+  options.push({
+    id: i,
+    label: i,
+  });
+}
+
+export default () => (
+  <StatefulSelect
+    options={options}
+    labelKey="id"
+    valueKey="label"
+    overrides={{Dropdown: {component: VirtualList}}}
+    onChange={event => console.log(event)}
+  />
+);
diff --git a/documentation-site/static/examples/tabs/basic.js b/documentation-site/static/examples/tabs/basic.js
new file mode 100644
index 000000000..d3236c193
--- /dev/null
+++ b/documentation-site/static/examples/tabs/basic.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import {StatefulTabs, TabPanel} from 'baseui/tabs';
+
+export default () => (
+  <StatefulTabs activeKey="1">
+    <TabPanel title="Tab Link 1">Tab 1 content</TabPanel>
+    <TabPanel title="Tab Link 2">Tab 2 content</TabPanel>
+    <TabPanel title="Tab Link 3">Tab 3 content</TabPanel>
+  </StatefulTabs>
+);
diff --git a/documentation-site/static/examples/tabs/controlled.js b/documentation-site/static/examples/tabs/controlled.js
new file mode 100644
index 000000000..5a6b2f0b2
--- /dev/null
+++ b/documentation-site/static/examples/tabs/controlled.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import {Tabs, TabPanel} from 'baseui/tabs';
+
+export default () => <ControlledTabsStory />;
+
+class ControlledTabsStory extends React.Component<{}, {activeKey: React.Key}> {
+  state = {
+    activeKey: '0',
+  };
+
+  onChange = ({activeKey}) => {
+    this.setState({activeKey});
+  };
+
+  render() {
+    const content = ['Tab Content 1', 'Tab Content 2', 'Tab Content 3'];
+    return (
+      <React.Fragment>
+        <Tabs activeKey={this.state.activeKey} onChange={this.onChange}>
+          <TabPanel title="Tab Link 1" />
+          <TabPanel title="Tab Link 2" />
+          <TabPanel title="Tab Link 3" />
+        </Tabs>
+        <div>Content:</div>
+        <div>{content[Number(this.state.activeKey)]}</div>
+      </React.Fragment>
+    );
+  }
+}
diff --git a/documentation-site/static/examples/tabs/vertical.js b/documentation-site/static/examples/tabs/vertical.js
new file mode 100644
index 000000000..021578344
--- /dev/null
+++ b/documentation-site/static/examples/tabs/vertical.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import {StatefulTabs, TabPanel, ORIENTATION} from 'baseui/tabs';
+
+export default () => (
+  <StatefulTabs orientation={ORIENTATION.vertical} activeKey="1">
+    <TabPanel title="Tab Link 1">Tab 1 content</TabPanel>
+    <TabPanel title="Tab Link 2">Tab 2 content</TabPanel>
+    <TabPanel title="Tab Link 3">Tab 3 content</TabPanel>
+  </StatefulTabs>
+);
diff --git a/documentation-site/static/examples/textarea/basic.js b/documentation-site/static/examples/textarea/basic.js
new file mode 100644
index 000000000..49a5d2bce
--- /dev/null
+++ b/documentation-site/static/examples/textarea/basic.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import {StatefulTextarea as Textarea, SIZE} from 'baseui/textarea';
+
+export default () => (
+  <React.Fragment>
+    <Textarea size={SIZE.compact} placeholder="Placeholder" />
+    <br />
+    <Textarea
+      initialState={{value: 'uber'}}
+      size={SIZE.compact}
+      placeholder="Placeholder"
+    />
+    <br />
+    <Textarea size={SIZE.compact} error={true} placeholder="Placeholder" />
+    <br />
+    <Textarea size={SIZE.compact} disabled placeholder="Disabled textarea" />
+  </React.Fragment>
+);
diff --git a/documentation-site/static/examples/textarea/ref.js b/documentation-site/static/examples/textarea/ref.js
new file mode 100644
index 000000000..b68b2a1c9
--- /dev/null
+++ b/documentation-site/static/examples/textarea/ref.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import {StatefulTextarea as Textarea} from 'baseui/textarea';
+import {Button} from 'baseui/button';
+
+export default () => {
+  const inputRef = React.createRef();
+  return (
+    <React.Fragment>
+      <Textarea inputRef={inputRef} placeholder="With textarea input ref" />
+      <br />
+      <Button
+        onClick={() => {
+          inputRef.current && inputRef.current.focus();
+        }}
+      >
+        Click here to focus input
+      </Button>
+    </React.Fragment>
+  );
+};
diff --git a/documentation-site/static/examples/toast/basic.js b/documentation-site/static/examples/toast/basic.js
new file mode 100644
index 000000000..792e2f59e
--- /dev/null
+++ b/documentation-site/static/examples/toast/basic.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import {toaster, ToasterContainer, PLACEMENT} from 'baseui/toast';
+import {Button} from 'baseui/button';
+
+class ToasterExample extends React.Component {
+  add = () => {
+    toaster.info('Lorem ipsum dolor sit amet, consectetur adipiscing elit.', {
+      autoHideDuration: 5000,
+    });
+  };
+
+  render() {
+    return <Button onClick={this.add}>Info toast</Button>;
+  }
+}
+
+export default () => (
+  <React.Fragment>
+    <ToasterContainer placement={PLACEMENT.bottomRight} />
+    <ToasterExample />
+  </React.Fragment>
+);
diff --git a/documentation-site/static/examples/toast/toast-notification.js b/documentation-site/static/examples/toast/toast-notification.js
new file mode 100644
index 000000000..8c19d9562
--- /dev/null
+++ b/documentation-site/static/examples/toast/toast-notification.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import {Toast, KIND} from 'baseui/toast';
+import {Button, SIZE as BUTTON_SIZE, KIND as BUTTON_KIND} from 'baseui/button';
+
+export default () => (
+  <React.Fragment>
+    <Toast>Default info notification</Toast>
+    <Toast kind={KIND.positive}>Positive notification</Toast>
+    <Toast kind={KIND.warning}>Warning notification</Toast>
+    <Toast kind={KIND.negative}>Negative notification</Toast>
+  </React.Fragment>
+);
diff --git a/package.json b/package.json
index ec607802c..e1b9fb86b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "5.5.0",
+  "version": "5.7.0",
   "description": "React implementation of uber design components platform.",
   "keywords": [
     "react",
@@ -99,7 +99,7 @@
     "eslint-plugin-prettier": "^3.0.0",
     "eslint-plugin-react": "^7.10.0",
     "extract-react-types-loader": "^0.3.0",
-    "flow-bin": "^0.89.0",
+    "flow-bin": "^0.90.0",
     "flow-copy-source": "^2.0.2",
     "front-matter": "^3.0.1",
     "geckodriver": "^1.11.0",
@@ -121,6 +121,7 @@
     "react-dom": "^16.4.0",
     "react-markdown": "^4.0.3",
     "react-syntax-highlighter": "^10.0.1",
+    "react-virtualized": "^9.21.0",
     "rimraf": "^2.6.2",
     "saucelabs": "^1.5.0",
     "screener-storybook": "^0.16.2",
@@ -135,7 +136,7 @@
     "webpack-cli": "^3.1.0"
   },
   "dependencies": {
-    "date-fns": "2.0.0-alpha.26",
+    "date-fns": "2.0.0-alpha.27",
     "memoize-one": "^5.0.0",
     "popper.js": "^1.14.3",
     "react-dropzone": "^8.0.0",
diff --git a/screener.config.js b/screener.config.js
index 624272913..c991d8580 100644
--- a/screener.config.js
+++ b/screener.config.js
@@ -64,6 +64,7 @@ module.exports = {
     new RegExp(Textarea.STATE_EXAMPLE),
     new RegExp(Toast.TOAST_EXAMPLE),
     new RegExp(ProgressStep.DEFAULT),
+    new RegExp(ProgressStep.NUMBERED),
   ],
   failureExitCode: 0,
 };
diff --git a/src/accordion/types.js b/src/accordion/types.js
index 9a3654abb..74165290d 100644
--- a/src/accordion/types.js
+++ b/src/accordion/types.js
@@ -53,32 +53,53 @@ export type AccordionOnChangeHandlerT = ({
 type ChildrenT = React.ChildrenArray<React.Element<*>>;
 
 export type AccordionPropsT = {
+  /** Determines how many panels may be expanded at a time. If set to
+   * true it will collapse a current panel when a new panel is expanded.
+   * If set to false more than one panel may be expanded at a time. */
   accordion?: boolean,
+  /** Accordion expandable items. See Panel API below for reference. */
   children: ChildrenT,
+  /** If set to true all its children panels will be disabled from toggling. */
   disabled?: boolean,
   initialState?: AccordionStateT,
+  /** Handler called each time a panel is toggled. expanded prop is an array
+   * of Panel keys that are currently expanded. */
   onChange?: AccordionOnChangeHandlerT,
   overrides?: AccordionOverridesT<
     $Diff<SharedStylePropsArgT, {$expanded?: ?boolean}>,
   >,
+  /** Handler called each time the component state changes.
+   * Used to override default state-change functionality. */
   stateReducer: StateReducerT,
 };
 
 export type PanelPropsT = {
+  /** The content visible when Panel is expanded. */
   children: React.Node,
+  /** Defaults to the disabled value provided by the parent Accordion component. */
   disabled?: boolean,
+  /** Defines if the panel is expanded. If set to true the panel is rendered expanded. */
   expanded?: boolean,
+  /** The key of a Panel. Used to maintain list of expanded panels.
+   * Must be unique across children of the Accordion. */
   key?: React.Key,
+  /** Handler for individual Panel change events. */
   onChange?: OnChangeHandlerT,
+  /** Handler for the Header's click events. */
   onClick?: (e: Event) => void,
+  /** Handler for the Header's keyDown events. */
   onKeyDown?: (e: KeyboardEvent) => void,
   overrides?: PanelOverridesT<SharedStylePropsArgT>,
+  /** The title of an accordion panel. */
   title?: React.Node,
 };
 
 // Props for panel stateful container
 export type StatefulPanelContainerPropsT = {
   children: (props: $Diff<PanelPropsT, {children: React.Node}>) => React.Node,
+  /** Initial state of a stateful panel component.
+   * The expanded prop indicates if the panel is initially expanded.
+   * If set to true the panel will be expanded initially */
   initialState?: PanelStateT,
   onChange?: OnChangeHandlerT,
   stateReducer: PanelStateReducerT,
diff --git a/src/avatar/types.js b/src/avatar/types.js
index 30cef32a5..1dab9a49e 100644
--- a/src/avatar/types.js
+++ b/src/avatar/types.js
@@ -25,8 +25,11 @@ export type StateT = {|
 |};
 
 export type PropsT = {|
+  /** Defines an alternative text description of the image. */
   name: string,
   overrides?: OverridesT<StylePropsT>,
+  /** Defines the width/height of the image. Accepts labels from theme.sizing, or passes value to height/width. */
   size?: string,
+  /** Image to display. */
   src: string,
 |};
diff --git a/src/block/types.js b/src/block/types.js
index ca363971b..93a032c93 100644
--- a/src/block/types.js
+++ b/src/block/types.js
@@ -217,35 +217,62 @@ type OverflowT =
 
 export type BlockPropsT = {
   children?: Node,
+  /** Modifies the base element used to render the block. */
   as?: ElementType,
   overrides?: OverridesT,
   color?: string,
+  /** Accepts all themeable color properties (`primary200`, etc.). */
   font?: string,
+  /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content */
   alignContent?: AlignContentT,
+  /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items */
   alignItems?: AlignItemsT,
+  /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/align-self */
   alignSelf?: AlignSelfT,
+  /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction */
   flexDirection?: FlexDirectionT,
+  /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/display */
   display?: DisplayT,
   flex?: string,
+  /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid */
   grid?: string,
+  /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area */
   gridArea?: string,
+  /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns */
   gridAutoColumns?: string,
+  /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow */
   gridAutoFlow?: GridAutoFlowT,
+  /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows */
   gridAutoRows?: string,
+  /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column */
   gridColumn?: string,
+  /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end */
   gridColumnEnd?: string,
+  /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-gap */
   gridColumnGap?: string,
+  /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start */
   gridColumnStart?: string,
+  /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-gap */
   gridGap?: string,
+  /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row */
   gridRow?: string,
+  /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start */
   gridRowStart?: string,
+  /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end */
   gridRowEnd?: string,
+  /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template */
   gridTemplate?: string,
+  /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas */
   gridTemplateAreas?: string,
+  /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns */
   gridTemplateColumns?: string,
+  /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows */
   gridTemplateRows?: string,
+  /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content */
   justifyContent?: JustifyContentT,
+  /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items */
   justifyItems?: JustifyItemsT,
+  /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self */
   justifySelf?: JustifySelfT,
   position?: PositionT,
   width?: string,
@@ -265,8 +292,11 @@ export type BlockPropsT = {
   paddingRight?: string,
   paddingBottom?: string,
   paddingLeft?: string,
+  /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/place-content */
   placeContent?: string,
+  /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items */
   placeItems?: string,
+  /** available values: https://developer.mozilla.org/en-US/docs/Web/CSS/place-self */
   placeSelf?: string,
   flexWrap?: boolean,
   left?: string,
diff --git a/src/button-group/types.js b/src/button-group/types.js
index d0ad28ec3..6c79db035 100644
--- a/src/button-group/types.js
+++ b/src/button-group/types.js
@@ -21,15 +21,35 @@ export type StylePropsT = {
 
 // button-group
 export type PropsT = {|
+  /** Accessible label. */
   ariaLabel?: string,
+  /** Set of more than one `Button` components */
   children: Array<React.Node>,
+  /** Defines if the button group is disabled. */
   disabled?: boolean,
+  /** Defines the kind (purpose) of the buttons in the button group. */
   kind?: $Values<typeof KIND>,
+  /**
+   * Use the `mode` prop to render toggleable Buttons:
+   * the value `radio` will cause Buttons to behave like radio buttons,
+   * the value `checkbox` will cause Buttons to behave like checkboxes.
+   */
   mode?: $Values<typeof MODE>,
+  /**
+   * Called with click events from children. If a child button has its
+   * own click handler, the local handler will be called first, then
+   * this handler will trigger.
+   */
   onClick?: ClickHandlerT,
   overrides?: OverridesT<StylePropsT>,
+  /**
+   * Index or array of indices of the selected Button(s).
+   * Primarily for use with controlled components with a `mode` prop defined.
+   */
   selected?: number | Array<number>,
+  /** Defines the shape of the buttons in the button group. */
   shape?: $Values<typeof SHAPE>,
+  /** Defines the size of the buttons in the button group. */
   size?: $Values<typeof SIZE>,
 |};
 
diff --git a/src/button/button-internals.js b/src/button/button-internals.js
index db0e0a0b4..526a6662d 100644
--- a/src/button/button-internals.js
+++ b/src/button/button-internals.js
@@ -12,7 +12,6 @@ import {
 } from './styled-components.js';
 import {getSharedProps} from './utils.js';
 import {getOverrides} from '../helpers/overrides.js';
-import {KIND, SHAPE, SIZE} from './constants.js';
 
 import type {ButtonPropsT} from './types.js';
 
@@ -47,13 +46,3 @@ export default function ButtonInternals(props: ButtonPropsT) {
     </React.Fragment>
   );
 }
-
-ButtonInternals.defaultProps = {
-  disabled: false,
-  isLoading: false,
-  isSelected: false,
-  kind: KIND.primary,
-  overrides: {},
-  shape: SHAPE.default,
-  size: SIZE.default,
-};
diff --git a/src/button/button.js b/src/button/button.js
index 2bc1fae18..e12080c0d 100644
--- a/src/button/button.js
+++ b/src/button/button.js
@@ -14,12 +14,19 @@ import {
 import {getSharedProps} from './utils.js';
 import ButtonInternals from './button-internals.js';
 import {getOverrides} from '../helpers/overrides.js';
+import {KIND, SHAPE, SIZE} from './constants.js';
 
 import type {ButtonPropsT} from './types.js';
 
 export default class Button extends React.Component<ButtonPropsT> {
   static defaultProps = {
-    ...ButtonInternals.defaultProps,
+    disabled: false,
+    isLoading: false,
+    isSelected: false,
+    kind: KIND.primary,
+    overrides: {},
+    shape: SHAPE.default,
+    size: SIZE.default,
   };
 
   internalOnClick = (...args: *) => {
diff --git a/src/button/types.js b/src/button/types.js
index 221e3f776..eddb5420d 100644
--- a/src/button/types.js
+++ b/src/button/types.js
@@ -19,14 +19,21 @@ export type OverridesT = {
 export type ButtonPropsT = {
   children?: React$Node,
   disabled: boolean,
+  /** A helper rendered at the end of the button. */
   endEnhancer?: (*) => React$Node | React$Node,
+  /** Show loading button style and spinner. */
   isLoading: boolean,
+  /** Indicates that the button is selected */
   isSelected?: boolean,
+  /** Defines the kind (purpose) of a button */
   kind: $Keys<typeof KIND>,
   onClick?: (SyntheticEvent<HTMLButtonElement>) => void,
   overrides: OverridesT,
+  /** Defines the shape of the button */
   shape: $Keys<typeof SHAPE>,
+  /** Defines the size of the button */
   size: $Keys<typeof SIZE>,
+  /** A helper rendered at the start of the button. */
   startEnhancer?: (*) => React$Node | React$Node,
 };
 
diff --git a/src/card/types.js b/src/card/types.js
index e79c7e418..7b84d59b6 100644
--- a/src/card/types.js
+++ b/src/card/types.js
@@ -19,11 +19,17 @@ export type CardComponentsT = {
 };
 
 export type CardsPropsT = {
+  /** Contents to be rendered at the bottom of the Card. Used to organize UI which enables user action. */
   +action?: Node,
+  /** Content to be rendered within the Card body. */
   +children?: Node,
+  /** Function that takes Card props and returns a boolean that represents if a thumbnail will be rendered. */
   +hasThumbnail: ({+thumbnail?: string}) => boolean,
+  /** Image src to be positioned at the top of the Card. */
   +headerImage?: string,
   +overrides: CardComponentsT,
+  /** Image src that by default is rendered to the side of children content. */
   +thumbnail?: string,
+  /** Content to render above the body content. */
   +title?: Node,
 };
diff --git a/src/datepicker/calendar-header.js b/src/datepicker/calendar-header.js
index b38e09dfb..c828b2337 100644
--- a/src/datepicker/calendar-header.js
+++ b/src/datepicker/calendar-header.js
@@ -79,6 +79,7 @@ export default class CalendarHeader extends React.Component<HeaderPropsT> {
     return (
       <PrevButton
         role="button"
+        tabIndex={0}
         overrides={{Svg: {style: {cursor: 'pointer'}}}}
         {...prevButtonProps}
         // Adding internal click handler last that means no custom click handler
@@ -116,6 +117,7 @@ export default class CalendarHeader extends React.Component<HeaderPropsT> {
     return (
       <NextButton
         role="button"
+        tabIndex={0}
         overrides={{Svg: {style: {cursor: 'pointer'}}}}
         {...nextButtonProps}
         // Adding internal click handler last that means no custom click handler
diff --git a/src/datepicker/day.js b/src/datepicker/day.js
index 04ed13a20..8d738ebf1 100644
--- a/src/datepicker/day.js
+++ b/src/datepicker/day.js
@@ -74,8 +74,8 @@ export default class Day extends React.Component<DayPropsT, DayStateT> {
   onClick = (event: Event) => {
     const {date, disabled} = this.props;
     if (!disabled) {
-      this.props.onSelect({date});
       this.props.onClick({event, date});
+      this.props.onSelect({date});
     }
   };
 
diff --git a/src/datepicker/examples.js b/src/datepicker/examples.js
index a5761f799..d1dc37cd8 100644
--- a/src/datepicker/examples.js
+++ b/src/datepicker/examples.js
@@ -11,7 +11,7 @@ import {
   Unstable_StatefulCalendar as StatefulDatepicker,
   formatDate,
 } from './index.js';
-import {Popover} from '../popover/index.js';
+import {Popover, PLACEMENT} from '../popover/index.js';
 import {Input} from '../input/index.js';
 import tests from './examples-list.js';
 
@@ -56,9 +56,15 @@ class DatepickerWithInput extends React.Component<
   render() {
     return (
       <Popover
+        placement={PLACEMENT.bottom}
         isOpen={this.state.isOpen}
         onEsc={this.close}
-        content={<StatefulDatepicker onSelect={this.onChange} />}
+        content={
+          <StatefulDatepicker
+            initialState={{value: this.state.value}}
+            onSelect={this.onChange}
+          />
+        }
       >
         <Input
           value={this.state.formattedValue}
diff --git a/src/datepicker/index.js b/src/datepicker/index.js
index 8fa66ce6b..09a2be0c3 100644
--- a/src/datepicker/index.js
+++ b/src/datepicker/index.js
@@ -7,6 +7,7 @@ LICENSE file in the root directory of this source tree.
 // @flow
 export {default as Unstable_StatefulCalendar} from './stateful-calendar.js';
 export {default as StatefulContainer} from './stateful-container.js';
+export {default as NavigationContainer} from './navigation-container.js';
 export {default as Unstable_Calendar} from './calendar.js';
 // Util functions
 export {formatDate} from './utils/index.js';
diff --git a/src/datepicker/navigation-container.js b/src/datepicker/navigation-container.js
new file mode 100644
index 000000000..314b52f86
--- /dev/null
+++ b/src/datepicker/navigation-container.js
@@ -0,0 +1,186 @@
+/*
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+import * as React from 'react';
+import {STATE_CHANGE_TYPE} from './constants.js';
+import {
+  addDays,
+  isSameMonth,
+  isSameYear,
+  subDays,
+  addWeeks,
+  subWeeks,
+} from './utils/index.js';
+import type {
+  NavigationContainerStateT,
+  NavigationContainerPropsT,
+  StateChangeTypeT,
+  NavigationContainerStateReducerT,
+} from './types.js';
+
+const defaultStateReducer: NavigationContainerStateReducerT = (
+  type,
+  nextState,
+) => nextState;
+
+class NavigationContainer extends React.Component<
+  NavigationContainerPropsT,
+  NavigationContainerStateT,
+> {
+  static defaultProps = {
+    stateReducer: defaultStateReducer,
+    onDayMouseOver: () => {},
+    onDayMouseLeave: () => {},
+    onSelect: () => {},
+  };
+
+  state = {
+    highlightedDate:
+      this.props.highlightedDate || this.props.selected || new Date(),
+    isActive: true,
+    lastHighlightedDate:
+      this.props.highlightedDate || this.props.selected || new Date(),
+  };
+
+  componentDidMount() {
+    if (__BROWSER__) {
+      if (this.state.isActive) {
+        document.addEventListener('keydown', this.onKeyDown);
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    if (__BROWSER__) {
+      if (this.state.isActive) {
+        document.removeEventListener('keydown', this.onKeyDown);
+      }
+    }
+  }
+
+  setActiveState = (isActive: boolean) => {
+    if (__BROWSER__) {
+      const method = isActive ? 'addEventListener' : 'removeEventListener';
+      // $FlowFixMe
+      document[method]('keydown', this.onKeyDown);
+      this.internalSetState(null, {isActive});
+    }
+  };
+
+  onSelect = (data: {date: Date}) => {
+    if (this.state.isActive) {
+      this.props.onSelect(data);
+    }
+  };
+
+  onKeyDown = (event: KeyboardEvent) => {
+    switch (event.key) {
+      case 'ArrowUp':
+      case 'ArrowDown':
+      case 'ArrowLeft':
+      case 'ArrowRight':
+        this.handleArrowKey(event.key);
+        event.preventDefault();
+        event.stopPropagation();
+        break;
+    }
+  };
+
+  onDayMouseOver = (data: {event: Event, date: Date}) => {
+    const {date} = data;
+    const {stateReducer} = this.props;
+    this.setState(prevState =>
+      stateReducer(
+        STATE_CHANGE_TYPE.mouseOver,
+        {highlightedDate: date},
+        prevState,
+      ),
+    );
+    this.props.onDayMouseOver(data);
+  };
+
+  onDayMouseLeave = (data: {event: Event, date: Date}) => {
+    const {date} = data;
+    const {stateReducer, selected} = this.props;
+    const inSameMonth = isSameMonth(selected, date);
+    const inSameYear = isSameYear(selected, date);
+    let nextState;
+    if (selected && inSameMonth && inSameYear) {
+      nextState = {highlightedDate: selected};
+    } else {
+      nextState = {
+        lastHighlightedDate: date,
+        highlightedDate: null,
+      };
+    }
+    this.setState(prevState =>
+      stateReducer(STATE_CHANGE_TYPE.mouseLeave, nextState, prevState),
+    );
+    this.props.onDayMouseLeave(data);
+  };
+
+  handleArrowKey(key: string) {
+    const {highlightedDate: oldDate, lastHighlightedDate} = this.state;
+    let highlightedDate = oldDate ? oldDate : null;
+    let stateChangeType = null;
+    switch (key) {
+      case 'ArrowLeft':
+        // adding `new Date()` as the last option to satisfy Fow
+        highlightedDate = subDays(
+          highlightedDate ? highlightedDate : lastHighlightedDate || new Date(),
+          1,
+        );
+        stateChangeType = STATE_CHANGE_TYPE.moveLeft;
+        break;
+      case 'ArrowRight':
+        highlightedDate = addDays(
+          // adding `new Date()` as the last option to satisfy Fow
+          highlightedDate ? highlightedDate : lastHighlightedDate || new Date(),
+          1,
+        );
+        stateChangeType = STATE_CHANGE_TYPE.moveRight;
+        break;
+      case 'ArrowUp':
+        highlightedDate = subWeeks(
+          // adding `new Date()` as the last option to satisfy Fow
+          highlightedDate ? highlightedDate : lastHighlightedDate || new Date(),
+          1,
+        );
+        stateChangeType = STATE_CHANGE_TYPE.moveUp;
+        break;
+      case 'ArrowDown':
+        highlightedDate = addWeeks(
+          // adding `new Date()` as the last option to satisfy Fow
+          highlightedDate ? highlightedDate : lastHighlightedDate || new Date(),
+          1,
+        );
+        stateChangeType = STATE_CHANGE_TYPE.moveDown;
+        break;
+    }
+    this.internalSetState(stateChangeType, {highlightedDate});
+  }
+
+  internalSetState(type: StateChangeTypeT, changes: NavigationContainerStateT) {
+    const {stateReducer} = this.props;
+    this.setState(prevState => stateReducer(type, changes, prevState));
+  }
+
+  render() {
+    const {children, stateReducer, ...rest} = this.props;
+    // $FlowFixMe
+    return this.props.children({
+      ...rest,
+      highlightedDate: this.state.highlightedDate,
+      onDayMouseOver: this.onDayMouseOver,
+      onDayMouseLeave: this.onDayMouseLeave,
+      onSelect: this.onSelect,
+      setActiveState: this.setActiveState,
+    });
+  }
+}
+
+export default NavigationContainer;
diff --git a/src/datepicker/stateful-calendar.js b/src/datepicker/stateful-calendar.js
index a2cc9cd8f..569f7d690 100644
--- a/src/datepicker/stateful-calendar.js
+++ b/src/datepicker/stateful-calendar.js
@@ -7,13 +7,18 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import * as React from 'react';
 import StatefulContainer from './stateful-container.js';
-import Component from './calendar.js';
+import NavigationContainer from './navigation-container.js';
+import Calendar from './calendar.js';
 import type {StatefulDatepickerPropsT} from './types.js';
 
 function StatefulComponent(props: StatefulDatepickerPropsT) {
   return (
     <StatefulContainer {...props}>
-      {componentProps => <Component {...componentProps} />}
+      {extendedProps => (
+        <NavigationContainer {...extendedProps}>
+          {componentProps => <Calendar {...componentProps} />}
+        </NavigationContainer>
+      )}
     </StatefulContainer>
   );
 }
diff --git a/src/datepicker/stateful-container.js b/src/datepicker/stateful-container.js
index ef3ce3198..f3f6d3f51 100644
--- a/src/datepicker/stateful-container.js
+++ b/src/datepicker/stateful-container.js
@@ -7,14 +7,6 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import * as React from 'react';
 import {STATE_CHANGE_TYPE} from './constants.js';
-import {
-  addDays,
-  isSameMonth,
-  isSameYear,
-  subDays,
-  addWeeks,
-  subWeeks,
-} from './utils/index.js';
 import type {
   CalendarStateT,
   StatefulContainerPropsT,
@@ -31,142 +23,22 @@ class StatefulContainer extends React.Component<
   static defaultProps = {
     initialState: {value: null},
     stateReducer: defaultStateReducer,
-    onDayMouseOver: () => {},
-    onDayMouseLeave: () => {},
     onSelect: () => {},
   };
 
   state = {
     ...{
-      highlightedDate: this.props.initialState.value || new Date(),
-      isActive: true,
-      lastHighlightedDate: this.props.initialState.value || new Date(),
       value: null,
     },
     ...this.props.initialState,
   };
 
-  componentDidMount() {
-    if (__BROWSER__) {
-      if (this.state.isActive) {
-        document.addEventListener('keydown', this.onKeyDown);
-      }
-    }
-  }
-
-  componentWillUnmount() {
-    if (__BROWSER__) {
-      if (this.state.isActive) {
-        document.removeEventListener('keydown', this.onKeyDown);
-      }
-    }
-  }
-
-  setActiveState = (isActive: boolean) => {
-    if (__BROWSER__) {
-      const method = isActive ? 'addEventListener' : 'removeEventListener';
-      // $FlowFixMe
-      document[method]('keydown', this.onKeyDown);
-      this.internalSetState(null, {isActive});
-    }
-  };
-
   onSelect = (data: {date: Date}) => {
     const {date} = data;
-    if (this.state.isActive) {
-      this.internalSetState(STATE_CHANGE_TYPE.change, {value: date});
-      this.props.onSelect(data);
-    }
-  };
-
-  onKeyDown = (event: KeyboardEvent) => {
-    switch (event.key) {
-      case 'ArrowUp':
-      case 'ArrowDown':
-      case 'ArrowLeft':
-      case 'ArrowRight':
-        this.handleArrowKey(event.key);
-        event.preventDefault();
-        event.stopPropagation();
-        break;
-    }
-  };
-
-  onDayMouseOver = (data: {event: Event, date: Date}) => {
-    const {date} = data;
-    const {stateReducer} = this.props;
-    this.setState(prevState =>
-      stateReducer(
-        STATE_CHANGE_TYPE.mouseOver,
-        {highlightedDate: date},
-        prevState,
-      ),
-    );
-    this.props.onDayMouseOver(data);
+    this.internalSetState(STATE_CHANGE_TYPE.change, {value: date});
+    this.props.onSelect(data);
   };
 
-  onDayMouseLeave = (data: {event: Event, date: Date}) => {
-    const {date} = data;
-    const {stateReducer} = this.props;
-    const {value: selected} = this.state;
-    const inSameMonth = isSameMonth(selected, date);
-    const inSameYear = isSameYear(selected, date);
-    let nextState;
-    if (selected && inSameMonth && inSameYear) {
-      nextState = {highlightedDate: selected};
-    } else {
-      nextState = {
-        lastHighlightedDate: date,
-        highlightedDate: null,
-      };
-    }
-    this.setState(prevState =>
-      stateReducer(STATE_CHANGE_TYPE.mouseLeave, nextState, prevState),
-    );
-    this.props.onDayMouseLeave(data);
-  };
-
-  handleArrowKey(key: string) {
-    const {highlightedDate: oldDate, lastHighlightedDate} = this.state;
-    let highlightedDate = oldDate ? oldDate : null;
-    let stateChangeType = null;
-    switch (key) {
-      case 'ArrowLeft':
-        // adding `new Date()` as the last option to satisfy Fow
-        highlightedDate = subDays(
-          highlightedDate ? highlightedDate : lastHighlightedDate || new Date(),
-          1,
-        );
-        stateChangeType = STATE_CHANGE_TYPE.moveLeft;
-        break;
-      case 'ArrowRight':
-        highlightedDate = addDays(
-          // adding `new Date()` as the last option to satisfy Fow
-          highlightedDate ? highlightedDate : lastHighlightedDate || new Date(),
-          1,
-        );
-        stateChangeType = STATE_CHANGE_TYPE.moveRight;
-        break;
-      case 'ArrowUp':
-        highlightedDate = subWeeks(
-          // adding `new Date()` as the last option to satisfy Fow
-          highlightedDate ? highlightedDate : lastHighlightedDate || new Date(),
-          1,
-        );
-        stateChangeType = STATE_CHANGE_TYPE.moveUp;
-        break;
-      case 'ArrowDown':
-        highlightedDate = addWeeks(
-          // adding `new Date()` as the last option to satisfy Fow
-          highlightedDate ? highlightedDate : lastHighlightedDate || new Date(),
-          1,
-        );
-        stateChangeType = STATE_CHANGE_TYPE.moveDown;
-        break;
-    }
-    this.internalSetState(stateChangeType, {highlightedDate});
-  }
-
   internalSetState(type: StateChangeTypeT, changes: CalendarStateT) {
     const {stateReducer} = this.props;
     this.setState(prevState => stateReducer(type, changes, prevState));
@@ -177,12 +49,8 @@ class StatefulContainer extends React.Component<
     // $FlowFixMe
     return this.props.children({
       ...rest,
-      highlightedDate: this.state.highlightedDate,
       selected: this.state.value,
-      onDayMouseOver: this.onDayMouseOver,
-      onDayMouseLeave: this.onDayMouseLeave,
       onSelect: this.onSelect,
-      setActiveState: this.setActiveState,
     });
   }
 }
diff --git a/src/datepicker/types.js b/src/datepicker/types.js
index 59280a38c..5b99f5cac 100644
--- a/src/datepicker/types.js
+++ b/src/datepicker/types.js
@@ -111,6 +111,10 @@ export type SharedStylePropsT = {
 export type StateChangeTypeT = ?$Values<typeof STATE_CHANGE_TYPE>;
 
 export type CalendarStateT = {
+  value?: ?Date,
+};
+
+export type NavigationContainerStateT = {
   // indicates a highlighted date on hover and keyboard navigation
   highlightedDate?: ?Date,
   // used to disable keyboard navigation when a month or year select
@@ -120,7 +124,6 @@ export type CalendarStateT = {
   // when keyboard navigating after a mouse moved off the cal and reset
   // highlightedDate value
   lastHighlightedDate?: Date,
-  value?: ?Date,
 };
 
 export type StateReducerT = (
@@ -129,13 +132,27 @@ export type StateReducerT = (
   currentState: CalendarStateT,
 ) => CalendarStateT;
 
+export type NavigationContainerStateReducerT = (
+  stateType: StateChangeTypeT,
+  nextState: NavigationContainerStateT,
+  currentState: NavigationContainerStateT,
+) => NavigationContainerStateT;
+
 export type StatefulContainerPropsT = {
   children: CalendarPropsT => React.Node,
   initialState: CalendarStateT,
   stateReducer: StateReducerT,
+  onSelect: ({date: Date}) => void,
+};
+
+export type NavigationContainerPropsT = {
+  children: CalendarPropsT => React.Node,
+  highlightedDate?: ?Date,
   onDayMouseOver: (params: {date: Date, event: Event}) => void,
   onDayMouseLeave: (params: {date: Date, event: Event}) => void,
   onSelect: ({date: Date}) => void,
+  selected?: ?Date,
+  stateReducer: NavigationContainerStateReducerT,
 };
 
 export type StatefulDatepickerPropsT = $Diff<
diff --git a/src/menu/constants.js b/src/menu/constants.js
index 07726c4ec..6fbc61d4d 100644
--- a/src/menu/constants.js
+++ b/src/menu/constants.js
@@ -7,12 +7,14 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 export const STATE_CHANGE_TYPES = {
+  click: 'click',
   moveUp: 'moveUp',
   moveDown: 'moveDown',
 };
 
 // Dict of props to prepend $ to pass thru to styletron
 export const SHARED_PROPS_MAPPER = {
+  disabled: true,
   ref: true,
   isHighlighted: true,
 };
diff --git a/src/menu/examples-list.js b/src/menu/examples-list.js
index 09d1afc66..f2ff032b2 100644
--- a/src/menu/examples-list.js
+++ b/src/menu/examples-list.js
@@ -14,4 +14,5 @@ module.exports = {
   MENU_STATEFUL: 'Stateful Menu with Keybindings',
   MENU_PROFILE_STATEFUL: 'Stateful Menu Profile with Keybindings',
   CHILD_MENU: 'Child Menu Hover',
+  LONG_LIST: 'Long Item List',
 };
diff --git a/src/menu/examples.js b/src/menu/examples.js
index f4c5371c8..f444cda2d 100644
--- a/src/menu/examples.js
+++ b/src/menu/examples.js
@@ -6,14 +6,19 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
+import List from 'react-virtualized/dist/commonjs/List'; // eslint-disable-line import/extensions
+import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer'; // eslint-disable-line import/extensions
 import {action} from '@storybook/addon-actions';
 
 import Menu from './menu.js';
 import StatefulMenu from './stateful-menu.js';
 
+import {styled} from '../styles/index.js';
+import OptionList from './option-list.js';
 import OptionProfile from './option-profile.js';
 import {OPTION_LIST_SIZE} from './constants.js';
 import examples from './examples-list.js';
+import {List as StyledList} from './styled-components.js';
 
 function CloudComponent() {
   return (
@@ -38,7 +43,7 @@ function CloudComponent() {
 const ITEMS = [
   {label: 'Item One'},
   {label: 'Item Two'},
-  {label: 'Item Three'},
+  {disabled: true, label: 'Item Three'},
   {label: 'Item Four'},
   {label: 'Item Five'},
   {label: 'Item Six'},
@@ -226,4 +231,54 @@ export default {
       />
     );
   },
+
+  [examples.LONG_LIST]: function LongListStory() {
+    const items = [...new Array(1500)].map((_, index) => ({
+      label: `item number: ${index + 1}`,
+    }));
+
+    const Container = styled(StyledList, {height: '500px'});
+
+    function VirtualList(props) {
+      return (
+        <Container $ref={props.$ref}>
+          <AutoSizer>
+            {({width}) => (
+              <List
+                role={props.role}
+                height={500}
+                rowCount={props.children.length}
+                rowHeight={36}
+                rowRenderer={({index, key, style}) => (
+                  <OptionList
+                    key={key}
+                    style={style}
+                    {...props.children[index].props}
+                    overrides={{
+                      ListItem: {
+                        style: {
+                          paddingTop: 0,
+                          paddingBottom: 0,
+                          display: 'flex',
+                          alignItems: 'center',
+                        },
+                      },
+                    }}
+                  />
+                )}
+                width={width}
+              />
+            )}
+          </AutoSizer>
+        </Container>
+      );
+    }
+
+    return (
+      <StatefulMenu
+        items={items}
+        overrides={{List: {component: VirtualList}}}
+      />
+    );
+  },
 };
diff --git a/src/menu/stateful-container.js b/src/menu/stateful-container.js
index 6b68411f2..f61de0e93 100644
--- a/src/menu/stateful-container.js
+++ b/src/menu/stateful-container.js
@@ -118,7 +118,11 @@ export default class MenuStatefulContainer extends React.Component<
   handleEnterKey(event: KeyboardEvent) {
     const {items, onItemSelect} = this.props;
     const {highlightedIndex} = this.state;
-    if (items[highlightedIndex] && onItemSelect) {
+    if (
+      items[highlightedIndex] &&
+      onItemSelect &&
+      !items[highlightedIndex].disabled
+    ) {
       onItemSelect({item: items[highlightedIndex], event});
     }
   }
@@ -127,8 +131,13 @@ export default class MenuStatefulContainer extends React.Component<
     const {highlightedIndex} = this.state;
     const {onItemSelect, getRequiredItemProps} = this.props;
     let onClickHandler;
-    if (onItemSelect) {
-      onClickHandler = onItemSelect.bind(null, {item});
+    if (onItemSelect && !item.disabled) {
+      onClickHandler = () => {
+        onItemSelect({item});
+        this.internalSetState(STATE_CHANGE_TYPES.click, {
+          highlightedIndex: index,
+        });
+      };
     }
     // Create and store ref or re-use
     let itemRef = this.refList[index];
@@ -137,6 +146,7 @@ export default class MenuStatefulContainer extends React.Component<
       this.refList[index] = itemRef;
     }
     return {
+      disabled: item.disabled,
       ref: itemRef,
       isHighlighted: highlightedIndex === index,
       onClick: onClickHandler,
diff --git a/src/menu/styled-components.js b/src/menu/styled-components.js
index 7ab51f83f..106bebd4a 100644
--- a/src/menu/styled-components.js
+++ b/src/menu/styled-components.js
@@ -11,6 +11,7 @@ import {OPTION_LIST_SIZE} from './constants.js';
 import type {ThemeT} from '../styles/index.js';
 
 type StyledPropsT = {
+  $disabled?: boolean,
   $theme: ThemeT,
   $isHighlighted?: boolean,
   $size?: $Keys<typeof OPTION_LIST_SIZE>,
@@ -35,14 +36,18 @@ List.displayName = 'StyledList';
 
 export const ListItem = styled(
   'li',
-  ({$theme, $isHighlighted, $size}: StyledPropsT) => ({
+  ({$disabled, $theme, $isHighlighted, $size}: StyledPropsT) => ({
     ...($size === OPTION_LIST_SIZE.compact
       ? $theme.typography.font200
       : $theme.typography.font300),
     position: 'relative',
     display: 'block',
-    color: $isHighlighted ? $theme.colors.primary : $theme.colors.foreground,
-    cursor: 'pointer',
+    color: $disabled
+      ? $theme.colors.foregroundAlt
+      : $isHighlighted
+        ? $theme.colors.primary
+        : $theme.colors.foreground,
+    cursor: $disabled ? 'not-allowed' : 'pointer',
     backgroundColor: $isHighlighted
       ? $theme.colors.menuFillHover
       : 'transparent',
@@ -68,6 +73,9 @@ export const ListItem = styled(
       $size === OPTION_LIST_SIZE.compact
         ? $theme.sizing.scale900
         : $theme.sizing.scale600,
+    ':focus': {
+      outline: 'none',
+    },
   }),
 );
 ListItem.displayName = 'StyledListItem';
diff --git a/src/modal/types.js b/src/modal/types.js
index 1672680cc..3fad1b6d2 100644
--- a/src/modal/types.js
+++ b/src/modal/types.js
@@ -31,17 +31,32 @@ export type ElementRefT = {current: ?React.ElementRef<'div'>};
 
 // Props shared by all flavors of modal
 export type ModalPropsT = {
+  /** Sets whether the Modal should be displayed by easing in and out */
   animate: boolean,
+  /** Set to false if modal shouldn't autofocus on its content.
+   *  Moving focus into a newly opened modal is important for accessibility purposes.
+   *  If you set this to false, you should manually trigger focus on another element in the modal. */
   autofocus: boolean,
+  /** Modal content. The children-as-function API may be preferable
+   * for performance reasons (wont render until opened) */
   children?: React.Node | (() => React.Node),
+  /** Whether the modal should be closeable by the user
+   *  (either via escape, backdrop click, etc). You can set this to
+   * false if your modal has an action that the user must take before closing.*/
   closeable: boolean,
   isOpen: boolean,
+  /** Where to mount the modal */
   mountNode?: HTMLElement,
+  /** A callback that is invoked when the modal will close.
+   * Callback is passed a constant identifying what triggered the close. */
   onClose?: ({
     closeSource?: CloseSourceT,
   }) => void,
   overrides: OverridesT,
+  /** Which accessibility role this modal should have. */
   role: RolePropT,
+  /** Controls the size of the modal (primarily width).
+   * Can be a SIZE constant or css width property value. */
   size: SizePropT,
 };
 
diff --git a/src/progress-steps/styled-components.js b/src/progress-steps/styled-components.js
index efe852d4d..bdb36769d 100644
--- a/src/progress-steps/styled-components.js
+++ b/src/progress-steps/styled-components.js
@@ -130,7 +130,6 @@ export const StyledContentTail = styled(
       left: '7px',
       top: 0,
       height: '100%',
-      zIndex: -1,
       paddingBottom: '0px',
       width: $theme.sizing.scale0,
       paddingTop: $theme.sizing.scale600,
@@ -225,7 +224,7 @@ export const StyledNumberContentTail = styled(
       left: '11px',
       top: 0,
       height: '100%',
-      zIndex: -1,
+      marginTop: '5px',
       paddingBottom: '0px',
       width: $theme.sizing.scale0,
       paddingTop: $theme.sizing.scale600,
diff --git a/src/progress-steps/types.js b/src/progress-steps/types.js
index 85ae77aa2..389e56d1d 100644
--- a/src/progress-steps/types.js
+++ b/src/progress-steps/types.js
@@ -18,6 +18,7 @@ export type ProgressStepsOverridesT = {
 export type ProgressStepsPropsT = {
   overrides?: ProgressStepsOverridesT,
   children?: Node,
+  /** Defines the current active step index. */
   current: number,
 };
 
@@ -32,9 +33,13 @@ export type StepOverridesT = {
 };
 
 export type StepPropsT = {
+  /** The title of the Step. */
   title?: Node,
+  /** Defines if the step is completed. */
   isCompleted: boolean,
+  /** Defines if the step is currently active. */
   isActive: boolean,
+  /** Defines if the step is the last item displayed. */
   isLast: boolean,
   overrides?: StepOverridesT,
   children?: Node,
@@ -61,12 +66,17 @@ export type NumberedStepOverridesT = {
 };
 
 export type NumberedStepPropsT = {
+  /** The title of the Step. */
   title?: string,
+  /** Defines if the step is completed. */
   isCompleted: boolean,
+  /** Defines if the step is currently active. */
   isActive: boolean,
+  /** Defines if the step is the last item displayed. */
   isLast: boolean,
   overrides?: NumberedStepOverridesT,
   children?: Node,
+  /** The number displayed as the step number */
   step?: Node,
 };
 
diff --git a/src/rating/examples.js b/src/rating/examples.js
index 71ead275b..1fd72a2ad 100644
--- a/src/rating/examples.js
+++ b/src/rating/examples.js
@@ -8,6 +8,8 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import React from 'react';
+import Screener, {Steps} from 'screener-storybook/src/screener.js';
+
 import {StarRating, EmoticonRating} from './index.js';
 import type {StyledRatingItemPropsT} from './index.js';
 import examples from './examples-list.js';
@@ -19,6 +21,7 @@ type ExampleState = {
 
 export default {
   [examples.DEFAULT]: function Story1() {
+    const selector = 'li:nth-child(5)';
     class Example extends React.Component<{}, ExampleState> {
       state = {
         value: 3,
@@ -26,10 +29,18 @@ export default {
 
       render() {
         return (
-          <StarRating
-            value={this.state.value}
-            onChange={({value}) => this.setState({value})}
-          />
+          <Screener
+            steps={new Steps()
+              .wait(selector)
+              .click(selector)
+              .snapshot('rating five star selected')
+              .end()}
+          >
+            <StarRating
+              value={this.state.value}
+              onChange={({value}) => this.setState({value})}
+            />
+          </Screener>
         );
       }
     }
diff --git a/src/select/examples-list.js b/src/select/examples-list.js
index 170bd96c1..fb1c996a2 100644
--- a/src/select/examples-list.js
+++ b/src/select/examples-list.js
@@ -14,4 +14,5 @@ module.exports = {
   SINGLE_SELECT_SEARCH: 'Single select search',
   MULTI_SELECT_SEARCH: 'Multi select search',
   MULTI_SELECT_CUSTOM_LABELS: 'Multi select search with custom labels',
+  LONG_LIST: 'Select with Many Options',
 };
diff --git a/src/select/examples.js b/src/select/examples.js
index 50fa859bc..a46d5c880 100644
--- a/src/select/examples.js
+++ b/src/select/examples.js
@@ -9,8 +9,12 @@ import * as React from 'react';
 import {action} from '@storybook/addon-actions';
 import {boolean, radios} from '@storybook/addon-knobs';
 import Screener, {Steps} from 'screener-storybook/src/screener.js';
+import List from 'react-virtualized/dist/commonjs/List'; // eslint-disable-line import/extensions
+import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer'; // eslint-disable-line import/extensions
 
-import {StatefulSelect, TYPE} from './index.js';
+import {StyledList} from '../menu/index.js';
+
+import {StatefulSelect, StyledDropdownListItem, TYPE} from './index.js';
 import {SIZE} from './constants.js';
 import {styled} from '../styles/index.js';
 import COLORS from './examples-colors.json';
@@ -199,4 +203,51 @@ export default {
       />
     );
   },
+
+  [tests.LONG_LIST]: function LongListStory() {
+    const ListItem = styled(StyledDropdownListItem, {
+      paddingTop: 0,
+      paddingBottom: 0,
+      display: 'flex',
+      alignItems: 'center',
+    });
+
+    const Container = styled(StyledList, {height: '500px'});
+
+    function VirtualList(props) {
+      return (
+        <Container $ref={props.$ref}>
+          <AutoSizer>
+            {({width}) => (
+              <List
+                role={props.role}
+                height={500}
+                width={width}
+                rowCount={props.children.length}
+                rowHeight={36}
+                rowRenderer={({index, key, style}) => {
+                  return (
+                    <ListItem
+                      key={key}
+                      style={style}
+                      {...props.children[index].props}
+                    >
+                      {props.children[index].props.item.id}
+                    </ListItem>
+                  );
+                }}
+              />
+            )}
+          </AutoSizer>
+        </Container>
+      );
+    }
+
+    return (
+      <StatefulSelect
+        {...options}
+        overrides={{Dropdown: {component: VirtualList}}}
+      />
+    );
+  },
 };
diff --git a/src/select/types.js b/src/select/types.js
index 01928cd79..718e36573 100644
--- a/src/select/types.js
+++ b/src/select/types.js
@@ -66,46 +66,82 @@ export type PropsT = {
   'aria-label': ?string,
   'aria-describedby': ?string,
   'aria-labelledby': ?string,
+  /** Defines if select element is focused on the first mount. */
   autoFocus: false,
+  /** Defines if options can be removed by pressing backspace. */
   backspaceRemoves: boolean,
+  /** Defines if the select value can be cleared. If true a clear icon is rendered when a value is set. */
   clearable: boolean,
+  /** Defines if the menu closes after a selection if made. */
   closeOnSelect: boolean,
+  /** Defines if options can be removed by pressing backspace. */
   deleteRemoves: boolean,
+  /** Defines if the control is disabled. */
   disabled: boolean,
+  /** Defines if the control if in error state. */
   error: boolean,
+  /** Defines if the value is cleared when escape is pressed and the dropdown is closed. */
   escapeClearsValue: boolean,
+  /** Defaults to filterOptions that excludes selected options for
+   * multi select. A custom method to filter options to be displayed in the dropdown. */
   filterOptions: ?(
     options: ValueT,
     filterValue: string,
     excludeOptions: ?ValueT,
     {valueKey: string, labelKey: string},
   ) => ValueT,
+  /** Defines if currently selected options are filtered out in the dropdown options. */
   filterOutSelected: boolean,
+  /** A custom method to get a display value for a dropdown option. */
   getOptionLabel: ?({option: OptionT}) => React.Node,
+  /** A custom method to get a display value for a selected option. */
   getValueLabel: ?({option: OptionT}) => React.Node,
+  /** Defines if the select if in a loading (async) state. */
   isLoading: boolean,
+  /** Defines an option key for a default label value. */
   labelKey: string,
+  /** Sets max height of the dropdown list. */
   maxDropdownHeight: string,
+  /** Defines if multiple options can be selected. */
   multi: boolean,
+  /** Message to be displayed if no options is found for a search query. */
   noResultsMsg: React.Node,
   onBlur: (e: Event) => void,
+  /** Defines if the input value is reset to an empty string when a blur event happens on the select. */
   onBlurResetsInput: boolean,
+  /** change handler of the select to be called when a value is changed. */
   onChange: (params: OnChangeParamsT) => void,
   onFocus: (e: SyntheticEvent<HTMLElement>) => void,
   onInputChange: (e: SyntheticInputEvent<HTMLInputElement>) => void,
+  /** Defines if the input value is reset to an empty string when dropdown is closed. */
   onCloseResetsInput: boolean,
+  /** Defines if the input value is reset to an empty string when a selection is made. */
   onSelectResetsInput: boolean,
+  /** A function that is called when the dropdown opens. */
   onOpen: ?() => void,
+  /** A function that is called when the dropdown closes. */
   onClose: ?() => void,
+  /** Defines if the dropdown opens on a click event on the select. */
   openOnClick: boolean,
+  /** Options to be displayed in the dropdown. If an option has a
+   * disabled prop value set to true it will be rendered as a disabled option in the dropdown. */
   options: ?ValueT,
   overrides: OverridesT,
+  /** Sets the placeholder. */
   placeholder: React.Node,
+  /** Defines if the select field is required to have a selection. */
   required: boolean,
+  /** Defines if the search functionality id enabled. */
   searchable: boolean,
   size: SizeT,
+  /** Defines type of the component to be in select or search mode.
+   * When set to TYPE.search the search icon if rendered on the
+   * left and the select arrow icon is not rendered. */
   type: TypeT,
+  /** A current selected value(s). If a selected value has a clearableValue
+   * prop set to true it will be rendered as a disabled selected option that can't be cleared. */
   value: ValueT,
+  /** Defines an option key for a default key value. */
   valueKey: string,
 };
 
diff --git a/src/tabs/types.js b/src/tabs/types.js
index d69831b33..a2a4322df 100644
--- a/src/tabs/types.js
+++ b/src/tabs/types.js
@@ -37,28 +37,41 @@ export type TabOverridesT<T> = {
 export type OnChangeHandlerT = ({activeKey: React.Key}) => void;
 
 export type TabsPropsT = {
+  /** An array of TabPanel items. */
   children: React.ChildrenArray<React.Element<typeof TabPanel>>,
+  /**  Key of the the tab to be selected. */
   activeKey: React.Key,
+  /** If set to true all its tabs will be disabled */
   disabled?: boolean,
+  /** Change handler that is called every time a new tab is selected */
   onChange?: OnChangeHandlerT,
+  /** Sets the orientation of the Tab component */
   orientation?: $Values<typeof ORIENTATION>,
   overrides?: TabsOverridesT<$Diff<SharedStylePropsArgT, {$active?: ?boolean}>>,
 };
 
 export type StatefulTabsPropsT = $Diff<TabsPropsT, {activeKey: React.Key}> & {
+  /**  Initial state of the component */
   initialState?: StatefulTabsStateT,
+  /**  A state change handler. */
   stateReducer: StateReducerT,
 };
 
 export type TabPanelPropsT = {
   children: React.ChildrenArray<React.Node>,
+  /** Sets the tab to disabled */
   disabled?: boolean,
   active?: boolean,
+  /**  Unique key for the tab. Defaults to the child index. */
   key?: React.Key,
+  /** onClick handler for the Tab element */
   onClick?: (e: Event) => void,
+  /** onKeyDown handler for the Tab element */
   onKeyDown?: (e: KeyboardEvent) => void,
+  /** onSelect handler for the Tab element */
   onSelect?: () => void,
   overrides?: TabOverridesT<SharedStylePropsArgT>,
+  /** Title of the Tab to be shown in the Tab bar */
   title?: React.Node,
 };
 
diff --git a/src/toast/styled-components.js b/src/toast/styled-components.js
index c8e164593..3de968dd2 100644
--- a/src/toast/styled-components.js
+++ b/src/toast/styled-components.js
@@ -94,13 +94,17 @@ export function getPlacement(placement: PlacementTypeT) {
  * Main component container element
  */
 export const Root = styled('div', (props: ToasterSharedStylePropsT) => {
-  const {$placement} = props;
+  const {$placement, $theme} = props;
   return {
     pointerEvents: 'none',
     position: 'fixed',
     right: 0,
     left: 0,
     display: 'flex',
+    marginTop: $theme.sizing.scale300,
+    marginBottom: $theme.sizing.scale300,
+    marginLeft: $theme.sizing.scale600,
+    marginRight: $theme.sizing.scale600,
     ...getPlacement($placement),
   };
 });
diff --git a/src/toast/types.js b/src/toast/types.js
index 8889407cc..efb86577e 100644
--- a/src/toast/types.js
+++ b/src/toast/types.js
@@ -55,11 +55,20 @@ export type ToastPrivateStateT = {
 };
 
 export type ToastPropsT = {
+  /** The number of milliseconds to wait before automatically dismissing a
+   * notification. This behavior is disabled when the value is set to 0.*/
   autoHideDuration: number,
+  /** Toast notification content. The children-as-function
+   *  receives a dissmiss method that can be called to
+   * dismiss the notification and can be used as a
+   * handler for an action inside the toast content. */
   children: ChildrenT | ComponentRenderPropT,
+  /** When set to true a close button is displayed and the notification can be dismissed by a user. */
   closeable: boolean,
+  /** Defines the type of notification. */
   kind: KindTypeT,
   notificationType: NotificationTypeT,
+  /** A callback function called when a notification is dismissed. */
   onClose: () => void,
   onBlur: (e: Event) => void,
   onFocus: (e: Event) => void,
diff --git a/yarn.lock b/yarn.lock
index 16ddb16a8..493400be1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4833,7 +4833,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.5:
+classnames@^2.2.3, classnames@^2.2.5:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
@@ -5529,10 +5529,10 @@ data-urls@^1.0.0:
     whatwg-mimetype "^2.0.0"
     whatwg-url "^6.4.0"
 
-date-fns@2.0.0-alpha.26:
-  version "2.0.0-alpha.26"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.0.0-alpha.26.tgz#e46afd73a2b50e0359446309ee7cb631d7467227"
-  integrity sha512-UAptCZ53MVimUFR8MXTyHED51AVGIqFlBfWgiS/KIoSYiJGrWScx4PYQVNSWfK2Js+43OlokCW1ttnexBTJ5Bg==
+date-fns@2.0.0-alpha.27:
+  version "2.0.0-alpha.27"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.0.0-alpha.27.tgz#5ecd4204ef0e7064264039570f6e8afbc014481c"
+  integrity sha512-cqfVLS+346P/Mpj2RpDrBv0P4p2zZhWWvfY5fuWrXNR/K38HaAGEkeOwb47hIpQP9Jr/TIxjZ2/sNMQwdXuGMg==
 
 date-now@^0.1.4:
   version "0.1.4"
@@ -5834,6 +5834,13 @@ dom-converter@~0.1:
   dependencies:
     utila "~0.3"
 
+"dom-helpers@^2.4.0 || ^3.0.0":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
+  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+
 dom-helpers@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
@@ -7000,10 +7007,10 @@ flat-cache@^1.2.1:
     graceful-fs "^4.1.2"
     write "^0.2.1"
 
-flow-bin@^0.89.0:
-  version "0.89.0"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.89.0.tgz#6bd29c2af7e0f429797f820662f33749105c32fa"
-  integrity sha512-DkO4PsXYrl53V6G5+t5HbRMC5ajYUQej2LEGPUZ+j9okTb41Sn5j9vfxsCpXMEAslYnQoysHhYu4GUZsQX/DrQ==
+flow-bin@^0.90.0:
+  version "0.90.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.90.0.tgz#733b6d29a8c8a22b9a5d273611d9a8402faf3445"
+  integrity sha512-/syDchjhLLL7nELK1ggyWJifGXuMCTz74kvkjR1t9DcmasMrilLl9qAAotsACcNb98etEEJpsCrvP7WL64kadw==
 
 flow-copy-source@^2.0.2:
   version "2.0.2"
@@ -9729,7 +9736,7 @@ longest@^1.0.1:
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
   integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -12094,6 +12101,18 @@ react-treebeard@^3.1.0:
     shallowequal "^1.1.0"
     velocity-react "^1.4.1"
 
+react-virtualized@^9.21.0:
+  version "9.21.0"
+  resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.21.0.tgz#8267c40ffb48db35b242a36dea85edcf280a6506"
+  integrity sha512-duKD2HvO33mqld4EtQKm9H9H0p+xce1c++2D5xn59Ma7P8VT7CprfAe5hwjd1OGkyhqzOZiTMlTal7LxjH5yBQ==
+  dependencies:
+    babel-runtime "^6.26.0"
+    classnames "^2.2.3"
+    dom-helpers "^2.4.0 || ^3.0.0"
+    loose-envify "^1.3.0"
+    prop-types "^15.6.0"
+    react-lifecycles-compat "^3.0.4"
+
 react@^16.0.0:
   version "16.6.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.6.1.tgz#ee2aef4f0a09e494594882029821049772f915fe"


Test patch:
diff --git a/src/datepicker/__tests__/navigation-container.test.js b/src/datepicker/__tests__/navigation-container.test.js
new file mode 100644
index 000000000..f9d6eeef7
--- /dev/null
+++ b/src/datepicker/__tests__/navigation-container.test.js
@@ -0,0 +1,88 @@
+/*
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+import React from 'react';
+import {shallow} from 'enzyme';
+import {NavigationContainer, STATE_CHANGE_TYPE} from '../index.js';
+
+describe('NavigationContainer', () => {
+  test('basic render', () => {
+    const props = {
+      highlightedDate: new Date(),
+      onSelect: jest.fn(),
+      stateReducer: jest.fn(),
+    };
+    const children = jest.fn();
+
+    shallow(<NavigationContainer {...props}>{children}</NavigationContainer>);
+    expect(children).toHaveBeenCalledTimes(1);
+  });
+
+  describe('Children function receives correct props', () => {
+    const props = {
+      highlightedDate: new Date(),
+      stateReducer: jest.fn(),
+      onSelect: jest.fn(),
+      onDayMouseOver: jest.fn(),
+      onDayMouseLeave: jest.fn(),
+    };
+    const children = jest.fn();
+    const eArgs = {date: new Date(), event: {}};
+    const component = shallow(
+      <NavigationContainer {...props}>{children}</NavigationContainer>,
+    );
+    const handlers = [
+      ['onDayMouseOver', true],
+      ['onDayMouseLeave', true],
+      ['onSelect', true],
+    ];
+
+    test.each(handlers)('Event handlers', (handler, replaced) => {
+      // event handler is passed to children function
+      const childrenHandler = children.mock.calls[0][0][handler];
+      if (replaced) {
+        expect(childrenHandler).toBe(component.instance()[handler]);
+        expect(childrenHandler).not.toBe(props[handler]);
+      } else {
+        expect(childrenHandler).toBe(props[handler]);
+      }
+      // event handler from props is called
+      // $FlowFixMe
+      childrenHandler(eArgs);
+      expect(props[handler]).toHaveBeenCalledTimes(1);
+      expect(props[handler]).toHaveBeenLastCalledWith(eArgs);
+    });
+  });
+
+  test('stateReducer', () => {
+    const props = {
+      highlightedDate: new Date(2010, 6, 8),
+      stateReducer: jest.fn(),
+    };
+    const children = jest.fn();
+    const state = {highlightedDate: new Date(2010, 6, 8)};
+    const stateUpdated = {highlightedDate: new Date(2010, 6, 1)};
+
+    const component = shallow(
+      <NavigationContainer {...props}>{children}</NavigationContainer>,
+    );
+    props.stateReducer.mockReturnValueOnce(state);
+    component.instance().onKeyDown({
+      key: 'ArrowUp',
+      preventDefault: () => {},
+      stopPropagation: () => {},
+    });
+
+    expect(props.stateReducer).toHaveBeenCalledTimes(1);
+    expect(props.stateReducer.mock.calls[0][0]).toEqual(
+      STATE_CHANGE_TYPE.moveUp,
+    );
+    expect(props.stateReducer.mock.calls[0][1]).toEqual(stateUpdated);
+    expect(props.stateReducer.mock.calls[0][2]).toMatchObject(state);
+    expect(component).toHaveState('highlightedDate', state.highlightedDate);
+  });
+});
diff --git a/src/datepicker/__tests__/stateful-container.test.js b/src/datepicker/__tests__/stateful-container.test.js
index 237c9c629..eeb9e9364 100644
--- a/src/datepicker/__tests__/stateful-container.test.js
+++ b/src/datepicker/__tests__/stateful-container.test.js
@@ -13,7 +13,7 @@ describe('StatefulComponentContainer', () => {
   test('basic render', () => {
     const props = {
       initialState: {
-        highlightedDate: new Date(),
+        value: new Date(),
       },
       onSelect: jest.fn(),
       stateReducer: jest.fn(),
@@ -27,7 +27,7 @@ describe('StatefulComponentContainer', () => {
   describe('Children function receives correct props', () => {
     const props = {
       initialState: {
-        highlightedDate: new Date(),
+        value: new Date(2019, 2, 10),
       },
       stateReducer: jest.fn(),
       onSelect: jest.fn(),
@@ -40,8 +40,8 @@ describe('StatefulComponentContainer', () => {
       <StatefulContainer {...props}>{children}</StatefulContainer>,
     );
     const handlers = [
-      ['onDayMouseOver', true],
-      ['onDayMouseLeave', true],
+      ['onDayMouseOver', false],
+      ['onDayMouseLeave', false],
       ['onSelect', true],
     ];
 
@@ -65,30 +65,29 @@ describe('StatefulComponentContainer', () => {
   test('stateReducer', () => {
     const props = {
       initialState: {
-        highlightedDate: new Date(2010, 6, 8),
+        value: new Date(2016, 2, 10),
       },
       stateReducer: jest.fn(),
     };
     const children = jest.fn();
-    const state = {highlightedDate: new Date(2010, 6, 8)};
-    const stateUpdated = {highlightedDate: new Date(2010, 6, 1)};
+    const newDate = {date: new Date(2018, 2, 10)};
+    const state = {value: newDate.date};
+    const stateUpdated = {value: new Date(2019, 2, 10)};
 
     const component = shallow(
       <StatefulContainer {...props}>{children}</StatefulContainer>,
     );
-    props.stateReducer.mockReturnValueOnce(state);
-    component.instance().onKeyDown({
-      key: 'ArrowUp',
-      preventDefault: () => {},
-      stopPropagation: () => {},
-    });
+    props.stateReducer.mockReturnValueOnce(stateUpdated);
+    component.instance().onSelect(newDate);
 
     expect(props.stateReducer).toHaveBeenCalledTimes(1);
     expect(props.stateReducer.mock.calls[0][0]).toEqual(
-      STATE_CHANGE_TYPE.moveUp,
+      STATE_CHANGE_TYPE.change,
     );
-    expect(props.stateReducer.mock.calls[0][1]).toEqual(stateUpdated);
-    expect(props.stateReducer.mock.calls[0][2]).toMatchObject(state);
-    expect(component).toHaveState('highlightedDate', state.highlightedDate);
+    expect(props.stateReducer.mock.calls[0][1]).toEqual(state);
+    expect(props.stateReducer.mock.calls[0][2]).toMatchObject({
+      value: props.initialState.value,
+    });
+    expect(component).toHaveState('value', stateUpdated.value);
   });
 });
diff --git a/src/menu/__tests__/__snapshots__/styled-components.test.js.snap b/src/menu/__tests__/__snapshots__/styled-components.test.js.snap
index 1b29bf54a..d81b2b016 100644
--- a/src/menu/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/menu/__tests__/__snapshots__/styled-components.test.js.snap
@@ -20,6 +20,9 @@ Object {
 
 exports[`Menu Styled Components ListItem - basic render: correct styles 1`] = `
 Object {
+  ":focus": Object {
+    "outline": "none",
+  },
   ":hover": Object {
     "backgroundColor": "$theme.colors.menuFillHover",
   },
@@ -44,6 +47,9 @@ Object {
 
 exports[`Menu Styled Components ListItem - compact: correct styles 1`] = `
 Object {
+  ":focus": Object {
+    "outline": "none",
+  },
   ":hover": Object {
     "backgroundColor": "$theme.colors.menuFillHover",
   },
@@ -68,6 +74,9 @@ Object {
 
 exports[`Menu Styled Components ListItem - highlighted render: correct styles 1`] = `
 Object {
+  ":focus": Object {
+    "outline": "none",
+  },
   ":hover": Object {
     "backgroundColor": "$theme.colors.menuFillHover",
   },
diff --git a/src/menu/__tests__/stateful-container.test.js b/src/menu/__tests__/stateful-container.test.js
index 582507152..c621f2af9 100644
--- a/src/menu/__tests__/stateful-container.test.js
+++ b/src/menu/__tests__/stateful-container.test.js
@@ -14,7 +14,7 @@ import {scrollItemIntoView} from '../utils.js';
 
 jest.mock('../utils');
 
-const mockItems = [{label: 'item1'}, {label: 'item2'}];
+const mockItems = [{label: 'item1'}, {disabled: true, label: 'item2'}];
 const mockChildrenFn = jest.fn().mockImplementation(() => <div />);
 const mockItemSelect = jest.fn();
 
@@ -102,6 +102,18 @@ describe('Menu StatefulContainer', () => {
     });
   });
 
+  test('getRequiredItemProps returns correct props for disabled item', () => {
+    const component = mount(<StatefulContainer {...getSharedProps()} />);
+    const item = mockItems[1];
+    const props = component.instance().getRequiredItemProps(item, 1);
+    expect(props).toEqual({
+      disabled: true,
+      ref: React.createRef(),
+      isHighlighted: false,
+      'aria-activedescendant': false,
+    });
+  });
+
   test('getRequiredItemProps returns correct props for active child', () => {
     const component = mount(<StatefulContainer {...getSharedProps()} />);
     component.setState({
@@ -175,5 +187,11 @@ describe('Menu StatefulContainer', () => {
         event,
       },
     ]);
+
+    component.setState({
+      highlightedIndex: 1,
+    });
+    component.instance().onKeyDown(event);
+    expect(mockItemSelect.mock.calls.length).toBe(1);
   });
 });