Repository: uber-web/baseui
Pull request #520 (2018-11-17 00:12:24)

feat(select): rethink select component implementation

baseui-probot-app-workflow[bot]: Found TODOs without GitHub issues:
https://github.com/uber-web/baseui/blob/af211688f5da456a1c01d01f4a71587072931cf3/src/select/select-new.js#L215
https://github.com/uber-web/baseui/blob/af211688f5da456a1c01d01f4a71587072931cf3/src/select/select-new.js#L738
baseui-probot-app-workflow[bot]: Found TODOs without GitHub issues:
https://github.com/uber-web/baseui/blob/20243e71139dbecfbe50f5e22316957727d3c1e8/src/select/select-new.js#L215
https://github.com/uber-web/baseui/blob/20243e71139dbecfbe50f5e22316957727d3c1e8/src/select/select-new.js#L738
baseui-probot-app-workflow[bot]: Found TODOs without GitHub issues:
https://github.com/uber-web/baseui/blob/9aaa674b099733a636afc78d7d69d8bf29d1c855/src/select/dropdown.js#L73
https://github.com/uber-web/baseui/blob/9aaa674b099733a636afc78d7d69d8bf29d1c855/src/select/dropdown.js#L105
baseui-probot-app-workflow[bot]: Found TODOs without GitHub issues:
https://github.com/uber-web/baseui/blob/47cde751c7fae30922c616b6c7f068e83a90dfcb/src/select/dropdown.js#L73
https://github.com/uber-web/baseui/blob/47cde751c7fae30922c616b6c7f068e83a90dfcb/src/select/dropdown.js#L105
baseui-probot-app-workflow[bot]: Found TODOs without GitHub issues:
https://github.com/uber-web/baseui/blob/517e1d60ee41cb8cdf128c2aa31e4bf71bbcfa6b/src/select/dropdown.js#L73
https://github.com/uber-web/baseui/blob/517e1d60ee41cb8cdf128c2aa31e4bf71bbcfa6b/src/select/dropdown.js#L105
schnerd: Left a few minor comments. Behavior in storybook feels much smoother, nice work there!
baseui-probot-app-workflow[bot]: Found TODOs without GitHub issues:
https://github.com/uber-web/baseui/blob/33222c0588bc5b1e145bff157e287e6070f7d493/src/select/dropdown.js#L73
https://github.com/uber-web/baseui/blob/33222c0588bc5b1e145bff157e287e6070f7d493/src/select/dropdown.js#L104
baseui-probot-app-workflow[bot]: Found TODOs without GitHub issues:
https://github.com/uber-web/baseui/blob/b377896db5f1f506f0126b943896d16200320475/src/select/dropdown.js#L77
https://github.com/uber-web/baseui/blob/b377896db5f1f506f0126b943896d16200320475/src/select/dropdown.js#L108
baseui-probot-app-workflow[bot]: Found TODOs without GitHub issues:
https://github.com/uber-web/baseui/blob/882db4d8f2a4a8dfff74d5aabb3cc41a987ba534/src/select/dropdown.js#L77
https://github.com/uber-web/baseui/blob/882db4d8f2a4a8dfff74d5aabb3cc41a987ba534/src/select/dropdown.js#L108
baseui-probot-app-workflow[bot]: Found TODOs without GitHub issues:
https://github.com/uber-web/baseui/blob/ec038443e7e95d147ee148346291ac145353ec09/src/select/dropdown.js#L77
baseui-probot-app-workflow[bot]: Found TODOs without GitHub issues:
https://github.com/uber-web/baseui/blob/88ba2000dd7823f23ac5a39f848afc68e272cafa/src/select/dropdown.js#L77

