Repository: uber-web/baseui
Pull request #716 (2019-01-07 23:19:47)

docs(dnd-list): add dnd-list proposal
**My first component proposal! So please, tear it apart!**

Since this is a first serious use-case of drag and drop (apart from the file uploader) I did some research and prototyping and put together a section about underlying implementation. 

At the beginning I really hoped that we could use some third-party library to not deal with dnd basics. However, I can't find anything that would be good for a library usage and allow the level of customization that baseui requires. So I've started to prototype my own library that implements dnd from scratch and should meet all our requirements. It doesn't seem terribly complicated and it's nice to have a full control. But...

**...is this the hill I will die on?** If there's some better option, lmk! Happy to ditch that if so.



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
new file mode 100644
index 000000000..58d6ad8ca
--- /dev/null
+++ b/documentation-site/components/component-menu.js
@@ -0,0 +1,61 @@
+/*
+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 Link from 'next/link';
+import {Block} from 'baseui/block';
+import {Card} from 'baseui/card';
+import {Button, KIND} from 'baseui/button';
+import TriangleDown from 'baseui/icon/triangle-down';
+import {StatefulPopover} from 'baseui/popover';
+
+import NavLink from './nav-link';
+
+import Routes from '../routes';
+
+function Column(props) {
+  return (
+    <Block minWidth="160px" color="black">
+      <Block font="font350" paddingBottom="scale400">
+        {props.text}
+      </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>
+  );
+}
+
+const categories = Routes.find(r => r.components);
+export default () => (
+  <StatefulPopover
+    placement="bottom"
+    content={({close}) => (
+      <Card>
+        <Block display="flex">
+          {categories.children.map((category, index) => (
+            <Column
+              key={index}
+              text={category.text}
+              components={category.children}
+            />
+          ))}
+        </Block>
+      </Card>
+    )}
+  >
+    <Button kind={KIND.secondary} endEnhancer={() => <TriangleDown />}>
+      Components
+    </Button>
+  </StatefulPopover>
+);
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/layout.js b/documentation-site/components/layout.js
index 99b0c17b0..b04c5868a 100644
--- a/documentation-site/components/layout.js
+++ b/documentation-site/components/layout.js
@@ -19,6 +19,7 @@ import {
 } from 'baseui/header-navigation';
 import {StatefulSelect, TYPE} from 'baseui/select';
 
+import ComponentMenu from './component-menu';
 import MarkdownElements from './markdown-elements';
 import Sidebar from './sidebar';
 import Logo from '../images/Logo.png';
@@ -61,6 +62,9 @@ export default (props: PropsT) => (
       </NavigationList>
       <NavigationList align={ALIGN.center} />
       <NavigationList align={ALIGN.right}>
+        <Block display="flex" marginRight="scale800">
+          <ComponentMenu />
+        </Block>
         <Link href="/getting-started" prefetch>
           <Button>Get Started</Button>
         </Link>
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/meta.js b/documentation-site/components/meta.js
index da89ad053..9b22526e5 100644
--- a/documentation-site/components/meta.js
+++ b/documentation-site/components/meta.js
@@ -18,7 +18,7 @@ export default () => (
       content="initial-scale=1.0, width=device-width"
       key="viewport"
     />
-    <style jsx global>{`
+    <style>{`
       body {
         margin: 0;
       }
diff --git a/documentation-site/components/nav-link.js b/documentation-site/components/nav-link.js
new file mode 100644
index 000000000..2a05d7a9a
--- /dev/null
+++ b/documentation-site/components/nav-link.js
@@ -0,0 +1,21 @@
+/*
+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 {styled} from 'baseui';
+
+export default styled('a', ({$theme}) => ({
+  textDecoration: 'none',
+  cursor: 'pointer',
+  color: $theme.colors.black,
+  ':visited': {
+    color: $theme.colors.black,
+  },
+  ':hover': {
+    color: $theme.colors.primary,
+  },
+}));
diff --git a/documentation-site/components/sidebar.js b/documentation-site/components/sidebar.js
index 3d3aa35da..1d8d60d6f 100644
--- a/documentation-site/components/sidebar.js
+++ b/documentation-site/components/sidebar.js
@@ -12,6 +12,7 @@ import {Block} from 'baseui/block';
 import {styled} from 'baseui';
 import Link from 'next/link';
 
+import NavLink from './nav-link';
 import Routes from '../routes';
 
 const levelToPadding = {
@@ -37,23 +38,11 @@ const List = styled(Block, ({$theme}) => ({
   listStyle: 'none',
 }));
 
-const StyledLink = styled('a', ({$theme}) => ({
-  textDecoration: 'none',
-  cursor: 'pointer',
-  color: $theme.colors.black,
-  ':visited': {
-    color: $theme.colors.black,
-  },
-  ':hover': {
-    color: $theme.colors.primary,
-  },
-}));
-
 const NavigationLink = props => {
   return (
     <Block paddingBottom="scale300">
       <Link passHref={true} href={props.path} prefetch>
-        <StyledLink tabIndex="0">{props.text}</StyledLink>
+        <NavLink tabIndex="0">{props.text}</NavLink>
       </Link>
     </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/helpers/styletron.js b/documentation-site/helpers/styletron.js
index af85eaf99..f60bb1bd0 100644
--- a/documentation-site/helpers/styletron.js
+++ b/documentation-site/helpers/styletron.js
@@ -6,28 +6,14 @@ LICENSE file in the root directory of this source tree.
 */
 
 /* eslint-disable flowtype/require-valid-file-annotation */