Patch:
diff --git a/.eslintrc.js b/.eslintrc.js
index 17513b7f2..da8369003 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -21,6 +21,7 @@ module.exports = {
     'flowtype/require-valid-file-annotation': ['error', 'always'],
     'flowtype/no-weak-types': ['error'],
     'react/jsx-filename-extension': 0,
+    'react/prop-types': 0,
     // Enforces imports of external modules to be declared in the package.json
     'import/no-extraneous-dependencies': [
       'error',
diff --git a/docs/migrations/00520.md b/docs/migrations/00520.md
new file mode 100644
index 000000000..0be9a9984
--- /dev/null
+++ b/docs/migrations/00520.md
@@ -0,0 +1,134 @@
+## Select
+
+#### Styled component exports changed
+
+```diff
+- import {
+-   StyledDropDown
+-   StyledHint
+-   StyledLabel
+-   StyledOption
+-   StyledSelectInput
+-   StyledSelectSpinner
+- } from 'baseui/select';
++  import {
++   StyledRoot,
++   StyledControlContainer,
++   StyledValueContainer,
++   StyledPlaceholder,
++   StyledSingleValue,
++   StyledInputContainer,
++   StyledInput,
++   StyledInputSizer,
++   StyledSelectArrow,
++   StyledClearIcon,
++   StyledSearchIcon,
++   StyledOptionContent,
++ } from 'baseui/select';
+```
+
+#### Removed `ICON` and `OPTIONS` from exports
+
+```diff
+- `import {ICON, OPTIONS} from 'baseui/select';`
+```
+
+#### `STATE_CHANGE_TYPE` changed to have `{select: string, remove: string, clear: string}` type
+
+```diff
+- `STATE_CHANGE_TYPE.unselect`
++ `STATE_CHANGE_TYPE.remove`
+```
+
+#### Use `value` prop instead of `selectedOptions`
+
+```diff
+-  <Select selectedOptions=[{id: 'someId', label: 'Some label'}] />
++  <Select value=[{id: 'someId', label: 'Some label'}] />
+```
+
+```diff
+-  <StatefulSelect initialState={{selectedOptions: [{id: 'id'}]}} />
++  <StatefulSelect initialState={{value: [{id: 'someId', label: 'Some label'}] />
+```
+
+#### Use `multi` prop instead of `multiple`
+
+```diff
+-  <StatefulSelect multiple={true} />
++  <StatefulSelect multi={true} />
+```
+
+#### Use an `array` instead of a `func(query?: string) => Promise<Array<Object>>` type as a value of the `options` prop
+
+```diff
+- const options = textQuery => {
+-   return new Promise(resolve => {
+-     if (!textQuery) {
+-       resolve([{id: 'someId', label: 'Some label'}])
+-     } else {
+-         fetch(url).then((resp) => resp.json()).then(resolve);
+-     }
+-   });
+- };
+-  <StatefulSelect options={options} />
++  <StatefulSelect options=[{id: 'someId', label: 'Some label'}] />
+```
+
+#### Use `getValueLabel: ({option: {}}) => React.Node` prop instead of `getSelectedOptionLabel: (option: Object) => React$Node`
+
+```diff
+-  <StatefulSelect getSelectedOptionLabel={(option) => option.label} />
++  <StatefulSelect getValueLabel={({option}) => option.label} />
+```
+
+#### Renamed `onTextInputChange` prop to `onInputChange`
+
+```diff
+-  <StatefulSelect onTextInputChange={e => {}} />
++  <StatefulSelect onInputChange={e => {}}/>
+```
+
+#### Changed `getOptionLabel` signature to `({option: {}) => React.Node`
+
+```diff
+-  <StatefulSelect getOptionLabel={(option) => option.label} />
++  <StatefulSelect getOptionLabel={({option}) => option.label} />
+```
+
+#### Changed `onChange` handler signature to `({value: Array<Object>, option: ?Object, type: $Keys<typeof STATE_CHANGE_TYPE>}) => {}`
+
+```diff
+-  <StatefulSelect onChange={({selectedOptions}) => {} />
++  <StatefulSelect onChange={({value}) => {} />
+```
+
+#### Removed `filterable` and `filterOption` props and introduces new `filterOptions: (options: Array<{}>, filterValue: string, excludeOptions: Array<{}>) => options: Array<{}>` and `filterOutSelected: boolean`
+
+```diff
+-  <StatefulSelect filterable={true} filterOption={(option) => false} />
++  <StatefulSelect filterOutSelected={false} />
+```
+
+#### Removed `tabindex` prop
+
+```diff
+-  <StatefulSelect tabindex={1} />
++  <StatefulSelect />
+```
+
+#### Removed `onMouseEnter` and `onMouseLeave` props
+
+```diff
+-  <StatefulSelect onMouseEnter={() => {}} onMouseLeave={() => {}} />
++  <StatefulSelect />
+```
+
+#### Overrides signature changed
+
+```diff
+-  `overrides: {Root, Input, SelectionContainer, Tag, SelectComponentIcon, SelectSpinner, DropDown, Option}`
++  `overrides: {Root, ControlContainer, Placeholder, ValueContainer, SingleValue, MultiValue, InputContainer, Input, SelectArrow, ClearIcon, LoadingIndicator, SearchIcon, DropDown, DropDownOption, OptionContent}`
+```
+
+#### See the [Select component RFC](https://github.com/uber-web/baseui/blob/master/rfcs/select-component.md) for the detailed API and full list of added props
diff --git a/rfcs/select-component.md b/rfcs/select-component.md
index 4ba10d9af..223789b2c 100644
--- a/rfcs/select-component.md
+++ b/rfcs/select-component.md
@@ -24,7 +24,7 @@ export default () => {
     <StatefulSelect
       options={options}
       placeholder="Start typing to select a destination"
-      onChange={() => {console.log('selected value changed')}}
+      onChange={({value, option, type}) => {console.log('selected value changed')}}
     />
 };
 ```
@@ -37,89 +37,69 @@ import {
   StatefulSelect,
   Select,
   StyledRoot,
-  StyledInput,
+  StyledValueContainer,
   StyledInputContainer,
-  StyledTag,
-  StyledSelectComponentIcon,
-  StyledDropDown,
-  StyledOption,
-  StyledSelectionContainer,
-  ICON,
-  OPTIONS,
+  StyledInput,
+  StyledSingleValue,
+  StyledSelectArrow,
+  StyledOptionContent,
   TYPE,
 } from 'baseui/select';
 
 import {withStyle} from 'styletron-react';
 
-const CustomOption = withStyle(StyledOption, {
+const CustomOption = withStyle(StyledOptionContent, {
   textColor: 'red',
 });
 
 export default () => {
-  const options = textQuery => {
-    return new Promise(resolve => {
-      if (!textQuery) {
-        resolve([
-            {
-              id: '1',
-              label: {
-                text: 'First',
-                imgSrc: '1.jpg',
-              },
-            },
-            {
-              id: '2',
-              disabled: true,
-              label: {
-                text: 'Second',
-                imgSrc: '2.jpg',
-              },
-            },
-          ])
-      } else {
-          fetch(url)
-          .then((resp) => resp.json())
-          .then(resolve);
-      }
-    });
-  };
+  const options = [
+    {
+      id: '1',
+      label: {
+        text: 'First',
+        imgSrc: '1.jpg',
+      },
+    },
+    {
+      id: '2',
+      disabled: true,
+      label: {
+        text: 'Second',
+        imgSrc: '2.jpg',
+      },
+    },
+  ];
   return (
-    <React.Fragment>
-      <StatefulSelect
-        options={options}
-        initialState={{
-          selectedOptions: [
-            {
-              id: '3',
-              label: {
-                text: 'Third',
-                imgSrc: '3.jpg',
-              },
+    <StatefulSelect
+      options={options}
+      initialState={{
+        value: [
+          {
+            id: '3',
+            label: {
+              text: 'Third',
+              imgSrc: '3.jpg',
             },
-          ],
-        }}
-        getOptionLabel={option => (
-          <span>
-            <img
-              style={{
-                borderRadius: '50%',
-                height: '75px',
-              }}
-              src={option.label.imgSrc}
-            />
-            {option.label.text}
-          </span>
-        )}
-        label="Select option..."
-        placeholder="Choose one..."
-        type={TYPE.select}
-        multiple={true}
-        onChange={this.onChange}
-        overrides={{
-          Option: CustomOption,
-        }}
-      />
-    </React.Fragment>
+          },
+        ],
+      }}
+      getOptionLabel={option => (
+        <span>
+          <img
+            src={option.label.imgSrc}
+          />
+          {option.label.text}
+        </span>
+      )}
+      placeholder="Choose one..."
+      type={TYPE.search}
+      multi
+      onChange={this.onChange}
+      overrides={{
+        OptionValue: CustomOption,
+      }}
+    />
   );
 };
 ```
@@ -127,92 +107,146 @@ export default () => {
 ## Exports
 
 * `StatefulSelect`
-* `StatefulSelectContainer`
 * `Select`
-* `StyledSelectInput`
-* `StyledOption`
-* `StyledDropDown`
-* `StyledLabel`
-* `StyledHint`
-* `StyledSelectSpinner`
-
-## `Select` and `StatefulSelect` API
-
-* `type: TYPE.search | TYPE.select`:
-  type of component to be in select or search mode (with lookup input)
-* `selectedOptions: Array<Object>`:
-  Current selected options. Every option object has `id: string` and `label: string|Object`. Label is defaulted to display for selected option, otherwise see `getSelectedOptionLabel` method
-* `placeholder: ?string`:
-  Placeholder text if nothing is selected. Default is `Choose one...`
-* `options: Array<Object> | func(query?: string) => Promise<Array<Object>>`:
-  All Options in dropdown. Should be provided for Select and Search mode equally. Every option object has `id: string` and `label: string|Object`. Label is defaulted to display for option in dropdown, otherwise see `getOptionLabel` method. Optional `disabled: boolean` for option to be disabled from selection.
-  For async load of options it should be a function method, which returns Promise, resolved with new options. Function can be provided with text input `query` if it is present in component.
-  `WARNINNG:` options as a function is only for client-side calls.
-* `error: ?boolean`:
-  Whether the control should be in an error state. Default is `false`
-* `multiple: ?boolean`:
-  Sets if multiple choices are allowed in Select component. Default is `false`
-* `maxDropdownHeight: ?string`:
-    Sets max height of DropDown list. Default is `900px` or `90%`
-* `filterable?: boolean`:
-  Sets if options should be filtered when the input changes. It works only in Search mode. If your option labels aren't strings, or you need custom filtering logic, use the `filterOption` prop. Custom keyDown handler is still called if provided. Default is `false`
-* `filterOption?: (option: Object, query: String) => boolean`:
-  Custom method to filter whether an option should be displayed in the menu. Defaults to a simple lower-case string match.
-* `getOptionLabel?: (option: Object) => React$Node`:
-  Lets you control what label is rendered for the specified option. Provides all option data and `isHighlighted` property indicating if it is highlighted(but not focused) in dropdown. The default behavior returns `option.label`.
-* `getSelectedOptionLabel?: (option: Object) => React$Node`:
-  Lets you control what label is rendered for the selected option. If not specified, defaults to `getOptionLabel`.
-* `autoFocus: boolean`:
-  Make the control focused (active). Default is `false`
-* `disabled: boolean`:
-  Disable control from being changed
-* `required: boolean`:
-  Mark control as required
-* `tabindex: number`:
-  The start offset of tabindex to navigate through component. Default is `0`.
-* `overrides: {}`
-  * `DropDown: ?React.ComponentType` component to use for dropdown list
-  * `Option: ?React.ComponentType` component to use for options in dropdown list
-  * `Root: ?React.ComponentType` component to use for most top of the select component
-  * `Input: ?React.ComponentType` component for Input showing current selected value(s). See `Input` Control of this framework for reference to override it's functionality.
-  * `SelectComponentIcon: ?React.ComponentType` component for all icons appearing in Select component. It's provided `$type: ICON.loop | ICON.clearTag | ICON.clearAll | ICON.selected` to setup corresponding icon of Select component
-  * `Tag: ?React.ComponentType` component for selected options Tags shown in Input for multiple mode selection
-  * `SelectSpinner: ?React.ComponentType` component for dropdown spinner if async options are loading
-  * `SelectionContainer: ?React.ComponentType` component for the wrapper around selected options\tags
-* `onChange: func({event: SyntheticInputEvent, type, option, selectedOptions})`:
-  handler for events on trigger element when option are changing selection.  The `type` indicating which action is performed, current `Option` with `id` and `label` of selected\unselected option and `selectedOptions` array of all of selected.
-* `onTextInputChange: func`:
-  event handler for the input element
-* `onMouseEnter: func`:
-  event handler for the input element
-* `onMouseLeave: func`:
-  event handler for the input element
-* `onFocus: func`:
-  event handler for the input element
-* `onBlur: func`:
-  event handler for the input element
+* `StatefulSelectContainer`
+* `StyledRoot`
+* `StyledControlContainer`
+* `StyledValueContainer`
+* `StyledPlaceholder`
+* `StyledSingleValue`
+* `StyledInputContainer`
+* `StyledInput`
+* `StyledInputSizer`
+* `StyledSelectArrow`
+* `StyledClearIcon`
+* `StyledSearchIcon`
+* `StyledOptionContent`
+* `SIZE`
+* `TYPE`
+* `STATE_CHANGE_TYPE`
+
+## `StatefulSelect` API
+
+* All properties of the StatefulContainer except `children`
+* All properties of the `Select` except `value`
+
+## `Select` API
+
+* `autoFocus: boolean` - Optional. Defaults to `false`
+  Defines if select element is focused on the first mount
+* `backspaceRemoves: boolean` - Optional. Defaults to `true`
+  Defines if options can be removed by pressing backspace
+* `clearable: boolean` - Optional. Defaults to `true`
+  Defines if the select value can be cleared. If true a clear icon is rendered when a value is set
+* `closeOnSelect: boolean` - Optional. Defaults to `true`
+  Defines if the menu closes after a selection if made
+* `deleteRemoves: boolean` - Optional. Defaults to `true`
+  Defines if options can be removed by pressing backspace
+* `disabled: boolean` - Optional. Defaults to `false`
+  Defines if the control is disabled
+* `error: boolean` - Optional. Defaults to `false`
+  Defines if the control if in error state
+* `escapeClearsValue: boolean` - Optional. Defaults to `true`
+  Defines if the value is cleared when escape is pressed and the dropdown is closed
+* `filterOptions: (options: Array<{}>, filterValue: string, excludeOptions: Array<{}>) => options: Array<{}>` - Optional. Defaults to `filterOptions` that excludes selected options for multi select
+  A custom method to filter options to be displayed in the dropdown
+* `filterOutSelected: boolean` - Optional. Defaults to `true`
+  Defines if currently selected options are filtered out in the dropdown options
+* `getOptionLabel: ({option: {}) => React.Node` - Optional. Defaults to return a `labelKey` value
+  A custom method to get a display value for a dropdown option
+* `getValueLabel: ({option: {}}) => React.Node` - Optional. Defaults to return a `labelKey` value
+  A custom method to get a display value for a selected option
+* `isLoading: boolean` - Optional. Defaults to `false`
+  Defines if the select if in a loading (async) state
+* `labelKey: string` - Optional. Defaults to `'label'`
+  Defines an option key for a default label value
+* `maxDropdownHeight: string` - Optional. Defaults to `900px`
+  Sets max height of the dropdown list
+* `multi: boolean` - Optional. Defaults to `false`
+  Defines if multiple options can be selected
+* `noResultsMsg: React.Node` - Optional. Defaults to `'No results found'`
+  Message to be displayed if no options is found for a search query
+* `onBlur: (e) => {}` - Optional
+  onBlur event handler
+* `onBlurResetsInput: boolean` - Optional. Defaults to `true`
+  Defines if the input value is reset to an empty string when a blur event happens on the select
+* `onChange: ({value: Array<Object>, option: ?Object, type: $Keys<typeof STATE_CHANGE_TYPE>}) => {}` - Optional
+  onChange handler of the select to be called when a value is changed
+* `onFocus: (e) => {}` - Optional
+  onFocus event handler
+* `onInputChange: (e) => {}` - Optional
+  onChange handler for an underlying input element to be called when a search query value is changed
+* `onCloseResetsInput: true` - Optional. Defaults to `true`
+  Defines if the input value is reset to an empty string when dropdown is closed
+* `onSelectResetsInput: true` - Optional. Defaults to `true`
+  Defines if the input value is reset to an empty string when a selection is made
+* `onOpen: null` - Optional. Defaults to `null`
+  A function that is called when the dropdown opens
+* `onClose: null` - Optional. Defaults to `null`
+  A function that is called when the dropdown closes
+* `openOnClick: true` - Optional. Defaults to `true`
+  Defines if the dropdown opens on a click event on the select
+* `options: Array<{}>` - Optional.  Defaults to `[]`
+  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
+* `overrides: {Root, ControlContainer, Placeholder, ValueContainer, SingleValue, MultiValue, InputContainer, Input, SelectArrow, ClearIcon, LoadingIndicator, SearchIcon, DropDown, DropDownOption, OptionContent}` - Optional.
+  Overrides for presentational components. See "Presentational Components Props API" below.
+  * `[ComponentName]: ReactComponent | {props: {}, style: {}, component: ReactComponent}` - Optional
+* `placeholder: React.Node` - Optional. Defaults to `'Select...'`
+  Sets the placeholder
+* `required: boolean` - Optional. Defaults to `false`
+  Defines if the select field is required to have a selection
+* `searchable: boolean` - Optional. Defaults to `true`
+  Defines if the search functionality id enabled
+* `type: TYPE.search | TYPE.select` - Optional. Defaults to `TYPE.select`
+  Defines type of the component to be in select or search mode. When set to `TYPE.search` the searh icon if rendered on the left and the select arrow icon is not rendered.
+* `value: Array<{}>` - Optional. Defaults to `[]`
+  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
+* `valueKey: string` - Optional. Defaults to `'id'`
+  Defines an option key for a default key value
 
 ## `StatefulSelectContainer` API
 
-* `initialState: {}`
-  Initial state of an uncontrolled popover component.
-  * `selectedOptions` - an initial set of selected options. They are prepended to all Options array if not found there.
-* `stateReducer: (type: text, nextState: {}, currentState: {}, e: any, params: Object) => nextState`
+* `initialState: {value: Array<{}>}` - Optional.Defaults to `{value: []}`
+  Initial state of an uncontrolled select component.
+  * `value` - an initial set of selected options.
+* `stateReducer: (type: text, nextState: {}, currentState: {}) => nextState`
   A state change handler.
   * `type` - state change type
   * `nextState` - a new state changes that will be set
   * `currentState` - current full state of the component
-  * `params` may contain `id` and `label` of selected option and `selectedOptions` array of all of selected, as well as new `textValue` set in input.
-* `children: func` should return `Select` instance with standard or customized inner elements.
-* `onChange: func({event: SyntheticInputEvent, type, option, selectedOptions})`:
-  handler for events on trigger element when option are changing selection.  The `type` indicating which action is performed, current `Option` with `id` and `label` `label` of selected\unselected option and `selectedOptions` array of all of selected.
-* `onTextInputChange: func`:
-  event handler for the input element
-* `onMouseEnter: func`:
-  event handler for the input element
-* `onMouseLeave: func`:
-  event handler for the input element
-* `onFocus: func`:
-  event handler for the input element
-* `onBlur: func`:
-  event handler for the input element
+* `children: func` - Required
+  Children function that returns `Select` instance with default or customized inner elements.
+* `onChange: ({type, option, value}) => void`:
+  handler for events on trigger element when option are changing selection.  The `type` indicating which action is performed - `STATE_CHANGE_TYPE.select | STATE_CHANGE_TYPE.remove | STATE_CHANGE_TYPE.clear`. `option` that is beeing added or removed - `Object`. And `value` is the current select value icluding/exluding the currently selected/removed option.
+
+## Presentational components API
+
+These properties are passed to every presentational (styled) component that is exported:
+
+* `$disabled: boolean`
+* `$error: boolean`
+* `$isFocused: boolean`
+* `$isLoading: boolean`
+* `$isOpen: boolean`
+* `$isPseudoFocused: boolean`
+* `$multi: boolean`
+* `$required: boolean`
+* `$searchable: boolean`
+* `$size: SIZE.default | SIZE.compact`
+* `$type: TYPE.select | TYPE.search`
+
+* `$width: string` - is passed to the `Input` element only
+
+* `$selected: boolean` - is passed to the `OptionContent` element only
+* `$isHighlighted: boolean` - is passed to the `OptionContent` element only
+
+## TYPE Constant
+
+* `select`
+* `search`
+
+## STATE_CHANGE_TYPE Constant
+
+* `select` - event type when a new option is selected
+* `remove` - event type when an previously selected option is removed
+* `clear` - event type when a select value is cleared
\ No newline at end of file
diff --git a/src/checkbox/types.js b/src/checkbox/types.js
index 8b3aeb642..eea4602ef 100644
--- a/src/checkbox/types.js
+++ b/src/checkbox/types.js
@@ -10,7 +10,7 @@ import type {OverrideT} from '../helpers/overrides';
 import {STYLE_TYPE} from './constants';
 
 export type LabelPlacementT = 'top' | 'right' | 'bottom' | 'left';
-export type StyleTypeT = $Values<typeof STYLE_TYPE>;
+export type StyleTypeT = $Keys<typeof STYLE_TYPE>;
 
 export type OverridesT = {
   Checkmark?: OverrideT<*>,
diff --git a/src/menu/option-list.js b/src/menu/option-list.js
index 79c6bffba..1df863459 100644
--- a/src/menu/option-list.js
+++ b/src/menu/option-list.js
@@ -19,6 +19,7 @@ export default function OptionList({
   getItemLabel,
   size,
   overrides,
+  $isHighlighted,
   ...restProps
 }: OptionListPropsT) {
   const [ListItem, listItemProps] = getOverrides(
@@ -27,10 +28,11 @@ export default function OptionList({
   );
   const sharedProps = {
     $size: size,
+    $isHighlighted,
   };
   return (
     <ListItem {...sharedProps} {...restProps} {...listItemProps}>
-      {getItemLabel({isHighlighted: restProps.$isHighlighted, ...item})}
+      {getItemLabel({isHighlighted: $isHighlighted, ...item})}
     </ListItem>
   );
 }
diff --git a/src/menu/styled-components.js b/src/menu/styled-components.js
index 99d728c05..0a3933024 100644
--- a/src/menu/styled-components.js
+++ b/src/menu/styled-components.js
@@ -18,9 +18,15 @@ type StyledPropsT = {
 
 export const List = styled('ul', ({$theme}: StyledPropsT) => ({
   position: 'relative',
-  margin: 0,
-  padding: 0,
-  background: $theme.colors.backgroundAlt,
+  marginTop: '0',
+  marginBottom: '0',
+  marginLeft: '0',
+  marginRight: '0',
+  paddingTop: '0',
+  paddingBottom: '0',
+  paddingLeft: '0',
+  paddingRight: '0',
+  backgroundColor: $theme.colors.backgroundAlt,
   borderRadius: $theme.borders.radius300,
   boxShadow: $theme.lighting.shadow600,
   overflow: 'auto',
@@ -36,6 +42,7 @@ export const ListItem = styled(
     display: 'block',
     color: $isHighlighted ? $theme.colors.primary : $theme.colors.foreground,
     cursor: 'pointer',
+    backgroundColor: $isHighlighted ? $theme.colors.mono300 : 'transparent',
     transitionProperty: 'color, background-color',
     transitionDuration: $theme.animation.timing100,
     transitionTimingFunction: $theme.animation.easeOutCurve,
@@ -114,17 +121,26 @@ export const ProfileLabelsContainer = styled('div', ({$theme}) => ({
 export const ProfileTitle = styled('h6', ({$theme}) => ({
   ...$theme.typography.font450,
   color: $theme.colors.foreground,
-  margin: 0,
+  marginTop: '0',
+  marginBottom: '0',
+  marginLeft: '0',
+  marginRight: '0',
 }));
 
 export const ProfileSubtitle = styled('p', ({$theme}) => ({
   ...$theme.typography.font300,
   color: $theme.colors.foreground,
-  margin: 0,
+  marginTop: '0',
+  marginBottom: '0',
+  marginLeft: '0',
+  marginRight: '0',
 }));
 
 export const ProfileBody = styled('p', ({$theme}) => ({
   ...$theme.typography.font200,
-  margin: 0,
   color: $theme.colors.foregroundAlt,
+  marginTop: '0',
+  marginBottom: '0',
+  marginLeft: '0',
+  marginRight: '0',
 }));
diff --git a/src/select/autosize-input.js b/src/select/autosize-input.js
new file mode 100644
index 000000000..1aa630d2f
--- /dev/null
+++ b/src/select/autosize-input.js
@@ -0,0 +1,80 @@
+/*
+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 {StyledInput, StyledInputSizer} from './styled-components';
+import {getOverrides} from '../helpers/overrides';
+import type {AutosizeInputPropsT, AutosizeInputStateT} from './types';
+
+export default class AutosizeInput extends React.Component<
+  AutosizeInputPropsT,
+  AutosizeInputStateT,
+> {
+  mounted: boolean;
+  sizer: ?HTMLElement;
+
+  static defaultProps = {
+    inputRef: React.createRef(),
+    value: '',
+    overrides: {},
+  };
+  state = {
+    inputWidth: 5,
+  };
+  componentDidMount() {
+    this.mounted = true;
+    this.updateInputWidth();
+  }
+  componentDidUpdate(
+    prevProps: AutosizeInputPropsT,
+    prevState: AutosizeInputStateT,
+  ) {
+    this.updateInputWidth();
+  }
+  componentWillUnmount() {
+    this.mounted = false;
+  }
+  sizerRef = (el: ?HTMLElement) => {
+    this.sizer = el;
+  };
+  updateInputWidth() {
+    if (
+      !this.mounted ||
+      !this.sizer ||
+      typeof this.sizer.scrollWidth === 'undefined'
+    ) {
+      return;
+    }
+    const newInputWidth = this.sizer.scrollWidth + 2;
+    if (newInputWidth !== this.state.inputWidth) {
+      this.setState({inputWidth: newInputWidth});
+    }
+  }
+  render() {
+    const {overrides = {}, inputRef, ...rest} = this.props;
+    const [Input, inputProps] = getOverrides(overrides.Input, StyledInput);
+    const sizerValue = [this.props.defaultValue, this.props.value, ''].reduce(
+      (previousValue, currentValue) => {
+        if (previousValue !== null && previousValue !== undefined) {
+          return previousValue;
+        }
+        return currentValue;
+      },
+    );
+    const componentInputProps = {
+      ...rest,
+      $width: `${this.state.inputWidth}px`,
+    };
+    return (
+      <React.Fragment>
+        <Input {...componentInputProps} $ref={inputRef} {...inputProps} />
+        {/* a hidden helper element to calculate the size of the input */}
+        <StyledInputSizer $ref={this.sizerRef}>{sizerValue}</StyledInputSizer>
+      </React.Fragment>
+    );
+  }
+}
diff --git a/src/select/constants.js b/src/select/constants.js
index 5e5067694..61cf43d3f 100644
--- a/src/select/constants.js
+++ b/src/select/constants.js
@@ -6,24 +6,15 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-export const OPTIONS = {
-  single: 'single',
-  multiple: 'multiple',
-};
+export {SIZE} from '../input';
 
 export const TYPE = {
   select: 'select',
   search: 'search',
 };
 
-export const ICON = {
-  clearAll: 'clear_all',
-  select: 'select',
-  selected: 'selected',
-  loop: 'loop',
-};
-
 export const STATE_CHANGE_TYPE = {
   select: 'select',
-  unselect: 'unselect',
+  remove: 'remove',
+  clear: 'clear',
 };
diff --git a/src/select/default-props.js b/src/select/default-props.js
new file mode 100644
index 000000000..9b31d7a31
--- /dev/null
+++ b/src/select/default-props.js
@@ -0,0 +1,53 @@
+/*
+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 defaultFilterOptions from './utils/default-filter-options';
+import {TYPE, SIZE} from './constants';
+
+const defaultProps = {
+  'aria-label': null,
+  'aria-describedby': null,
+  'aria-labelledby': null,
+  autoFocus: false,
+  backspaceRemoves: true,
+  clearable: true,
+  closeOnSelect: true,
+  deleteRemoves: true,
+  disabled: false,
+  error: false,
+  escapeClearsValue: true,
+  filterOptions: defaultFilterOptions,
+  filterOutSelected: true,
+  getOptionLabel: null,
+  getValueLabel: null,
+  isLoading: false,
+  labelKey: 'label',
+  maxDropdownHeight: '900px',
+  multi: false,
+  noResultsMsg: 'No results found',
+  onBlur: () => {},
+  onBlurResetsInput: true,
+  onChange: () => {},
+  onFocus: () => {},
+  onInputChange: () => {},
+  onCloseResetsInput: true,
+  onSelectResetsInput: true,
+  onOpen: null,
+  onClose: null,
+  openOnClick: true,
+  options: [],
+  overrides: {},
+  placeholder: 'Select...',
+  required: false,
+  searchable: true,
+  size: SIZE.default,
+  type: TYPE.select,
+  value: [],
+  valueKey: 'id',
+};
+
+export default defaultProps;
diff --git a/src/select/dropdown.js b/src/select/dropdown.js
index 1787baf9a..8cff2a32b 100644
--- a/src/select/dropdown.js
+++ b/src/select/dropdown.js
@@ -6,121 +6,117 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {
-  SelectComponentIcon as StyledSelectComponentIcon,
-  DropDown as StyledDropDown,
-  DropDownItem as StyledDropDownItem,
-  Option as StyledOption,
-  SelectSpinner as StyledSelectSpinner,
-} from './styled-components';
+import {StyledOptionContent} from './styled-components';
+import {StatefulMenu} from '../menu';
+import type {DropdownPropsT} from './types';
+import {getOverrides, mergeOverrides} from '../helpers/overrides';
 
-import {ICON} from './constants';
+export default class SelectDropdown extends React.Component<DropdownPropsT> {
+  getSharedProps() {
+    const {
+      error,
+      isLoading,
+      multi,
+      required,
+      size,
+      searchable,
+      type,
+    } = this.props;
+    return {
+      $error: error,
+      $isLoading: isLoading,
+      $multi: multi,
+      $required: required,
+      $searchable: searchable,
+      $size: size,
+      $type: type,
+    };
+  }
+  // eslint-disable-next-line flowtype/no-weak-types
+  getItemLabel = (option: {[string]: any}) => {
+    const {getOptionLabel, overrides = {}, value, valueKey} = this.props;
 
-import {StatefulMenu} from '../menu';
-import {Spinner} from '../spinner';
-import type {DropDownPropsT} from './types';
-import {getOverrides} from '../helpers/overrides';
+    const [OptionContent, optionContentProps] = getOverrides(
+      overrides.OptionContent,
+      StyledOptionContent,
+    );
 
-export default function SelectDropDown(props: DropDownPropsT) {
-  const {overrides = {}} = props;
-  const [SelectComponentIcon, selectComponentIconProps] = getOverrides(
-    overrides.SelectComponentIcon,
-    StyledSelectComponentIcon,
-  );
-  const [DropDown, dropDownProps] = getOverrides(
-    overrides.DropDown,
-    StyledDropDown,
-  );
-  const [DropDownItem, dropDownItemProps] = getOverrides(
-    overrides.DropDownItem,
-    StyledDropDownItem,
-  );
-  const [Option, optionProps] = getOverrides(overrides.Option, StyledOption);
-  const [SelectSpinner, selectSpinnerProps] = getOverrides(
-    overrides.SelectSpinner,
-    StyledSelectSpinner,
-  );
-  const {
-    options = [],
-    getOptionLabel,
-    isDropDownOpen,
-    optionsLoaded,
-    selectedOptions,
-    onChange,
-    onItemSelect,
-    type,
-    maxDropdownHeight,
-    multiple,
-  } = props;
-  return isDropDownOpen ? (
-    <StatefulMenu
-      getRequiredItemProps={(option, index) => {
-        return option.disabled
-          ? {
-              onClickCapture: e => e.stopPropagation(),
-            }
-          : {
-              onClick: e => onChange(e, option),
-            };
-      }}
-      overrides={{
-        List: {
-          component: DropDown,
-          style: {maxHeight: maxDropdownHeight},
-          props: {
-            role: 'listbox',
-            'aria-multiselectable': multiple,
-            $type: type,
-            $isOpen: isDropDownOpen,
-            ...dropDownProps,
-          },
-        },
-        Option: {
-          props: {
-            overrides: {
-              ListItem: {
-                component: DropDownItem,
-                props: dropDownItemProps,
+    let $selected;
+    if (Array.isArray(value)) {
+      $selected = !!value.find(
+        selected => selected && selected[valueKey] === option[valueKey],
+      );
+    } else {
+      $selected = value[valueKey] === option[valueKey];
+    }
+
+    const optionSharedProps = {
+      $selected,
+      $disabled: option.disabled,
+      $isHighlighted: option.isHighlighted,
+    };
+    return (
+      <OptionContent
+        aria-readonly={option.disabled}
+        aria-selected={$selected}
+        key={option[valueKey]}
+        {...this.getSharedProps()}
+        {...optionSharedProps}
+        {...optionContentProps}
+      >
+        {getOptionLabel({option, optionState: optionSharedProps})}
+      </OptionContent>
+    );
+  };
+
+  onMouseDown = (e: Event) => {
+    e.preventDefault();
+  };
+
+  render() {
+    // TODO(#185) Add no-results and loading states to menu
+    const {
+      maxDropdownHeight,
+      multi,
+      onItemSelect,
+      options = [],
+      overrides = {},
+      size,
+    } = this.props;
+    return (
+      <StatefulMenu
+        onItemSelect={onItemSelect}
+        items={options}
+        size={size}
+        overrides={mergeOverrides(
+          {
+            List: {
+              style: ({$theme: {sizing}}) => ({
+                maxHeight: maxDropdownHeight,
+                marginTop: sizing.scale300,
+                marginBottom: '0',
+                marginLeft: sizing.scale300,
+                marginRight: sizing.scale300,
+              }),
+              props: {
+                'aria-multiselectable': multi,
               },
             },
-            /* eslint-disable-next-line react/display-name*/
-            getItemLabel: option => {
-              const $selected = selectedOptions.find(
-                selected => selected.id === option.id,
-              );
-              return optionsLoaded ? (
-                <Option
-                  aria-readonly={option.disabled}
-                  aria-selected={!!$selected}
-                  disabled={option.disabled}
-                  $selected={$selected}
-                  key={option.id}
-                  {...optionProps}
-                >
-                  {$selected && (
-                    <SelectComponentIcon
-                      $type={ICON.selected}
-                      src={
-                        'data:image/svg+xml;utf8,<svg width="10" height="9" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6L4 9L10 1" stroke="#1B6DE0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
-                      }
-                      {...selectComponentIconProps}
-                    />
-                  )}
-                  {getOptionLabel(option)}
-                </Option>
-              ) : (
-                <SelectSpinner {...selectSpinnerProps}>
-                  <Spinner size={22} />
-                </SelectSpinner>
-              );
+            Option: {
+              props: {
+                getItemLabel: this.getItemLabel,
+                // figure out why the onClick handler is not
+                // triggered without this temporary fix
+                onMouseDown: this.onMouseDown,
+              },
             },
           },
-        },
-      }}
-      onItemSelect={onItemSelect}
-      items={optionsLoaded ? options : [{}]}
-    />
-  ) : (
-    <div />
-  );
+          {
+            List: overrides.Dropdown || {},
+            Option: overrides.DropdownOption || {},
+          },
+        )}
+      />
+    );
+  }
 }
diff --git a/src/select/examples-list.js b/src/select/examples-list.js
index a89fbc651..170bd96c1 100644
--- a/src/select/examples-list.js
+++ b/src/select/examples-list.js
@@ -9,10 +9,9 @@ LICENSE file in the root directory of this source tree.
 /* eslint-disable flowtype/require-valid-file-annotation */
 
 module.exports = {
-  SELECT: 'Select',
-  SELECT_DISABLED_OPTIONS: 'Select Disabled Options',
-  SELECT_SEARCH: 'Select Search',
-  MULTI_SELECT: 'Multi-Select',
-  MULTI_SELECT_SEARCH: 'Multi-Select Search',
-  MULTI_SELECT_CUSTOM_LABELS: 'Multi-Select Custom Labels',
+  SELECT: 'Select playground',
+  MULTI_SELECT: 'Multi select',
+  SINGLE_SELECT_SEARCH: 'Single select search',
+  MULTI_SELECT_SEARCH: 'Multi select search',
+  MULTI_SELECT_CUSTOM_LABELS: 'Multi select search with custom labels',
 };
diff --git a/src/select/examples.js b/src/select/examples.js
index 6e93179fe..086512117 100644
--- a/src/select/examples.js
+++ b/src/select/examples.js
@@ -5,164 +5,174 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-/* eslint-disable react/display-name*/
-/* eslint-disable no-console*/
-
 import * as React from 'react';
+import {action} from '@storybook/addon-actions';
+import {boolean, radios} from '@storybook/addon-knobs';
 import {StatefulSelect, TYPE} from './index';
-import {STATE_CHANGE_TYPE} from './constants';
+import {SIZE} from './constants';
+import {styled} from '../styles/index';
 import COLORS from './examples-colors';
-
-const emptyOption = {id: '', label: ''};
-
-export const suite = 'Select Test Suite';
 import tests from './examples-list';
 
-const onTextInputChange = (e: SyntheticEvent<HTMLInputElement>) => {
-  //$FlowFixMe
-  console.log('Text has changed to:' + e.target.value);
-};
+const size = (defaultValue = SIZE.default) =>
+  radios('size', {default: SIZE.default, compact: SIZE.compact}, defaultValue);
+const type = (defaultValue = TYPE.select) =>
+  radios('type', {select: TYPE.select, search: TYPE.search}, defaultValue);
+const backspaceRemoves = (defaultValue = true) =>
+  boolean('backspaceRemoves', defaultValue);
+const clearable = (defaultValue = true) => boolean('clearable', defaultValue);
+const closeOnSelect = (defaultValue = true) =>
+  boolean('closeOnSelect', defaultValue);
+const deleteRemoves = (defaultValue = true) =>
+  boolean('deleteRemoves', defaultValue);
+const disabled = (defaultValue = false) => boolean('disabled', defaultValue);
+const error = (defaultValue = false) => boolean('error', defaultValue);
+const escapeClearsValue = (defaultValue = true) =>
+  boolean('escapeClearsValue', defaultValue);
+const filterOutSelected = (defaultValue = true) =>
+  boolean('filterOutSelected', defaultValue);
+const isLoading = (defaultValue = false) => boolean('isLoading', defaultValue);
+const multi = (defaultValue = false) => boolean('multi', defaultValue);
+const onBlurResetsInput = (defaultValue = true) =>
+  boolean('onBlurResetsInput', defaultValue);
+const onCloseResetsInput = (defaultValue = true) =>
+  boolean('onCloseResetsInput', defaultValue);
+const onSelectResetsInput = (defaultValue = true) =>
+  boolean('onSelectResetsInput', defaultValue);
+const openOnClick = (defaultValue = true) =>
+  boolean('openOnClick', defaultValue);
+const required = (defaultValue = true) => boolean('required', defaultValue);
+const searchable = (defaultValue = true) => boolean('searchable', defaultValue);
 
-const onChange = ({event, type, option = emptyOption}) => {
-  if (type === STATE_CHANGE_TYPE.select) {
-    // eslint-disable-next-line no-console
-    console.log('Selected option:' + option.id);
-  }
+const onChange = (...args) => {
+  // eslint-disable-next-line no-console
+  console.log(...args);
 };
+const onChangeAction = action('select change');
+
+const CustomValueWrapper = styled('span', {
+  display: 'inline-flex',
+  alignItems: 'center',
+});
+const CustomValueColor = styled('span', ({$color}) => ({
+  display: 'inline-block',
+  borderRadius: '50%',
+  width: '10px',
+  height: '10px',
+  backgroundColor: $color,
+  marginRight: '5px',
+}));
+function CustomOptionLabel({
+  option,
+  showColor = false,
+}: {
+  // eslint-disable-next-line flowtype/no-weak-types
+  option: any,
+  showColor?: boolean,
+}) {
+  return (
+    <CustomValueWrapper>
+      {option.color ? <CustomValueColor $color={option.color} /> : null}
+      {option.id}
+      {showColor && ` (${option.color})`}
+    </CustomValueWrapper>
+  );
+}
 
-const onChangeMultiSelect = ({
-  event,
-  type,
-  option = emptyOption,
-  selectedOptions,
-}) => {
-  switch (type) {
-    case STATE_CHANGE_TYPE.select:
-      // eslint-disable-next-line no-console
-      console.log('Selected id:' + option.id);
-      break;
-    case STATE_CHANGE_TYPE.unselect:
-      // eslint-disable-next-line no-console
-      console.log('Unselected id:' + option.id);
-      break;
-  }
+const options = {
+  options: COLORS,
+  labelKey: 'id',
+  valueKey: 'color',
+  onChange: onChange,
+  placeholder: 'Choose a color',
+  maxDropdownHeight: '300px',
 };
 
+const optionsWithDisabled = [...COLORS];
+optionsWithDisabled[1] = {...optionsWithDisabled[1], disabled: true};
+
 export default {
-  [tests.SELECT]: () => {
+  [tests.SELECT]: function Story1() {
     return (
       <StatefulSelect
-        options={COLORS}
-        getOptionLabel={option => option.id}
-        rows={10}
-        placeholder="Choose a color"
-        onChange={onChange}
+        {...options}
+        {...{
+          backspaceRemoves: backspaceRemoves(),
+          clearable: clearable(),
+          closeOnSelect: closeOnSelect(),
+          deleteRemoves: deleteRemoves(),
+          disabled: disabled(),
+          error: error(),
+          escapeClearsValue: escapeClearsValue(),
+          filterOutSelected: filterOutSelected(),
+          isLoading: isLoading(),
+          multi: multi(),
+          onBlurResetsInput: onBlurResetsInput(),
+          onCloseResetsInput: onCloseResetsInput(),
+          onSelectResetsInput: onSelectResetsInput(),
+          openOnClick: openOnClick(),
+          required: required(),
+          searchable: searchable(),
+          size: size(),
+          type: type(),
+        }}
+        onChange={onChangeAction}
+        placeholder="Check out the `KNOBS` tab to toggle some props"
+        // eslint-disable-next-line jsx-a11y/no-autofocus
+        autoFocus={false}
       />
     );
   },
-  [tests.SELECT_DISABLED_OPTIONS]: () => {
+  [tests.MULTI_SELECT]: function Story2() {
     return (
       <StatefulSelect
-        options={[
-          {
-            id: 'red',
-            label: 'Red',
-          },
-          {
-            id: 'orange',
-            label: 'Orange',
-            disabled: true,
-          },
-          {
-            id: 'green',
-            label: 'Green',
-          },
-          {
-            id: 'blue',
-            label: 'Blue',
-            disabled: true,
-          },
-        ]}
-        placeholder="Choose a color"
+        {...options}
+        initialState={{
+          value: [{...COLORS[0], clearableValue: false}, COLORS[1], COLORS[3]],
+        }}
+        closeOnSelect={false}
+        clearable={false}
+        multi
         onChange={onChange}
       />
     );
   },
-  [tests.MULTI_SELECT]: () => {
+  [tests.SINGLE_SELECT_SEARCH]: function Story3() {
     return (
       <StatefulSelect
-        options={COLORS}
-        getOptionLabel={option => option.id}
-        multiple
-        initialState={{
-          selectedOptions: [COLORS[1], COLORS[3]],
-        }}
+        {...options}
+        options={optionsWithDisabled}
+        placeholder="Start searching"
+        type={TYPE.search}
         onChange={onChange}
       />
     );
   },
-  [tests.MULTI_SELECT_SEARCH]: () => {
+  [tests.MULTI_SELECT_SEARCH]: function Story4() {
     return (
       <StatefulSelect
-        type={TYPE.search}
-        options={() =>
-          new Promise(resolve => {
-            setTimeout(() => {
-              resolve(COLORS);
-            }, 1000);
-          })
-        }
-        getOptionLabel={option => option.id}
-        rows={8}
-        multiple
-        filterable
+        {...options}
         placeholder="Start searching"
-        onTextInputChange={onTextInputChange}
-        onChange={onChangeMultiSelect}
+        type={TYPE.search}
+        multi
+        onChange={onChange}
       />
     );
   },
-  [tests.MULTI_SELECT_CUSTOM_LABELS]: () => {
-    function CustomOptionLabel({
-      option,
-      showColor = false,
-    }: {
-      option: {id: string, color: string},
-      showColor?: boolean,
-    }) {
-      return (
-        <div style={{display: 'inline-flex', alignItems: 'center'}}>
-          <div
-            style={{
-              borderRadius: '100%',
-              width: '10px',
-              height: '10px',
-              backgroundColor: option.color,
-              marginRight: '5px',
-            }}
-          />
-          <div>
-            {option.id}
-            {showColor && ` (${option.color})`}
-          </div>
-        </div>
-      );
-    }
-
+  [tests.MULTI_SELECT_CUSTOM_LABELS]: function Story5() {
     return (
       <StatefulSelect
-        options={COLORS}
-        getOptionLabel={option => (
-          <CustomOptionLabel option={option} showColor />
-        )}
-        getSelectedOptionLabel={option => <CustomOptionLabel option={option} />}
+        {...options}
         initialState={{
-          selectedOptions: [COLORS[2]],
+          value: [COLORS[2]],
         }}
-        rows={8}
-        multiple
-        onTextInputChange={onTextInputChange}
-        onChange={onChangeMultiSelect}
+        type={TYPE.search}
+        multi
+        onChange={onChange}
+        getOptionLabel={({option}) => (
+          <CustomOptionLabel option={option} showColor />
+        )}
+        getValueLabel={({option}) => <CustomOptionLabel option={option} />}
       />
     );
   },
diff --git a/src/select/index.js b/src/select/index.js
index 841df0744..5bfb445c2 100644
--- a/src/select/index.js
+++ b/src/select/index.js
@@ -6,21 +6,27 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 export {default as Select} from './select';
-export {default as SelectDropDown} from './dropdown';
+export {default as SingleValue} from './value';
+export {default as MultiValue} from './multi-value';
+export {default as AutosizeInput} from './autosize-input';
+export {default as SelectDropdown} from './dropdown';
 export {default as StatefulSelect} from './stateful-select';
 export {default as StatefulSelectContainer} from './stateful-select-container';
 // Styled elements
 export {
-  Root as StyledRoot,
-  Input as StyledInput,
-  InputContainer as StyledInputContainer,
-  SingleSelection as StyledSingleSelection,
-  SelectComponentIcon as StyledSelectComponentIcon,
-  DropDown as StyledDropDown,
-  Option as StyledOption,
-  DropDownItem as StyledDropDownItem,
-  SelectSpinner as StyledSelectSpinner,
-  SelectionContainer as StyledSelectionContainer,
+  StyledRoot,
+  StyledControlContainer,
+  StyledValueContainer,
+  StyledPlaceholder,
+  StyledSingleValue,
+  StyledInputContainer,
+  StyledInput,
+  StyledInputSizer,
+  StyledSelectArrow,
+  StyledClearIcon,
+  StyledSearchIcon,
+  StyledOptionContent,
 } from './styled-components';
-export {ICON, OPTIONS, TYPE} from './constants';
+export {default as filterOptions} from './utils/default-filter-options';
+export {SIZE, TYPE, STATE_CHANGE_TYPE} from './constants';
 export * from './types';
diff --git a/src/select/multi-value.js b/src/select/multi-value.js
new file mode 100644
index 000000000..a9a15b974
--- /dev/null
+++ b/src/select/multi-value.js
@@ -0,0 +1,33 @@
+/*
+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 {getOverrides} from '../helpers/overrides';
+import {Tag} from '../tag';
+
+// eslint-disable-next-line flowtype/no-weak-types
+export default function MultiValue(props: any) {
+  const {overrides = {}, removeValue, ...rest} = props;
+  const [MultiValue, multiValueProps] = getOverrides(overrides.MultiValue, Tag);
+  return (
+    <MultiValue
+      overrides={{
+        Root: {
+          style: {
+            marginRight: '0',
+            marginBottom: '0',
+          },
+        },
+      }}
+      onActionClick={removeValue}
+      {...rest}
+      {...multiValueProps}
+    >
+      {props.children}
+    </MultiValue>
+  );
+}
diff --git a/src/select/select.js b/src/select/select.js
index 8fc611cf2..cbfae39c4 100644
--- a/src/select/select.js
+++ b/src/select/select.js
@@ -5,487 +5,821 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-/* global document */
-/* global window */
 import * as React from 'react';
-import {findDOMNode} from 'react-dom';
 import {
-  Root as StyledRoot,
-  Input as StyledInput,
-  InputContainer as StyledInputContainer,
-  SingleSelection as StyledSingleSelection,
-  SelectComponentIcon as StyledSelectComponentIcon,
-  SelectionContainer as StyledSelectionContainer,
+  StyledRoot,
+  StyledControlContainer,
+  StyledPlaceholder,
+  StyledValueContainer,
+  StyledInputContainer,
+  StyledSelectArrow,
+  StyledClearIcon,
+  getLoadingIconStyles,
+  StyledSearchIcon,
 } from './styled-components';
-
-import {Input as InputComponent} from '../input';
-import {Tag as StyledTag} from '../tag';
-import {ICON, TYPE, STATE_CHANGE_TYPE} from './constants';
-import SelectDropDown from './dropdown';
-import type {OptionT, PropsT, StatelessStateT} from './types';
+import AutosizeInput from './autosize-input';
+import Value from './value';
+import MultiValue from './multi-value';
+import SelectDropdown from './dropdown';
+import {shouldShowValue, shouldShowPlaceholder, expandValue} from './utils';
+import {TYPE, STATE_CHANGE_TYPE} from './constants';
 import {getOverrides} from '../helpers/overrides';
-import {KEY_STRINGS} from '../menu/constants';
-
-class Select extends React.Component<PropsT, StatelessStateT> {
-  static defaultProps = {
-    overrides: {},
-    selectedOptions: [],
-    options: [],
-    onTextInputChange: () => {},
-    onChange: () => {},
-    onBlur: () => {},
-    onFocus: () => {},
-    onMouseEnter: () => {},
-    onMouseLeave: () => {},
-    onMouseDown: () => {},
-    onMouseUp: () => {},
-    error: false,
-    autoFocus: false,
-    filterable: false,
-    multiple: false,
-    maxDropdownHeight: '900px',
-    tabIndex: 0,
-    textValue: '',
-    type: TYPE.select,
-  };
+import {Spinner} from '../spinner';
+import {
+  Delete as DeleteIcon,
+  TriangleDown as TriangleDownIcon,
+  Search as SearchIconComponent,
+} from '../icon';
+import defaultProps from './default-props';
+
+import type {
+  PropsT,
+  SelectStateT,
+  ValueT,
+  OptionT,
+  ChangeActionT,
+} from './types';
+
+class Select extends React.Component<PropsT, SelectStateT> {
+  static defaultProps = defaultProps;
+
+  wrapper: ?HTMLElement;
+  input: ?HTMLInputElement;
+  dragging: boolean;
+  focusAfterClear: boolean;
+  openAfterFocus: boolean;
 
   state = {
-    filteredOptions: null,
-    textValue: '',
-    isDropDownOpen: false,
-    options: [],
-    optionsLoaded: false,
+    inputValue: '',
+    isFocused: false,
+    isOpen: false,
+    isPseudoFocused: false,
   };
 
-  constructor(props: PropsT) {
-    super(props);
+  componentDidMount() {
+    if (this.props.autoFocus) {
+      this.focus();
+    }
   }
 
-  componentDidMount() {
-    if (__BROWSER__) {
-      document.addEventListener('click', this.handleClickEvent, {
-        capture: true,
-      });
+  componentDidUpdate(prevProps: PropsT, prevState: SelectStateT) {
+    if (prevState.isOpen !== this.state.isOpen) {
+      this.toggleTouchOutsideEvent(this.state.isOpen);
+      const handler = this.state.isOpen
+        ? this.props.onOpen
+        : this.props.onClose;
+      handler && handler();
     }
   }
 
   componentWillUnmount() {
+    this.toggleTouchOutsideEvent(false);
+  }
+
+  toggleTouchOutsideEvent(enabled: boolean) {
     if (__BROWSER__) {
-      document.removeEventListener('click', this.handleClickEvent, {
-        capture: true,
-      });
+      if (enabled) {
+        document.addEventListener('touchstart', this.handleTouchOutside);
+      } else {
+        document.removeEventListener('touchstart', this.handleTouchOutside);
+      }
     }
   }
 
-  handleClickEvent = (event: MouseEvent) => {
-    // eslint-disable-next-line react/no-find-dom-node
-    const el = findDOMNode(this);
-    /* eslint-disable-next-line flowtype/no-weak-types */
-    if (el && !el.contains((event.target: any))) {
-      this.setState({isDropDownOpen: false});
+  handleTouchOutside = (event: Event) => {
+    // Handle touch outside on ios to dismiss menu
+    // $FlowFixMe
+    if (this.wrapper && !this.wrapper.contains(event.target)) {
+      this.closeMenu();
     }
   };
 
-  onTextInputChange = (e: SyntheticEvent<HTMLInputElement>) => {
+  focus() {
+    if (!this.input) return;
+    this.input.focus();
+  }
+
+  handleTouchMove = () => {
+    // Set a flag that the view is being dragged
+    this.dragging = true;
+  };
+
+  handleTouchStart = () => {
+    // Set a flag that the view is not being dragged
+    this.dragging = false;
+  };
+
+  handleTouchEnd = (event: Event) => {
+    // Check if the view is being dragged. In this case
+    // we don't want to fire the click event (because the user only wants to scroll)
+    if (this.dragging) return;
+    // Fire the mouse events
+    this.handleClick(event);
+  };
+
+  handleTouchEndClearValue = (event: Event) => {
+    // Check if the view is being dragged. In this case
+    // we don't want to fire the click event (because the user only wants to scroll)
+    if (this.dragging) return;
+    // Clear the value
+    this.clearValue(event);
+  };
+
+  handleClick = (event: Event) => {
+    // If the event was triggered by a mouse click and not the primary
+    // button, or if the component is disabled, ignore it
+    if (
+      this.props.disabled ||
+      // $FlowFixMe
+      (event.type === 'click' && event.button !== 0)
+    ) {
+      return;
+    }
     // $FlowFixMe
-    const newTextValue = e.target.value;
-    this.setState({
-      textValue: newTextValue,
-    });
-    this.props.onTextInputChange(e);
-    this.openDropDown(newTextValue, () => {
-      if (this.props.filterable) {
-        let filteredOptions = this.state.options.filter(option =>
-          this.filterOption(option, newTextValue),
-        );
-        // reset filtered options for new search
-        if (!filteredOptions.length) {
-          filteredOptions = newTextValue ? [] : null;
-        }
-        this.setState({filteredOptions});
+    if (event.target.tagName === 'INPUT') {
+      if (!this.state.isFocused) {
+        this.openAfterFocus = this.props.openOnClick;
+        this.focus();
+      } else if (!this.state.isOpen) {
+        this.setState({
+          isOpen: true,
+          isPseudoFocused: false,
+        });
       }
-    });
+      return;
+    }
+    event.preventDefault();
+    // For the non-searchable select, toggle the menu
+    if (!this.props.searchable) {
+      // This code means that if a select is searchable,
+      // onClick the options menu will not appear, only on
+      // subsequent click will it open.
+      this.focus();
+      return this.setState({
+        isOpen: !this.state.isOpen,
+      });
+    }
+    if (this.state.isFocused) {
+      // On iOS, we can get into a state where we think the input is
+      // focused but it isn't really, since iOS ignores programmatic
+      // calls to input.focus() that weren't triggered by a click event.
+      // Call focus() again here to be safe.
+      this.focus();
+      let toOpen = true;
+      // clears the value so that the cursor will be at the end of input when the component re-renders
+      if (this.input) this.input.value = '';
+      if (this.focusAfterClear) {
+        toOpen = false;
+        this.focusAfterClear = false;
+      }
+      // if the input is focused, ensure the menu is open
+      this.setState({
+        isOpen: toOpen,
+        isPseudoFocused: false,
+      });
+    } else {
+      // otherwise, focus the input and open the menu
+      this.openAfterFocus = this.props.openOnClick;
+      this.focus();
+    }
   };
 
-  onClearAll = (event: SyntheticEvent<HTMLElement>) => {
-    this.props.onChange({
-      event,
-      type: STATE_CHANGE_TYPE.unselect,
-      selectedOptions: [],
-    });
+  handleClickOnArrow = (event: Event) => {
+    // if the event was triggered by a mouse click and not the primary
+    // button, or if the component is disabled, ignore it.
+    if (
+      this.props.disabled ||
+      // $FlowFixMe
+      (event.type === 'click' && event.button !== 0)
+    ) {
+      return;
+    }
+    if (this.state.isOpen) {
+      // prevent default event handlers
+      event.stopPropagation();
+      event.preventDefault();
+      this.closeMenu();
+    } else {
+      // If the menu isn't open, let the event bubble to the main handleClick
+      this.setState({
+        isOpen: true,
+      });
+    }
   };
 
-  onSelect = (
-    event: SyntheticEvent<HTMLElement> | KeyboardEvent,
-    pendingOption?: OptionT = {
-      id: '',
-      label: '',
-    },
-  ) => {
-    const {multiple, selectedOptions} = this.props;
-
-    const selected = selectedOptions.find(tag => tag.id === pendingOption.id);
-    const isSelect = !selected;
-    if (isSelect) {
-      // select
-      this.props.onChange({
-        event,
-        type: STATE_CHANGE_TYPE.select,
-        option: pendingOption,
-        selectedOptions: multiple
-          ? selectedOptions.concat([pendingOption])
-          : [pendingOption],
+  closeMenu() {
+    if (this.props.onCloseResetsInput) {
+      this.setState({
+        inputValue: '',
+        isOpen: false,
+        isPseudoFocused: this.state.isFocused && !this.props.multi,
       });
-    } else if (multiple) {
-      // unselect (only possible for multi-select)
-      this.props.onChange({
-        event,
-        type: STATE_CHANGE_TYPE.unselect,
-        option: pendingOption,
-        selectedOptions: selectedOptions.filter(
-          selectedOption => selectedOption.id !== (selected || {}).id,
-        ),
+    } else {
+      this.setState({
+        isOpen: false,
+        isPseudoFocused: this.state.isFocused && !this.props.multi,
       });
     }
+  }
+
+  handleInputFocus = (event: SyntheticEvent<HTMLElement>) => {
+    if (this.props.disabled) return;
+
+    let toOpen = this.state.isOpen || this.openAfterFocus;
+    //if focus happens after clear values, don't open dropdown yet.
+    toOpen = this.focusAfterClear ? false : toOpen;
 
-    // Always close single-select dropdown after toggling selection
-    if (this.props.type === TYPE.select && !multiple) {
-      this.setState({isDropDownOpen: false});
+    if (this.props.onFocus) {
+      this.props.onFocus(event);
     }
-  };
 
-  onRemoveTag = (
-    event: SyntheticEvent<HTMLElement> | KeyboardEvent,
-    option: OptionT,
-  ) => {
-    this.props.onChange({
-      event,
-      type: STATE_CHANGE_TYPE.unselect,
-      option,
-      selectedOptions: this.props.selectedOptions.filter(
-        selectedOption => selectedOption.id !== option.id,
-      ),
+    this.setState({
+      isFocused: true,
+      isOpen: !!toOpen,
     });
+
+    this.focusAfterClear = false;
+    this.openAfterFocus = false;
   };
 
-  loadOptions(query?: string): Promise<void> {
-    return new Promise(resolve => {
-      const {options} = this.props;
-      this.setState({optionsLoaded: false});
-      if (typeof options === 'function') {
-        options(query).then(loadedOptions => {
-          this.setState({options: loadedOptions, optionsLoaded: true}, resolve);
-        });
-      } else {
-        this.setState({options, optionsLoaded: true}, resolve);
-      }
+  handleInputBlur = (event: SyntheticEvent<HTMLElement>) => {
+    if (this.props.onBlur) {
+      this.props.onBlur(event);
+    }
+    const onBlurredState = {
+      isFocused: false,
+      isOpen: false,
+      isPseudoFocused: false,
+    };
+    if (this.props.onBlurResetsInput) {
+      // $FlowFixMe
+      onBlurredState.inputValue = '';
+    }
+    this.setState(onBlurredState);
+  };
+
+  handleInputChange = (event: SyntheticInputEvent<HTMLInputElement>) => {
+    let newInputValue = event.target.value;
+    this.setState({
+      inputValue: newInputValue,
+      isOpen: true,
+      isPseudoFocused: false,
     });
+    if (this.props.onInputChange) {
+      this.props.onInputChange(event);
+    }
+  };
+
+  handleKeyDown = (event: KeyboardEvent) => {
+    if (this.props.disabled) return;
+    switch (event.keyCode) {
+      case 8: // backspace
+        if (!this.state.inputValue && this.props.backspaceRemoves) {
+          event.preventDefault();
+          this.popValue();
+        }
+        break;
+      case 13: // enter
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.state.isOpen) {
+          this.setState({isOpen: true});
+        }
+        break;
+      case 27: // escape
+        event.preventDefault();
+        if (this.state.isOpen) {
+          this.closeMenu();
+          event.stopPropagation();
+        } else if (this.props.clearable && this.props.escapeClearsValue) {
+          this.clearValue(event);
+          event.stopPropagation();
+        }
+        break;
+      case 32: // space
+        if (this.props.searchable) {
+          break;
+        }
+        event.preventDefault();
+        if (!this.state.isOpen) {
+          this.setState({isOpen: true});
+        }
+        break;
+      case 38: // up
+        event.preventDefault();
+        if (!this.state.isOpen) {
+          this.setState({isOpen: true});
+        }
+        break;
+      case 40: // down
+        event.preventDefault();
+        if (!this.state.isOpen) {
+          this.setState({isOpen: true});
+        }
+        break;
+      case 33: // page up
+        event.preventDefault();
+        if (!this.state.isOpen) {
+          this.setState({isOpen: true});
+        }
+        break;
+      case 34: // page down
+        event.preventDefault();
+        if (!this.state.isOpen) {
+          this.setState({isOpen: true});
+        }
+        break;
+      case 35: // end key
+        if (event.shiftKey) {
+          break;
+        }
+        event.preventDefault();
+        if (!this.state.isOpen) {
+          this.setState({isOpen: true});
+        }
+        break;
+      case 36: // home key
+        if (event.shiftKey) {
+          break;
+        }
+        event.preventDefault();
+        if (!this.state.isOpen) {
+          this.setState({isOpen: true});
+        }
+        break;
+      case 46: // delete
+        if (!this.state.inputValue && this.props.deleteRemoves) {
+          event.preventDefault();
+          this.popValue();
+        }
+        break;
+    }
+  };
+
+  getOptionLabel = ({option}: {option: OptionT}): React.Node => {
+    return option[this.props.labelKey];
+  };
+
+  /**
+   * Extends the value into an array from the given options
+   */
+  getValueArray(value: ValueT): Array<OptionT> {
+    if (!Array.isArray(value)) {
+      if (value === null || value === undefined) return [];
+      value = [value];
+    }
+    return value.map(value => expandValue(value, this.props));
   }
 
-  getOptions() {
-    return this.state.filteredOptions || this.state.options || [];
+  setValue(value: ValueT, option: ?OptionT, type: ChangeActionT) {
+    if (this.props.onChange) {
+      this.props.onChange({
+        value,
+        option,
+        type,
+      });
+    }
   }
 
-  render() {
-    const {overrides = {}} = this.props;
-    const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
-    return (
-      <Root {...rootProps}>
-        {this.props.type === TYPE.search ? this.getSearch() : this.getSelect()}
-        {this.getDropDown()}
-      </Root>
+  selectValue = ({item}: {item: OptionT}) => {
+    if (item.disabled) {
+      return;
+    }
+    // NOTE: we add/set the value in a callback to make sure the
+    // input value is empty to avoid styling issues in Chrome
+    const updatedValue = this.props.onSelectResetsInput
+      ? ''
+      : this.state.inputValue;
+    if (this.props.multi) {
+      this.setState(
+        {
+          inputValue: updatedValue,
+          isOpen: !this.props.closeOnSelect,
+        },
+        () => {
+          const valueArray = this.props.value;
+          if (
+            valueArray.some(
+              i => i[this.props.valueKey] === item[this.props.valueKey],
+            )
+          ) {
+            this.removeValue(item);
+          } else {
+            this.addValue(item);
+          }
+        },
+      );
+    } else {
+      this.setState(
+        {
+          inputValue: updatedValue,
+          isOpen: !this.props.closeOnSelect,
+          isPseudoFocused: this.state.isFocused,
+        },
+        () => {
+          this.setValue([item], item, STATE_CHANGE_TYPE.select);
+        },
+      );
+    }
+  };
+
+  addValue = (item: OptionT) => {
+    const valueArray = [...this.props.value];
+    this.setValue(valueArray.concat(item), item, STATE_CHANGE_TYPE.select);
+  };
+
+  popValue = () => {
+    if (this.props.multi) {
+      const valueArray = [...this.props.value];
+      const valueLength = valueArray.length;
+      if (!valueLength) return;
+      if (valueArray[valueLength - 1].clearableValue === false) return;
+      const item = valueArray.pop();
+      this.setValue(valueArray, item, STATE_CHANGE_TYPE.remove);
+    }
+  };
+
+  removeValue = (item: OptionT) => {
+    const valueArray = [...this.props.value];
+    this.setValue(
+      valueArray.filter(
+        i => i[this.props.valueKey] !== item[this.props.valueKey],
+      ),
+      item,
+      STATE_CHANGE_TYPE.remove,
     );
-  }
+    this.focus();
+  };
 
-  getSelect() {
-    const {
-      Root: [Root, rootProps],
-      Input: [Input, inputProps],
-      SelectComponentIcon: [SelectComponentIcon, selectComponentIconProps],
-      InputContainer: [InputContainer, inputContainerProps],
-    } = this.getSubComponents();
-    const {placeholder, disabled, selectedOptions} = this.props;
-    const events = disabled
-      ? {
-          onClickCapture: e => e.stopPropagation(),
-        }
-      : {
-          onKeyDown: e => this.handledHotKeys(e),
-          onClick: () => {
-            const newValue = !this.state.isDropDownOpen;
-            newValue
-              ? this.openDropDown()
-              : this.setState({isDropDownOpen: newValue});
-          },
-        };
-    return (
-      <div tabIndex={this.props.tabIndex} {...events}>
-        <InputComponent
-          disabled={true}
-          placeholder={!selectedOptions.length ? placeholder : ''}
-          overrides={{
-            Root: {component: Root, props: rootProps},
-            Input: {
-              component: Input,
-              props: {
-                ...this.getAccessibilityProps(),
-                ...inputProps,
-              },
-            },
-            InputContainer: {
-              component: InputContainer,
-              props: inputContainerProps,
-            },
-            After: () => (
-              <SelectComponentIcon
-                $type={ICON.select}
-                src={
-                  'data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1 0 0 1 2 6.899993896484375)"><path fill-rule="nonzero" clip-rule="nonzero" d="M 20 0 L 20 3.8000030517578125 L 10 11.5 L 0 3.8000030517578125 L 0 0 L 10 7.70001220703125 L 20 0 Z" fill="currentColor"/></g></svg>'
-                }
-                {...selectComponentIconProps}
-              />
-            ),
-            Before: () => this.getMultipleSelections(),
-          }}
-        />
-      </div>
+  clearValue = (event: Event) => {
+    // if the event was triggered by a mouse click and not the primary
+    // button, ignore it.
+    // $FlowFixMe
+    if (event && event.type === 'click' && event.button !== 0) {
+      return;
+    }
+    event.preventDefault();
+    this.setValue(this.getResetValue(), null, STATE_CHANGE_TYPE.clear);
+    this.setState(
+      {
+        inputValue: '',
+        isOpen: false,
+      },
+      this.focus,
     );
+    this.focusAfterClear = true;
+  };
+
+  getResetValue(): ValueT {
+    // Clear all except not clearable values
+    return this.props.value.filter(item => {
+      return item.clearableValue === false;
+    });
   }
 
-  getSearch() {
-    const {
-      InputContainer: [InputContainer, inputContainerProps],
-      Input: [Input, inputProps],
-      SelectComponentIcon: [SelectComponentIcon, selectComponentIconProps],
-    } = this.getSubComponents();
-    const {placeholder, error, disabled} = this.props;
-    const {textValue} = this.state;
+  renderLoading() {
+    if (!this.props.isLoading) return;
+    const sharedProps = this.getSharedProps();
+    const {overrides = {}} = this.props;
+    const [LoadingIndicator, loadingIndicatorProps] = getOverrides(
+      overrides.LoadingIndicator,
+      Spinner,
+    );
     return (
-      <InputComponent
-        error={!!error}
-        placeholder={placeholder}
-        value={textValue}
-        //$FlowFixMe
-        onChange={this.onTextInputChange}
-        overrides={{
-          Input: {
-            props: {
-              ...this.getAccessibilityProps(),
-              tabIndex: this.props.tabIndex,
-              // onKeyDown happens before onChange to avoid race condition in set of value and hot keys processing
-              onKeyDown: e => this.handledHotKeys(e),
-              ...inputProps,
-            },
-            component: Input,
-          },
-          InputContainer: {
-            component: InputContainer,
-            props: inputContainerProps,
-          },
-          After: () => (
-            <SelectComponentIcon
-              $disabled={disabled}
-              onClick={this.onClearAll}
-              $type={ICON.clearAll}
-              src={
-                'data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58173 12.4183 0 8 0C3.58173 0 0 3.58173 0 8C0 12.4183 3.58173 16 8 16ZM6.03033 4.96967C5.73743 4.67679 5.26257 4.67679 4.96967 4.96967C4.67676 5.26257 4.67676 5.73743 4.96967 6.03033L6.93933 8L4.96967 9.96967C4.67676 10.2626 4.67676 10.7374 4.96967 11.0303C5.26257 11.3232 5.73743 11.3232 6.03033 11.0303L8 9.06067L9.96967 11.0303C10.2626 11.3232 10.7374 11.3232 11.0303 11.0303C11.3232 10.7374 11.3232 10.2626 11.0303 9.96967L9.06067 8L11.0303 6.03033C11.3232 5.73743 11.3232 5.26257 11.0303 4.96967C10.7374 4.67679 10.2626 4.67679 9.96967 4.96967L8 6.93933L6.03033 4.96967Z" fill="#999999"/></svg>'
-              }
-              {...selectComponentIconProps}
-            />
-          ),
-          Before: () => this.getMultipleSelections(),
-        }}
+      <LoadingIndicator
+        size={16}
+        overrides={{Svg: {style: getLoadingIconStyles}}}
+        {...sharedProps}
+        {...loadingIndicatorProps}
       />
     );
   }
 
-  getMultipleSelections() {
-    const {
-      SelectComponentIcon: [SelectComponentIcon, selectComponentIconProps],
-      Tag: [Tag, tagProps],
-      SingleSelection: [SingleSelection, singleSelectionProps],
-      SelectionContainer: [SelectionContainer, selectionContainerProps],
-    } = this.getSubComponents();
-    const {type, disabled, selectedOptions} = this.props;
-    const multiple = this.isMultiple();
-    return (
-      <SelectionContainer role="list" {...selectionContainerProps}>
-        {type === TYPE.search && (
-          <SelectComponentIcon
-            $type={ICON.loop}
-            src={
-              'data:image/svg+xml;utf8,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 9L13 13M10 5C10 7.76142 7.76142 10 5 10C2.23858 10 0 7.76142 0 5C0 2.23858 2.23858 0 5 0C7.76142 0 10 2.23858 10 5Z" transform="translate(1 1)" stroke="#1B6DE0" stroke-width="2" stroke-linecap="round"/></svg>'
-            }
-            {...selectComponentIconProps}
-          />
-        )}
-        {selectedOptions.map(
-          option =>
-            multiple ? (
-              <Tag
-                overrides={{Root: {props: {role: 'listitem'}}}}
-                disabled={disabled}
-                key={option.id}
-                onActionClick={e => {
-                  this.onRemoveTag(e, option);
-                  e.stopPropagation();
-                }}
-                {...tagProps}
-              >
-                {this.getSelectedOptionLabel(option)}
-              </Tag>
-            ) : (
-              <SingleSelection
-                role="listitem"
-                key={option.id}
-                $disabled={disabled}
-                {...singleSelectionProps}
-              >
-                {this.getSelectedOptionLabel(option)}
-              </SingleSelection>
-            ),
-        )}
-      </SelectionContainer>
+  renderValue(
+    valueArray: ValueT,
+    isOpen: boolean,
+  ): ?React.Node | Array<?React.Node> {
+    const {overrides = {}} = this.props;
+    const sharedProps = this.getSharedProps();
+    const renderLabel = this.props.getValueLabel || this.getOptionLabel;
+    const [Placeholder, placeholderProps] = getOverrides(
+      overrides.Placeholder,
+      StyledPlaceholder,
     );
+    if (!valueArray.length) {
+      const showPlaceholder = shouldShowPlaceholder(
+        this.state,
+        this.props,
+        isOpen,
+      );
+      return showPlaceholder ? (
+        <Placeholder {...sharedProps} {...placeholderProps}>
+          {this.props.placeholder}
+        </Placeholder>
+      ) : null;
+    }
+    if (this.props.multi) {
+      return valueArray.map((value, i) => {
+        const disabled =
+          sharedProps.$disabled || value.clearableValue === false;
+        return (
+          <MultiValue
+            value={value}
+            key={`value-${i}-${value[this.props.valueKey]}`}
+            removeValue={() => {
+              this.removeValue(value);
+            }}
+            disabled={disabled}
+            overrides={{MultiValue: overrides.MultiValue}}
+            {...sharedProps}
+            $disabled={disabled}
+          >
+            {renderLabel({option: value, index: i})}
+          </MultiValue>
+        );
+      });
+    } else if (shouldShowValue(this.state, this.props)) {
+      return (
+        <Value
+          value={valueArray[0]}
+          disabled={this.props.disabled}
+          overrides={{SingleValue: overrides.SingleValue}}
+          {...sharedProps}
+        >
+          {renderLabel({option: valueArray[0]})}
+        </Value>
+      );
+    }
   }
 
-  getDropDown() {
-    const {overrides, type, selectedOptions} = this.props;
-    let maxDropdownHeight = this.props.maxDropdownHeight;
-    if (
-      __BROWSER__ &&
-      maxDropdownHeight.slice(-2) === 'px' &&
-      parseInt(maxDropdownHeight) > window.innerHeight
-    ) {
-      // only for pixel-sized maxDropdownHeight
-      maxDropdownHeight = '90vh';
+  renderInput() {
+    const {overrides = {}} = this.props;
+    const [InputContainer, inputContainerProps] = getOverrides(
+      overrides.InputContainer,
+      StyledInputContainer,
+    );
+    const sharedProps = this.getSharedProps();
+    const isOpen = this.state.isOpen;
+    let value = this.state.inputValue;
+    if (value && !this.props.onSelectResetsInput && !this.state.isFocused) {
+      // It hides input value when it is not focused and was not reset on select
+      value = '';
     }
-    const options = this.getOptions();
-    const {isDropDownOpen, optionsLoaded} = this.state;
-    const dropDownProps = {
-      type,
-      maxDropdownHeight,
-      options,
-      overrides,
-      multiple: this.isMultiple(),
-      optionsLoaded,
-      isDropDownOpen,
-      selectedOptions,
-      getOptionLabel: this.getOptionLabel.bind(this),
-      onItemSelect: ({item, event}) => this.handledHotKeys(event, item),
-      onChange: this.onSelect.bind(this),
-    };
-    return <SelectDropDown {...dropDownProps} />;
-  }
 
-  getOptionLabel(option: OptionT) {
-    const {getOptionLabel} = this.props;
-    return getOptionLabel ? getOptionLabel(option) : option.label;
+    const inputProps = {
+      'aria-expanded': isOpen,
+      'aria-haspopup': isOpen,
+      'aria-label': this.props['aria-label'],
+      'aria-describedby': this.props['aria-describedby'],
+      'aria-labelledby': this.props['aria-labelledby'],
+      'aria-autocomplete': 'list',
+      inputRef: ref => (this.input = ref),
+      onBlur: this.handleInputBlur,
+      onChange: this.handleInputChange,
+      onFocus: this.handleInputFocus,
+      overrides: {Input: overrides.Input},
+      required: this.props.required,
+      role: 'combobox',
+      value,
+    };
+    if (this.props.disabled || !this.props.searchable) {
+      return (
+        <InputContainer
+          aria-expanded={isOpen}
+          aria-disabled={this.props.disabled}
+          aria-label={this.props['aria-label']}
+          aria-labelledby={this.props['aria-labelledby']}
+          onBlur={this.handleInputBlur}
+          onFocus={this.handleInputFocus}
+          $ref={ref => (this.input = ref)}
+          role="combobox"
+          tabIndex={0}
+          {...sharedProps}
+          {...inputContainerProps}
+        />
+      );
+    }
+    return (
+      <InputContainer {...sharedProps} {...inputContainerProps}>
+        <AutosizeInput {...sharedProps} {...inputProps} />
+      </InputContainer>
+    );
   }
 
-  getSelectedOptionLabel(option: OptionT) {
-    const {getSelectedOptionLabel} = this.props;
-    return getSelectedOptionLabel
-      ? getSelectedOptionLabel(option)
-      : this.getOptionLabel(option);
+  renderClear() {
+    const sharedProps = this.getSharedProps();
+    const value = this.props.value;
+    if (
+      !this.props.clearable ||
+      !value ||
+      !value.length ||
+      this.props.disabled ||
+      this.props.isLoading
+    )
+      return;
+    const {overrides = {}} = this.props;
+    const [ClearIcon, clearIconProps] = getOverrides(
+      overrides.ClearIcon,
+      DeleteIcon,
+    );
+    const ariaLabel = this.props.multi ? 'Clear all' : 'Clear value';
+    return (
+      <ClearIcon
+        size={16}
+        title={ariaLabel}
+        aria-label={ariaLabel}
+        onClick={this.clearValue}
+        onTouchEnd={this.handleTouchEndClearValue}
+        onTouchMove={this.handleTouchMove}
+        onTouchStart={this.handleTouchStart}
+        overrides={{Svg: StyledClearIcon}}
+        {...sharedProps}
+        {...clearIconProps}
+      />
+    );
   }
 
-  filterOption(option: OptionT, query: string) {
-    if (this.props.filterOption) {
-      return this.props.filterOption(option, query);
+  renderArrow() {
+    if (this.props.type !== TYPE.select) {
+      return null;
     }
-
-    const label = this.getOptionLabel(option);
+    const {overrides = {}} = this.props;
+    const [SelectArrow, selectArrowProps] = getOverrides(
+      overrides.SelectArrow,
+      TriangleDownIcon,
+    );
+    const sharedProps = this.getSharedProps();
     return (
-      typeof label === 'string' &&
-      label.toLowerCase().includes(query.toLowerCase())
+      <SelectArrow
+        size={16}
+        title={'open'}
+        onClick={this.handleClickOnArrow}
+        overrides={{Svg: StyledSelectArrow}}
+        {...sharedProps}
+        {...selectArrowProps}
+      />
     );
   }
 
-  isMultiple() {
-    const {type, multiple} = this.props;
-    return type === TYPE.search ? true : multiple;
+  renderSearch() {
+    if (this.props.type !== TYPE.search) {
+      return null;
+    }
+    const {overrides = {}} = this.props;
+    const [SearchIcon, searchIconProps] = getOverrides(
+      overrides.SearchIcon,
+      SearchIconComponent,
+    );
+    const sharedProps = this.getSharedProps();
+    return (
+      <SearchIcon
+        size={16}
+        title={'search'}
+        onClick={this.handleClickOnArrow}
+        overrides={{Svg: StyledSearchIcon}}
+        {...sharedProps}
+        {...searchIconProps}
+      />
+    );
   }
 
-  openDropDown(newTextValue?: string, callback?: () => void) {
-    this.setState({isDropDownOpen: true}, () => {
-      this.loadOptions(newTextValue).then(callback);
-    });
+  filterOptions(excludeOptions: ?ValueT) {
+    const filterValue = this.state.inputValue;
+    const options = this.props.options || [];
+    if (this.props.filterOptions) {
+      return this.props.filterOptions(options, filterValue, excludeOptions, {
+        valueKey: this.props.valueKey,
+        labelKey: this.props.labelKey,
+      });
+    } else {
+      return options;
+    }
   }
 
-  handledHotKeys(
-    e?: SyntheticEvent<HTMLElement> | KeyboardEvent,
-    option?: ?OptionT,
-  ) {
-    if (!e || !e.key) {
-      return;
-    }
-    switch (e.key) {
-      case KEY_STRINGS.ArrowDown:
-      case KEY_STRINGS.Space:
-        if (e.key === KEY_STRINGS.Space && this.props.type === TYPE.search) {
-          return;
-        }
-        if (!this.state.isDropDownOpen) {
-          this.openDropDown();
-          e.preventDefault();
-          e.stopPropagation();
-          return true;
-        }
-        return;
-      case KEY_STRINGS.Escape:
-        this.setState({isDropDownOpen: false});
-        return true;
-      case KEY_STRINGS.Enter:
-        if (option) {
-          this.onSelect(e, option);
-        }
-        return;
-      case KEY_STRINGS.Backspace:
-        if (this.isMultiple() && !this.state.textValue) {
-          const {selectedOptions} = this.props;
-          if (selectedOptions.length) {
-            this.onRemoveTag(e, selectedOptions[selectedOptions.length - 1]);
-          }
-          return true;
-        }
-        return;
+  renderMenu(options: Array<OptionT>, valueArray: ValueT) {
+    const {
+      error,
+      getOptionLabel,
+      isLoading,
+      labelKey,
+      maxDropdownHeight,
+      multi,
+      noResultsMsg,
+      overrides,
+      required,
+      searchable,
+      size,
+      type,
+      valueKey,
+    } = this.props;
+    const dropdownProps = {
+      error,
+      getOptionLabel: getOptionLabel || this.getOptionLabel,
+      isLoading,
+      labelKey,
+      maxDropdownHeight,
+      multi,
+      onItemSelect: this.selectValue,
+      options,
+      overrides,
+      required,
+      searchable,
+      size,
+      type,
+      value: valueArray,
+      valueKey,
+    };
+    if (options && options.length) {
+      return <SelectDropdown {...dropdownProps} />;
+    } else if (noResultsMsg) {
+      const noResults = {
+        [valueKey]: 'NO_RESULTS_FOUND',
+        [labelKey]: noResultsMsg,
+        disabled: true,
+      };
+      return <SelectDropdown {...dropdownProps} options={[noResults]} />;
+    } else {
+      return null;
     }
   }
 
-  getSubComponents() {
-    const {overrides = {}} = this.props;
+  getSharedProps() {
+    const {
+      disabled,
+      error,
+      isLoading,
+      multi,
+      required,
+      size,
+      searchable,
+      type,
+    } = this.props;
+    const {isOpen, isFocused, isPseudoFocused} = this.state;
     return {
-      Input: getOverrides(overrides.Input, StyledInput),
-      Tag: getOverrides(overrides.Tag, StyledTag),
-      Root: getOverrides(overrides.Root, StyledRoot),
-      SelectionContainer: getOverrides(
-        overrides.SelectionContainer,
-        StyledSelectionContainer,
-      ),
-      SelectComponentIcon: getOverrides(
-        overrides.SelectComponentIcon,
-        StyledSelectComponentIcon,
-      ),
-      SingleSelection: getOverrides(
-        overrides.SingleSelection,
-        StyledSingleSelection,
-      ),
-      InputContainer: getOverrides(
-        overrides.InputContainer,
-        StyledInputContainer,
-      ),
+      $disabled: disabled,
+      $error: error,
+      $isFocused: isFocused,
+      $isLoading: isLoading,
+      $isOpen: isOpen,
+      $isPseudoFocused: isPseudoFocused,
+      $multi: multi,
+      $required: required,
+      $searchable: searchable,
+      $size: size,
+      $type: type,
     };
   }
 
-  getAccessibilityProps() {
-    const {type} = this.props;
-    const {isDropDownOpen} = this.state;
-    return {
-      role: 'combobox',
-      'aria-autocomplete': type === TYPE.search ? 'list' : 'none',
-      'aria-expanded': isDropDownOpen,
-    };
+  render() {
+    const {overrides = {}, type, multi, value, filterOutSelected} = this.props;
+    const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
+    const [ControlContainer, controlContainerProps] = getOverrides(
+      overrides.ControlContainer,
+      StyledControlContainer,
+    );
+    const [ValueContainer, valueContainerProps] = getOverrides(
+      overrides.ValueContainer,
+      StyledValueContainer,
+    );
+    const sharedProps = this.getSharedProps();
+
+    const valueArray = this.getValueArray(value);
+    const options = this.filterOptions(
+      multi && filterOutSelected ? valueArray : null,
+    );
+    let isOpen = this.state.isOpen;
+    if (
+      multi &&
+      !options.length &&
+      valueArray.length &&
+      !this.state.inputValue
+    ) {
+      isOpen = false;
+    }
+    sharedProps.$isOpen = isOpen;
+    return (
+      <Root $ref={ref => (this.wrapper = ref)} {...sharedProps} {...rootProps}>
+        <ControlContainer
+          onKeyDown={this.handleKeyDown}
+          onClick={this.handleClick}
+          onTouchEnd={this.handleTouchEnd}
+          onTouchMove={this.handleTouchMove}
+          onTouchStart={this.handleTouchStart}
+          {...sharedProps}
+          {...controlContainerProps}
+        >
+          {type === TYPE.search ? this.renderSearch() : null}
+          <ValueContainer role="list" {...sharedProps} {...valueContainerProps}>
+            {this.renderValue(valueArray, isOpen)}
+            {this.renderInput()}
+          </ValueContainer>
+          {this.renderLoading()}
+          {this.renderClear()}
+          {type === TYPE.select ? this.renderArrow() : null}
+        </ControlContainer>
+        {isOpen ? this.renderMenu(options, valueArray) : null}
+      </Root>
+    );
   }
 }
 
diff --git a/src/select/stateful-select-container.js b/src/select/stateful-select-container.js
index db47c8aa6..363af6c21 100644
--- a/src/select/stateful-select-container.js
+++ b/src/select/stateful-select-container.js
@@ -21,89 +21,38 @@ class StatefulSelectContainer extends React.Component<
 > {
   static defaultProps = {
     initialState: {
-      selectedOptions: [],
+      value: [],
     },
-    stateReducer: defaultStateReducer,
-    onTextInputChange: () => {},
     onChange: () => {},
-    onMouseEnter: () => {},
-    onMouseLeave: () => {},
-    onFocus: () => {},
-    onBlur: () => {},
+    overrides: {},
+    stateReducer: defaultStateReducer,
   };
 
   state = {...this.props.initialState};
 
   onChange = (params: OnChangeParamsT) => {
     this.internalSetState(params);
-    const {onChange} = this.props;
-    return onChange(params);
-  };
-
-  onTextInputChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    const {onTextInputChange} = this.props;
-    onTextInputChange && onTextInputChange(e);
-  };
-
-  onMouseEnter = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    const {onMouseEnter} = this.props;
-    onMouseEnter && onMouseEnter(e);
-  };
-
-  onMouseLeave = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    const {onMouseLeave} = this.props;
-    onMouseLeave && onMouseLeave(e);
-  };
-
-  onFocus = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    const {onFocus} = this.props;
-    onFocus && onFocus(e);
-  };
-
-  onBlur = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    const {onBlur} = this.props;
-    onBlur && onBlur(e);
+    this.props.onChange(params);
   };
 
   internalSetState = (params: OnChangeParamsT) => {
-    const nextState = {
-      selectedOptions: params.selectedOptions,
-    };
     const {stateReducer} = this.props;
-    const newState = stateReducer(
-      params.type,
-      nextState,
-      this.state,
-      params.event,
-      params,
-    );
-    this.setState(newState);
+    const nextState: StateT = {value: params.value};
+    this.setState(stateReducer(params.type, nextState, this.state));
   };
 
   render() {
     const {
-      children = (childProps: {}) => null, // eslint-disable-line no-unused-vars
+      children,
       initialState, // eslint-disable-line no-unused-vars
       stateReducer, // eslint-disable-line no-unused-vars
       ...rest
     } = this.props;
-    const {
-      onChange,
-      onTextInputChange,
-      onMouseEnter,
-      onMouseLeave,
-      onFocus,
-      onBlur,
-    } = this;
+    // $FlowFixMe
     return children({
       ...rest,
       ...this.state,
-      onChange,
-      onTextInputChange,
-      onMouseEnter,
-      onMouseLeave,
-      onFocus,
-      onBlur,
+      onChange: this.onChange,
     });
   }
 }
diff --git a/src/select/stateful-select.js b/src/select/stateful-select.js
index 620f30436..56ed52060 100644
--- a/src/select/stateful-select.js
+++ b/src/select/stateful-select.js
@@ -8,6 +8,7 @@ LICENSE file in the root directory of this source tree.
 import React from 'react';
 import StatefulContainer from './stateful-select-container';
 import Select from './select';
+import defaultProps from './default-props';
 import type {PropsT, StatefulSelectPropsT} from './types';
 
 export default function StatefulSelect(props: StatefulSelectPropsT) {
@@ -17,3 +18,5 @@ export default function StatefulSelect(props: StatefulSelectPropsT) {
     </StatefulContainer>
   );
 }
+
+StatefulSelect.defaultProps = defaultProps;
diff --git a/src/select/styled-components.js b/src/select/styled-components.js
index 475c82958..bfb3a3a21 100644
--- a/src/select/styled-components.js
+++ b/src/select/styled-components.js
@@ -6,162 +6,291 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import {styled} from '../styles/index';
-import {ICON, TYPE} from './constants';
+import {TYPE} from './constants';
+import {getSvgStyles} from '../icon/styled-components';
+import {SIZE} from './constants';
+import type {SharedStylePropsT} from './types';
 
-import {SIZE} from '../input';
-import {
-  getInputStyles,
-  getInputContainerStyles,
-} from '../input/styled-components';
+function getFont(size = SIZE.default, typography) {
+  return {
+    [SIZE.default]: typography.font300,
+    [SIZE.compact]: typography.font200,
+  }[size];
+}
 
-import {
-  List as MenuList,
-  ListItem as MenuListItem,
-} from '../menu/styled-components';
+function getControlPadding(size = SIZE.default, sizing, type) {
+  return {
+    [SIZE.default]: {
+      paddingTop: sizing.scale400,
+      paddingBottom: sizing.scale400,
+      paddingLeft: type === TYPE.search ? sizing.scale1000 : sizing.scale500,
+      paddingRight: type === TYPE.select ? sizing.scale1000 : sizing.scale800,
+    },
+    [SIZE.compact]: {
+      paddingTop: sizing.scale200,
+      paddingBottom: sizing.scale200,
+      paddingLeft: type === TYPE.search ? sizing.scale1000 : sizing.scale500,
+      paddingRight: type === TYPE.select ? sizing.scale1000 : sizing.scale800,
+    },
+  }[size];
+}
 
-export const Root = styled('div', props => {
+export const StyledOptionContent = styled('div', props => {
+  const {$isHighlighted, $selected, $disabled, $theme} = props;
+  const {
+    colors: {mono700, primary400, black},
+  } = $theme;
   return {
-    position: 'relative',
+    cursor: $disabled ? 'not-allowed' : 'pointer',
+    color: $disabled
+      ? mono700
+      : $selected || $isHighlighted
+        ? primary400
+        : black,
+    fontWeight: $selected ? 'bold' : 'normal',
   };
 });
 
-export const Input = styled('input', props => {
-  const {$theme} = props;
+export const StyledRoot = styled('div', props => {
   const {
-    sizing: {scale300},
-  } = $theme;
+    $theme: {typography},
+    $size,
+  } = props;
   return {
-    ...getInputStyles({...props, $size: SIZE.default}),
-    cursor: 'pointer',
-    width: 'auto',
-    flexGrow: '1',
-    paddingTop: scale300,
-    paddingBottom: scale300,
+    ...getFont($size, typography),
+    boxSizing: 'border-box',
   };
 });
 
-export const InputContainer = styled('div', props => {
-  const {$theme, $isFocused, $error} = props;
+export const StyledControlContainer = styled('div', props => {
   const {
-    colors: {primary400, mono200, negative50},
-    sizing: {scale300},
-  } = $theme;
-
-  const border = {
-    borderColor: mono200,
+    $disabled,
+    $error,
+    $isFocused,
+    $isPseudoFocused,
+    $type,
+    $searchable,
+    $theme: {colors, sizing, animation, borders},
+  } = props;
+  return {
+    overflow: 'hidden',
+    position: 'relative',
+    color: $disabled ? colors.mono600 : colors.mono1000,
+    boxSizing: 'border-box',
+    display: 'flex',
+    width: '100%',
+    cursor: $disabled
+      ? 'not-allowed'
+      : $searchable || $type === TYPE.search
+        ? 'text'
+        : 'pointer',
+    backgroundColor: $disabled
+      ? colors.mono300
+      : $isFocused || $isPseudoFocused
+        ? colors.mono100
+        : $error
+          ? colors.negative50
+          : colors.mono200,
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: $disabled
+      ? colors.mono300
+      : $error
+        ? colors.negative400
+        : $isFocused || $isPseudoFocused
+          ? colors.primary400
+          : colors.mono200,
+    borderRadius: borders.useRoundedCorners ? sizing.scale100 : '0',
+    boxShadow: `0 2px 6px ${
+      $disabled
+        ? 'transparent'
+        : $isFocused || $isPseudoFocused
+          ? $error
+            ? colors.shadowError
+            : colors.shadowFocus
+          : 'transparent'
+    }`,
+    transitionProperty: 'border, boxShadow, backgroundColor',
+    transitionDuration: animation.timing100,
+    transitionTimingFunction: animation.easeOutCurve,
   };
+});
 
-  if ($isFocused) {
-    border.borderColor = primary400;
-  } else if ($error) {
-    border.borderColor = negative50;
-  }
+export const StyledValueContainer = styled('span', props => {
+  const {
+    $type,
+    $size,
+    $theme: {sizing},
+  } = props;
+  const padding = getControlPadding($size, sizing, $type);
+  return {
+    boxSizing: 'border-box',
+    display: 'inline-block',
+    paddingLeft: $type === TYPE.search ? padding.paddingLeft : 0,
+  };
+});
 
+export const StyledPlaceholder = styled('div', props => {
+  const {
+    $disabled,
+    $size,
+    $type,
+    $theme: {colors, sizing},
+  } = props;
   return {
-    ...getInputContainerStyles({...props, $size: SIZE.default}),
-    flexWrap: 'wrap',
-    paddingLeft: scale300,
-    paddingRight: scale300,
-    paddingTop: '0',
-    paddingBottom: '0',
+    position: 'absolute',
+    top: '0',
+    bottom: '0',
+    right: '0',
+    left: '0',
+    display: 'flex',
     alignItems: 'center',
-    position: 'relative',
-    ...border,
+    color: $disabled ? colors.mono600 : colors.mono700,
+    maxWidth: '100%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    ...getControlPadding($size, sizing, $type),
   };
 });
 
-export const SingleSelection = styled('span', props => {
-  const {$theme, $disabled} = props;
+export const StyledSingleValue = styled('div', props => {
   const {
-    colors: {mono1000},
-  } = $theme;
+    $size,
+    $type,
+    $theme: {sizing},
+  } = props;
   return {
-    ...getInputStyles({...props, $size: SIZE.default, $disabled: true}),
-    cursor: $disabled ? 'not-allowed' : 'pointer',
-    width: 'auto',
-    flexGrow: '1',
-    color: mono1000,
+    boxSizing: 'border-box',
+    position: 'absolute',
+    top: '0',
+    left: '0',
+    height: '100%',
+    whiteSpace: 'nowrap',
+    maxWidth: '100%',
+    ...getControlPadding($size, sizing, $type),
   };
 });
 
-export const SelectComponentIcon = styled('img', props => {
-  const {$theme, $disabled} = props;
+export const StyledInputContainer = styled('div', props => {
   const {
-    sizing: {scale300, scale500},
-  } = $theme;
-  switch (props.$type) {
-    case ICON.clearAll:
-      return {
-        marginLeft: 'auto',
-        cursor: $disabled ? 'not-allowed' : 'pointer',
-      };
-    case ICON.select:
-      return {
-        marginRight: scale500,
-      };
-    case ICON.selected:
-      return {
-        paddingRight: scale300,
-      };
-    case ICON.loop:
-      return {
-        paddingLeft: scale300,
-      };
-    default:
-      return {};
-  }
+    $size,
+    $type,
+    $searchable,
+    $theme: {sizing, typography},
+  } = props;
+  const padding = getControlPadding($size, sizing, $type);
+  const font = getFont($size, typography);
+  return {
+    position: 'relative',
+    display: 'inline-block',
+    maxWidth: '100%',
+    background: 'transparent',
+    border: 'none',
+    boxShadow: 'none',
+    outline: 'none',
+    marginTop: '0',
+    marginBottom: '0',
+    marginLeft: '0',
+    marginRight: '0',
+    ...padding,
+    paddingLeft: $type === TYPE.search ? '0' : padding.paddingLeft,
+    height: !$searchable ? font.lineHeight : 'auto',
+    boxSizing: 'content-box',
+  };
 });
 
-export const DropDown = styled(MenuList, ({$theme, $isOpen, $type}) => ({
-  overflowY: 'scroll',
-  display: !$isOpen ? 'none' : null,
-  top: $type === TYPE.select ? $theme.sizing.scale600 : $theme.sizing.scale1200,
-  width: `calc(100% - ${$theme.sizing.scale600})`,
-  left: $theme.sizing.scale300,
-  position: 'absolute',
-  listStyle: 'none',
-  borderRadius: $theme.sizing.scale300,
-  boxShadow: $theme.lighting.shadow600,
-}));
-
-export const DropDownItem = styled(MenuListItem, ({$theme}) => ({
-  // TODO(#185): revisit after Menu gets condensed styles
-  lineHeight: $theme.sizing.scale600,
-}));
-
-export const Option = styled('div', props => {
-  const {$selected, disabled, $theme} = props;
+export const StyledInput = styled('input', props => {
   const {
-    colors: {mono700, primary400},
-  } = $theme;
-  const padding = $selected
-    ? {
-        paddingRight: '0px',
-        paddingLeft: '0px',
-      }
-    : {
-        paddingRight: '18px',
-        paddingLeft: '18px',
-      };
+    $theme: {typography},
+    $size,
+    $disabled,
+    $searchable,
+    $width,
+  } = props;
   return {
-    ':hover': {
-      cursor: disabled ? 'not-allowed' : 'pointer',
-    },
-    color: disabled ? mono700 : $selected ? primary400 : null,
-    ...padding,
+    ...getFont($size, typography),
+    boxSizing: 'content-box',
+    width: $disabled || !$searchable ? '1px' : $width || 'auto',
+    maxWidth: '100%',
+    background: 'transparent',
+    border: 'none',
+    boxShadow: 'none',
+    display: 'inline-block',
+    outline: 'none',
+    marginTop: '0',
+    marginBottom: '0',
+    marginLeft: '0',
+    marginRight: '0',
+    paddingTop: '0',
+    paddingBottom: '0',
+    paddingLeft: '0',
+    paddingRight: '0',
   };
 });
 
-export const SelectSpinner = styled('div', () => {
+export const StyledInputSizer = styled('div', {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  visibility: 'hidden',
+  height: 0,
+  overflow: 'scroll',
+  whiteSpace: 'pre',
+});
+
+export const StyledSelectArrow = styled('svg', (props: SharedStylePropsT) => {
+  const {$theme, $disabled} = props;
+  const {colors} = $theme;
   return {
-    paddingLeft: '50%',
+    ...getSvgStyles({$theme}),
+    color: $disabled ? colors.mono600 : colors.mono800,
+    cursor: $disabled ? 'not-allowed' : 'pointer',
+    position: 'absolute',
+    right: '12px',
+    display: 'inline-block',
+    height: '100%',
   };
 });
 
-export const SelectionContainer = styled('div', props => {
+export const StyledClearIcon = styled('svg', (props: SharedStylePropsT) => {
+  const {$type, $theme} = props;
+  const {colors} = $theme;
   return {
-    lineHeight: '12px',
-    display: 'flex',
-    justifyContent: 'center',
+    ...getSvgStyles({$theme}),
+    color: colors.mono800,
+    cursor: 'pointer',
+    position: 'absolute',
+    right: $type !== 'select' ? '14px' : '30px',
+    display: 'inline-block',
+    height: '100%',
+  };
+});
+
+export const getLoadingIconStyles = (props: SharedStylePropsT) => {
+  const {$type, $theme} = props;
+  const {colors} = $theme;
+  return {
+    ...getSvgStyles({$theme}),
+    color: colors.mono800,
+    position: 'absolute',
+    right: $type !== 'select' ? '14px' : '30px',
+    display: 'inline-block',
+    height: '100%',
+  };
+};
+
+export const StyledSearchIcon = styled('svg', (props: SharedStylePropsT) => {
+  const {$disabled, $theme} = props;
+  const {colors} = $theme;
+  return {
+    ...getSvgStyles({$theme}),
+    color: $disabled ? colors.mono600 : colors.mono700,
+    cursor: $disabled ? 'not-allowed' : 'pointer',
+    position: 'absolute',
+    left: '12px',
+    display: 'inline-block',
+    height: '100%',
+    zIndex: 1,
   };
 });
diff --git a/src/select/types.js b/src/select/types.js
index 455f44110..b54f3b229 100644
--- a/src/select/types.js
+++ b/src/select/types.js
@@ -7,141 +7,179 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import type {OverrideT} from '../helpers/overrides';
-import {STATE_CHANGE_TYPE} from './constants';
+import type {ThemeT} from '../styles/types';
+import {STATE_CHANGE_TYPE, SIZE, TYPE} from './constants';
 import type {OnItemSelectFnT} from '../menu/types';
 
-export type ChangeActionT = $Values<typeof STATE_CHANGE_TYPE>;
+export type ChangeActionT = $Keys<typeof STATE_CHANGE_TYPE>;
+export type SizeT = $Keys<typeof SIZE>;
+export type TypeT = $Keys<typeof TYPE>;
 
-export type LabelT = *;
-export type OptionT = {
-  id: string,
-  label: LabelT,
+export type OptionT = $Shape<{
+  id?: string,
+  label?: React.Node,
   disabled?: boolean,
-};
+  clearableValue?: boolean,
+}>;
 
-export type ParamsT = {
-  option?: OptionT,
-  selectedOptions?: Array<OptionT>,
-  textValue?: string,
-  type: ChangeActionT,
-};
+export type ValueT = Array<OptionT>;
 
 export type OnChangeParamsT = {
-  event: SyntheticEvent<HTMLElement> | KeyboardEvent,
-  option?: OptionT,
-  selectedOptions?: Array<OptionT>,
-  textValue?: string,
+  value: ValueT,
+  option: ?OptionT,
   type: ChangeActionT,
 };
 
 export type OverridesT = {
   Root?: OverrideT<*>,
-  Input?: OverrideT<*>,
-  SelectComponentIcon?: OverrideT<*>,
+  ControlContainer?: OverrideT<*>,
+  Placeholder?: OverrideT<*>,
+  ValueContainer?: OverrideT<*>,
+  SingleValue?: OverrideT<*>,
+  MultiValue?: OverrideT<*>,
   InputContainer?: OverrideT<*>,
-  Tag?: OverrideT<*>,
-  Option?: OverrideT<*>,
-  DropDown?: OverrideT<*>,
-  SelectComponentIcon?: OverrideT<*>,
-  DropDownItem?: OverrideT<*>,
-  SingleSelection?: OverrideT<*>,
-  SelectSpinner?: OverrideT<*>,
-  SelectionContainer?: OverrideT<*>,
+  Input?: OverrideT<*>,
+  SelectArrow?: OverrideT<*>,
+  ClearIcon?: OverrideT<*>,
+  LoadingIndicator?: OverrideT<*>,
+  SearchIcon?: OverrideT<*>,
+  Dropdown?: OverrideT<*>,
+  DropdownOption?: OverrideT<*>,
+  OptionContent?: OverrideT<*>,
 };
 
-export type OverridesDropDownT = {
-  Option?: OverrideT<*>,
-  DropDown?: OverrideT<*>,
-  SelectComponentIcon?: OverrideT<*>,
-  DropDownItem?: OverrideT<*>,
-  SelectSpinner?: OverrideT<*>,
+export type OverridesDropdownT = {
+  Dropdown?: OverrideT<*>,
+  DropdownOption?: OverrideT<*>,
+  OptionContent?: OverrideT<*>,
 };
 
 export type PropsT = {
-  options: Array<OptionT> | ((query?: *) => Promise<Array<OptionT>>),
-  overrides?: OverridesT,
-  selectedOptions: Array<OptionT>,
-  tabIndex: number,
-  multiple: boolean,
-  maxDropdownHeight: string,
+  'aria-label': ?string,
+  'aria-describedby': ?string,
+  'aria-labelledby': ?string,
+  autoFocus: false,
+  backspaceRemoves: boolean,
+  clearable: boolean,
+  closeOnSelect: boolean,
+  deleteRemoves: boolean,
+  disabled: boolean,
   error: boolean,
-  autoFocus: boolean,
-  type?: string,
-  disabled?: boolean,
-  filterable: boolean,
-  filterOption?: (OptionT, string) => boolean,
-  placeholder?: string,
-  getOptionLabel?: OptionT => React$Node,
-  getSelectedOptionLabel?: OptionT => React$Node,
-  $theme?: *,
-  onTextInputChange: (e: SyntheticEvent<HTMLInputElement>) => void,
+  escapeClearsValue: boolean,
+  filterOptions: ?(
+    options: ValueT,
+    filterValue: string,
+    excludeOptions: ?ValueT,
+    {valueKey: string, labelKey: string},
+  ) => ValueT,
+  filterOutSelected: boolean,
+  getOptionLabel: ?({option: OptionT}) => React.Node,
+  getValueLabel: ?({option: OptionT}) => React.Node,
+  isLoading: boolean,
+  labelKey: string,
+  maxDropdownHeight: string,
+  multi: boolean,
+  noResultsMsg: React.Node,
+  onBlur: (e: SyntheticEvent<HTMLElement>) => void,
+  onBlurResetsInput: boolean,
   onChange: (params: OnChangeParamsT) => void,
-  onMouseEnter: (e: SyntheticEvent<HTMLInputElement>) => void,
-  onMouseLeave: (e: SyntheticEvent<HTMLInputElement>) => void,
-  onMouseDown: (e: SyntheticEvent<HTMLInputElement>) => void,
-  onMouseUp: (e: SyntheticEvent<HTMLInputElement>) => void,
-  onFocus: (e: SyntheticEvent<HTMLInputElement>) => void,
-  onBlur: (e: SyntheticEvent<HTMLInputElement>) => void,
+  onFocus: (e: SyntheticEvent<HTMLElement>) => void,
+  onInputChange: (e: SyntheticEvent<HTMLInputElement>) => void,
+  onCloseResetsInput: boolean,
+  onSelectResetsInput: boolean,
+  onOpen: ?() => void,
+  onClose: ?() => void,
+  openOnClick: boolean,
+  options: ?Array<OptionT>,
+  overrides: OverridesT,
+  placeholder: React.Node,
+  required: boolean,
+  searchable: boolean,
+  size: SizeT,
+  type: TypeT,
+  value: ValueT,
+  valueKey: string,
 };
 
-export type StatelessStateT = {
-  textValue: string,
-  isDropDownOpen: boolean,
-  filteredOptions?: ?Array<OptionT>,
-  options: Array<OptionT>,
-  optionsLoaded: boolean,
+export type SelectStateT = {
+  inputValue: string,
+  isFocused: boolean,
+  isOpen: boolean,
+  isPseudoFocused: boolean,
 };
 
 export type StateT = {
-  textValue?: string,
-  selectedOptions?: Array<OptionT>,
+  value: ValueT,
 };
 
 export type StateReducerT = (
   stateType: string,
   nextState: StateT,
   currentState: StateT,
-  event: SyntheticEvent<HTMLElement> | KeyboardEvent,
-  params: ParamsT,
 ) => StateT;
 
 export type StatefulContainerPropsT = {
-  overrides?: OverridesT,
-  children?: (*) => React$Node,
-  initialState?: StateT,
+  overrides: OverridesT,
+  children: PropsT => React$Node,
+  initialState: StateT,
   stateReducer: StateReducerT,
-  onTextInputChange: (e: SyntheticEvent<HTMLInputElement>) => void,
   onChange: (params: OnChangeParamsT) => void,
-  onMouseEnter?: (e: SyntheticEvent<HTMLInputElement>) => void,
-  onMouseLeave?: (e: SyntheticEvent<HTMLInputElement>) => void,
-  onFocus?: (e: SyntheticEvent<HTMLInputElement>) => void,
-  onBlur?: (e: SyntheticEvent<HTMLInputElement>) => void,
-  autoFocus?: boolean,
 };
 
-export type StatefulSelectPropsT = {
+export type StatefulSelectPropsT = PropsT & {
   overrides?: OverridesT,
-  options?: Array<OptionT> | ((query?: string) => Promise<Array<OptionT>>),
   initialState?: StateT,
-  autoFocus?: boolean,
-  onTextInputChange?: (e: SyntheticEvent<HTMLInputElement>) => void,
-  onChange: (params: OnChangeParamsT) => void,
-  onMouseEnter?: (e: SyntheticEvent<HTMLInputElement>) => void,
-  onMouseLeave?: (e: SyntheticEvent<HTMLInputElement>) => void,
-  onFocus?: (e: SyntheticEvent<HTMLInputElement>) => void,
-  onBlur?: (e: SyntheticEvent<HTMLInputElement>) => void,
+  stateReducer?: StateReducerT,
+  onChange?: (params: OnChangeParamsT) => void,
 };
 
-export type DropDownPropsT = {
-  overrides?: OverridesDropDownT,
-  options: Array<OptionT>,
-  selectedOptions: Array<OptionT>,
-  multiple: boolean,
-  isDropDownOpen: boolean,
-  optionsLoaded: boolean,
-  type: string,
+export type DropdownPropsT = {
+  error: boolean,
+  getOptionLabel: ({option: OptionT}) => React.Node,
+  isLoading: boolean,
+  labelKey: string,
   maxDropdownHeight: string,
-  getOptionLabel: OptionT => React$Node,
+  multi: boolean,
   onItemSelect: OnItemSelectFnT,
-  onChange: (e: SyntheticEvent<HTMLInputElement>, option: OptionT) => void,
+  options: ValueT,
+  overrides?: OverridesDropdownT,
+  required: boolean,
+  searchable: boolean,
+  size: SizeT,
+  type: TypeT,
+  value: ValueT,
+  valueKey: string,
+};
+
+export type AutosizeInputOverridesT = {
+  Input?: OverrideT<*>,
+};
+
+export type AutosizeInputPropsT = {
+  value: string,
+  defaultValue?: string,
+  inputRef: () => void,
+  overrides: AutosizeInputOverridesT,
+};
+
+export type AutosizeInputStateT = {
+  inputWidth: number,
+};
+
+export type SharedStylePropsArgT = {
+  $disabled: boolean,
+  $error: boolean,
+  $isFocused: boolean,
+  $isLoading: boolean,
+  $isOpen: boolean,
+  $isPseudoFocused: boolean,
+  $multi: boolean,
+  $required: boolean,
+  $searchable: boolean,
+  $size: SizeT,
+  $type: TypeT,
+};
+
+export type SharedStylePropsT = SharedStylePropsArgT & {
+  $theme: ThemeT,
 };
diff --git a/src/select/utils/default-filter-options.js b/src/select/utils/default-filter-options.js
new file mode 100644
index 000000000..cde9cafb4
--- /dev/null
+++ b/src/select/utils/default-filter-options.js
@@ -0,0 +1,101 @@
+/*
+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
+const trim = str => str.replace(/^\s+|\s+$/g, '');
+
+const isValid = value => {
+  return typeof value !== 'undefined' && value !== null && value !== '';
+};
+
+// eslint-disable-next-line flowtype/no-weak-types
+type OptionT = {[string]: any};
+type ValueT = Array<OptionT>;
+
+type defaultPropsT = {
+  filterOption: ?(option: OptionT, filterValue: string) => boolean,
+  ignoreCase: boolean,
+  labelKey: string,
+  matchPos: 'any' | 'start',
+  matchProp: 'any' | 'label' | 'value',
+  trimFilter: boolean,
+  valueKey: string,
+};
+
+const defaultProps: defaultPropsT = {
+  filterOption: null,
+  ignoreCase: true,
+  labelKey: 'label',
+  matchPos: 'any',
+  matchProp: 'any',
+  trimFilter: true,
+  valueKey: 'value',
+};
+
+const filterOptions = (
+  options: ValueT,
+  filterValue: string,
+  excludeOptions: ?ValueT,
+  newProps: $Shape<defaultPropsT> | typeof undefined,
+) => {
+  const props = {
+    ...defaultProps,
+    ...newProps,
+  };
+
+  if (props.ignoreCase) {
+    filterValue = filterValue.toLowerCase();
+  }
+
+  if (props.trimFilter) {
+    filterValue = trim(filterValue);
+  }
+
+  if (excludeOptions)
+    excludeOptions = excludeOptions.map(i => i[props.valueKey]);
+
+  // $FlowFixMe
+  return options.filter(option => {
+    if (excludeOptions && excludeOptions.indexOf(option[props.valueKey]) > -1)
+      return false;
+    if (props.filterOption)
+      return props.filterOption.call(undefined, option, filterValue);
+    if (!filterValue) return true;
+
+    const value = option[props.valueKey];
+    const label = option[props.labelKey];
+    const hasValue = isValid(value);
+    const hasLabel = isValid(label);
+
+    if (!hasValue && !hasLabel) {
+      return false;
+    }
+
+    let valueTest = hasValue ? String(value) : null;
+    let labelTest = hasLabel ? String(label) : null;
+
+    if (props.ignoreCase) {
+      valueTest = valueTest ? valueTest.toLowerCase() : valueTest;
+      labelTest = labelTest ? labelTest.toLowerCase() : labelTest;
+    }
+
+    return props.matchPos === 'start'
+      ? (valueTest &&
+          props.matchProp !== 'label' &&
+          valueTest.substr(0, filterValue.length) === filterValue) ||
+          (labelTest &&
+            props.matchProp !== 'value' &&
+            labelTest.substr(0, filterValue.length) === filterValue)
+      : (valueTest &&
+          props.matchProp !== 'label' &&
+          valueTest.indexOf(filterValue) >= 0) ||
+          (labelTest &&
+            props.matchProp !== 'value' &&
+            labelTest.indexOf(filterValue) >= 0);
+  });
+};
+
+export default filterOptions;
diff --git a/src/select/utils/index.js b/src/select/utils/index.js
new file mode 100644
index 000000000..14ae835aa
--- /dev/null
+++ b/src/select/utils/index.js
@@ -0,0 +1,50 @@
+/*
+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 type {PropsT, OptionT, SelectStateT} from '../types';
+
+export const shouldShowValue = (state: SelectStateT, props: $Shape<PropsT>) => {
+  const {inputValue, isPseudoFocused, isFocused} = state;
+  const {onSelectResetsInput} = props;
+  if (!inputValue) return true;
+  if (!onSelectResetsInput) {
+    return !(
+      (!isFocused && isPseudoFocused) ||
+      (isFocused && !isPseudoFocused)
+    );
+  }
+  return false;
+};
+
+export const shouldShowPlaceholder = (
+  state: SelectStateT,
+  props: $Shape<PropsT>,
+  isOpen: boolean,
+) => {
+  const {inputValue, isPseudoFocused, isFocused} = state;
+  const {onSelectResetsInput} = props;
+
+  return (
+    !inputValue ||
+    (!onSelectResetsInput && !isOpen && !isPseudoFocused && !isFocused)
+  );
+};
+
+export const expandValue = (
+  // eslint-disable-next-line flowtype/no-weak-types
+  value: OptionT,
+  props: $Shape<PropsT>,
+): OptionT => {
+  let {options, valueKey} = props;
+  if (!options) return value;
+  for (let i = 0; i < options.length; i++) {
+    if (String(options[i][valueKey]) === String(value[valueKey])) {
+      return options[i];
+    }
+  }
+  return value;
+};
diff --git a/src/select/value.js b/src/select/value.js
new file mode 100644
index 000000000..22d2bbae1
--- /dev/null
+++ b/src/select/value.js
@@ -0,0 +1,29 @@
+/*
+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 {StyledSingleValue} from './styled-components';
+import {getOverrides} from '../helpers/overrides';
+
+// eslint-disable-next-line flowtype/no-weak-types
+export default function Value(props: any) {
+  const {overrides = {}, ...rest} = props;
+  const [SingleValue, singleValueProps] = getOverrides(
+    overrides.SingleValue,
+    StyledSingleValue,
+  );
+  return (
+    <SingleValue
+      role="option"
+      aria-selected="true"
+      {...rest}
+      {...singleValueProps}
+    >
+      {props.children}
+    </SingleValue>
+  );
+}
diff --git a/src/slider/types.js b/src/slider/types.js
index 7a8ad8dc9..5cedad960 100644
--- a/src/slider/types.js
+++ b/src/slider/types.js
@@ -9,7 +9,7 @@ LICENSE file in the root directory of this source tree.
 import type {OverrideT} from '../helpers/overrides';
 import {STATE_CHANGE_TYPE} from './constants';
 import * as React from 'react';
-export type ChangeActionT = $Values<typeof STATE_CHANGE_TYPE>;
+export type ChangeActionT = $Keys<typeof STATE_CHANGE_TYPE>;
 export type ParamsT = {
   value: Array<number>,
 };
diff --git a/src/tag/styled-components.js b/src/tag/styled-components.js
index 8c50fadcf..153d2e9f2 100644
--- a/src/tag/styled-components.js
+++ b/src/tag/styled-components.js
@@ -39,7 +39,10 @@ export const Action = styled('span', props => {
   return {
     display: 'flex',
     alignItems: 'center',
-    padding: '8px',
+    paddingTop: '8px',
+    paddingBottom: '8px',
+    paddingLeft: '8px',
+    paddingRight: '8px',
     borderBottomRightRadius: $theme.borders.useRoundedCorners
       ? $theme.borders.radius400
       : '0px',
@@ -70,7 +73,10 @@ export const Root = styled('span', props => {
     display: 'inline-flex',
     height: scale800,
     fontWeight: 'bold',
-    margin: '5px',
+    marginTop: '5px',
+    marginBottom: '5px',
+    marginLeft: '5px',
+    marginRight: '5px',
     boxSizing: 'border-box',
     alignItems: 'center',
     justifyContent: 'space-between',


Test patch:
diff --git a/src/menu/__tests__/__snapshots__/styled-components.test.js.snap b/src/menu/__tests__/__snapshots__/styled-components.test.js.snap
index 410893590..179e50065 100644
--- a/src/menu/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/menu/__tests__/__snapshots__/styled-components.test.js.snap
@@ -2,12 +2,18 @@
 
 exports[`Menu Styled Components List - basic render: correct styles 1`] = `
 Object {
-  "background": "$theme.colors.backgroundAlt",
+  "backgroundColor": "$theme.colors.backgroundAlt",
   "borderRadius": "$theme.borders.radius300",
   "boxShadow": "$theme.lighting.shadow600",
-  "margin": 0,
+  "marginBottom": "0",
+  "marginLeft": "0",
+  "marginRight": "0",
+  "marginTop": "0",
   "overflow": "auto",
-  "padding": 0,
+  "paddingBottom": "0",
+  "paddingLeft": "0",
+  "paddingRight": "0",
+  "paddingTop": "0",
   "position": "relative",
 }
 `;
@@ -23,6 +29,7 @@ Object {
   ":last-child": Object {
     "marginBottom": "$theme.sizing.scale300",
   },
+  "backgroundColor": "transparent",
   "color": "$theme.colors.foreground",
   "cursor": "pointer",
   "display": "block",
@@ -52,6 +59,7 @@ Object {
   ":last-child": Object {
     "marginBottom": "$theme.sizing.scale300",
   },
+  "backgroundColor": "transparent",
   "color": "$theme.colors.foreground",
   "cursor": "pointer",
   "display": "block",
@@ -81,6 +89,7 @@ Object {
   ":last-child": Object {
     "marginBottom": "$theme.sizing.scale300",
   },
+  "backgroundColor": "$theme.colors.mono300",
   "color": "$theme.colors.primary",
   "cursor": "pointer",
   "display": "block",
@@ -131,7 +140,10 @@ Object {
   "fontSize": "$theme.typography.font200.fontSize",
   "fontWeight": "$theme.typography.font200.fontWeight",
   "lineHeight": "$theme.typography.font200.lineHeight",
-  "margin": 0,
+  "marginBottom": "0",
+  "marginLeft": "0",
+  "marginRight": "0",
+  "marginTop": "0",
 }
 `;
 
@@ -169,7 +181,10 @@ Object {
   "fontSize": "$theme.typography.font300.fontSize",
   "fontWeight": "$theme.typography.font300.fontWeight",
   "lineHeight": "$theme.typography.font300.lineHeight",
-  "margin": 0,
+  "marginBottom": "0",
+  "marginLeft": "0",
+  "marginRight": "0",
+  "marginTop": "0",
 }
 `;
 
@@ -180,6 +195,9 @@ Object {
   "fontSize": "$theme.typography.font450.fontSize",
   "fontWeight": "$theme.typography.font450.fontWeight",
   "lineHeight": "$theme.typography.font450.lineHeight",
-  "margin": 0,
+  "marginBottom": "0",
+  "marginLeft": "0",
+  "marginRight": "0",
+  "marginTop": "0",
 }
 `;
diff --git a/src/select/__tests__/__snapshots__/dropdown.test.js.snap b/src/select/__tests__/__snapshots__/dropdown.test.js.snap
index 22ba63cc3..8c2d58bc4 100644
--- a/src/select/__tests__/__snapshots__/dropdown.test.js.snap
+++ b/src/select/__tests__/__snapshots__/dropdown.test.js.snap
@@ -1,66 +1,58 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Stateless Select Dropdown should render component with options  and drondown open is true: Component has correct render with options length 0 and dropdown open is %s true 1`] = `
-<MockStyledComponent
-  getOptionLabel={[MockFunction]}
-  isDropDownOpen={true}
-  options={Array []}
-  styled-component="true"
-/>
+exports[`SelectDropdown passes correct props to OptionContent for a selected item: OptionContent gets correct props when an option is selected 1`] = `
+Object {
+  "$disabled": undefined,
+  "$error": false,
+  "$isHighlighted": undefined,
+  "$isLoading": false,
+  "$multi": false,
+  "$required": false,
+  "$searchable": true,
+  "$selected": true,
+  "$size": "default",
+  "$type": "select",
+  "aria-readonly": undefined,
+  "aria-selected": true,
+  "children": <span>
+    option.label
+  </span>,
+}
 `;
 
-exports[`Stateless Select Dropdown should render component with options [object Object],[object Object],[object Object],[object Object] and drondown open is false: Component has correct render with options length 4 and dropdown open is %s false 1`] = `
-<MockStyledComponent
-  getOptionLabel={[MockFunction]}
-  isDropDownOpen={false}
-  options={
-    Array [
-      Object {
-        "id": "1",
-        "label": "label for 1",
-      },
-      Object {
-        "id": "2",
-        "label": "label for 2",
-      },
-      Object {
-        "id": "3",
-        "label": "label for 3",
-      },
-      Object {
-        "id": "4",
-        "label": "label for 4",
-      },
-    ]
-  }
-  styled-component="true"
-/>
+exports[`SelectDropdown passes correct props to OptionContent: OptionContent gets correct props when an option is not selected 1`] = `
+Object {
+  "$disabled": undefined,
+  "$error": false,
+  "$isHighlighted": undefined,
+  "$isLoading": false,
+  "$multi": false,
+  "$required": false,
+  "$searchable": true,
+  "$selected": false,
+  "$size": "default",
+  "$type": "select",
+  "aria-readonly": undefined,
+  "aria-selected": false,
+  "children": <span>
+    option.label
+  </span>,
+}
 `;
 
-exports[`Stateless Select Dropdown should render component with options [object Object],[object Object],[object Object],[object Object] and drondown open is true: Component has correct render with options length 4 and dropdown open is %s true 1`] = `
-<MockStyledComponent
-  getOptionLabel={[MockFunction]}
-  isDropDownOpen={true}
-  options={
-    Array [
-      Object {
-        "id": "1",
-        "label": "label for 1",
-      },
-      Object {
-        "id": "2",
-        "label": "label for 2",
-      },
-      Object {
-        "id": "3",
-        "label": "label for 3",
-      },
-      Object {
-        "id": "4",
-        "label": "label for 4",
-      },
-    ]
-  }
-  styled-component="true"
-/>
+exports[`SelectDropdown renders StatefulMenu: Passes correct overrides to the StatefulMenu 1`] = `
+Object {
+  "List": Object {
+    "props": Object {
+      "aria-multiselectable": false,
+    },
+    "style": [Function],
+  },
+  "Option": Object {
+    "props": Object {
+      "getItemLabel": [Function],
+      "onMouseDown": [Function],
+    },
+  },
+}
 `;
diff --git a/src/select/__tests__/__snapshots__/multi-value.test.js.snap b/src/select/__tests__/__snapshots__/multi-value.test.js.snap
new file mode 100644
index 000000000..152f8466e
--- /dev/null
+++ b/src/select/__tests__/__snapshots__/multi-value.test.js.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Multi Value component renders MultiValue: passes corect props to an underlying component 1`] = `
+Object {
+  "children": "test",
+  "onActionClick": [MockFunction],
+  "overrides": Object {
+    "Root": Object {
+      "style": Object {
+        "marginBottom": "0",
+        "marginRight": "0",
+      },
+    },
+  },
+}
+`;
diff --git a/src/select/__tests__/__snapshots__/select.test.js.snap b/src/select/__tests__/__snapshots__/select.test.js.snap
index 99af5b52e..f9874f441 100644
--- a/src/select/__tests__/__snapshots__/select.test.js.snap
+++ b/src/select/__tests__/__snapshots__/select.test.js.snap
@@ -1,974 +1,1294 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Stateless select should render component in search mode and false for multiple choice: Component has correct render in search mode and mutiple choice equal false 1`] = `
+exports[`Select component renders component in search mode and false for multiple choice: Component has correct render in search mode and mutiple choice equals false 1`] = `
 <Select
+  aria-describedby={null}
+  aria-label={null}
+  aria-labelledby={null}
   autoFocus={false}
+  backspaceRemoves={true}
+  clearable={true}
+  closeOnSelect={true}
+  deleteRemoves={true}
+  disabled={false}
   error={false}
-  filterable={false}
+  escapeClearsValue={true}
+  filterOptions={[Function]}
+  filterOutSelected={true}
+  getOptionLabel={null}
+  getValueLabel={null}
+  isLoading={false}
+  labelKey="label"
   maxDropdownHeight="900px"
+  multi={false}
   multiple={false}
+  noResultsMsg="No results found"
   onBlur={[MockFunction]}
+  onBlurResetsInput={true}
   onChange={[MockFunction]}
+  onClose={null}
+  onCloseResetsInput={true}
   onFocus={[MockFunction]}
-  onMouseDown={[Function]}
-  onMouseEnter={[MockFunction]}
-  onMouseLeave={[MockFunction]}
-  onMouseUp={[Function]}
-  onTextInputChange={[MockFunction]}
-  options={Array []}
+  onInputChange={[MockFunction]}
+  onOpen={null}
+  onSelectResetsInput={true}
+  openOnClick={true}
+  options={
+    Array [
+      Object {
+        "id": "id1",
+        "label": "label1",
+      },
+      Object {
+        "id": "id2",
+        "label": "label2",
+      },
+      Object {
+        "id": "id3",
+        "label": "bel3",
+      },
+    ]
+  }
   overrides={Object {}}
-  selectedOptions={Array []}
-  tabIndex={0}
-  textValue=""
+  placeholder="Select..."
+  required={false}
+  searchable={true}
+  size="default"
   type="search"
+  value={Array []}
+  valueKey="id"
 >
-  <MockStyledComponent>
+  <MockStyledComponent
+    $disabled={false}
+    $error={false}
+    $isFocused={false}
+    $isLoading={false}
+    $isOpen={false}
+    $isPseudoFocused={false}
+    $multi={false}
+    $ref={[Function]}
+    $required={false}
+    $searchable={true}
+    $size="default"
+    $type="search"
+  >
     <div
       styled-component="true"
     >
-      <Input
-        autoFocus={false}
-        disabled={false}
-        endEnhancer={null}
-        error={false}
-        name=""
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        overrides={
-          Object {
-            "After": [Function],
-            "Before": [Function],
-            "Input": Object {
-              "component": [Function],
-              "props": Object {
-                "aria-autocomplete": "list",
-                "aria-expanded": false,
-                "onKeyDown": [Function],
-                "role": "combobox",
-                "tabIndex": 0,
-              },
-            },
-            "InputContainer": Object {
-              "component": [Function],
-              "props": Object {},
-            },
-          }
-        }
-        required={false}
-        size="default"
-        startEnhancer={null}
-        value=""
+      <MockStyledComponent
+        $disabled={false}
+        $error={false}
+        $isFocused={false}
+        $isLoading={false}
+        $isOpen={false}
+        $isPseudoFocused={false}
+        $multi={false}
+        $required={false}
+        $searchable={true}
+        $size="default"
+        $type="search"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
       >
-        <MockStyledComponent
-          $disabled={false}
-          $error={false}
-          $isFocused={false}
-          $required={false}
-          $size="default"
+        <div
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          styled-component="true"
         >
-          <div
-            styled-component="true"
-          >
-            <BaseInput
-              adjoined="none"
-              autoFocus={false}
-              disabled={false}
-              error={false}
-              inputRef={
-                Object {
-                  "current": null,
-                }
+          <Search
+            $disabled={false}
+            $error={false}
+            $isFocused={false}
+            $isLoading={false}
+            $isOpen={false}
+            $isPseudoFocused={false}
+            $multi={false}
+            $required={false}
+            $searchable={true}
+            $size="default"
+            $type="search"
+            onClick={[Function]}
+            overrides={
+              Object {
+                "Svg": [Function],
               }
-              name=""
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              onKeyPress={[Function]}
-              onKeyUp={[Function]}
+            }
+            size={16}
+            title="search"
+          >
+            <Icon
+              $disabled={false}
+              $error={false}
+              $isFocused={false}
+              $isLoading={false}
+              $isOpen={false}
+              $isPseudoFocused={false}
+              $multi={false}
+              $required={false}
+              $searchable={true}
+              $size="default"
+              $type="search"
+              onClick={[Function]}
               overrides={
                 Object {
-                  "After": [Function],
-                  "Before": [Function],
-                  "Input": Object {
-                    "component": [Function],
-                    "props": Object {
-                      "aria-autocomplete": "list",
-                      "aria-expanded": false,
-                      "onKeyDown": [Function],
-                      "role": "combobox",
-                      "tabIndex": 0,
-                    },
-                  },
-                  "InputContainer": Object {
-                    "component": [Function],
-                    "props": Object {},
-                  },
+                  "Svg": [Function],
                 }
               }
-              placeholder=""
-              required={false}
-              size="default"
-              type="text"
-              value=""
+              size={16}
+              title="search"
+              viewBox="0 0 24 24"
             >
               <MockStyledComponent
-                $adjoined="none"
                 $disabled={false}
                 $error={false}
                 $isFocused={false}
+                $isLoading={false}
+                $isOpen={false}
+                $isPseudoFocused={false}
+                $multi={false}
                 $required={false}
+                $searchable={true}
                 $size="default"
+                $type="search"
+                onClick={[Function]}
+                viewBox="0 0 24 24"
               >
-                <div
+                <svg
+                  onClick={[Function]}
                   styled-component="true"
+                  viewBox="0 0 24 24"
                 >
-                  <Before
-                    $adjoined="none"
-                    $disabled={false}
-                    $error={false}
-                    $isFocused={false}
-                    $required={false}
-                    $size="default"
+                  <title>
+                    search
+                  </title>
+                  <g
+                    transform="matrix( 1 0 0 1 1 0.899993896484375 )"
                   >
-                    <MockStyledComponent
-                      role="list"
-                    >
-                      <div
-                        role="list"
-                        styled-component="true"
-                      >
-                        <MockStyledComponent
-                          $type="loop"
-                          src="data:image/svg+xml;utf8,<svg width=\\"15\\" height=\\"15\\" viewBox=\\"0 0 15 15\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M9 9L13 13M10 5C10 7.76142 7.76142 10 5 10C2.23858 10 0 7.76142 0 5C0 2.23858 2.23858 0 5 0C7.76142 0 10 2.23858 10 5Z\\" transform=\\"translate(1 1)\\" stroke=\\"#1B6DE0\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\"/></svg>"
-                        >
-                          <img
-                            src="data:image/svg+xml;utf8,<svg width=\\"15\\" height=\\"15\\" viewBox=\\"0 0 15 15\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M9 9L13 13M10 5C10 7.76142 7.76142 10 5 10C2.23858 10 0 7.76142 0 5C0 2.23858 2.23858 0 5 0C7.76142 0 10 2.23858 10 5Z\\" transform=\\"translate(1 1)\\" stroke=\\"#1B6DE0\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\"/></svg>"
-                            styled-component="true"
-                          />
-                        </MockStyledComponent>
-                      </div>
-                    </MockStyledComponent>
-                  </Before>
-                  <MockStyledComponent
-                    $adjoined="none"
+                    <path
+                      clipRule="nonzero"
+                      d="M 21.60009765625 19.500030517578125 L 17.2001953125 15.100006103515625 C 18.300195693969727 13.500005722045898 19 11.600030899047852 19 9.500030517578125 C 19 4.300030708312988 14.699999809265137 0 9.5 0 C 4.300000190734863 0 0 4.300030708312988 0 9.500030517578125 C 0 14.700030326843262 4.300000190734863 19.000030517578125 9.5 19.000030517578125 C 11.600000381469727 19.000030517578125 13.500097274780273 18.29998207092285 15.10009765625 17.199981689453125 L 19.5 21.600006103515625 L 21.60009765625 19.500030517578125 Z M 3 9.600006103515625 C 3 6.000006198883057 5.900000095367432 3.100006103515625 9.5 3.100006103515625 C 13.100000381469727 3.100006103515625 16 6.000006198883057 16 9.600006103515625 C 16 13.200006484985352 13.100000381469727 16.100006103515625 9.5 16.100006103515625 C 5.900000095367432 16.100006103515625 3 13.200006484985352 3 9.600006103515625 Z"
+                      fill="currentColor"
+                      fillRule="nonzero"
+                    />
+                  </g>
+                </svg>
+              </MockStyledComponent>
+            </Icon>
+          </Search>
+          <MockStyledComponent
+            $disabled={false}
+            $error={false}
+            $isFocused={false}
+            $isLoading={false}
+            $isOpen={false}
+            $isPseudoFocused={false}
+            $multi={false}
+            $required={false}
+            $searchable={true}
+            $size="default"
+            $type="search"
+            role="list"
+          >
+            <span
+              role="list"
+              styled-component="true"
+            >
+              <MockStyledComponent
+                $disabled={false}
+                $error={false}
+                $isFocused={false}
+                $isLoading={false}
+                $isOpen={false}
+                $isPseudoFocused={false}
+                $multi={false}
+                $required={false}
+                $searchable={true}
+                $size="default"
+                $type="search"
+              >
+                <div
+                  styled-component="true"
+                >
+                  Select...
+                </div>
+              </MockStyledComponent>
+              <MockStyledComponent
+                $disabled={false}
+                $error={false}
+                $isFocused={false}
+                $isLoading={false}
+                $isOpen={false}
+                $isPseudoFocused={false}
+                $multi={false}
+                $required={false}
+                $searchable={true}
+                $size="default"
+                $type="search"
+              >
+                <div
+                  styled-component="true"
+                >
+                  <AutosizeInput
                     $disabled={false}
                     $error={false}
                     $isFocused={false}
-                    $ref={
-                      Object {
-                        "current": null,
-                      }
-                    }
+                    $isLoading={false}
+                    $isOpen={false}
+                    $isPseudoFocused={false}
+                    $multi={false}
                     $required={false}
+                    $searchable={true}
                     $size="default"
+                    $type="search"
                     aria-autocomplete="list"
+                    aria-describedby={null}
                     aria-expanded={false}
-                    aria-invalid={false}
-                    aria-required={false}
-                    disabled={false}
-                    name=""
+                    aria-haspopup={false}
+                    aria-label={null}
+                    aria-labelledby={null}
+                    inputRef={[Function]}
                     onBlur={[Function]}
                     onChange={[Function]}
                     onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyPress={[Function]}
-                    onKeyUp={[Function]}
-                    placeholder=""
+                    overrides={
+                      Object {
+                        "Input": undefined,
+                      }
+                    }
+                    required={false}
                     role="combobox"
-                    tabIndex={0}
-                    type="text"
                     value=""
                   >
-                    <input
+                    <MockStyledComponent
+                      $disabled={false}
+                      $error={false}
+                      $isFocused={false}
+                      $isLoading={false}
+                      $isOpen={false}
+                      $isPseudoFocused={false}
+                      $multi={false}
+                      $ref={[Function]}
+                      $required={false}
+                      $searchable={true}
+                      $size="default"
+                      $type="search"
+                      $width="5px"
                       aria-autocomplete="list"
+                      aria-describedby={null}
                       aria-expanded={false}
-                      aria-invalid={false}
-                      aria-required={false}
-                      disabled={false}
-                      name=""
+                      aria-haspopup={false}
+                      aria-label={null}
+                      aria-labelledby={null}
                       onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
-                      onKeyDown={[Function]}
-                      onKeyPress={[Function]}
-                      onKeyUp={[Function]}
-                      placeholder=""
+                      required={false}
                       role="combobox"
-                      styled-component="true"
-                      tabIndex={0}
-                      type="text"
                       value=""
-                    />
-                  </MockStyledComponent>
-                  <After
-                    $adjoined="none"
-                    $disabled={false}
-                    $error={false}
-                    $isFocused={false}
-                    $required={false}
-                    $size="default"
-                  >
+                    >
+                      <input
+                        aria-autocomplete="list"
+                        aria-describedby={null}
+                        aria-expanded={false}
+                        aria-haspopup={false}
+                        aria-label={null}
+                        aria-labelledby={null}
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        required={false}
+                        role="combobox"
+                        styled-component="true"
+                        value=""
+                      />
+                    </MockStyledComponent>
                     <MockStyledComponent
-                      $type="clear_all"
-                      onClick={[Function]}
-                      src="data:image/svg+xml;utf8,<svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M8 16C12.4183 16 16 12.4183 16 8C16 3.58173 12.4183 0 8 0C3.58173 0 0 3.58173 0 8C0 12.4183 3.58173 16 8 16ZM6.03033 4.96967C5.73743 4.67679 5.26257 4.67679 4.96967 4.96967C4.67676 5.26257 4.67676 5.73743 4.96967 6.03033L6.93933 8L4.96967 9.96967C4.67676 10.2626 4.67676 10.7374 4.96967 11.0303C5.26257 11.3232 5.73743 11.3232 6.03033 11.0303L8 9.06067L9.96967 11.0303C10.2626 11.3232 10.7374 11.3232 11.0303 11.0303C11.3232 10.7374 11.3232 10.2626 11.0303 9.96967L9.06067 8L11.0303 6.03033C11.3232 5.73743 11.3232 5.26257 11.0303 4.96967C10.7374 4.67679 10.2626 4.67679 9.96967 4.96967L8 6.93933L6.03033 4.96967Z\\" fill=\\"#999999\\"/></svg>"
+                      $ref={[Function]}
                     >
-                      <img
-                        onClick={[Function]}
-                        src="data:image/svg+xml;utf8,<svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M8 16C12.4183 16 16 12.4183 16 8C16 3.58173 12.4183 0 8 0C3.58173 0 0 3.58173 0 8C0 12.4183 3.58173 16 8 16ZM6.03033 4.96967C5.73743 4.67679 5.26257 4.67679 4.96967 4.96967C4.67676 5.26257 4.67676 5.73743 4.96967 6.03033L6.93933 8L4.96967 9.96967C4.67676 10.2626 4.67676 10.7374 4.96967 11.0303C5.26257 11.3232 5.73743 11.3232 6.03033 11.0303L8 9.06067L9.96967 11.0303C10.2626 11.3232 10.7374 11.3232 11.0303 11.0303C11.3232 10.7374 11.3232 10.2626 11.0303 9.96967L9.06067 8L11.0303 6.03033C11.3232 5.73743 11.3232 5.26257 11.0303 4.96967C10.7374 4.67679 10.2626 4.67679 9.96967 4.96967L8 6.93933L6.03033 4.96967Z\\" fill=\\"#999999\\"/></svg>"
+                      <div
                         styled-component="true"
                       />
                     </MockStyledComponent>
-                  </After>
+                  </AutosizeInput>
                 </div>
               </MockStyledComponent>
-            </BaseInput>
-          </div>
-        </MockStyledComponent>
-      </Input>
-      <SelectDropDown
-        getOptionLabel={[Function]}
-        isDropDownOpen={false}
-        maxDropdownHeight="90vh"
-        multiple={true}
-        onChange={[Function]}
-        onItemSelect={[Function]}
-        options={Array []}
-        optionsLoaded={false}
-        overrides={Object {}}
-        selectedOptions={Array []}
-        type="search"
-      >
-        <div />
-      </SelectDropDown>
+            </span>
+          </MockStyledComponent>
+        </div>
+      </MockStyledComponent>
     </div>
   </MockStyledComponent>
 </Select>
 `;
 
-exports[`Stateless select should render component in search mode and true for multiple choice: Component has correct render in search mode and mutiple choice equal true 1`] = `
+exports[`Select component renders component in search mode and true for multiple choice: Component has correct render in search mode and mutiple choice equals true 1`] = `
 <Select
+  aria-describedby={null}
+  aria-label={null}
+  aria-labelledby={null}
   autoFocus={false}
+  backspaceRemoves={true}
+  clearable={true}
+  closeOnSelect={true}
+  deleteRemoves={true}
+  disabled={false}
   error={false}
-  filterable={false}
+  escapeClearsValue={true}
+  filterOptions={[Function]}
+  filterOutSelected={true}
+  getOptionLabel={null}
+  getValueLabel={null}
+  isLoading={false}
+  labelKey="label"
   maxDropdownHeight="900px"
+  multi={false}
   multiple={true}
+  noResultsMsg="No results found"
   onBlur={[MockFunction]}
+  onBlurResetsInput={true}
   onChange={[MockFunction]}
+  onClose={null}
+  onCloseResetsInput={true}
   onFocus={[MockFunction]}
-  onMouseDown={[Function]}
-  onMouseEnter={[MockFunction]}
-  onMouseLeave={[MockFunction]}
-  onMouseUp={[Function]}
-  onTextInputChange={[MockFunction]}
-  options={Array []}
+  onInputChange={[MockFunction]}
+  onOpen={null}
+  onSelectResetsInput={true}
+  openOnClick={true}
+  options={
+    Array [
+      Object {
+        "id": "id1",
+        "label": "label1",
+      },
+      Object {
+        "id": "id2",
+        "label": "label2",
+      },
+      Object {
+        "id": "id3",
+        "label": "bel3",
+      },
+    ]
+  }
   overrides={Object {}}
-  selectedOptions={Array []}
-  tabIndex={0}
-  textValue=""
+  placeholder="Select..."
+  required={false}
+  searchable={true}
+  size="default"
   type="search"
+  value={Array []}
+  valueKey="id"
 >
-  <MockStyledComponent>
+  <MockStyledComponent
+    $disabled={false}
+    $error={false}
+    $isFocused={false}
+    $isLoading={false}
+    $isOpen={false}
+    $isPseudoFocused={false}
+    $multi={false}
+    $ref={[Function]}
+    $required={false}
+    $searchable={true}
+    $size="default"
+    $type="search"
+  >
     <div
       styled-component="true"
     >
-      <Input
-        autoFocus={false}
-        disabled={false}
-        endEnhancer={null}
-        error={false}
-        name=""
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        overrides={
-          Object {
-            "After": [Function],
-            "Before": [Function],
-            "Input": Object {
-              "component": [Function],
-              "props": Object {
-                "aria-autocomplete": "list",
-                "aria-expanded": false,
-                "onKeyDown": [Function],
-                "role": "combobox",
-                "tabIndex": 0,
-              },
-            },
-            "InputContainer": Object {
-              "component": [Function],
-              "props": Object {},
-            },
-          }
-        }
-        required={false}
-        size="default"
-        startEnhancer={null}
-        value=""
+      <MockStyledComponent
+        $disabled={false}
+        $error={false}
+        $isFocused={false}
+        $isLoading={false}
+        $isOpen={false}
+        $isPseudoFocused={false}
+        $multi={false}
+        $required={false}
+        $searchable={true}
+        $size="default"
+        $type="search"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
       >
-        <MockStyledComponent
-          $disabled={false}
-          $error={false}
-          $isFocused={false}
-          $required={false}
-          $size="default"
+        <div
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          styled-component="true"
         >
-          <div
-            styled-component="true"
-          >
-            <BaseInput
-              adjoined="none"
-              autoFocus={false}
-              disabled={false}
-              error={false}
-              inputRef={
-                Object {
-                  "current": null,
-                }
+          <Search
+            $disabled={false}
+            $error={false}
+            $isFocused={false}
+            $isLoading={false}
+            $isOpen={false}
+            $isPseudoFocused={false}
+            $multi={false}
+            $required={false}
+            $searchable={true}
+            $size="default"
+            $type="search"
+            onClick={[Function]}
+            overrides={
+              Object {
+                "Svg": [Function],
               }
-              name=""
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              onKeyPress={[Function]}
-              onKeyUp={[Function]}
+            }
+            size={16}
+            title="search"
+          >
+            <Icon
+              $disabled={false}
+              $error={false}
+              $isFocused={false}
+              $isLoading={false}
+              $isOpen={false}
+              $isPseudoFocused={false}
+              $multi={false}
+              $required={false}
+              $searchable={true}
+              $size="default"
+              $type="search"
+              onClick={[Function]}
               overrides={
                 Object {
-                  "After": [Function],
-                  "Before": [Function],
-                  "Input": Object {
-                    "component": [Function],
-                    "props": Object {
-                      "aria-autocomplete": "list",
-                      "aria-expanded": false,
-                      "onKeyDown": [Function],
-                      "role": "combobox",
-                      "tabIndex": 0,
-                    },
-                  },
-                  "InputContainer": Object {
-                    "component": [Function],
-                    "props": Object {},
-                  },
+                  "Svg": [Function],
                 }
               }
-              placeholder=""
-              required={false}
-              size="default"
-              type="text"
-              value=""
+              size={16}
+              title="search"
+              viewBox="0 0 24 24"
             >
               <MockStyledComponent
-                $adjoined="none"
                 $disabled={false}
                 $error={false}
                 $isFocused={false}
+                $isLoading={false}
+                $isOpen={false}
+                $isPseudoFocused={false}
+                $multi={false}
                 $required={false}
+                $searchable={true}
                 $size="default"
+                $type="search"
+                onClick={[Function]}
+                viewBox="0 0 24 24"
               >
-                <div
+                <svg
+                  onClick={[Function]}
                   styled-component="true"
+                  viewBox="0 0 24 24"
                 >
-                  <Before
-                    $adjoined="none"
-                    $disabled={false}
-                    $error={false}
-                    $isFocused={false}
-                    $required={false}
-                    $size="default"
+                  <title>
+                    search
+                  </title>
+                  <g
+                    transform="matrix( 1 0 0 1 1 0.899993896484375 )"
                   >
-                    <MockStyledComponent
-                      role="list"
-                    >
-                      <div
-                        role="list"
-                        styled-component="true"
-                      >
-                        <MockStyledComponent
-                          $type="loop"
-                          src="data:image/svg+xml;utf8,<svg width=\\"15\\" height=\\"15\\" viewBox=\\"0 0 15 15\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M9 9L13 13M10 5C10 7.76142 7.76142 10 5 10C2.23858 10 0 7.76142 0 5C0 2.23858 2.23858 0 5 0C7.76142 0 10 2.23858 10 5Z\\" transform=\\"translate(1 1)\\" stroke=\\"#1B6DE0\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\"/></svg>"
-                        >
-                          <img
-                            src="data:image/svg+xml;utf8,<svg width=\\"15\\" height=\\"15\\" viewBox=\\"0 0 15 15\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M9 9L13 13M10 5C10 7.76142 7.76142 10 5 10C2.23858 10 0 7.76142 0 5C0 2.23858 2.23858 0 5 0C7.76142 0 10 2.23858 10 5Z\\" transform=\\"translate(1 1)\\" stroke=\\"#1B6DE0\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\"/></svg>"
-                            styled-component="true"
-                          />
-                        </MockStyledComponent>
-                      </div>
-                    </MockStyledComponent>
-                  </Before>
-                  <MockStyledComponent
-                    $adjoined="none"
+                    <path
+                      clipRule="nonzero"
+                      d="M 21.60009765625 19.500030517578125 L 17.2001953125 15.100006103515625 C 18.300195693969727 13.500005722045898 19 11.600030899047852 19 9.500030517578125 C 19 4.300030708312988 14.699999809265137 0 9.5 0 C 4.300000190734863 0 0 4.300030708312988 0 9.500030517578125 C 0 14.700030326843262 4.300000190734863 19.000030517578125 9.5 19.000030517578125 C 11.600000381469727 19.000030517578125 13.500097274780273 18.29998207092285 15.10009765625 17.199981689453125 L 19.5 21.600006103515625 L 21.60009765625 19.500030517578125 Z M 3 9.600006103515625 C 3 6.000006198883057 5.900000095367432 3.100006103515625 9.5 3.100006103515625 C 13.100000381469727 3.100006103515625 16 6.000006198883057 16 9.600006103515625 C 16 13.200006484985352 13.100000381469727 16.100006103515625 9.5 16.100006103515625 C 5.900000095367432 16.100006103515625 3 13.200006484985352 3 9.600006103515625 Z"
+                      fill="currentColor"
+                      fillRule="nonzero"
+                    />
+                  </g>
+                </svg>
+              </MockStyledComponent>
+            </Icon>
+          </Search>
+          <MockStyledComponent
+            $disabled={false}
+            $error={false}
+            $isFocused={false}
+            $isLoading={false}
+            $isOpen={false}
+            $isPseudoFocused={false}
+            $multi={false}
+            $required={false}
+            $searchable={true}
+            $size="default"
+            $type="search"
+            role="list"
+          >
+            <span
+              role="list"
+              styled-component="true"
+            >
+              <MockStyledComponent
+                $disabled={false}
+                $error={false}
+                $isFocused={false}
+                $isLoading={false}
+                $isOpen={false}
+                $isPseudoFocused={false}
+                $multi={false}
+                $required={false}
+                $searchable={true}
+                $size="default"
+                $type="search"
+              >
+                <div
+                  styled-component="true"
+                >
+                  Select...
+                </div>
+              </MockStyledComponent>
+              <MockStyledComponent
+                $disabled={false}
+                $error={false}
+                $isFocused={false}
+                $isLoading={false}
+                $isOpen={false}
+                $isPseudoFocused={false}
+                $multi={false}
+                $required={false}
+                $searchable={true}
+                $size="default"
+                $type="search"
+              >
+                <div
+                  styled-component="true"
+                >
+                  <AutosizeInput
                     $disabled={false}
                     $error={false}
                     $isFocused={false}
-                    $ref={
-                      Object {
-                        "current": null,
-                      }
-                    }
+                    $isLoading={false}
+                    $isOpen={false}
+                    $isPseudoFocused={false}
+                    $multi={false}
                     $required={false}
+                    $searchable={true}
                     $size="default"
+                    $type="search"
                     aria-autocomplete="list"
+                    aria-describedby={null}
                     aria-expanded={false}
-                    aria-invalid={false}
-                    aria-required={false}
-                    disabled={false}
-                    name=""
+                    aria-haspopup={false}
+                    aria-label={null}
+                    aria-labelledby={null}
+                    inputRef={[Function]}
                     onBlur={[Function]}
                     onChange={[Function]}
                     onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyPress={[Function]}
-                    onKeyUp={[Function]}
-                    placeholder=""
+                    overrides={
+                      Object {
+                        "Input": undefined,
+                      }
+                    }
+                    required={false}
                     role="combobox"
-                    tabIndex={0}
-                    type="text"
                     value=""
                   >
-                    <input
+                    <MockStyledComponent
+                      $disabled={false}
+                      $error={false}
+                      $isFocused={false}
+                      $isLoading={false}
+                      $isOpen={false}
+                      $isPseudoFocused={false}
+                      $multi={false}
+                      $ref={[Function]}
+                      $required={false}
+                      $searchable={true}
+                      $size="default"
+                      $type="search"
+                      $width="5px"
                       aria-autocomplete="list"
+                      aria-describedby={null}
                       aria-expanded={false}
-                      aria-invalid={false}
-                      aria-required={false}
-                      disabled={false}
-                      name=""
+                      aria-haspopup={false}
+                      aria-label={null}
+                      aria-labelledby={null}
                       onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
-                      onKeyDown={[Function]}
-                      onKeyPress={[Function]}
-                      onKeyUp={[Function]}
-                      placeholder=""
+                      required={false}
                       role="combobox"
-                      styled-component="true"
-                      tabIndex={0}
-                      type="text"
                       value=""
-                    />
-                  </MockStyledComponent>
-                  <After
-                    $adjoined="none"
-                    $disabled={false}
-                    $error={false}
-                    $isFocused={false}
-                    $required={false}
-                    $size="default"
-                  >
+                    >
+                      <input
+                        aria-autocomplete="list"
+                        aria-describedby={null}
+                        aria-expanded={false}
+                        aria-haspopup={false}
+                        aria-label={null}
+                        aria-labelledby={null}
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        required={false}
+                        role="combobox"
+                        styled-component="true"
+                        value=""
+                      />
+                    </MockStyledComponent>
                     <MockStyledComponent
-                      $type="clear_all"
-                      onClick={[Function]}
-                      src="data:image/svg+xml;utf8,<svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M8 16C12.4183 16 16 12.4183 16 8C16 3.58173 12.4183 0 8 0C3.58173 0 0 3.58173 0 8C0 12.4183 3.58173 16 8 16ZM6.03033 4.96967C5.73743 4.67679 5.26257 4.67679 4.96967 4.96967C4.67676 5.26257 4.67676 5.73743 4.96967 6.03033L6.93933 8L4.96967 9.96967C4.67676 10.2626 4.67676 10.7374 4.96967 11.0303C5.26257 11.3232 5.73743 11.3232 6.03033 11.0303L8 9.06067L9.96967 11.0303C10.2626 11.3232 10.7374 11.3232 11.0303 11.0303C11.3232 10.7374 11.3232 10.2626 11.0303 9.96967L9.06067 8L11.0303 6.03033C11.3232 5.73743 11.3232 5.26257 11.0303 4.96967C10.7374 4.67679 10.2626 4.67679 9.96967 4.96967L8 6.93933L6.03033 4.96967Z\\" fill=\\"#999999\\"/></svg>"
+                      $ref={[Function]}
                     >
-                      <img
-                        onClick={[Function]}
-                        src="data:image/svg+xml;utf8,<svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M8 16C12.4183 16 16 12.4183 16 8C16 3.58173 12.4183 0 8 0C3.58173 0 0 3.58173 0 8C0 12.4183 3.58173 16 8 16ZM6.03033 4.96967C5.73743 4.67679 5.26257 4.67679 4.96967 4.96967C4.67676 5.26257 4.67676 5.73743 4.96967 6.03033L6.93933 8L4.96967 9.96967C4.67676 10.2626 4.67676 10.7374 4.96967 11.0303C5.26257 11.3232 5.73743 11.3232 6.03033 11.0303L8 9.06067L9.96967 11.0303C10.2626 11.3232 10.7374 11.3232 11.0303 11.0303C11.3232 10.7374 11.3232 10.2626 11.0303 9.96967L9.06067 8L11.0303 6.03033C11.3232 5.73743 11.3232 5.26257 11.0303 4.96967C10.7374 4.67679 10.2626 4.67679 9.96967 4.96967L8 6.93933L6.03033 4.96967Z\\" fill=\\"#999999\\"/></svg>"
+                      <div
                         styled-component="true"
                       />
                     </MockStyledComponent>
-                  </After>
+                  </AutosizeInput>
                 </div>
               </MockStyledComponent>
-            </BaseInput>
-          </div>
-        </MockStyledComponent>
-      </Input>
-      <SelectDropDown
-        getOptionLabel={[Function]}
-        isDropDownOpen={false}
-        maxDropdownHeight="90vh"
-        multiple={true}
-        onChange={[Function]}
-        onItemSelect={[Function]}
-        options={Array []}
-        optionsLoaded={false}
-        overrides={Object {}}
-        selectedOptions={Array []}
-        type="search"
-      >
-        <div />
-      </SelectDropDown>
+            </span>
+          </MockStyledComponent>
+        </div>
+      </MockStyledComponent>
     </div>
   </MockStyledComponent>
 </Select>
 `;
 
-exports[`Stateless select should render component in select mode and false for multiple choice: Component has correct render in select mode and mutiple choice equal false 1`] = `
+exports[`Select component renders component in select mode and false for multiple choice: Component has correct render in select mode and mutiple choice equals false 1`] = `
 <Select
+  aria-describedby={null}
+  aria-label={null}
+  aria-labelledby={null}
   autoFocus={false}
+  backspaceRemoves={true}
+  clearable={true}
+  closeOnSelect={true}
+  deleteRemoves={true}
+  disabled={false}
   error={false}
-  filterable={false}
+  escapeClearsValue={true}
+  filterOptions={[Function]}
+  filterOutSelected={true}
+  getOptionLabel={null}
+  getValueLabel={null}
+  isLoading={false}
+  labelKey="label"
   maxDropdownHeight="900px"
+  multi={false}
   multiple={false}
+  noResultsMsg="No results found"
   onBlur={[MockFunction]}
+  onBlurResetsInput={true}
   onChange={[MockFunction]}
+  onClose={null}
+  onCloseResetsInput={true}
   onFocus={[MockFunction]}
-  onMouseDown={[Function]}
-  onMouseEnter={[MockFunction]}
-  onMouseLeave={[MockFunction]}
-  onMouseUp={[Function]}
-  onTextInputChange={[MockFunction]}
-  options={Array []}
+  onInputChange={[MockFunction]}
+  onOpen={null}
+  onSelectResetsInput={true}
+  openOnClick={true}
+  options={
+    Array [
+      Object {
+        "id": "id1",
+        "label": "label1",
+      },
+      Object {
+        "id": "id2",
+        "label": "label2",
+      },
+      Object {
+        "id": "id3",
+        "label": "bel3",
+      },
+    ]
+  }
   overrides={Object {}}
-  selectedOptions={Array []}
-  tabIndex={0}
-  textValue=""
+  placeholder="Select..."
+  required={false}
+  searchable={true}
+  size="default"
   type="select"
+  value={Array []}
+  valueKey="id"
 >
-  <MockStyledComponent>
+  <MockStyledComponent
+    $disabled={false}
+    $error={false}
+    $isFocused={false}
+    $isLoading={false}
+    $isOpen={false}
+    $isPseudoFocused={false}
+    $multi={false}
+    $ref={[Function]}
+    $required={false}
+    $searchable={true}
+    $size="default"
+    $type="select"
+  >
     <div
       styled-component="true"
     >
-      <div
+      <MockStyledComponent
+        $disabled={false}
+        $error={false}
+        $isFocused={false}
+        $isLoading={false}
+        $isOpen={false}
+        $isPseudoFocused={false}
+        $multi={false}
+        $required={false}
+        $searchable={true}
+        $size="default"
+        $type="select"
         onClick={[Function]}
         onKeyDown={[Function]}
-        tabIndex={0}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
       >
-        <Input
-          autoFocus={false}
-          disabled={true}
-          endEnhancer={null}
-          error={false}
-          name=""
-          onBlur={[Function]}
-          onFocus={[Function]}
-          overrides={
-            Object {
-              "After": [Function],
-              "Before": [Function],
-              "Input": Object {
-                "component": [Function],
-                "props": Object {
-                  "aria-autocomplete": "none",
-                  "aria-expanded": false,
-                  "role": "combobox",
-                },
-              },
-              "InputContainer": Object {
-                "component": [Function],
-                "props": Object {},
-              },
-              "Root": Object {
-                "component": [Function],
-                "props": Object {},
-              },
-            }
-          }
-          required={false}
-          size="default"
-          startEnhancer={null}
+        <div
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          styled-component="true"
         >
           <MockStyledComponent
-            $disabled={true}
+            $disabled={false}
             $error={false}
             $isFocused={false}
+            $isLoading={false}
+            $isOpen={false}
+            $isPseudoFocused={false}
+            $multi={false}
             $required={false}
+            $searchable={true}
             $size="default"
+            $type="select"
+            role="list"
           >
-            <div
+            <span
+              role="list"
               styled-component="true"
             >
-              <BaseInput
-                adjoined="none"
-                autoFocus={false}
-                disabled={true}
-                error={false}
-                inputRef={
-                  Object {
-                    "current": null,
-                  }
-                }
-                name=""
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                onKeyDown={[Function]}
-                onKeyPress={[Function]}
-                onKeyUp={[Function]}
-                overrides={
-                  Object {
-                    "After": [Function],
-                    "Before": [Function],
-                    "Input": Object {
-                      "component": [Function],
-                      "props": Object {
-                        "aria-autocomplete": "none",
-                        "aria-expanded": false,
-                        "role": "combobox",
-                      },
-                    },
-                    "InputContainer": Object {
-                      "component": [Function],
-                      "props": Object {},
-                    },
-                    "Root": Object {
-                      "component": [Function],
-                      "props": Object {},
-                    },
-                  }
-                }
-                placeholder=""
-                required={false}
-                size="default"
-                type="text"
+              <MockStyledComponent
+                $disabled={false}
+                $error={false}
+                $isFocused={false}
+                $isLoading={false}
+                $isOpen={false}
+                $isPseudoFocused={false}
+                $multi={false}
+                $required={false}
+                $searchable={true}
+                $size="default"
+                $type="select"
+              >
+                <div
+                  styled-component="true"
+                >
+                  Select...
+                </div>
+              </MockStyledComponent>
+              <MockStyledComponent
+                $disabled={false}
+                $error={false}
+                $isFocused={false}
+                $isLoading={false}
+                $isOpen={false}
+                $isPseudoFocused={false}
+                $multi={false}
+                $required={false}
+                $searchable={true}
+                $size="default"
+                $type="select"
               >
-                <MockStyledComponent
-                  $adjoined="none"
-                  $disabled={true}
-                  $error={false}
-                  $isFocused={false}
-                  $required={false}
-                  $size="default"
+                <div
+                  styled-component="true"
                 >
-                  <div
-                    styled-component="true"
+                  <AutosizeInput
+                    $disabled={false}
+                    $error={false}
+                    $isFocused={false}
+                    $isLoading={false}
+                    $isOpen={false}
+                    $isPseudoFocused={false}
+                    $multi={false}
+                    $required={false}
+                    $searchable={true}
+                    $size="default"
+                    $type="select"
+                    aria-autocomplete="list"
+                    aria-describedby={null}
+                    aria-expanded={false}
+                    aria-haspopup={false}
+                    aria-label={null}
+                    aria-labelledby={null}
+                    inputRef={[Function]}
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    overrides={
+                      Object {
+                        "Input": undefined,
+                      }
+                    }
+                    required={false}
+                    role="combobox"
+                    value=""
                   >
-                    <Before
-                      $adjoined="none"
-                      $disabled={true}
-                      $error={false}
-                      $isFocused={false}
-                      $required={false}
-                      $size="default"
-                    >
-                      <MockStyledComponent
-                        role="list"
-                      >
-                        <div
-                          role="list"
-                          styled-component="true"
-                        />
-                      </MockStyledComponent>
-                    </Before>
                     <MockStyledComponent
-                      $adjoined="none"
-                      $disabled={true}
+                      $disabled={false}
                       $error={false}
                       $isFocused={false}
-                      $ref={
-                        Object {
-                          "current": null,
-                        }
-                      }
+                      $isLoading={false}
+                      $isOpen={false}
+                      $isPseudoFocused={false}
+                      $multi={false}
+                      $ref={[Function]}
                       $required={false}
+                      $searchable={true}
                       $size="default"
-                      aria-autocomplete="none"
+                      $type="select"
+                      $width="5px"
+                      aria-autocomplete="list"
+                      aria-describedby={null}
                       aria-expanded={false}
-                      aria-invalid={false}
-                      aria-required={false}
-                      disabled={true}
-                      name=""
+                      aria-haspopup={false}
+                      aria-label={null}
+                      aria-labelledby={null}
                       onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
-                      onKeyDown={[Function]}
-                      onKeyPress={[Function]}
-                      onKeyUp={[Function]}
-                      placeholder=""
+                      required={false}
                       role="combobox"
-                      type="text"
+                      value=""
                     >
                       <input
-                        aria-autocomplete="none"
+                        aria-autocomplete="list"
+                        aria-describedby={null}
                         aria-expanded={false}
-                        aria-invalid={false}
-                        aria-required={false}
-                        disabled={true}
-                        name=""
+                        aria-haspopup={false}
+                        aria-label={null}
+                        aria-labelledby={null}
                         onBlur={[Function]}
                         onChange={[Function]}
                         onFocus={[Function]}
-                        onKeyDown={[Function]}
-                        onKeyPress={[Function]}
-                        onKeyUp={[Function]}
-                        placeholder=""
+                        required={false}
                         role="combobox"
                         styled-component="true"
-                        type="text"
+                        value=""
                       />
                     </MockStyledComponent>
-                    <After
-                      $adjoined="none"
-                      $disabled={true}
-                      $error={false}
-                      $isFocused={false}
-                      $required={false}
-                      $size="default"
+                    <MockStyledComponent
+                      $ref={[Function]}
                     >
-                      <MockStyledComponent
-                        $type="select"
-                        src="data:image/svg+xml;utf8,<svg width=\\"12\\" height=\\"12\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><g transform=\\"matrix(1 0 0 1 2 6.899993896484375)\\"><path fill-rule=\\"nonzero\\" clip-rule=\\"nonzero\\" d=\\"M 20 0 L 20 3.8000030517578125 L 10 11.5 L 0 3.8000030517578125 L 0 0 L 10 7.70001220703125 L 20 0 Z\\" fill=\\"currentColor\\"/></g></svg>"
-                      >
-                        <img
-                          src="data:image/svg+xml;utf8,<svg width=\\"12\\" height=\\"12\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><g transform=\\"matrix(1 0 0 1 2 6.899993896484375)\\"><path fill-rule=\\"nonzero\\" clip-rule=\\"nonzero\\" d=\\"M 20 0 L 20 3.8000030517578125 L 10 11.5 L 0 3.8000030517578125 L 0 0 L 10 7.70001220703125 L 20 0 Z\\" fill=\\"currentColor\\"/></g></svg>"
-                          styled-component="true"
-                        />
-                      </MockStyledComponent>
-                    </After>
-                  </div>
-                </MockStyledComponent>
-              </BaseInput>
-            </div>
+                      <div
+                        styled-component="true"
+                      />
+                    </MockStyledComponent>
+                  </AutosizeInput>
+                </div>
+              </MockStyledComponent>
+            </span>
           </MockStyledComponent>
-        </Input>
-      </div>
-      <SelectDropDown
-        getOptionLabel={[Function]}
-        isDropDownOpen={false}
-        maxDropdownHeight="90vh"
-        multiple={false}
-        onChange={[Function]}
-        onItemSelect={[Function]}
-        options={Array []}
-        optionsLoaded={false}
-        overrides={Object {}}
-        selectedOptions={Array []}
-        type="select"
-      >
-        <div />
-      </SelectDropDown>
+          <TriangleDown
+            $disabled={false}
+            $error={false}
+            $isFocused={false}
+            $isLoading={false}
+            $isOpen={false}
+            $isPseudoFocused={false}
+            $multi={false}
+            $required={false}
+            $searchable={true}
+            $size="default"
+            $type="select"
+            onClick={[Function]}
+            overrides={
+              Object {
+                "Svg": [Function],
+              }
+            }
+            size={16}
+            title="open"
+          >
+            <Icon
+              $disabled={false}
+              $error={false}
+              $isFocused={false}
+              $isLoading={false}
+              $isOpen={false}
+              $isPseudoFocused={false}
+              $multi={false}
+              $required={false}
+              $searchable={true}
+              $size="default"
+              $type="select"
+              onClick={[Function]}
+              overrides={
+                Object {
+                  "Svg": [Function],
+                }
+              }
+              size={16}
+              title="open"
+              viewBox="0 0 24 24"
+            >
+              <MockStyledComponent
+                $disabled={false}
+                $error={false}
+                $isFocused={false}
+                $isLoading={false}
+                $isOpen={false}
+                $isPseudoFocused={false}
+                $multi={false}
+                $required={false}
+                $searchable={true}
+                $size="default"
+                $type="select"
+                onClick={[Function]}
+                viewBox="0 0 24 24"
+              >
+                <svg
+                  onClick={[Function]}
+                  styled-component="true"
+                  viewBox="0 0 24 24"
+                >
+                  <title>
+                    open
+                  </title>
+                  <path
+                    d="M12.7071 15.2929L17.1464 10.8536C17.4614 10.5386 17.2383 10 16.7929 10L7.20711 10C6.76165 10 6.53857 10.5386 6.85355 10.8536L11.2929 15.2929C11.6834 15.6834 12.3166 15.6834 12.7071 15.2929Z"
+                  />
+                </svg>
+              </MockStyledComponent>
+            </Icon>
+          </TriangleDown>
+        </div>
+      </MockStyledComponent>
     </div>
   </MockStyledComponent>
 </Select>
 `;
 
-exports[`Stateless select should render component in select mode and true for multiple choice: Component has correct render in select mode and mutiple choice equal true 1`] = `
+exports[`Select component renders component in select mode and true for multiple choice: Component has correct render in select mode and mutiple choice equals true 1`] = `
 <Select
+  aria-describedby={null}
+  aria-label={null}
+  aria-labelledby={null}
   autoFocus={false}
+  backspaceRemoves={true}
+  clearable={true}
+  closeOnSelect={true}
+  deleteRemoves={true}
+  disabled={false}
   error={false}
-  filterable={false}
+  escapeClearsValue={true}
+  filterOptions={[Function]}
+  filterOutSelected={true}
+  getOptionLabel={null}
+  getValueLabel={null}
+  isLoading={false}
+  labelKey="label"
   maxDropdownHeight="900px"
+  multi={false}
   multiple={true}
+  noResultsMsg="No results found"
   onBlur={[MockFunction]}
+  onBlurResetsInput={true}
   onChange={[MockFunction]}
+  onClose={null}
+  onCloseResetsInput={true}
   onFocus={[MockFunction]}
-  onMouseDown={[Function]}
-  onMouseEnter={[MockFunction]}
-  onMouseLeave={[MockFunction]}
-  onMouseUp={[Function]}
-  onTextInputChange={[MockFunction]}
-  options={Array []}
+  onInputChange={[MockFunction]}
+  onOpen={null}
+  onSelectResetsInput={true}
+  openOnClick={true}
+  options={
+    Array [
+      Object {
+        "id": "id1",
+        "label": "label1",
+      },
+      Object {
+        "id": "id2",
+        "label": "label2",
+      },
+      Object {
+        "id": "id3",
+        "label": "bel3",
+      },
+    ]
+  }
   overrides={Object {}}
-  selectedOptions={Array []}
-  tabIndex={0}
-  textValue=""
+  placeholder="Select..."
+  required={false}
+  searchable={true}
+  size="default"
   type="select"
+  value={Array []}
+  valueKey="id"
 >
-  <MockStyledComponent>
+  <MockStyledComponent
+    $disabled={false}
+    $error={false}
+    $isFocused={false}
+    $isLoading={false}
+    $isOpen={false}
+    $isPseudoFocused={false}
+    $multi={false}
+    $ref={[Function]}
+    $required={false}
+    $searchable={true}
+    $size="default"
+    $type="select"
+  >
     <div
       styled-component="true"
     >
-      <div
+      <MockStyledComponent
+        $disabled={false}
+        $error={false}
+        $isFocused={false}
+        $isLoading={false}
+        $isOpen={false}
+        $isPseudoFocused={false}
+        $multi={false}
+        $required={false}
+        $searchable={true}
+        $size="default"
+        $type="select"
         onClick={[Function]}
         onKeyDown={[Function]}
-        tabIndex={0}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
       >
-        <Input
-          autoFocus={false}
-          disabled={true}
-          endEnhancer={null}
-          error={false}
-          name=""
-          onBlur={[Function]}
-          onFocus={[Function]}
-          overrides={
-            Object {
-              "After": [Function],
-              "Before": [Function],
-              "Input": Object {
-                "component": [Function],
-                "props": Object {
-                  "aria-autocomplete": "none",
-                  "aria-expanded": false,
-                  "role": "combobox",
-                },
-              },
-              "InputContainer": Object {
-                "component": [Function],
-                "props": Object {},
-              },
-              "Root": Object {
-                "component": [Function],
-                "props": Object {},
-              },
-            }
-          }
-          required={false}
-          size="default"
-          startEnhancer={null}
+        <div
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          styled-component="true"
         >
           <MockStyledComponent
-            $disabled={true}
+            $disabled={false}
             $error={false}
             $isFocused={false}
+            $isLoading={false}
+            $isOpen={false}
+            $isPseudoFocused={false}
+            $multi={false}
             $required={false}
+            $searchable={true}
             $size="default"
+            $type="select"
+            role="list"
           >
-            <div
+            <span
+              role="list"
               styled-component="true"
             >
-              <BaseInput
-                adjoined="none"
-                autoFocus={false}
-                disabled={true}
-                error={false}
-                inputRef={
-                  Object {
-                    "current": null,
-                  }
-                }
-                name=""
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                onKeyDown={[Function]}
-                onKeyPress={[Function]}
-                onKeyUp={[Function]}
-                overrides={
-                  Object {
-                    "After": [Function],
-                    "Before": [Function],
-                    "Input": Object {
-                      "component": [Function],
-                      "props": Object {
-                        "aria-autocomplete": "none",
-                        "aria-expanded": false,
-                        "role": "combobox",
-                      },
-                    },
-                    "InputContainer": Object {
-                      "component": [Function],
-                      "props": Object {},
-                    },
-                    "Root": Object {
-                      "component": [Function],
-                      "props": Object {},
-                    },
-                  }
-                }
-                placeholder=""
-                required={false}
-                size="default"
-                type="text"
+              <MockStyledComponent
+                $disabled={false}
+                $error={false}
+                $isFocused={false}
+                $isLoading={false}
+                $isOpen={false}
+                $isPseudoFocused={false}
+                $multi={false}
+                $required={false}
+                $searchable={true}
+                $size="default"
+                $type="select"
               >
-                <MockStyledComponent
-                  $adjoined="none"
-                  $disabled={true}
-                  $error={false}
-                  $isFocused={false}
-                  $required={false}
-                  $size="default"
+                <div
+                  styled-component="true"
                 >
-                  <div
-                    styled-component="true"
+                  Select...
+                </div>
+              </MockStyledComponent>
+              <MockStyledComponent
+                $disabled={false}
+                $error={false}
+                $isFocused={false}
+                $isLoading={false}
+                $isOpen={false}
+                $isPseudoFocused={false}
+                $multi={false}
+                $required={false}
+                $searchable={true}
+                $size="default"
+                $type="select"
+              >
+                <div
+                  styled-component="true"
+                >
+                  <AutosizeInput
+                    $disabled={false}
+                    $error={false}
+                    $isFocused={false}
+                    $isLoading={false}
+                    $isOpen={false}
+                    $isPseudoFocused={false}
+                    $multi={false}
+                    $required={false}
+                    $searchable={true}
+                    $size="default"
+                    $type="select"
+                    aria-autocomplete="list"
+                    aria-describedby={null}
+                    aria-expanded={false}
+                    aria-haspopup={false}
+                    aria-label={null}
+                    aria-labelledby={null}
+                    inputRef={[Function]}
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    overrides={
+                      Object {
+                        "Input": undefined,
+                      }
+                    }
+                    required={false}
+                    role="combobox"
+                    value=""
                   >
-                    <Before
-                      $adjoined="none"
-                      $disabled={true}
-                      $error={false}
-                      $isFocused={false}
-                      $required={false}
-                      $size="default"
-                    >
-                      <MockStyledComponent
-                        role="list"
-                      >
-                        <div
-                          role="list"
-                          styled-component="true"
-                        />
-                      </MockStyledComponent>
-                    </Before>
                     <MockStyledComponent
-                      $adjoined="none"
-                      $disabled={true}
+                      $disabled={false}
                       $error={false}
                       $isFocused={false}
-                      $ref={
-                        Object {
-                          "current": null,
-                        }
-                      }
+                      $isLoading={false}
+                      $isOpen={false}
+                      $isPseudoFocused={false}
+                      $multi={false}
+                      $ref={[Function]}
                       $required={false}
+                      $searchable={true}
                       $size="default"
-                      aria-autocomplete="none"
+                      $type="select"
+                      $width="5px"
+                      aria-autocomplete="list"
+                      aria-describedby={null}
                       aria-expanded={false}
-                      aria-invalid={false}
-                      aria-required={false}
-                      disabled={true}
-                      name=""
+                      aria-haspopup={false}
+                      aria-label={null}
+                      aria-labelledby={null}
                       onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
-                      onKeyDown={[Function]}
-                      onKeyPress={[Function]}
-                      onKeyUp={[Function]}
-                      placeholder=""
+                      required={false}
                       role="combobox"
-                      type="text"
+                      value=""
                     >
                       <input
-                        aria-autocomplete="none"
+                        aria-autocomplete="list"
+                        aria-describedby={null}
                         aria-expanded={false}
-                        aria-invalid={false}
-                        aria-required={false}
-                        disabled={true}
-                        name=""
+                        aria-haspopup={false}
+                        aria-label={null}
+                        aria-labelledby={null}
                         onBlur={[Function]}
                         onChange={[Function]}
                         onFocus={[Function]}
-                        onKeyDown={[Function]}
-                        onKeyPress={[Function]}
-                        onKeyUp={[Function]}
-                        placeholder=""
+                        required={false}
                         role="combobox"
                         styled-component="true"
-                        type="text"
+                        value=""
                       />
                     </MockStyledComponent>
-                    <After
-                      $adjoined="none"
-                      $disabled={true}
-                      $error={false}
-                      $isFocused={false}
-                      $required={false}
-                      $size="default"
+                    <MockStyledComponent
+                      $ref={[Function]}
                     >
-                      <MockStyledComponent
-                        $type="select"
-                        src="data:image/svg+xml;utf8,<svg width=\\"12\\" height=\\"12\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><g transform=\\"matrix(1 0 0 1 2 6.899993896484375)\\"><path fill-rule=\\"nonzero\\" clip-rule=\\"nonzero\\" d=\\"M 20 0 L 20 3.8000030517578125 L 10 11.5 L 0 3.8000030517578125 L 0 0 L 10 7.70001220703125 L 20 0 Z\\" fill=\\"currentColor\\"/></g></svg>"
-                      >
-                        <img
-                          src="data:image/svg+xml;utf8,<svg width=\\"12\\" height=\\"12\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><g transform=\\"matrix(1 0 0 1 2 6.899993896484375)\\"><path fill-rule=\\"nonzero\\" clip-rule=\\"nonzero\\" d=\\"M 20 0 L 20 3.8000030517578125 L 10 11.5 L 0 3.8000030517578125 L 0 0 L 10 7.70001220703125 L 20 0 Z\\" fill=\\"currentColor\\"/></g></svg>"
-                          styled-component="true"
-                        />
-                      </MockStyledComponent>
-                    </After>
-                  </div>
-                </MockStyledComponent>
-              </BaseInput>
-            </div>
+                      <div
+                        styled-component="true"
+                      />
+                    </MockStyledComponent>
+                  </AutosizeInput>
+                </div>
+              </MockStyledComponent>
+            </span>
           </MockStyledComponent>
-        </Input>
-      </div>
-      <SelectDropDown
-        getOptionLabel={[Function]}
-        isDropDownOpen={false}
-        maxDropdownHeight="90vh"
-        multiple={true}
-        onChange={[Function]}
-        onItemSelect={[Function]}
-        options={Array []}
-        optionsLoaded={false}
-        overrides={Object {}}
-        selectedOptions={Array []}
-        type="select"
-      >
-        <div />
-      </SelectDropDown>
+          <TriangleDown
+            $disabled={false}
+            $error={false}
+            $isFocused={false}
+            $isLoading={false}
+            $isOpen={false}
+            $isPseudoFocused={false}
+            $multi={false}
+            $required={false}
+            $searchable={true}
+            $size="default"
+            $type="select"
+            onClick={[Function]}
+            overrides={
+              Object {
+                "Svg": [Function],
+              }
+            }
+            size={16}
+            title="open"
+          >
+            <Icon
+              $disabled={false}
+              $error={false}
+              $isFocused={false}
+              $isLoading={false}
+              $isOpen={false}
+              $isPseudoFocused={false}
+              $multi={false}
+              $required={false}
+              $searchable={true}
+              $size="default"
+              $type="select"
+              onClick={[Function]}
+              overrides={
+                Object {
+                  "Svg": [Function],
+                }
+              }
+              size={16}
+              title="open"
+              viewBox="0 0 24 24"
+            >
+              <MockStyledComponent
+                $disabled={false}
+                $error={false}
+                $isFocused={false}
+                $isLoading={false}
+                $isOpen={false}
+                $isPseudoFocused={false}
+                $multi={false}
+                $required={false}
+                $searchable={true}
+                $size="default"
+                $type="select"
+                onClick={[Function]}
+                viewBox="0 0 24 24"
+              >
+                <svg
+                  onClick={[Function]}
+                  styled-component="true"
+                  viewBox="0 0 24 24"
+                >
+                  <title>
+                    open
+                  </title>
+                  <path
+                    d="M12.7071 15.2929L17.1464 10.8536C17.4614 10.5386 17.2383 10 16.7929 10L7.20711 10C6.76165 10 6.53857 10.5386 6.85355 10.8536L11.2929 15.2929C11.6834 15.6834 12.3166 15.6834 12.7071 15.2929Z"
+                  />
+                </svg>
+              </MockStyledComponent>
+            </Icon>
+          </TriangleDown>
+        </div>
+      </MockStyledComponent>
     </div>
   </MockStyledComponent>
 </Select>
diff --git a/src/select/__tests__/__snapshots__/stateful-select-container.test.js.snap b/src/select/__tests__/__snapshots__/stateful-select-container.test.js.snap
index 081f69483..e48aaaa24 100644
--- a/src/select/__tests__/__snapshots__/stateful-select-container.test.js.snap
+++ b/src/select/__tests__/__snapshots__/stateful-select-container.test.js.snap
@@ -1,16 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Stateful Select Container should correctly render: Component has correct render  1`] = `
+exports[`StatefulSelectContainer renders correctly: StatefulSelectContainer has correct render 1`] = `
 <StatefulSelectContainer
-  initialState={Object {}}
-  onBlur={[Function]}
-  onChange={[Function]}
-  onFocus={[Function]}
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
-  onTextInputChange={[Function]}
-  prop1="some other propq"
-  stateReducer={[Function]}
+  initialState={
+    Object {
+      "value": Array [
+        Object {
+          "id": "id",
+          "label": "label",
+        },
+      ],
+    }
+  }
+  onChange={[MockFunction]}
+  overrides={Object {}}
+  stateReducer={[MockFunction]}
 >
   <div>
     test
diff --git a/src/select/__tests__/__snapshots__/styled-components.test.js.snap b/src/select/__tests__/__snapshots__/styled-components.test.js.snap
index 02edc1d74..6427e470c 100644
--- a/src/select/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/select/__tests__/__snapshots__/styled-components.test.js.snap
@@ -1,163 +1,741 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Select styled components StyledDropDown : StyledDropDown has correct styles when  is  1`] = `
+exports[`Select styled components Basic render: StyledClearIcon has correct default styles 1`] = `
 Object {
-  "borderRadius": "$theme.sizing.scale300",
-  "boxShadow": "$theme.lighting.shadow600",
-  "display": "none",
-  "left": "$theme.sizing.scale300",
-  "listStyle": "none",
-  "overflowY": "scroll",
+  "color": "$theme.colors.mono800",
+  "cursor": "pointer",
+  "display": "inline-block",
+  "fill": "currentColor",
+  "height": "100%",
   "position": "absolute",
-  "top": "$theme.sizing.scale1200",
-  "width": "calc(100% - $theme.sizing.scale600)",
+  "right": "14px",
+  "width": "$theme.sizing.scale600",
 }
 `;
 
-exports[`Select styled components StyledDropDown : StyledDropDown has correct styles when $isOpen is true 1`] = `
+exports[`Select styled components Basic render: StyledClearIcon has correct styles for the SIZE.compact 1`] = `
 Object {
-  "borderRadius": "$theme.sizing.scale300",
-  "boxShadow": "$theme.lighting.shadow600",
-  "display": null,
-  "left": "$theme.sizing.scale300",
-  "listStyle": "none",
-  "overflowY": "scroll",
+  "color": "$theme.colors.mono800",
+  "cursor": "pointer",
+  "display": "inline-block",
+  "fill": "currentColor",
+  "height": "100%",
   "position": "absolute",
-  "top": "$theme.sizing.scale1200",
-  "width": "calc(100% - $theme.sizing.scale600)",
+  "right": "14px",
+  "width": "$theme.sizing.scale600",
 }
 `;
 
-exports[`Select styled components StyledDropDown : StyledDropDown has correct styles when $type is select 1`] = `
+exports[`Select styled components Basic render: StyledClearIcon has correct styles for the TYPE.search 1`] = `
 Object {
-  "borderRadius": "$theme.sizing.scale300",
-  "boxShadow": "$theme.lighting.shadow600",
-  "display": "none",
-  "left": "$theme.sizing.scale300",
-  "listStyle": "none",
-  "overflowY": "scroll",
+  "color": "$theme.colors.mono800",
+  "cursor": "pointer",
+  "display": "inline-block",
+  "fill": "currentColor",
+  "height": "100%",
   "position": "absolute",
-  "top": "$theme.sizing.scale600",
-  "width": "calc(100% - $theme.sizing.scale600)",
+  "right": "14px",
+  "width": "$theme.sizing.scale600",
 }
 `;
 
-exports[`Select styled components StyledDropDownItem DropDownItem: StyledDropDownItem has correct styles 1`] = `
+exports[`Select styled components Basic render: StyledClearIcon has correct styles for the disabled state 1`] = `
 Object {
-  "lineHeight": "$theme.sizing.scale600",
+  "color": "$theme.colors.mono800",
+  "cursor": "pointer",
+  "display": "inline-block",
+  "fill": "currentColor",
+  "height": "100%",
+  "position": "absolute",
+  "right": "14px",
+  "width": "$theme.sizing.scale600",
 }
 `;
 
-exports[`Select styled components StyledInput Input: StyledInput has correct styles 1`] = `
+exports[`Select styled components Basic render: StyledControlContainer has correct default styles 1`] = `
 Object {
-  "::placeholder": Object {
-    "color": "$theme.colors.foregroundAlt",
-  },
-  "backgroundColor": "transparent",
-  "borderStyle": "none",
-  "borderWidth": "0",
+  "backgroundColor": "$theme.colors.mono200",
+  "borderColor": "$theme.colors.mono200",
+  "borderRadius": "$theme.sizing.scale100",
+  "borderStyle": "solid",
+  "borderWidth": "1px",
+  "boxShadow": "0 2px 6px transparent",
   "boxSizing": "border-box",
-  "caretColor": "$theme.colors.primary",
-  "color": "$theme.colors.foreground",
+  "color": "$theme.colors.mono1000",
   "cursor": "pointer",
-  "flexGrow": "1",
-  "fontFamily": "$theme.typography.font300.fontFamily",
-  "fontSize": "$theme.typography.font300.fontSize",
-  "fontWeight": "$theme.typography.font300.fontWeight",
-  "lineHeight": "$theme.typography.font300.lineHeight",
-  "maxWidth": "100%",
-  "outline": "none",
-  "paddingBottom": "$theme.sizing.scale300",
-  "paddingLeft": "$theme.sizing.scale500",
-  "paddingRight": "$theme.sizing.scale500",
-  "paddingTop": "$theme.sizing.scale300",
-  "width": "auto",
+  "display": "flex",
+  "overflow": "hidden",
+  "position": "relative",
+  "transitionDuration": "$theme.animation.timing100",
+  "transitionProperty": "border, boxShadow, backgroundColor",
+  "transitionTimingFunction": "$theme.animation.easeOutCurve",
+  "width": "100%",
 }
 `;
 
-exports[`Select styled components StyledInputContainer InputContainer: StyledInputContainer has correct styles 1`] = `
+exports[`Select styled components Basic render: StyledControlContainer has correct styles for the SIZE.compact 1`] = `
 Object {
-  "alignItems": "center",
-  "backgroundColor": "$theme.colors.inputFill",
+  "backgroundColor": "$theme.colors.mono200",
+  "borderColor": "$theme.colors.mono200",
+  "borderRadius": "$theme.sizing.scale100",
+  "borderStyle": "solid",
+  "borderWidth": "1px",
+  "boxShadow": "0 2px 6px transparent",
+  "boxSizing": "border-box",
+  "color": "$theme.colors.mono1000",
+  "cursor": "pointer",
+  "display": "flex",
+  "overflow": "hidden",
+  "position": "relative",
+  "transitionDuration": "$theme.animation.timing100",
+  "transitionProperty": "border, boxShadow, backgroundColor",
+  "transitionTimingFunction": "$theme.animation.easeOutCurve",
+  "width": "100%",
+}
+`;
+
+exports[`Select styled components Basic render: StyledControlContainer has correct styles for the TYPE.search 1`] = `
+Object {
+  "backgroundColor": "$theme.colors.mono200",
   "borderColor": "$theme.colors.mono200",
-  "borderRadius": undefined,
+  "borderRadius": "$theme.sizing.scale100",
+  "borderStyle": "solid",
+  "borderWidth": "1px",
+  "boxShadow": "0 2px 6px transparent",
+  "boxSizing": "border-box",
+  "color": "$theme.colors.mono1000",
+  "cursor": "text",
+  "display": "flex",
+  "overflow": "hidden",
+  "position": "relative",
+  "transitionDuration": "$theme.animation.timing100",
+  "transitionProperty": "border, boxShadow, backgroundColor",
+  "transitionTimingFunction": "$theme.animation.easeOutCurve",
+  "width": "100%",
+}
+`;
+
+exports[`Select styled components Basic render: StyledControlContainer has correct styles for the disabled state 1`] = `
+Object {
+  "backgroundColor": "$theme.colors.mono300",
+  "borderColor": "$theme.colors.mono300",
+  "borderRadius": "$theme.sizing.scale100",
   "borderStyle": "solid",
   "borderWidth": "1px",
   "boxShadow": "0 2px 6px transparent",
   "boxSizing": "border-box",
-  "color": "$theme.colors.foreground",
+  "color": "$theme.colors.mono600",
+  "cursor": "not-allowed",
   "display": "flex",
-  "flexWrap": "wrap",
+  "overflow": "hidden",
+  "position": "relative",
+  "transitionDuration": "$theme.animation.timing100",
+  "transitionProperty": "border, boxShadow, backgroundColor",
+  "transitionTimingFunction": "$theme.animation.easeOutCurve",
+  "width": "100%",
+}
+`;
+
+exports[`Select styled components Basic render: StyledInput has correct default styles 1`] = `
+Object {
+  "background": "transparent",
+  "border": "none",
+  "boxShadow": "none",
+  "boxSizing": "content-box",
+  "display": "inline-block",
   "fontFamily": "$theme.typography.font300.fontFamily",
   "fontSize": "$theme.typography.font300.fontSize",
   "fontWeight": "$theme.typography.font300.fontWeight",
   "lineHeight": "$theme.typography.font300.lineHeight",
+  "marginBottom": "0",
+  "marginLeft": "0",
+  "marginRight": "0",
+  "marginTop": "0",
+  "maxWidth": "100%",
+  "outline": "none",
+  "paddingBottom": "0",
+  "paddingLeft": "0",
+  "paddingRight": "0",
+  "paddingTop": "0",
+  "width": "1px",
+}
+`;
+
+exports[`Select styled components Basic render: StyledInput has correct styles for the SIZE.compact 1`] = `
+Object {
+  "background": "transparent",
+  "border": "none",
+  "boxShadow": "none",
+  "boxSizing": "content-box",
+  "display": "inline-block",
+  "fontFamily": "$theme.typography.font200.fontFamily",
+  "fontSize": "$theme.typography.font200.fontSize",
+  "fontWeight": "$theme.typography.font200.fontWeight",
+  "lineHeight": "$theme.typography.font200.lineHeight",
+  "marginBottom": "0",
+  "marginLeft": "0",
+  "marginRight": "0",
+  "marginTop": "0",
+  "maxWidth": "100%",
+  "outline": "none",
   "paddingBottom": "0",
-  "paddingLeft": "$theme.sizing.scale300",
-  "paddingRight": "$theme.sizing.scale300",
+  "paddingLeft": "0",
+  "paddingRight": "0",
   "paddingTop": "0",
+  "width": "1px",
+}
+`;
+
+exports[`Select styled components Basic render: StyledInput has correct styles for the TYPE.search 1`] = `
+Object {
+  "background": "transparent",
+  "border": "none",
+  "boxShadow": "none",
+  "boxSizing": "content-box",
+  "display": "inline-block",
+  "fontFamily": "$theme.typography.font300.fontFamily",
+  "fontSize": "$theme.typography.font300.fontSize",
+  "fontWeight": "$theme.typography.font300.fontWeight",
+  "lineHeight": "$theme.typography.font300.lineHeight",
+  "marginBottom": "0",
+  "marginLeft": "0",
+  "marginRight": "0",
+  "marginTop": "0",
+  "maxWidth": "100%",
+  "outline": "none",
+  "paddingBottom": "0",
+  "paddingLeft": "0",
+  "paddingRight": "0",
+  "paddingTop": "0",
+  "width": "1px",
+}
+`;
+
+exports[`Select styled components Basic render: StyledInput has correct styles for the disabled state 1`] = `
+Object {
+  "background": "transparent",
+  "border": "none",
+  "boxShadow": "none",
+  "boxSizing": "content-box",
+  "display": "inline-block",
+  "fontFamily": "$theme.typography.font300.fontFamily",
+  "fontSize": "$theme.typography.font300.fontSize",
+  "fontWeight": "$theme.typography.font300.fontWeight",
+  "lineHeight": "$theme.typography.font300.lineHeight",
+  "marginBottom": "0",
+  "marginLeft": "0",
+  "marginRight": "0",
+  "marginTop": "0",
+  "maxWidth": "100%",
+  "outline": "none",
+  "paddingBottom": "0",
+  "paddingLeft": "0",
+  "paddingRight": "0",
+  "paddingTop": "0",
+  "width": "1px",
+}
+`;
+
+exports[`Select styled components Basic render: StyledInputContainer has correct default styles 1`] = `
+Object {
+  "background": "transparent",
+  "border": "none",
+  "boxShadow": "none",
+  "boxSizing": "content-box",
+  "display": "inline-block",
+  "height": "$theme.typography.font300.lineHeight",
+  "marginBottom": "0",
+  "marginLeft": "0",
+  "marginRight": "0",
+  "marginTop": "0",
+  "maxWidth": "100%",
+  "outline": "none",
+  "paddingBottom": "$theme.sizing.scale400",
+  "paddingLeft": "$theme.sizing.scale500",
+  "paddingRight": "$theme.sizing.scale800",
+  "paddingTop": "$theme.sizing.scale400",
   "position": "relative",
-  "transitionDuration": "$theme.animation.timing100",
-  "transitionProperty": "border, boxShadow, backgroundColor",
-  "transitionTimingFunction": "$theme.animation.easeOutCurve",
-  "width": "100%",
 }
 `;
 
-exports[`Select styled components StyledOption : StyledOption has correct styles when  1`] = `
+exports[`Select styled components Basic render: StyledInputContainer has correct styles for the SIZE.compact 1`] = `
 Object {
-  ":hover": Object {
-    "cursor": "pointer",
-  },
-  "color": null,
-  "paddingLeft": "18px",
-  "paddingRight": "18px",
+  "background": "transparent",
+  "border": "none",
+  "boxShadow": "none",
+  "boxSizing": "content-box",
+  "display": "inline-block",
+  "height": "$theme.typography.font200.lineHeight",
+  "marginBottom": "0",
+  "marginLeft": "0",
+  "marginRight": "0",
+  "marginTop": "0",
+  "maxWidth": "100%",
+  "outline": "none",
+  "paddingBottom": "$theme.sizing.scale200",
+  "paddingLeft": "$theme.sizing.scale500",
+  "paddingRight": "$theme.sizing.scale800",
+  "paddingTop": "$theme.sizing.scale200",
+  "position": "relative",
 }
 `;
 
-exports[`Select styled components StyledOption : StyledOption has correct styles when $selected 1`] = `
+exports[`Select styled components Basic render: StyledInputContainer has correct styles for the TYPE.search 1`] = `
 Object {
-  ":hover": Object {
-    "cursor": "pointer",
-  },
-  "color": "$theme.colors.primary400",
-  "paddingLeft": "0px",
-  "paddingRight": "0px",
+  "background": "transparent",
+  "border": "none",
+  "boxShadow": "none",
+  "boxSizing": "content-box",
+  "display": "inline-block",
+  "height": "$theme.typography.font300.lineHeight",
+  "marginBottom": "0",
+  "marginLeft": "0",
+  "marginRight": "0",
+  "marginTop": "0",
+  "maxWidth": "100%",
+  "outline": "none",
+  "paddingBottom": "$theme.sizing.scale400",
+  "paddingLeft": "0",
+  "paddingRight": "$theme.sizing.scale800",
+  "paddingTop": "$theme.sizing.scale400",
+  "position": "relative",
 }
 `;
 
-exports[`Select styled components StyledOption : StyledOption has correct styles when disabled 1`] = `
+exports[`Select styled components Basic render: StyledInputContainer has correct styles for the disabled state 1`] = `
+Object {
+  "background": "transparent",
+  "border": "none",
+  "boxShadow": "none",
+  "boxSizing": "content-box",
+  "display": "inline-block",
+  "height": "$theme.typography.font300.lineHeight",
+  "marginBottom": "0",
+  "marginLeft": "0",
+  "marginRight": "0",
+  "marginTop": "0",
+  "maxWidth": "100%",
+  "outline": "none",
+  "paddingBottom": "$theme.sizing.scale400",
+  "paddingLeft": "$theme.sizing.scale500",
+  "paddingRight": "$theme.sizing.scale800",
+  "paddingTop": "$theme.sizing.scale400",
+  "position": "relative",
+}
+`;
+
+exports[`Select styled components Basic render: StyledInputSizer has correct default styles 1`] = `
+Object {
+  "height": 0,
+  "left": 0,
+  "overflow": "scroll",
+  "position": "absolute",
+  "top": 0,
+  "visibility": "hidden",
+  "whiteSpace": "pre",
+}
+`;
+
+exports[`Select styled components Basic render: StyledInputSizer has correct styles for the SIZE.compact 1`] = `
+Object {
+  "height": 0,
+  "left": 0,
+  "overflow": "scroll",
+  "position": "absolute",
+  "top": 0,
+  "visibility": "hidden",
+  "whiteSpace": "pre",
+}
+`;
+
+exports[`Select styled components Basic render: StyledInputSizer has correct styles for the TYPE.search 1`] = `
+Object {
+  "height": 0,
+  "left": 0,
+  "overflow": "scroll",
+  "position": "absolute",
+  "top": 0,
+  "visibility": "hidden",
+  "whiteSpace": "pre",
+}
+`;
+
+exports[`Select styled components Basic render: StyledInputSizer has correct styles for the disabled state 1`] = `
+Object {
+  "height": 0,
+  "left": 0,
+  "overflow": "scroll",
+  "position": "absolute",
+  "top": 0,
+  "visibility": "hidden",
+  "whiteSpace": "pre",
+}
+`;
+
+exports[`Select styled components Basic render: StyledOptionContent has correct default styles 1`] = `
+Object {
+  "color": "$theme.colors.black",
+  "cursor": "pointer",
+  "fontWeight": "normal",
+}
+`;
+
+exports[`Select styled components Basic render: StyledOptionContent has correct styles for the SIZE.compact 1`] = `
+Object {
+  "color": "$theme.colors.black",
+  "cursor": "pointer",
+  "fontWeight": "normal",
+}
+`;
+
+exports[`Select styled components Basic render: StyledOptionContent has correct styles for the TYPE.search 1`] = `
+Object {
+  "color": "$theme.colors.black",
+  "cursor": "pointer",
+  "fontWeight": "normal",
+}
+`;
+
+exports[`Select styled components Basic render: StyledOptionContent has correct styles for the disabled state 1`] = `
 Object {
-  ":hover": Object {
-    "cursor": "not-allowed",
-  },
   "color": "$theme.colors.mono700",
-  "paddingLeft": "18px",
-  "paddingRight": "18px",
+  "cursor": "not-allowed",
+  "fontWeight": "normal",
 }
 `;
 
-exports[`Select styled components StyledSelectComponentIcon : StyledSelectComponentIcon has correct styles when type is clear_all 1`] = `
+exports[`Select styled components Basic render: StyledPlaceholder has correct default styles 1`] = `
 Object {
+  "alignItems": "center",
+  "bottom": "0",
+  "color": "$theme.colors.mono700",
+  "display": "flex",
+  "left": "0",
+  "maxWidth": "100%",
+  "overflow": "hidden",
+  "paddingBottom": "$theme.sizing.scale400",
+  "paddingLeft": "$theme.sizing.scale500",
+  "paddingRight": "$theme.sizing.scale800",
+  "paddingTop": "$theme.sizing.scale400",
+  "position": "absolute",
+  "right": "0",
+  "textOverflow": "ellipsis",
+  "top": "0",
+  "whiteSpace": "nowrap",
+}
+`;
+
+exports[`Select styled components Basic render: StyledPlaceholder has correct styles for the SIZE.compact 1`] = `
+Object {
+  "alignItems": "center",
+  "bottom": "0",
+  "color": "$theme.colors.mono700",
+  "display": "flex",
+  "left": "0",
+  "maxWidth": "100%",
+  "overflow": "hidden",
+  "paddingBottom": "$theme.sizing.scale200",
+  "paddingLeft": "$theme.sizing.scale500",
+  "paddingRight": "$theme.sizing.scale800",
+  "paddingTop": "$theme.sizing.scale200",
+  "position": "absolute",
+  "right": "0",
+  "textOverflow": "ellipsis",
+  "top": "0",
+  "whiteSpace": "nowrap",
+}
+`;
+
+exports[`Select styled components Basic render: StyledPlaceholder has correct styles for the TYPE.search 1`] = `
+Object {
+  "alignItems": "center",
+  "bottom": "0",
+  "color": "$theme.colors.mono700",
+  "display": "flex",
+  "left": "0",
+  "maxWidth": "100%",
+  "overflow": "hidden",
+  "paddingBottom": "$theme.sizing.scale400",
+  "paddingLeft": "$theme.sizing.scale1000",
+  "paddingRight": "$theme.sizing.scale800",
+  "paddingTop": "$theme.sizing.scale400",
+  "position": "absolute",
+  "right": "0",
+  "textOverflow": "ellipsis",
+  "top": "0",
+  "whiteSpace": "nowrap",
+}
+`;
+
+exports[`Select styled components Basic render: StyledPlaceholder has correct styles for the disabled state 1`] = `
+Object {
+  "alignItems": "center",
+  "bottom": "0",
+  "color": "$theme.colors.mono600",
+  "display": "flex",
+  "left": "0",
+  "maxWidth": "100%",
+  "overflow": "hidden",
+  "paddingBottom": "$theme.sizing.scale400",
+  "paddingLeft": "$theme.sizing.scale500",
+  "paddingRight": "$theme.sizing.scale800",
+  "paddingTop": "$theme.sizing.scale400",
+  "position": "absolute",
+  "right": "0",
+  "textOverflow": "ellipsis",
+  "top": "0",
+  "whiteSpace": "nowrap",
+}
+`;
+
+exports[`Select styled components Basic render: StyledRoot has correct default styles 1`] = `
+Object {
+  "boxSizing": "border-box",
+  "fontFamily": "$theme.typography.font300.fontFamily",
+  "fontSize": "$theme.typography.font300.fontSize",
+  "fontWeight": "$theme.typography.font300.fontWeight",
+  "lineHeight": "$theme.typography.font300.lineHeight",
+}
+`;
+
+exports[`Select styled components Basic render: StyledRoot has correct styles for the SIZE.compact 1`] = `
+Object {
+  "boxSizing": "border-box",
+  "fontFamily": "$theme.typography.font200.fontFamily",
+  "fontSize": "$theme.typography.font200.fontSize",
+  "fontWeight": "$theme.typography.font200.fontWeight",
+  "lineHeight": "$theme.typography.font200.lineHeight",
+}
+`;
+
+exports[`Select styled components Basic render: StyledRoot has correct styles for the TYPE.search 1`] = `
+Object {
+  "boxSizing": "border-box",
+  "fontFamily": "$theme.typography.font300.fontFamily",
+  "fontSize": "$theme.typography.font300.fontSize",
+  "fontWeight": "$theme.typography.font300.fontWeight",
+  "lineHeight": "$theme.typography.font300.lineHeight",
+}
+`;
+
+exports[`Select styled components Basic render: StyledRoot has correct styles for the disabled state 1`] = `
+Object {
+  "boxSizing": "border-box",
+  "fontFamily": "$theme.typography.font300.fontFamily",
+  "fontSize": "$theme.typography.font300.fontSize",
+  "fontWeight": "$theme.typography.font300.fontWeight",
+  "lineHeight": "$theme.typography.font300.lineHeight",
+}
+`;
+
+exports[`Select styled components Basic render: StyledSearchIcon has correct default styles 1`] = `
+Object {
+  "color": "$theme.colors.mono700",
+  "cursor": "pointer",
+  "display": "inline-block",
+  "fill": "currentColor",
+  "height": "100%",
+  "left": "12px",
+  "position": "absolute",
+  "width": "$theme.sizing.scale600",
+  "zIndex": 1,
+}
+`;
+
+exports[`Select styled components Basic render: StyledSearchIcon has correct styles for the SIZE.compact 1`] = `
+Object {
+  "color": "$theme.colors.mono700",
+  "cursor": "pointer",
+  "display": "inline-block",
+  "fill": "currentColor",
+  "height": "100%",
+  "left": "12px",
+  "position": "absolute",
+  "width": "$theme.sizing.scale600",
+  "zIndex": 1,
+}
+`;
+
+exports[`Select styled components Basic render: StyledSearchIcon has correct styles for the TYPE.search 1`] = `
+Object {
+  "color": "$theme.colors.mono700",
+  "cursor": "pointer",
+  "display": "inline-block",
+  "fill": "currentColor",
+  "height": "100%",
+  "left": "12px",
+  "position": "absolute",
+  "width": "$theme.sizing.scale600",
+  "zIndex": 1,
+}
+`;
+
+exports[`Select styled components Basic render: StyledSearchIcon has correct styles for the disabled state 1`] = `
+Object {
+  "color": "$theme.colors.mono600",
+  "cursor": "not-allowed",
+  "display": "inline-block",
+  "fill": "currentColor",
+  "height": "100%",
+  "left": "12px",
+  "position": "absolute",
+  "width": "$theme.sizing.scale600",
+  "zIndex": 1,
+}
+`;
+
+exports[`Select styled components Basic render: StyledSelectArrow has correct default styles 1`] = `
+Object {
+  "color": "$theme.colors.mono800",
+  "cursor": "pointer",
+  "display": "inline-block",
+  "fill": "currentColor",
+  "height": "100%",
+  "position": "absolute",
+  "right": "12px",
+  "width": "$theme.sizing.scale600",
+}
+`;
+
+exports[`Select styled components Basic render: StyledSelectArrow has correct styles for the SIZE.compact 1`] = `
+Object {
+  "color": "$theme.colors.mono800",
+  "cursor": "pointer",
+  "display": "inline-block",
+  "fill": "currentColor",
+  "height": "100%",
+  "position": "absolute",
+  "right": "12px",
+  "width": "$theme.sizing.scale600",
+}
+`;
+
+exports[`Select styled components Basic render: StyledSelectArrow has correct styles for the TYPE.search 1`] = `
+Object {
+  "color": "$theme.colors.mono800",
   "cursor": "pointer",
-  "marginLeft": "auto",
+  "display": "inline-block",
+  "fill": "currentColor",
+  "height": "100%",
+  "position": "absolute",
+  "right": "12px",
+  "width": "$theme.sizing.scale600",
 }
 `;
 
-exports[`Select styled components StyledSelectComponentIcon : StyledSelectComponentIcon has correct styles when type is loop 1`] = `
+exports[`Select styled components Basic render: StyledSelectArrow has correct styles for the disabled state 1`] = `
 Object {
-  "paddingLeft": "$theme.sizing.scale300",
+  "color": "$theme.colors.mono600",
+  "cursor": "not-allowed",
+  "display": "inline-block",
+  "fill": "currentColor",
+  "height": "100%",
+  "position": "absolute",
+  "right": "12px",
+  "width": "$theme.sizing.scale600",
 }
 `;
 
-exports[`Select styled components StyledSelectComponentIcon : StyledSelectComponentIcon has correct styles when type is select 1`] = `
+exports[`Select styled components Basic render: StyledSingleValue has correct default styles 1`] = `
 Object {
-  "marginRight": "$theme.sizing.scale500",
+  "boxSizing": "border-box",
+  "height": "100%",
+  "left": "0",
+  "maxWidth": "100%",
+  "paddingBottom": "$theme.sizing.scale400",
+  "paddingLeft": "$theme.sizing.scale500",
+  "paddingRight": "$theme.sizing.scale800",
+  "paddingTop": "$theme.sizing.scale400",
+  "position": "absolute",
+  "top": "0",
+  "whiteSpace": "nowrap",
 }
 `;
 
-exports[`Select styled components StyledSelectComponentIcon : StyledSelectComponentIcon has correct styles when type is selected 1`] = `
+exports[`Select styled components Basic render: StyledSingleValue has correct styles for the SIZE.compact 1`] = `
 Object {
-  "paddingRight": "$theme.sizing.scale300",
+  "boxSizing": "border-box",
+  "height": "100%",
+  "left": "0",
+  "maxWidth": "100%",
+  "paddingBottom": "$theme.sizing.scale200",
+  "paddingLeft": "$theme.sizing.scale500",
+  "paddingRight": "$theme.sizing.scale800",
+  "paddingTop": "$theme.sizing.scale200",
+  "position": "absolute",
+  "top": "0",
+  "whiteSpace": "nowrap",
+}
+`;
+
+exports[`Select styled components Basic render: StyledSingleValue has correct styles for the TYPE.search 1`] = `
+Object {
+  "boxSizing": "border-box",
+  "height": "100%",
+  "left": "0",
+  "maxWidth": "100%",
+  "paddingBottom": "$theme.sizing.scale400",
+  "paddingLeft": "$theme.sizing.scale1000",
+  "paddingRight": "$theme.sizing.scale800",
+  "paddingTop": "$theme.sizing.scale400",
+  "position": "absolute",
+  "top": "0",
+  "whiteSpace": "nowrap",
+}
+`;
+
+exports[`Select styled components Basic render: StyledSingleValue has correct styles for the disabled state 1`] = `
+Object {
+  "boxSizing": "border-box",
+  "height": "100%",
+  "left": "0",
+  "maxWidth": "100%",
+  "paddingBottom": "$theme.sizing.scale400",
+  "paddingLeft": "$theme.sizing.scale500",
+  "paddingRight": "$theme.sizing.scale800",
+  "paddingTop": "$theme.sizing.scale400",
+  "position": "absolute",
+  "top": "0",
+  "whiteSpace": "nowrap",
+}
+`;
+
+exports[`Select styled components Basic render: StyledValueContainer has correct default styles 1`] = `
+Object {
+  "boxSizing": "border-box",
+  "display": "inline-block",
+  "paddingLeft": 0,
+}
+`;
+
+exports[`Select styled components Basic render: StyledValueContainer has correct styles for the SIZE.compact 1`] = `
+Object {
+  "boxSizing": "border-box",
+  "display": "inline-block",
+  "paddingLeft": 0,
+}
+`;
+
+exports[`Select styled components Basic render: StyledValueContainer has correct styles for the TYPE.search 1`] = `
+Object {
+  "boxSizing": "border-box",
+  "display": "inline-block",
+  "paddingLeft": "$theme.sizing.scale1000",
+}
+`;
+
+exports[`Select styled components Basic render: StyledValueContainer has correct styles for the disabled state 1`] = `
+Object {
+  "boxSizing": "border-box",
+  "display": "inline-block",
+  "paddingLeft": 0,
+}
+`;
+
+exports[`Select styled components StyledOptionContent styles: StyledOptionContent has correct styles when selected 1`] = `
+Object {
+  "color": "$theme.colors.primary400",
+  "cursor": "pointer",
+  "fontWeight": "bold",
 }
 `;
diff --git a/src/select/__tests__/autosize-input.test.js b/src/select/__tests__/autosize-input.test.js
new file mode 100644
index 000000000..83cdc79d2
--- /dev/null
+++ b/src/select/__tests__/autosize-input.test.js
@@ -0,0 +1,41 @@
+/*
+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 {mount} from 'enzyme';
+import AutosizeInput from '../autosize-input';
+import {StyledInput, StyledInputSizer} from '../styled-components';
+
+describe('AutosizeInput component', function() {
+  const props = {value: 'test', id: 'test-id'};
+  const ref = React.createRef();
+
+  test('renders correctly', function() {
+    // $FlowFixMe
+    const wrapper = mount(<AutosizeInput {...props} inputRef={ref} />);
+    const renderedInput = wrapper.find(StyledInput).first();
+    const renderedSizer = wrapper.find(StyledInputSizer).first();
+    expect(renderedInput).toExist();
+    expect(renderedInput.props()).toMatchObject({
+      $width: '5px',
+      ...props,
+      $ref: ref,
+    });
+    expect(renderedSizer).toExist();
+    expect(renderedSizer.props()).toMatchObject({
+      children: props.value,
+      $ref: wrapper.instance().sizerRef,
+    });
+  });
+
+  test('had correct initial state', function() {
+    const props = {value: 'test'};
+    // $FlowFixMe
+    const wrapper = mount(<AutosizeInput {...props} />);
+    expect(wrapper.state().inputWidth).toEqual(5);
+  });
+});
diff --git a/src/select/__tests__/dropdown.test.js b/src/select/__tests__/dropdown.test.js
index daf8af526..23903df92 100644
--- a/src/select/__tests__/dropdown.test.js
+++ b/src/select/__tests__/dropdown.test.js
@@ -6,72 +6,83 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import React from 'react';
-import {shallow} from 'enzyme';
-import {StyledDropDown} from '../index';
+import {mount} from 'enzyme';
+import SelectDropdown from '../dropdown';
+import {SIZE, TYPE} from '../constants';
+import {StatefulMenu} from '../../menu';
 
-describe('Stateless Select Dropdown', function() {
-  let wrapper,
-    events = {};
-  let allProps: any = {},
-    mockFn;
-  let options = [
-      {
-        id: '1',
-        label: 'label for 1',
-      },
-      {
-        id: '2',
-        label: 'label for 2',
-      },
-      {
-        id: '3',
-        label: 'label for 3',
-      },
-      {
-        id: '4',
-        label: 'label for 4',
-      },
-    ],
-    getOptionLabel = jest.fn(() => <div>test label</div>),
-    isDropDownOpen = true,
-    selectedOptions,
-    onChange,
-    type,
-    rows;
+jest.mock('../../menu');
+
+describe('SelectDropdown', function() {
+  let wrapper;
+  let props = {};
+  const options = [{id: '1', label: 'label1'}, {id: '2', label: 'label2'}];
+  const value = [{id: '1', label: 'label1'}];
 
   beforeEach(function() {
-    mockFn = jest.fn();
-    events = {
-      onChange: mockFn,
-    };
-    allProps = {
-      ...events,
+    props = {
+      value,
+      valueKey: 'id',
+      labelKey: 'label',
+      size: SIZE.default,
       options,
-      getOptionLabel,
-      isDropDownOpen,
-      selectedOptions,
-      onChange,
-      type,
-      rows,
+      onItemSelect: jest.fn(),
+      getOptionLabel: jest.fn(({option}) => <span>option.label</span>),
+      maxDropdownHeight: '1000px',
+      overrides: {},
+      error: false,
+      isLoading: false,
+      multi: false,
+      required: false,
+      searchable: true,
+      type: TYPE.select,
     };
+    wrapper = mount(<SelectDropdown {...props} />);
   });
 
   afterEach(function() {
-    jest.restoreAllMocks();
     wrapper && wrapper.unmount();
   });
 
-  test.each([[options, true], [[], true], [options, false]])(
-    'should render component with options %s and drondown open is %s',
-    (options, isDropDownOpen) => {
-      allProps = Object.assign({}, allProps, {options, isDropDownOpen});
-      wrapper = shallow(<StyledDropDown {...allProps} />);
-      expect(wrapper).toMatchSnapshot(
-        'Component has correct render with options length ' +
-          options.length +
-          ' and dropdown open is %s ' +
-          isDropDownOpen,
-      );
-    },
-  );
+  afterAll(function() {
+    jest.restoreAllMocks();
+  });
+
+  test('renders StatefulMenu', function() {
+    // $FlowFixMe
+    const menuProps = StatefulMenu.mock.calls[0][0];
+    expect(StatefulMenu).toHaveBeenCalled();
+    expect(menuProps).toMatchObject({
+      onItemSelect: props.onItemSelect,
+      items: props.options,
+      size: props.size,
+    });
+    expect(menuProps.overrides).toMatchSnapshot(
+      'Passes correct overrides to the StatefulMenu',
+    );
+  });
+
+  test('getItemLabel is passed to a menu Option', function() {
+    // $FlowFixMe
+    const menuProps = StatefulMenu.mock.calls[1][0];
+    expect(menuProps.overrides.Option.props.getItemLabel).toEqual(
+      wrapper.instance().getItemLabel,
+    );
+  });
+
+  test('passes correct props to OptionContent', function() {
+    const renderedOption = wrapper.instance().getItemLabel(options[1]);
+    expect(renderedOption.props.$selected).toEqual(false);
+    expect(renderedOption.props).toMatchSnapshot(
+      'OptionContent gets correct props when an option is not selected',
+    );
+  });
+
+  test('passes correct props to OptionContent for a selected item', function() {
+    const renderedOption = wrapper.instance().getItemLabel(options[0]);
+    expect(renderedOption.props.$selected).toEqual(true);
+    expect(renderedOption.props).toMatchSnapshot(
+      'OptionContent gets correct props when an option is selected',
+    );
+  });
 });
diff --git a/src/select/__tests__/multi-value.test.js b/src/select/__tests__/multi-value.test.js
new file mode 100644
index 000000000..4ab968129
--- /dev/null
+++ b/src/select/__tests__/multi-value.test.js
@@ -0,0 +1,36 @@
+/*
+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 {mount} from 'enzyme';
+import MultiValue from '../multi-value';
+import {Tag} from '../../tag';
+
+describe('Multi Value component', function() {
+  test('renders Tag by default', function() {
+    const props = {children: 'test'};
+    const wrapper = mount(<MultiValue {...props} />);
+    const renderedTag = wrapper.find(Tag).first();
+    expect(renderedTag).toExist();
+  });
+
+  test('renders MultiValue', function() {
+    const mock = jest.fn().mockImplementation(() => <span />);
+    const props = {
+      children: 'test',
+      removeValue: jest.fn(),
+      overrides: {MultiValue: mock},
+    };
+    mount(<MultiValue {...props} />);
+    expect(mock).toHaveBeenCalled();
+    const passedProps = mock.mock.calls[0][0];
+    expect(passedProps.onActionClick).toEqual(props.removeValue);
+    expect(passedProps).toMatchSnapshot(
+      'passes corect props to an underlying component',
+    );
+  });
+});
diff --git a/src/select/__tests__/select.test.js b/src/select/__tests__/select.test.js
index a004a84d0..c2573e06e 100644
--- a/src/select/__tests__/select.test.js
+++ b/src/select/__tests__/select.test.js
@@ -6,472 +6,69 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import React from 'react';
-import {mount, shallow} from 'enzyme';
-import {
-  Select,
-  StyledSelectComponentIcon,
-  StyledInput,
-  StyledOption,
-} from '../index';
-import {StyledListItem} from '../../menu';
-import {STATE_CHANGE_TYPE, TYPE, ICON} from '../constants';
-import {StyledAction} from '../../tag';
-import {KEY_STRINGS} from '../../menu/constants';
-
-function sleep(ms: number) {
-  return new Promise(resolve => {
-    setTimeout(resolve, ms);
-  });
-}
-
-describe('Stateless select', function() {
-  let wrapper,
-    events = {};
-  let allProps: any = {},
-    mockFn;
+import {mount} from 'enzyme';
+import {Select} from '../index';
+import {STATE_CHANGE_TYPE, TYPE} from '../constants';
+
+describe('Select component', function() {
+  let wrapper;
+  let props: any = {};
+  const item = {id: 'id1', label: 'label1'};
+  const options = [
+    item,
+    {id: 'id2', label: 'label2'},
+    {id: 'id3', label: 'bel3'},
+  ];
 
   beforeEach(function() {
-    mockFn = jest.fn();
-    events = {
+    props = {
+      options: options,
       onChange: jest.fn(),
-      onTextInputChange: jest.fn(),
-      onMouseEnter: mockFn,
-      onMouseLeave: mockFn,
-      onFocus: mockFn,
-      onBlur: mockFn,
-    };
-    allProps = {
-      ...events,
+      onInputChange: jest.fn(),
+      onFocus: jest.fn(),
+      onBlur: jest.fn(),
     };
   });
 
   afterEach(function() {
-    jest.restoreAllMocks();
     wrapper && wrapper.unmount();
   });
 
   test.each([
-    [TYPE.search, false],
     [TYPE.select, false],
-    [TYPE.search, true],
     [TYPE.select, true],
+    [TYPE.search, false],
+    [TYPE.search, true],
   ])(
-    'should render component in %s mode and %s for multiple choice',
+    'renders component in %s mode and %s for multiple choice',
     (type, multiple) => {
-      allProps.type = type;
-      allProps.multiple = multiple;
-      wrapper = mount(<Select {...allProps} />);
+      props.type = type;
+      props.multiple = multiple;
+      wrapper = mount(<Select {...props} />);
       expect(wrapper).toMatchSnapshot(
         'Component has correct render in ' +
           type +
-          ' mode and mutiple choice equal ' +
+          ' mode and mutiple choice equals ' +
           multiple,
       );
     },
   );
-
-  describe('events', function() {
-    let documentMock,
-      instance,
-      originalAddEventListener,
-      originalRemoveEventListener;
-    beforeEach(function() {
-      /* eslint-disable-next-line cup/no-undef  */
-      documentMock = document;
-      originalAddEventListener = documentMock.addEventListener;
-      originalRemoveEventListener = documentMock.removeEventListener;
-      //$FlowFixMe
-      documentMock.addEventListener = jest.fn();
-      //$FlowFixMe
-      documentMock.removeEventListener = jest.fn();
-      wrapper = shallow(<Select {...allProps} />);
-      instance = wrapper.instance();
-    });
-    afterEach(function() {
-      //$FlowFixMe
-      documentMock.addEventListener = originalAddEventListener;
-      //$FlowFixMe
-      documentMock.removeEventListener = originalRemoveEventListener;
-    });
-
-    test('should subscribe on document click to handle toggle of dropdown when component is rendered', function() {
-      expect(documentMock.addEventListener).toHaveBeenCalledWith(
-        'click',
-        instance.handleClickEvent,
-        {
-          capture: true,
-        },
-      );
-    });
-
-    test('should unsubscribe from document click to handle toggle of dropdown when component is removed from DOM', function() {
-      wrapper.unmount();
-      expect(documentMock.removeEventListener).toHaveBeenCalledWith(
-        'click',
-        instance.handleClickEvent,
-        {
-          capture: true,
-        },
-      );
-    });
-
-    test('should close dropdown if clicked outside of select component', function() {
-      wrapper.unmount();
-      wrapper = mount(<Select {...allProps} />);
-      instance = wrapper.instance();
-      instance.setState({isDropDownOpen: true});
-      instance.handleClickEvent({
-        target: null,
-      });
-      expect(instance.state.isDropDownOpen).toBeFalsy();
-    });
-
-    test('should call onTextInputChange when input value changes', function() {
-      let textValue = 'test';
-      allProps.type = TYPE.search;
-      allProps.onTextInputChange = jest.fn();
-      wrapper = mount(<Select {...allProps} />);
-      const e = {
-        target: {
-          value: textValue,
-        },
-      };
-      wrapper.instance().onTextInputChange(e);
-      expect(allProps.onTextInputChange).toHaveBeenCalledWith(e);
-    });
-  });
-
-  describe('Selected Tags', function() {
-    let clearIcon;
-    let selectedOptions;
-    let options;
-    beforeEach(function() {
-      selectedOptions = [
-        {
-          id: '2',
-          label: 'label for 2',
-        },
-      ];
-      options = [
-        {
-          id: '1',
-          label: 'label for 1',
-        },
-        {
-          id: '2',
-          label: 'label for 2',
-        },
-      ];
-      allProps = Object.assign({}, allProps, {
-        options,
-        selectedOptions,
-        type: TYPE.search,
-        multiple: true,
-      });
-      wrapper = mount(<Select {...allProps} />);
-    });
-
-    test('should remove selected tag from selected options if X button is clicked', function() {
-      clearIcon = wrapper.find(StyledAction);
-      clearIcon.first().simulate('click');
-      expect(allProps.onChange.mock.calls[0][0]).toEqual({
-        type: STATE_CHANGE_TYPE.unselect,
-        option: allProps.selectedOptions[0],
-        selectedOptions: [],
-        event: expect.anything(),
-      });
-    });
-
-    test('should should clear all selected tags when Clear All clicked', function() {
-      wrapper.unmount();
-      allProps.selectedOptions = options;
-      wrapper = mount(<Select {...allProps} />);
-      clearIcon = wrapper.find(StyledSelectComponentIcon);
-      clearIcon = clearIcon.filterWhere(
-        comp => comp.props().$type === ICON.clearAll,
-      );
-      clearIcon.first().simulate('click');
-
-      expect(allProps.onChange.mock.calls[0][0]).toEqual({
-        type: STATE_CHANGE_TYPE.unselect,
-        selectedOptions: [],
-        event: expect.anything(),
-      });
-    });
-  });
-
-  describe('Search mode', function() {
-    test('should call text input change method when change of input happened', function() {
-      allProps = Object.assign({}, allProps, {
-        type: TYPE.search,
-        multiple: true,
-      });
-      wrapper = mount(<Select {...allProps} />);
-      const value = 'some input value';
-      let input = wrapper
-        .find(StyledInput)
-        .first()
-        .find('input');
-      const event = {
-        target: {value},
-      };
-      input.props().onChange(event);
-      expect(wrapper.instance().props.onTextInputChange).toHaveBeenCalledWith(
-        event,
-      );
-    });
-
-    test('should support simple filtering', async function() {
-      allProps = Object.assign({}, allProps, {
-        type: TYPE.search,
-        filterable: true,
-        options: jest.fn(),
-      });
-      let onTextInputChangePromise = Promise.resolve([
-        {
-          id: 'aaa',
-          label: 'AAA',
-        },
-        {
-          id: 'aab',
-          label: 'AAB',
-        },
-        {
-          id: 'abb',
-          label: 'ABB',
-        },
-      ]);
-      allProps.options.mockReturnValue(onTextInputChangePromise);
-      wrapper = mount(<Select {...allProps} />);
-
-      let input = wrapper
-        .find(StyledInput)
-        .first()
-        .find('input');
-
-      input.simulate('change', {target: {value: 'a'}});
-      await sleep(1);
-      wrapper.update();
-      expect(wrapper.find(StyledOption)).toHaveLength(3);
-
-      input.simulate('change', {target: {value: 'aa'}});
-      await sleep(1);
-      wrapper.update();
-      expect(wrapper.find(StyledOption)).toHaveLength(2);
-
-      input.simulate('change', {target: {value: 'aaa'}});
-      await sleep(1);
-      wrapper.update();
-      expect(wrapper.find(StyledOption)).toHaveLength(1);
-
-      input.simulate('change', {target: {value: 'aaaa'}});
-      await sleep(1);
-      wrapper.update();
-      expect(wrapper.find(StyledOption)).toHaveLength(0);
-    });
-
-    test('should support select and deselect', async () => {
-      allProps = Object.assign({}, allProps, {
-        type: TYPE.search,
-        multiple: true,
-        options: [
-          {id: 'red', label: 'Red'},
-          {id: 'green', label: 'Green'},
-          {id: 'blue', label: 'Blue'},
-        ],
-      });
-      wrapper = mount(<Select {...allProps} />);
-      let input = wrapper
-        .find(StyledInput)
-        .first()
-        .find('input');
-
-      // Type some characters to get items to show
-      input.props().onChange({target: {value: 'e'}});
-      await sleep(1);
-      wrapper.update();
-
-      let renderOptions = wrapper.find(StyledListItem);
-      let selected = [];
-
-      // Test a sequence of select/deselects
-      [
-        {index: 0, type: STATE_CHANGE_TYPE.select},
-        {index: 2, type: STATE_CHANGE_TYPE.select},
-        {index: 0, type: STATE_CHANGE_TYPE.unselect},
-      ].forEach(event => {
-        // Click the specific option
-        renderOptions.at(event.index).simulate('click');
-
-        const toggledOption = allProps.options[event.index];
-        if (event.type === STATE_CHANGE_TYPE.select) {
-          selected.push(toggledOption);
-        } else {
-          selected = selected.filter(o => o.id !== toggledOption.id);
-        }
-
-        expect(allProps.onChange).toHaveBeenLastCalledWith({
-          type: event.type,
-          option: toggledOption,
-          selectedOptions: selected,
-          event: expect.anything(),
-        });
-
-        wrapper.setProps({selectedOptions: selected});
-      });
-    });
-
-    test('should support custom filter option', async function() {
-      allProps = Object.assign({}, allProps, {
-        type: TYPE.search,
-        filterable: true,
-        getOptionLabel: option => option.label.title,
-        options: [
-          {
-            id: 'a',
-            label: {
-              title: 'foo',
-              subtitle: 'bar',
-            },
-          },
-          {
-            id: 'b',
-            label: {
-              title: 'abc',
-              subtitle: 'bar',
-            },
-          },
-        ],
-        filterOption: jest.fn().mockImplementation((option, query) => {
-          return (
-            option.label.title.indexOf(query) >= 0 ||
-            option.label.subtitle.indexOf(query) >= 0
-          );
-        }),
-      });
-      let onTextInputChangePromise = Promise.resolve();
-      allProps.onTextInputChange.mockReturnValue(onTextInputChangePromise);
-      wrapper = mount(<Select {...allProps} />);
-
-      let input = wrapper
-        .find(StyledInput)
-        .first()
-        .find('input');
-
-      input.simulate('change', {target: {value: 'xyz'}});
-      await sleep(1);
-      wrapper.update();
-      expect(wrapper.find(StyledOption).length).toBe(0);
-
-      input.simulate('change', {target: {value: 'ar'}});
-      await sleep(1);
-      wrapper.update();
-      expect(wrapper.find(StyledOption).length).toBe(2);
-    });
-
-    test('backspace should delete last selected option in multiple mode', () => {
-      const options = [
-        {id: 'red', label: 'Red'},
-        {id: 'green', label: 'Green'},
-        {id: 'blue', label: 'Blue'},
-      ];
-      allProps = {
-        ...allProps,
-        onChange: jest.fn(),
-        type: TYPE.search,
-        multiple: true,
-        options,
-        selectedOptions: options.slice(0, 2),
-      };
-      wrapper = mount(<Select {...allProps} />);
-
-      expect(wrapper.find(StyledAction).length).toBe(2);
-
-      wrapper.find('input').simulate('keydown', {key: KEY_STRINGS.Backspace});
-
-      expect(allProps.onChange).toHaveBeenCalledTimes(1);
-      expect(allProps.onChange.mock.calls[0][0]).toEqual({
-        type: STATE_CHANGE_TYPE.unselect,
-        option: options[1],
-        selectedOptions: [options[0]],
-        event: expect.anything(),
-      });
-    });
+  test('calls onInputChange when input value changes', function() {
+    wrapper = mount(<Select {...props} />);
+    const e = {target: {value: 'test'}};
+    wrapper.instance().handleInputChange(e);
+    expect(props.onInputChange).toHaveBeenCalledWith(e);
   });
 
-  describe('Select mode', function() {
-    test('should toggle dropdown if input is clicked', function() {
-      allProps = Object.assign({}, allProps, {
-        type: TYPE.select,
-      });
-      wrapper = mount(<Select {...allProps} />);
-      expect(wrapper.instance().state.isDropDownOpen).toBeFalsy();
-      wrapper
-        .find(StyledInput)
-        .first()
-        .simulate('click');
-      expect(wrapper.instance().state.isDropDownOpen).toBeTruthy();
-    });
-
-    test('should support single select', () => {
-      allProps.options = [{id: 'red', label: 'Red'}];
-      wrapper = mount(<Select {...allProps} />);
-      wrapper
-        .find(StyledInput)
-        .first()
-        .simulate('click');
-
-      wrapper
-        .find(StyledListItem)
-        .at(0)
-        .simulate('click');
-
-      expect(allProps.onChange).toHaveBeenLastCalledWith({
-        type: STATE_CHANGE_TYPE.select,
-        option: allProps.options[0],
-        selectedOptions: [allProps.options[0]],
-        event: expect.anything(),
-      });
+  test('removes selected tag on clear', function() {
+    wrapper = mount(<Select {...props} value={[item]} />);
+    const e = {type: 'click', button: 0, preventDefault: jest.fn()};
+    wrapper.instance().clearValue(e);
+    expect(props.onChange).toHaveBeenCalled();
+    expect(props.onChange.mock.calls[0][0]).toEqual({
+      type: STATE_CHANGE_TYPE.clear,
+      option: null,
+      value: [],
     });
   });
-
-  //$FlowFixMe
-  describe.each([[TYPE.search], [TYPE.select]])(
-    'hot keys in %s mode of component',
-    mode => {
-      test.each([
-        [KEY_STRINGS.ArrowDown, 'open dropdown', {isDropDownOpen: true}],
-        [
-          KEY_STRINGS.Space,
-          'open dropdown',
-          {isDropDownOpen: mode === TYPE.select},
-        ],
-        [KEY_STRINGS.Escape, 'close dropdown', {isDropDownOpen: false}],
-      ])('when pressed key "%s" should %s', (hotKey, result, newState) => {
-        allProps.selectedOptions = [
-          {
-            id: '123',
-            label: 'label for 123',
-          },
-        ];
-        allProps = Object.assign({}, allProps, {
-          type: mode,
-          multiple: true,
-          options: [
-            {
-              id: '1',
-              label: 'foo1',
-            },
-          ],
-        });
-        wrapper = mount(<Select {...allProps} />);
-        const input = wrapper
-          .find(StyledInput)
-          .first()
-          .find('input');
-        input.simulate('keydown', {key: hotKey});
-        expect(wrapper.instance().state).toMatchObject(newState);
-      });
-    },
-  );
 });
diff --git a/src/select/__tests__/stateful-select-container.test.js b/src/select/__tests__/stateful-select-container.test.js
index e27997e68..4dd5f3aea 100644
--- a/src/select/__tests__/stateful-select-container.test.js
+++ b/src/select/__tests__/stateful-select-container.test.js
@@ -9,105 +9,75 @@ import React from 'react';
 import {mount} from 'enzyme';
 import {StatefulSelectContainer} from '../index';
 import {STATE_CHANGE_TYPE} from '../constants';
-import type {StateReducerT} from '../types';
 
-describe('Stateful Select Container', function() {
-  let allProps: any, childFn;
+describe('StatefulSelectContainer', function() {
   let wrapper;
+  let props = {};
 
   beforeEach(function() {
-    const stateReducer: StateReducerT = (type, nextState) => nextState;
-    childFn = jest.fn(() => <div>test</div>);
-    allProps = {
-      children: childFn,
-      initialState: {},
-      stateReducer: stateReducer,
-      prop1: 'some other propq',
+    props = {
+      children: jest.fn(() => <div>test</div>),
+      initialState: {value: [{id: 'id', label: 'label'}]},
+      stateReducer: jest.fn(),
+      overrides: {},
+      onChange: jest.fn(),
     };
+    wrapper = mount(<StatefulSelectContainer {...props} />);
   });
 
   afterEach(function() {
-    jest.restoreAllMocks();
     wrapper && wrapper.unmount();
   });
 
-  test('should correctly render', function() {
-    wrapper = mount(<StatefulSelectContainer {...allProps} />);
-    expect(wrapper).toMatchSnapshot('Component has correct render ');
+  test('renders correctly', function() {
+    expect(wrapper).toMatchSnapshot(
+      'StatefulSelectContainer has correct render',
+    );
   });
 
-  test('should provide all needed props to children render func', function() {
-    wrapper = mount(<StatefulSelectContainer {...allProps} />);
-    const actualProps = childFn.mock.calls[0][0];
+  test('provides props to children render func', function() {
+    const actualProps = props.children.mock.calls[0][0];
     expect(actualProps).toMatchObject({
-      prop1: allProps.prop1,
+      value: props.initialState.value,
+      overrides: props.overrides,
+      onChange: wrapper.instance().onChange,
     });
   });
 
-  test('should provide initial state as part of state', function() {
-    allProps.initialState = {prop3: 'some initial state'};
-    wrapper = mount(<StatefulSelectContainer {...allProps} />);
-    const actualProps = childFn.mock.calls[0][0];
-    expect(actualProps).toMatchObject(allProps.initialState);
+  test('sets initial state correctly', function() {
+    expect(wrapper.state()).toMatchObject(props.initialState);
   });
 
-  describe('Events', function() {
-    let selectedOptions = [
-      {
-        id: '123',
-        label: 'label for 123',
-      },
-    ];
-    let events, stateReducerMock, instance, event;
-    event = {target: {checked: true}};
-    const handlers = [
-      ['onChange', STATE_CHANGE_TYPE.select, {selectedOptions}],
-    ];
-    beforeEach(function() {
-      events = {
-        onChange: jest.fn(),
-        onMouseEnter: jest.fn(),
-        onMouseLeave: jest.fn(),
-        onFocus: jest.fn(),
-        onBlur: jest.fn(),
-      };
-      allProps = {...allProps, ...events};
-      stateReducerMock = jest.fn();
-      allProps.stateReducer = stateReducerMock;
-      wrapper = mount(<StatefulSelectContainer {...allProps} />);
-      instance = wrapper.instance();
-    });
-
-    test.each(handlers)(
-      'should call state reducer to apply new state for %s event with %s type',
-      (eventHandler, type, newState) => {
-        const handler = instance[eventHandler];
-        const params = Object.assign({}, newState, {type}, {event});
-        handler({
-          ...params,
-          event,
-        });
-        expect(stateReducerMock).toHaveBeenCalledWith(
-          type,
-          newState,
-          {},
-          event,
-          params,
-        );
-        expect(events[eventHandler]).toHaveBeenCalledWith({
-          ...params,
-          event: expect.anything(),
-        });
-      },
+  test('calls stateReducer on every change', function() {
+    const newValue = {id: 'id2', label: 'label2'};
+    const params = {
+      value: [...props.initialState.value, newValue],
+      option: newValue,
+      type: STATE_CHANGE_TYPE.select,
+    };
+    const newStateValue = [newValue];
+    props.stateReducer.mockImplementation(() => ({
+      value: newStateValue,
+    }));
+    wrapper.instance().onChange(params);
+    expect(props.stateReducer).toHaveBeenCalledWith(
+      params.type,
+      {value: params.value},
+      props.initialState,
     );
+    expect(wrapper.state().value).toEqual(newStateValue);
+  });
 
-    test.each([['onMouseEnter'], ['onMouseLeave'], ['onFocus'], ['onBlur']])(
-      'should call handler for %s event if it is present',
-      eventHandler => {
-        const handler = instance[eventHandler];
-        handler(event);
-        expect(events[eventHandler]).toHaveBeenCalledWith(event);
-      },
-    );
+  test('calls onChange handler with correct params', function() {
+    const newValue = {id: 'id2', label: 'label2'};
+    const params = {
+      value: [...props.initialState.value, newValue],
+      option: newValue,
+      type: STATE_CHANGE_TYPE.select,
+    };
+    props.stateReducer.mockImplementation((type, nextState) => nextState);
+    wrapper.instance().onChange(params);
+    expect(props.onChange).toHaveBeenCalledWith(params);
+    expect(wrapper.state().value).toEqual(params.value);
   });
 });
diff --git a/src/select/__tests__/stateful-select.test.js b/src/select/__tests__/stateful-select.test.js
index e5508e5fe..6c428debf 100644
--- a/src/select/__tests__/stateful-select.test.js
+++ b/src/select/__tests__/stateful-select.test.js
@@ -7,73 +7,91 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import React from 'react';
 import {mount} from 'enzyme';
+import {
+  StatefulSelect,
+  StatefulSelectContainer,
+  StyledRoot,
+  StyledControlContainer,
+  StyledValueContainer,
+  StyledPlaceholder,
+  StyledSingleValue,
+  StyledInputContainer,
+  StyledInput,
+  StyledInputSizer,
+  StyledSelectArrow,
+  StyledClearIcon,
+  StyledSearchIcon,
+  StyledOptionContent,
+} from '../index';
+import Select from '../select.js';
 
-describe('Stateful checkbox', function() {
-  let allProps: any, wrapper;
+jest.mock('../select');
 
-  beforeEach(function() {
-    allProps = {};
-    jest.mock('../select', () => jest.fn(() => <div>test</div>));
-  });
+describe('Stateful select', function() {
+  let wrapper = null;
 
   afterEach(function() {
-    jest.restoreAllMocks();
     wrapper && wrapper.unmount();
   });
 
+  afterAll(function() {
+    jest.restoreAllMocks();
+  });
+
   test('should provide default styled components to render', function() {
-    const {
-      StyledRoot,
-      StyledInput,
-      StyledInputContainer,
-      StyledSelectComponentIcon,
-      StyledDropDown,
-      StyledOption,
-      StyledDropDownItem,
-      StatefulSelect,
-    } = require('../index');
+    const props = {
+      overrides: {
+        Root: StyledRoot,
+        ControlContainer: StyledControlContainer,
+        ValueContainer: StyledValueContainer,
+        Placeholder: StyledPlaceholder,
+        SingleValue: StyledSingleValue,
+        MultiValue: function MultiValueComponent({children}) {
+          return <div>{children}</div>;
+        },
+        InputContainer: StyledInputContainer,
+        Input: StyledInput,
+        InputSizer: StyledInputSizer,
+        SelectArrow: StyledSelectArrow,
+        ClearIcon: StyledClearIcon,
+        SearchIcon: StyledSearchIcon,
+        OptionContent: StyledOptionContent,
+      },
+    };
+    wrapper = mount(<StatefulSelect {...props} />);
+    // $FlowFixMe
+    const {overrides} = Select.mock.calls[0][0];
+    expect(overrides).toEqual(props.overrides);
+    expect(Select).toHaveBeenCalled();
+  });
 
-    const {Tag} = require('../../tag');
-    allProps.overrides = {
-      Root: StyledRoot,
-      Input: StyledInput,
-      InputContainer: StyledInputContainer,
-      Tag: Tag,
-      SelectComponentIcon: StyledSelectComponentIcon,
-      DropDown: StyledDropDown,
-      Option: StyledOption,
-      DropDownItem: StyledDropDownItem,
+  test('should pass value and other props to stateless select', function() {
+    const props = {
+      initialState: {
+        value: [{id: 'id'}],
+      },
+      onChange: jest.fn(),
+      multi: true,
     };
-    const checkbox: any = require('../select');
-    wrapper = mount(<StatefulSelect {...allProps} />);
-    const {overrides} = checkbox.mock.calls[0][0];
-    expect(overrides).toEqual({
-      Root: StyledRoot,
-      Input: StyledInput,
-      InputContainer: StyledInputContainer,
-      Tag: Tag,
-      SelectComponentIcon: StyledSelectComponentIcon,
-      DropDown: StyledDropDown,
-      Option: StyledOption,
-      DropDownItem: StyledDropDownItem,
+    wrapper = mount(<StatefulSelect {...props} />);
+    const renderedContainer = wrapper.find(StatefulSelectContainer).first();
+    // $FlowFixMe
+    const selectProps = Select.mock.calls[1][0];
+    expect(selectProps).toMatchObject({
+      value: props.initialState.value,
+      multi: props.multi,
+      onChange: renderedContainer.instance().onChange,
     });
   });
 
-  test('should pass all the other props to stateless select', function() {
-    const otherProps = {
-      someProp: 'some other props',
-      autoFocus: false,
+  test('should call onChange from props', function() {
+    const props = {
+      onChange: jest.fn(),
     };
-    allProps = {...allProps, ...otherProps};
-    const {StatefulSelect} = require('../index');
-    const select: any = require('../select');
-    wrapper = mount(<StatefulSelect {...allProps} />);
-    // eslint-disable-next-line no-unused-vars
-    const {overrides, ...rest} = select.mock.calls[1][0];
-    expect(rest).toMatchObject({
-      someProp: 'some other props',
-      selectedOptions: [],
-      autoFocus: false,
-    });
+    wrapper = mount(<StatefulSelect {...props} />);
+    const renderedContainer = wrapper.find(StatefulSelectContainer).first();
+    const params = {value: ''};
+    renderedContainer.instance().onChange(params);
+    expect(props.onChange).toHaveBeenCalledWith(params);
   });
 });
diff --git a/src/select/__tests__/styled-components.test.js b/src/select/__tests__/styled-components.test.js
index 9687090b4..f236bc21d 100644
--- a/src/select/__tests__/styled-components.test.js
+++ b/src/select/__tests__/styled-components.test.js
@@ -8,101 +8,69 @@ LICENSE file in the root directory of this source tree.
 import React from 'react';
 import {shallow} from 'enzyme';
 import {
-  StyledInput,
+  StyledRoot,
+  StyledControlContainer,
+  StyledValueContainer,
+  StyledPlaceholder,
+  StyledSingleValue,
   StyledInputContainer,
-  StyledSelectComponentIcon,
-  StyledDropDown,
-  StyledDropDownItem,
-  StyledOption,
+  StyledInput,
+  StyledInputSizer,
+  StyledSelectArrow,
+  StyledClearIcon,
+  StyledSearchIcon,
+  StyledOptionContent,
 } from '../index';
-import {ICON, TYPE} from '../constants';
+import {TYPE, SIZE} from '../constants';
+
+const styledComponents = [
+  [StyledRoot, 'StyledRoot'],
+  [StyledControlContainer, 'StyledControlContainer'],
+  [StyledValueContainer, 'StyledValueContainer'],
+  [StyledPlaceholder, 'StyledPlaceholder'],
+  [StyledSingleValue, 'StyledSingleValue'],
+  [StyledInputContainer, 'StyledInputContainer'],
+  [StyledInput, 'StyledInput'],
+  [StyledInputSizer, 'StyledInputSizer'],
+  [StyledSelectArrow, 'StyledSelectArrow'],
+  [StyledClearIcon, 'StyledClearIcon'],
+  [StyledSearchIcon, 'StyledSearchIcon'],
+  [StyledOptionContent, 'StyledOptionContent'],
+];
 
 describe('Select styled components', () => {
-  describe('StyledInput', function() {
-    test('Input', () => {
-      const component = shallow(
-        <StyledInput>
-          <div />
-        </StyledInput>,
-      );
-      expect(component.instance().getStyles()).toMatchSnapshot(
-        'StyledInput has correct styles',
-      );
-    });
-  });
-  describe('StyledInputContainer', function() {
-    test('InputContainer', () => {
-      const component = shallow(
-        <StyledInputContainer>
-          <div />
-        </StyledInputContainer>,
-      );
-      expect(component.instance().getStyles()).toMatchSnapshot(
-        'StyledInputContainer has correct styles',
-      );
-    });
+  test.each(styledComponents)('Basic render', (Component, name) => {
+    const component = shallow(<Component />);
+    expect(component.instance().getStyles()).toMatchSnapshot(
+      `${name} has correct default styles`,
+    );
   });
 
-  describe('StyledSelectComponentIcon', () => {
-    test.each([[ICON.clearAll], [ICON.select], [ICON.loop], [ICON.selected]])(
-      '',
-      $type => {
-        const props = {$type};
-        const component = shallow(
-          <StyledSelectComponentIcon {...props}>
-            <div />
-          </StyledSelectComponentIcon>,
-        );
-        expect(component.instance().getStyles()).toMatchSnapshot(
-          'StyledSelectComponentIcon has correct styles when type is ' + $type,
-        );
-      },
+  test.each(styledComponents)('Basic render', (Component, name) => {
+    const component = shallow(<Component $size={SIZE.compact} />);
+    expect(component.instance().getStyles()).toMatchSnapshot(
+      `${name} has correct styles for the SIZE.compact`,
     );
   });
 
-  describe('StyledDropDown', () => {
-    test.each([['', ''], ['$type', TYPE.select], ['$isOpen', true]])(
-      '',
-      (prop, value) => {
-        const props = {};
-        props[prop] = value;
-        const component = shallow(
-          <StyledDropDown {...props}>
-            <div />
-          </StyledDropDown>,
-        );
-        expect(component.instance().getStyles()).toMatchSnapshot(
-          `StyledDropDown has correct styles when ${prop} is ${value}`,
-        );
-      },
+  test.each(styledComponents)('Basic render', (Component, name) => {
+    const component = shallow(<Component $type={TYPE.search} />);
+    expect(component.instance().getStyles()).toMatchSnapshot(
+      `${name} has correct styles for the TYPE.search`,
     );
   });
 
-  describe('StyledDropDownItem', function() {
-    test('DropDownItem', () => {
-      const component = shallow(
-        <StyledDropDownItem>
-          <div />
-        </StyledDropDownItem>,
-      );
-      expect(component.instance().getStyles()).toMatchSnapshot(
-        'StyledDropDownItem has correct styles',
-      );
-    });
+  test.each(styledComponents)('Basic render', (Component, name) => {
+    const component = shallow(<Component $disabled={true} />);
+    expect(component.instance().getStyles()).toMatchSnapshot(
+      `${name} has correct styles for the disabled state`,
+    );
   });
 
-  describe('StyledOption', () => {
-    test.each([[''], ['disabled'], ['$selected']])('', prop => {
-      const props = {};
-      props[prop] = true;
-      const component = shallow(
-        <StyledOption {...props}>
-          <div />
-        </StyledOption>,
-      );
-      expect(component.instance().getStyles()).toMatchSnapshot(
-        'StyledOption has correct styles when ' + prop,
-      );
-    });
+  test('StyledOptionContent styles', () => {
+    const component = shallow(<StyledOptionContent $selected={true} />);
+    expect(component.instance().getStyles()).toMatchSnapshot(
+      'StyledOptionContent has correct styles when selected',
+    );
   });
 });
diff --git a/src/select/__tests__/value.test.js b/src/select/__tests__/value.test.js
new file mode 100644
index 000000000..357b3f98a
--- /dev/null
+++ b/src/select/__tests__/value.test.js
@@ -0,0 +1,38 @@
+/*
+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 {mount} from 'enzyme';
+import SingleValue from '../value';
+import {StyledSingleValue} from '../styled-components';
+
+describe('Single Value component', function() {
+  test('renders StyledSingleValue', function() {
+    const props = {children: 'test'};
+    const wrapper = mount(<SingleValue {...props} />);
+    const renderedStyledComponent = wrapper.find(StyledSingleValue).first();
+    expect(renderedStyledComponent).toExist();
+    expect(renderedStyledComponent.props()).toMatchObject({
+      'aria-selected': 'true',
+      children: 'test',
+      role: 'option',
+    });
+  });
+
+  test('renders custom SingleValue', function() {
+    const mock = jest.fn().mockImplementation(() => <span />);
+    const props = {children: 'test', overrides: {SingleValue: mock}};
+    mount(<SingleValue {...props} />);
+    expect(mock).toHaveBeenCalled();
+    const passedProps = mock.mock.calls[0][0];
+    expect(passedProps).toMatchObject({
+      'aria-selected': 'true',
+      children: 'test',
+      role: 'option',
+    });
+  });
+});
diff --git a/src/select/e2e.js b/src/select/e2e.js
index c509fa8c2..7bc34b498 100644
--- a/src/select/e2e.js
+++ b/src/select/e2e.js
@@ -18,9 +18,7 @@ const selectors = {
   selectDropDown: '[role="listbox"]',
   dropDownOption: '[role="option"]',
   selectedList: '[role="list"]',
-  selectedOption: '[role="listitem"]',
   searchType: '[aria-autocomplete="list"]',
-  selectType: '[aria-autocomplete="none"]',
   expandedDropDown: '[aria-expanded="true"]',
 };
 
@@ -58,7 +56,7 @@ describe('The select component', () => {
   it('selects option when clicked in dropdown', browser => {
     goToUrl({
       suite,
-      test: scenarios.SELECT,
+      test: scenarios.SINGLE_SELECT_SEARCH,
       browser,
     })
       .waitForElementVisible(selectors.selectInput)
@@ -68,15 +66,12 @@ describe('The select component', () => {
         `${selectors.selectDropDown} ${selectors.dropDownOption}:first-child`,
       )
       .waitForElementNotPresent(selectors.selectDropDown)
-      .getText(
-        `${selectors.selectedList} ${selectors.selectedOption}:first-child`,
-        function(result) {
-          this.assert.equal(result.value, 'AliceBlue');
-        },
-      );
+      .getText(`${selectors.selectedList}`, function(result) {
+        this.assert.equal(result.value, 'AliceBlue');
+      });
   });
 
-  it('doesnt close dropdown after multiple selections were made', browser => {
+  it('does not close dropdown after multiple selections were made', browser => {
     goToUrl({
       suite,
       test: scenarios.MULTI_SELECT,
@@ -97,7 +92,7 @@ describe('The select component', () => {
   it('doesnt allow to click and select disabled options', browser => {
     goToUrl({
       suite,
-      test: scenarios.SELECT_DISABLED_OPTIONS,
+      test: scenarios.SINGLE_SELECT_SEARCH,
       browser,
     })
       .waitForElementVisible(selectors.selectInput)
@@ -108,7 +103,8 @@ describe('The select component', () => {
       )
       .waitForElementPresent(selectors.selectDropDown)
       .getText(selectors.selectedList, function(result) {
-        this.assert.equal(result.value, '');
+        // Placeholder is displayed
+        this.assert.equal(result.value, 'Start searching');
       });
   });
 
@@ -119,6 +115,7 @@ describe('The select component', () => {
       browser,
     })
       .waitForElementVisible(selectors.selectInput)
+      .click(selectors.selectInput)
       .setValue(selectors.selectInput, 'dark', () => {
         browser
           .waitForElementPresent(selectors.selectDropDown)
diff --git a/src/tag/__tests__/__snapshots__/styled-components.test.js.snap b/src/tag/__tests__/__snapshots__/styled-components.test.js.snap
index 6e1373d2e..ad5682aa1 100644
--- a/src/tag/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/tag/__tests__/__snapshots__/styled-components.test.js.snap
@@ -11,7 +11,10 @@ Object {
   "cursor": "pointer",
   "display": "flex",
   "marginLeft": "8px",
-  "padding": "8px",
+  "paddingBottom": "8px",
+  "paddingLeft": "8px",
+  "paddingRight": "8px",
+  "paddingTop": "8px",
 }
 `;
 
@@ -26,7 +29,10 @@ Object {
   "cursor": "not-allowed",
   "display": "flex",
   "marginLeft": "8px",
-  "padding": "8px",
+  "paddingBottom": "8px",
+  "paddingLeft": "8px",
+  "paddingRight": "8px",
+  "paddingTop": "8px",
 }
 `;
 
@@ -50,7 +56,10 @@ Object {
   "height": "$theme.sizing.scale800",
   "justifyContent": "space-between",
   "lineHeight": "$theme.typography.font200.lineHeight",
-  "margin": "5px",
+  "marginBottom": "5px",
+  "marginLeft": "5px",
+  "marginRight": "5px",
+  "marginTop": "5px",
   "opacity": null,
   "paddingBottom": "$theme.sizing.scale100",
   "paddingLeft": "$theme.sizing.scale500",
@@ -78,7 +87,10 @@ Object {
   "height": "$theme.sizing.scale800",
   "justifyContent": "space-between",
   "lineHeight": "$theme.typography.font200.lineHeight",
-  "margin": "5px",
+  "marginBottom": "5px",
+  "marginLeft": "5px",
+  "marginRight": "5px",
+  "marginTop": "5px",
   "opacity": ".56",
   "paddingBottom": "$theme.sizing.scale100",
   "paddingLeft": "$theme.sizing.scale500",
@@ -106,7 +118,10 @@ Object {
   "height": "$theme.sizing.scale800",
   "justifyContent": "space-between",
   "lineHeight": "$theme.typography.font200.lineHeight",
-  "margin": "5px",
+  "marginBottom": "5px",
+  "marginLeft": "5px",
+  "marginRight": "5px",
+  "marginTop": "5px",
   "opacity": null,
   "paddingBottom": "$theme.sizing.scale100",
   "paddingLeft": "$theme.sizing.scale500",
@@ -134,7 +149,10 @@ Object {
   "height": "$theme.sizing.scale800",
   "justifyContent": "space-between",
   "lineHeight": "$theme.typography.font200.lineHeight",
-  "margin": "5px",
+  "marginBottom": "5px",
+  "marginLeft": "5px",
+  "marginRight": "5px",
+  "marginTop": "5px",
   "opacity": null,
   "paddingBottom": "$theme.sizing.scale100",
   "paddingLeft": "$theme.sizing.scale500",