+/* global document */
 
-const isServer = typeof window === 'undefined';
+import {Client, Server} from 'styletron-engine-atomic';
 
-let styletron;
+export const isServer = typeof window === 'undefined';
 
-export default function getStyletron() {
-  if (isServer && !styletron) {
-    const Styletron = require('styletron-engine-atomic').Server;
-    styletron = new Styletron();
-  } else if (!styletron) {
-    const Styletron = require('styletron-engine-atomic').Client;
-    // eslint-disable-next-line
-    const styleElements = document.getElementsByClassName(
-      '_styletron_hydrate_',
-    );
-    styletron = new Styletron(styleElements);
-  }
-  return styletron;
-}
+const getHydrate = () => document.getElementsByClassName('_styletron_hydrate_');
 
-export function flush() {
-  const _styletron = styletron;
-  styletron = null;
-  return _styletron;
-}
+export const styletron = isServer
+  ? new Server()
+  : new Client({hydrate: getHydrate()});
diff --git a/documentation-site/pages/_app.js b/documentation-site/pages/_app.js
index 7602dd51a..5ef0e56c9 100644
--- a/documentation-site/pages/_app.js
+++ b/documentation-site/pages/_app.js
@@ -8,22 +8,18 @@ LICENSE file in the root directory of this source tree.
 /* eslint-disable flowtype/require-valid-file-annotation */
 
 import React from 'react';
+import {LightTheme, ThemeProvider} from 'baseui';
 import App, {Container} from 'next/app';
-
 import {Provider as StyletronProvider} from 'styletron-react';
-import {LightTheme, ThemeProvider} from 'baseui';
 
-import getStyletron from '../helpers/styletron';
-import Head from '../components/meta';
+import {styletron} from '../helpers/styletron';
 
 export default class MyApp extends App {
   render() {
     const {Component, pageProps} = this.props;
-
     return (
       <Container>
-        <Head />
-        <StyletronProvider value={getStyletron()}>
+        <StyletronProvider value={styletron}>
           <ThemeProvider theme={LightTheme}>
             <Component {...pageProps} />
           </ThemeProvider>
diff --git a/documentation-site/pages/_document.js b/documentation-site/pages/_document.js
new file mode 100644
index 000000000..1395287ad
--- /dev/null
+++ b/documentation-site/pages/_document.js
@@ -0,0 +1,48 @@
+/*
+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.
+*/
+
+/* eslint-disable flowtype/require-valid-file-annotation */
+
+import React from 'react';
+import Document, {Head, Main, NextScript} from 'next/document';
+import {Provider as StyletronProvider} from 'styletron-react';
+
+import Meta from '../components/meta';
+import {styletron} from '../helpers/styletron';
+
+export default class MyDocument extends Document {
+  static getInitialProps(props) {
+    const page = props.renderPage(App => props => (
+      <StyletronProvider value={styletron}>
+        <App {...props} />
+      </StyletronProvider>
+    ));
+    const stylesheets = styletron.getStylesheets() || [];
+    return {...page, stylesheets};
+  }
+  render() {
+    return (
+      <html lang="en">
+        <Head>
+          {this.props.stylesheets.map((sheet, i) => (
+            <style
+              className="_styletron_hydrate_"
+              dangerouslySetInnerHTML={{__html: sheet.css}}
+              media={sheet.attrs.media || ''}
+              key={i}
+            />
+          ))}
+        </Head>
+        <Meta />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    );
+  }
+}
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/checkbox.mdx b/documentation-site/pages/components/checkbox.mdx
new file mode 100644
index 000000000..5524821fc
--- /dev/null
+++ b/documentation-site/pages/components/checkbox.mdx
@@ -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.
+-->
+
+import Example from '../../components/example';
+import API from '../../components/api';
+import Layout from '../../components/layout';
+
+import Basic from 'examples/checkbox/basic.js';
+import Multiline from 'examples/checkbox/multiline.js';
+import Error from 'examples/checkbox/error.js';
+import Indeterminate from 'examples/checkbox/indeterminate.js';
+import Disabled from 'examples/checkbox/disabled.js';
+import Alignment from 'examples/checkbox/alignment.js';
+import Overrides from 'examples/checkbox/overrides.js';
+import ComponentOverrides from 'examples/checkbox/component-overrides.js';
+import Focus from 'examples/checkbox/focus.js';
+
+export default Layout;
+
+# Checkbox
+
+Allows users to make a selection of available options, or toggle options on/off.
+
+### When to use
+
+- When a collection of options share context.
+- When a user wants to toggle an option on/off.
+- When a user wants to select multiple options.
+
+## Examples
+
+<Example title="Basic Usage" path="examples/checkbox/basic.js">
+  <Basic />
+</Example>
+
+<Example title="Multiline" path="examples/checkbox/multiline.js">
+  <Multiline />
+</Example>
+
+<Example title="Error" path="examples/checkbox/error.js">
+  <Error />
+</Example>
+
+<Example title="Indeterminate" path="examples/checkbox/indeterminate.js">
+  <Indeterminate />
+</Example>
+
+<Example title="Disabled" path="examples/checkbox/disabled.js">
+  <Disabled />
+</Example>
+
+<Example title="Alignment" path="examples/checkbox/alignment.js">
+  <Alignment />
+</Example>
+
+<Example title="Overrides" path="examples/checkbox/overrides.js">
+  <Overrides />
+</Example>
+
+<Example
+  title="Component Overrides"
+  path="examples/checkbox/component-overrides.js"
+>
+  <ComponentOverrides />
+</Example>
+
+<Example title="Focus with button" path="examples/checkbox/focus.js">
+  <Focus />
+</Example>
+
+<API
+  heading="Checkbox API"
+  api={require('!!extract-react-types-loader!../../../src/checkbox/checkbox.js')}
+/>
+
+<API
+  heading="Stateful Checkbox API"
+  api={require('!!extract-react-types-loader!../../../src/checkbox/stateful-checkbox.js')}
+/>
+
+<API
+  heading="Stateful Checkbox Container API"
+  api={require('!!extract-react-types-loader!../../../src/checkbox/stateful-checkbox-container.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 fb03c7c9a..78e0e781b 100644
--- a/documentation-site/routes.js
+++ b/documentation-site/routes.js
@@ -37,18 +37,113 @@ const routes = [
         text: 'Theming values',
         path: getPath('/theming-values'),
       },
+      {
+        text: 'Understanding Overrides',
+        path: getPath('/understanding-overrides'),
+      },
     ],
   },
   {
+    components: true,
     text: 'Components',
     children: [
       {
-        text: 'Data Entry',
+        text: 'Basic Inputs',
         children: [
+          {
+            text: 'Button',
+            path: getPath('/components/button'),
+          },
+          {
+            text: 'ButtonGroup',
+            path: getPath('/components/button-group'),
+          },
+          {
+            text: 'Checkbox',
+            path: getPath('/components/checkbox'),
+          },
           {
             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/checkbox/alignment.js b/documentation-site/static/examples/checkbox/alignment.js
new file mode 100644
index 000000000..1d3f7ca68
--- /dev/null
+++ b/documentation-site/static/examples/checkbox/alignment.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import {StatefulCheckbox} from 'baseui/checkbox';
+
+export default () => (
+  <React.Fragment>
+    <StatefulCheckbox onChange={console.log} labelPlacement="left">
+      Label on the left
+    </StatefulCheckbox>
+    <StatefulCheckbox onChange={console.log} labelPlacement="bottom">
+      Label on the bottom
+    </StatefulCheckbox>
+  </React.Fragment>
+);
diff --git a/documentation-site/static/examples/checkbox/basic.js b/documentation-site/static/examples/checkbox/basic.js
new file mode 100644
index 000000000..7593b21d3
--- /dev/null
+++ b/documentation-site/static/examples/checkbox/basic.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import {StatefulCheckbox} from 'baseui/checkbox';
+
+export default () => (
+  <StatefulCheckbox onChange={console.log}>click me</StatefulCheckbox>
+);
diff --git a/documentation-site/static/examples/checkbox/component-overrides.js b/documentation-site/static/examples/checkbox/component-overrides.js
new file mode 100644
index 000000000..2e41c9f58
--- /dev/null
+++ b/documentation-site/static/examples/checkbox/component-overrides.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import {Block} from 'baseui/block';
+import {StatefulCheckbox} from 'baseui/checkbox';
+import Alert from 'baseui/icon/alert';
+
+const CustomCheckmark = props => (
+  <Block
+    color={props.checked ? 'primary' : 'mono700'}
+    marginTop="3px"
+    marginRight="3px"
+  >
+    <Alert />
+  </Block>
+);
+
+export default () => (
+  <StatefulCheckbox
+    onChange={console.log}
+    overrides={{Checkmark: CustomCheckmark}}
+  >
+    With style overrides
+  </StatefulCheckbox>
+);
diff --git a/documentation-site/static/examples/checkbox/disabled.js b/documentation-site/static/examples/checkbox/disabled.js
new file mode 100644
index 000000000..c194453aa
--- /dev/null
+++ b/documentation-site/static/examples/checkbox/disabled.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import {StatefulCheckbox} from 'baseui/checkbox';
+
+export default () => (
+  <React.Fragment>
+    <StatefulCheckbox onChange={console.log} disabled>
+      Disabled checkbox
+    </StatefulCheckbox>
+    <StatefulCheckbox
+      onChange={console.log}
+      disabled
+      initialState={{checked: true}}
+    >
+      Disabled checkbox (checked)
+    </StatefulCheckbox>
+  </React.Fragment>
+);
diff --git a/documentation-site/static/examples/checkbox/error.js b/documentation-site/static/examples/checkbox/error.js
new file mode 100644
index 000000000..0f975ede9
--- /dev/null
+++ b/documentation-site/static/examples/checkbox/error.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import {StatefulCheckbox} from 'baseui/checkbox';
+
+export default () => (
+  <StatefulCheckbox onChange={console.log} isError>
+    Checkbox with an error
+  </StatefulCheckbox>
+);
diff --git a/documentation-site/static/examples/checkbox/focus.js b/documentation-site/static/examples/checkbox/focus.js
new file mode 100644
index 000000000..5ff5dc0f7
--- /dev/null
+++ b/documentation-site/static/examples/checkbox/focus.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import {Button, SIZE} from 'baseui/button';
+import {StatefulCheckbox} from 'baseui/checkbox';
+
+class Focus extends React.Component {
+  state = {isFocused: false};
+  inputRef = React.createRef();
+
+  render() {
+    return (
+      <React.Fragment>
+        <Button
+          size={SIZE.compact}
+          onClick={() => {
+            if (!this.inputRef.current) return;
+            if (this.state.isFocused) {
+              this.inputRef.current.blur();
+              this.setState({isFocused: false});
+            } else {
+              this.inputRef.current.focus();
+              this.setState({isFocused: true});
+            }
+          }}
+        >
+          Click to focus checkbox
+        </Button>
+        <StatefulCheckbox inputRef={this.inputRef} onChange={console.log}>
+          Focused checkbox
+        </StatefulCheckbox>
+      </React.Fragment>
+    );
+  }
+}
+
+export default Focus;
diff --git a/documentation-site/static/examples/checkbox/indeterminate.js b/documentation-site/static/examples/checkbox/indeterminate.js
new file mode 100644
index 000000000..ea77ff542
--- /dev/null
+++ b/documentation-site/static/examples/checkbox/indeterminate.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import {Block} from 'baseui/block';
+import {Checkbox} from 'baseui/checkbox';
+
+class GroupList extends React.Component<{}, {checkboxes: Array<boolean>}> {
+  state = {checkboxes: [false, false]};
+
+  render() {
+    const allChecked = this.state.checkboxes.every(Boolean);
+    const isIndeterminate = this.state.checkboxes.some(Boolean) && !allChecked;
+
+    return (
+      <Block>
+        <Checkbox
+          components={{}}
+          onChange={e => {
+            const nextCheckboxes = [e.target.checked, e.target.checked];
+            this.setState({checkboxes: nextCheckboxes});
+          }}
+          isIndeterminate={isIndeterminate}
+          checked={allChecked}
+        >
+          Indeterminate checkbox if not all subcheckboxes are checked
+        </Checkbox>
+        <Block padding="scale400">
+          <Checkbox
+            checked={this.state.checkboxes[0]}
+            onChange={e => {
+              const nextCheckboxes = [...this.state.checkboxes];
+              nextCheckboxes[0] = e.target.checked;
+              this.setState({checkboxes: nextCheckboxes});
+            }}
+          >
+            First subcheckbox
+          </Checkbox>
+          <Checkbox
+            checked={this.state.checkboxes[1]}
+            onChange={e => {
+              const nextCheckboxes = [...this.state.checkboxes];
+              nextCheckboxes[1] = e.target.checked;
+              this.setState({checkboxes: nextCheckboxes});
+            }}
+          >
+            Second subcheckbox
+          </Checkbox>
+        </Block>
+      </Block>
+    );
+  }
+}
+
+export default GroupList;
diff --git a/documentation-site/static/examples/checkbox/multiline.js b/documentation-site/static/examples/checkbox/multiline.js
new file mode 100644
index 000000000..8473b035a
--- /dev/null
+++ b/documentation-site/static/examples/checkbox/multiline.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import {StatefulCheckbox} from 'baseui/checkbox';
+
+export default () => (
+  <StatefulCheckbox onChange={console.log}>
+    It started as a simple idea: What if you could request a ride from your
+    phone? More than 5 billion trips later, we’re working to make transportation
+    safer and more accessible, helping people order food quickly and affordably,
+    reducing congestion in cities by getting more people into fewer cars, and
+    creating opportunities for people to work on their own terms.
+  </StatefulCheckbox>
+);
diff --git a/documentation-site/static/examples/checkbox/overrides.js b/documentation-site/static/examples/checkbox/overrides.js
new file mode 100644
index 000000000..0e1f3d4a8
--- /dev/null
+++ b/documentation-site/static/examples/checkbox/overrides.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import {StatefulCheckbox} from 'baseui/checkbox';
+
+export default () => (
+  <StatefulCheckbox
+    onChange={console.log}
+    overrides={{
+      Root: {
+        style: ({$theme}) => ({
+          ...$theme.borders.border300,
+        }),
+      },
+      Label: {
+        style: ({$theme}) => ({
+          color: $theme.colors.warning,
+        }),
+      },
+      Checkmark: {
+        style: ({$checked, $theme}) => ({
+          borderColor: $theme.colors.warning,
+          backgroundColor: $checked ? $theme.colors.warning : null,
+        }),
+      },
+    }}
+  >
+    With style overrides
+  </StatefulCheckbox>
+);
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/proposals/dnd-list.md b/proposals/dnd-list.md
new file mode 100644
index 000000000..c21af6d2f
--- /dev/null
+++ b/proposals/dnd-list.md
@@ -0,0 +1,145 @@
+# Drag and Drop List
+
+## Usage
+
+### Basic usage
+
+```js
+import * as React from 'react';
+import {StatefulList} from 'baseui/dnd-list';
+
+export default () =>
+  <StatefulList
+    initialState={{items: ['Item 1', 'Item 2', 'Item 3']}}
+    onChange={({newState, oldIndex, newIndex}) => {}}
+  />
+```
+
+### Advanced usage
+
+```js
+import * as React from 'react';
+import {
+  StatefulList,
+  StyledList,
+  StyledItem
+} from 'baseui/dnd-list';
+import {styled} from 'baseui';
+
+CustomList = styled(StyledList, props => ({
+  border: '1px solid green'
+}));
+
+CustomItem = styled(StyledItem, props => ({
+  borderBottom: props.$dragged ? `1px solid red` : 'none'
+}));
+
+export default () =>
+  <StatefulList
+    initialState={{ items: ['Item 1', 'Item 2', 'Item 3']}}
+    overrides={{
+      List: CustomList,
+      Item: CustomItem
+    }}
+  >
+```
+
+## Exports
+
+* `StatefulList`
+* `List`
+* `StyledList`
+* `StyledItem`
+* `StyledDragHandle`
+* `StyledCloseHandle`
+* `STATE_CHANGE_TYPE`
+
+## `List` API
+
+* `items: Array<React.Node>` - Required.
+  List items.
+* `overrides: {Root, Item, DragHandle, CloseHandle}` - Optional.
+  Overrides for presentational components. See "Presentational Components Props API" below
+  * `[ComponentName]: ReactComponent | {props: {}, style: {}, component: ReactComponent}` - Optional
+* `onChange: ({oldIndex: number, newIndex: number})` - Optional.
+  onChange handler is called every time an item is moved or removed (newIndex = -1)
+
+## `StatefulList` API
+
+* `initialState: {items: Array<React.Node>}` - Required.
+  Initial state of the component where `items` are list items.
+* `removable: boolean` - Optional. Should be list items removable.
+* `overrides: {Root, List, Item, DragHandle, CloseHandle}` - Optional.
+  Overrides for presentational components. See "Presentational Components Props API" below
+  * `[ComponentName]: ReactComponent | {props: {}, style: {}, component: ReactComponent}` - Optional
+* `onChange: ({newState: Array<React.Node>, oldIndex: number, newIndex: number})` - Optional.
+  onChange handler that is called every time an item is moved or removed (newIndex = -1).
+* `stateReducer: (type: string, nextState: {items: Array<React.Node>}, currentState: {items: Array<React.Node>}) => stateToSet: {items: Array<React.Node>}` - Optional.
+  A state change handler.
+  * `type` - a state change type
+  * `nextState` - a new state value to be set
+  * `currentState` - current state value
+  * `stateToSet` - a return value that the state will be updated with
+
+## Presentational components props API
+
+These properties are passed to presentational (styled) components that are exported:
+
+* `$dragged: boolean` If a particular item is active
+* `$hovered: boolean` If a particular item is hovered
+* `$focused: boolean` If a particular item is focused (`tab`, `shift + tab`)
+
+## STATE_CHANGE_TYPE Constant
+
+* `change` - An item was moved or removed
+
+## Accessibility
+
+`tab` - to focus the List component
+
+`Space` - to drag (focus) or drop an item
+
+`Esc` - to cancel the move
+
+`Arrow Up`, `Arrow Down` - selecting / moving items
+
+Example usage:
+
+```text
+tab to focust the list component
+arrow up/down to select item
+space to begin item drag
+arrow up/down to change position
+space to end item drag
+```
+
+`aria-live`, `aria-describedby` are applied to items.
+
+Roles: `role=listbox`, `role=option`
+
+Refer [https://www.w3.org/TR/2011/CR-wai-aria-20110118/states_and_properties#attrs_liveregions](https://www.w3.org/TR/2011/CR-wai-aria-20110118/states_and_properties#attrs_liveregions)
+and [https://medium.com/salesforce-ux/4-major-patterns-for-accessible-drag-and-drop-1d43f64ebf09](https://medium.com/salesforce-ux/4-major-patterns-for-accessible-drag-and-drop-1d43f64ebf09)
+
+## Underlying implementation
+
+There are two main ways how to implement drag and drop:
+
+* [HTML5 drag and drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API). The HTML5 API is [wildy incosistent](https://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html) and very limited in terms of styling, transitions or touch support (non-existent).
+* Manually using `mousedown`, `mousemove` and `mouseup` JS events (and related touch events)
+
+There are a few existing popular solutions in the React ecosystem:
+
+* [react-dnd](https://github.com/react-dnd/react-dnd) - Lower-level API abstracting incosistencies of HTML5 API. **Good**: Nice API, documentation, types, tests, very popular, no assumptions about styling. **Bad**: HTML5 API as a primary backend severly limits styling of dragged items (ghosts). No easy support for mobile (it can be done through [react-dnd-touch-backend](https://github.com/yahoo/react-dnd-touch-backend)). It's built for applications not libraries - need to expose `DragDropContextProvider`. It's a very general solution - doesn't really provide many features realated to our use-case. 20kB gzipped.
+
+* [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd) - Highly opinionated, feature-rich solution using mouseevents. **Good**: Support for mobile. Accessible. Great animations. Big community. Tests. Flow Types. Rich customization. Documentation. Great for lists. **Bad**: Meant for applications not libraries. Need of a single instance of `DragDropContext` in the application with `onDragEnd` property that controls the whole application. Can't be used with multiple instances of `baseui/dnd-list` without some heavy lifting by our consumers. Also, there's a need to specify unique IDs for the dropzones. Pretty big: 31kB gzipped.
+
+* [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc) - Focused on sortable lists (closely matches our use-case) using mouseevents. **Good**: API matches our needs. Performant, nice animations, simple API. **Bad**: Can't be easily styled with CSS in JS. A bit outdated techniques (e.g. old React context API). Hardcoded `div` wrappers. No tests. A lot of open issues / PRs. Not accessible. 6.8kB gzipped.
+
+**TLDR;** `react-beautiful-dnd` would be a great solution if the API would allow/assume library usage. There might be some future [development](https://github.com/atlassian/react-beautiful-dnd/issues/302). `react-dnd` uses HTML5 and doesn't provide any higher-level features so it would require almost all the work and some serious compromises. `react-sortable-hoc` is the closest match but a bit outdated and the inability to swap underlying components and styles is the dealbreaker.
+
+So after these considarations, I've started protyping a new library [react-movable](https://github.com/tajo/react-movable/blob/master/examples/index.tsx) that's inspired by `react-sortable-hoc` but addresses its two biggest shortcomings:
+
+* using render prop instead of HOC for easy customization of underlying components
+* ghost is a full component rendered through [React.Portal](https://reactjs.org/docs/portals.html) so it can be fully customized (compared to `react-sortable-hoc` that clones the `HTMLElement` and adds a custom className)
+
+Also, it should be tiny since we need just some features in our use-case. It's 100% dnd-list oriented. It doesn't try to solve drag-and-drop as a general problem (as `react-dnd`). It doesn't consider multiple/nested/complex lists (as `react-befautiful-dnd`).
\ No newline at end of file
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/checkbox/types.js b/src/checkbox/types.js
index 55491bf59..3d4f6139f 100644
--- a/src/checkbox/types.js
+++ b/src/checkbox/types.js
@@ -38,27 +38,47 @@ export type DefaultPropsT = {
 };
 
 export type PropsT = {
+  /** Component or String value for label of checkbox. */
   children?: React$Node,
   overrides?: OverridesT,
+  /** Check or uncheck the control. */
   checked?: boolean,
+  /** Disable the checkbox from being changed. */
   disabled?: boolean,
+  /** Marks the checkbox as required. */
   required?: boolean,
+  /** Renders checkbox in errored state. */
   isError?: boolean,
+  /** Used to get a ref to the input element. Useful for programmatically focusing the input */
   inputRef: {current: ?HTMLInputElement},
+  /** Focus the checkbox on initial render. */
   autoFocus?: boolean,
+  /** Passed to the input element type attribute */
   type?: string,
+  /** Passed to the input element name attribute */
   name?: string,
+  /** Passed to the input element value attribute */
   value?: string,
+  /** Indicates a 'half' state for the checkmark. In this case, `checked` is ignored. */
   isIndeterminate?: boolean,
+  /** How to position the label relative to the checkbox itself. */
   labelPlacement?: LabelPlacementT,
+  /** Renders UI as checkmark or toggle switch. */
   checkmarkType: StyleTypeT,
   $theme?: *,
+  /** Handler for change events on trigger element. */
   onChange?: (e: SyntheticInputEvent<HTMLInputElement>) => void,
+  /** Handler for mouseenter events on trigger element. */
   onMouseEnter: (e: SyntheticInputEvent<HTMLInputElement>) => void,
+  /** Handler for mouseleave events on trigger element. */
   onMouseLeave: (e: SyntheticInputEvent<HTMLInputElement>) => void,
+  /** Handler for mousedown events on trigger element. */
   onMouseDown: (e: SyntheticInputEvent<HTMLInputElement>) => void,
+  /** Handler for mouseup events on trigger element. */
   onMouseUp: (e: SyntheticInputEvent<HTMLInputElement>) => void,
+  /** handler for focus events on trigger element. */
   onFocus: (e: SyntheticInputEvent<HTMLInputElement>) => void,
+  /** handler for blur events on trigger element. */
   onBlur: (e: SyntheticInputEvent<HTMLInputElement>) => void,
 };
 
@@ -93,25 +113,42 @@ export type DefaultStatefulPropsT = {
 
 export type StatefulContainerPropsT = {
   overrides?: OverridesT,
+  /** Component or String value for label of checkbox. */
   children?: (*) => React$Node,
+  /** Defines the components initial state value */
   initialState?: StateT,
+  /** A state change handler. Used to override default state transitions. */
   stateReducer: StateReducerT,
+  /** Handler for change events on trigger element. */
   onChange?: (e: SyntheticInputEvent<HTMLInputElement>) => void,
+  /** Handler for mouseenter events on trigger element. */
   onMouseEnter?: (e: SyntheticInputEvent<HTMLInputElement>) => void,
+  /** Handler for mouseleave events on trigger element. */
   onMouseLeave?: (e: SyntheticInputEvent<HTMLInputElement>) => void,
+  /** Handler for focus events on trigger element. */
   onFocus?: (e: SyntheticInputEvent<HTMLInputElement>) => void,
+  /** Handler for blur events on trigger element. */
   onBlur?: (e: SyntheticInputEvent<HTMLInputElement>) => void,
+  /** Focus the checkbox on initial render. */
   autoFocus?: boolean,
 };
 
 export type StatefulCheckboxPropsT = {
   overrides?: OverridesT,
+  /** Component or String value for label of checkbox. */
   children?: React$Node,
+  /** Defines the components initial state value */
   initialState?: StateT,
+  /** Focus the checkbox on initial render. */
   autoFocus?: boolean,
+  /** Handler for change events on trigger element. */
   onChange?: (e: SyntheticInputEvent<HTMLInputElement>) => void,
+  /** Handler for mouseenter events on trigger element. */
   onMouseEnter?: (e: SyntheticInputEvent<HTMLInputElement>) => void,
+  /** Handler for mouseleave events on trigger element. */
   onMouseLeave?: (e: SyntheticInputEvent<HTMLInputElement>) => void,
+  /** Handler for focus events on trigger element. */
   onFocus?: (e: SyntheticInputEvent<HTMLInputElement>) => void,
+  /** Handler for blur events on trigger element. */
   onBlur?: (e: SyntheticInputEvent<HTMLInputElement>) => void,
 };
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/styled-components.js b/src/select/styled-components.js
index d78e91c5c..294bc74a2 100644
--- a/src/select/styled-components.js
+++ b/src/select/styled-components.js
@@ -369,7 +369,6 @@ export const StyledSearchIcon = styled('svg', (props: SharedStylePropsT) => {
     left: sizing.scale500,
     display: 'inline-block',
     height: '100%',
-    zIndex: 1,
   };
 });
 StyledSearchIcon.displayName = 'StyledSearchIcon';
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/styles/types.js b/src/styles/types.js
index f4af6aa87..4920dd879 100644
--- a/src/styles/types.js
+++ b/src/styles/types.js
@@ -206,9 +206,9 @@ export type TypographyT = {
 
 export type Font = {
   fontFamily: string,
-  fontWeight: string,
+  fontWeight: string | number,
   fontSize: string,
-  lineHeight: string,
+  lineHeight: string | number,
 };
 
 export type SizingT = {
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);
   });
 });
diff --git a/src/select/__tests__/__snapshots__/styled-components.test.js.snap b/src/select/__tests__/__snapshots__/styled-components.test.js.snap
index 7443cbfd4..894d54a9c 100644
--- a/src/select/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/select/__tests__/__snapshots__/styled-components.test.js.snap
@@ -522,7 +522,6 @@ Object {
   "left": "$theme.sizing.scale500",
   "position": "absolute",
   "width": "$theme.sizing.scale600",
-  "zIndex": 1,
 }
 `;
 
@@ -536,7 +535,6 @@ Object {
   "left": "$theme.sizing.scale500",
   "position": "absolute",
   "width": "$theme.sizing.scale600",
-  "zIndex": 1,
 }
 `;
 
@@ -550,7 +548,6 @@ Object {
   "left": "$theme.sizing.scale500",
   "position": "absolute",
   "width": "$theme.sizing.scale600",
-  "zIndex": 1,
 }
 `;
 
@@ -564,7 +561,6 @@ Object {
   "left": "$theme.sizing.scale500",
   "position": "absolute",
   "width": "$theme.sizing.scale600",
-  "zIndex": 1,
 }
 `;