Repository: laboratoriobridge/bold
Pull request #479 (2019-10-02 23:06:36)

alteração no visual do componente FileUploader
Nem testei :shrug:


Patch:
diff --git a/package.json b/package.json
index 6686d4a3d..4912d87a8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bold-ui",
-  "version": "1.0.0-beta.17",
+  "version": "1.0.0-beta.16",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "homepage": "https://bold.bridge.ufsc.br",
diff --git a/site/pages/components/select/Select.demo.tsx b/site/pages/components/select/Select.demo.tsx
index 454695128..89c359466 100644
--- a/site/pages/components/select/Select.demo.tsx
+++ b/site/pages/components/select/Select.demo.tsx
@@ -6,7 +6,9 @@ function SelectDemo() {
   const itemToString = (item: any) => item
 
   return (
-    <Select<string> label='Favorite pasta' items={items} itemToString={itemToString} name='favorite pasta' required />
+    <FormControl label='Favorite pasta' required>
+      <Select<string> items={items} itemToString={itemToString} name='favorite pasta' required />
+    </FormControl>
   )
 }
 
diff --git a/site/pages/components/select/Suggestion.demo.tsx b/site/pages/components/select/Suggestion.demo.tsx
deleted file mode 100644
index 4ae94093c..000000000
--- a/site/pages/components/select/Suggestion.demo.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useState } from 'react'
-
-import { Select, Text, VFlow } from '../../../../lib'
-
-const items = ['Carbonara', 'Gnocchi', 'Lasagna', 'Macaroni and Cheese', 'Pesto', 'Pizza']
-
-function SuggestionDemo() {
-  const [value, setValue] = useState()
-
-  const itemToString = (item: any) => item
-  const createNewItem = (inputValue: string) => inputValue
-
-  return (
-    <VFlow>
-      <Text>Selected item: {value || '[none]'}</Text>
-      <Select<string>
-        value={value}
-        label='Favorite pasta'
-        name='favorite pasta'
-        items={items}
-        onChange={setValue}
-        itemToString={itemToString}
-        createNewItem={createNewItem}
-        icon={null}
-        required
-      />
-    </VFlow>
-  )
-}
-
-export default SuggestionDemo
diff --git a/site/pages/components/select/index.mdx b/site/pages/components/select/index.mdx
index a41d2e874..533c2d51b 100644
--- a/site/pages/components/select/index.mdx
+++ b/site/pages/components/select/index.mdx
@@ -13,11 +13,3 @@ Select is a type of input that is used in forms, where a user is submitting data
 ## Example
 
 <Demo src='pages/components/select/Select' />
-
-## Suggestion
-
-Allow select value to be whatever the user types, by providing a `createNewItem` prop.
-
-You can use the prop `openOnFocus` to control whether the suggestion menu should appear when input receives focus - default is false for suggestion selects (when createNewItem) and true for normal selects.
-
-<Demo src='pages/components/select/Suggestion' />
diff --git a/src/components/FileUploader/FileUploader.tsx b/src/components/FileUploader/FileUploader.tsx
index ca8fb3388..52371225b 100644
--- a/src/components/FileUploader/FileUploader.tsx
+++ b/src/components/FileUploader/FileUploader.tsx
@@ -23,21 +23,21 @@ export interface FileProps {
 export function FileUploader(props: FileUploaderProps) {
   const { file, text, ...rest } = props
   const { classes, css } = useStyles(createStyles)
-
   const { getRootProps, getInputProps, isDragActive, isDragAccept } = useDropzone(rest)
 
   return (
-    <div className={classes.dropzone} {...getRootProps()}>
+    <div className={css(classes.componentWrapper, isDragActive && classes.dragBackground)} {...getRootProps()}>
       <input {...getInputProps()} />
-
-      <div className={css(classes.wrapper, isDragActive && classes.dragActive)}>
-        {isDragAccept}
-        <HFlow alignItems='center' hSpacing={0.5}>
-          <Icon fill='secondary' icon='upload' />
-          <Text color='secondary' fontSize={0.875} fontWeight='bold'>
-            {text}
-          </Text>
-        </HFlow>
+      <div className={css(classes.buttonWrapper, props.disabled && classes.disabled)}>
+        <div className={css(classes.dropzone, isDragActive && classes.dragActive)}>
+          {isDragAccept}
+          <HFlow justifyContent='center' alignItems='center' hSpacing={0.5}>
+            <Icon fill={props.disabled ? 'disabled' : 'secondary'} icon='upload' />
+            <Text color={props.disabled ? 'disabled' : 'secondary'} fontSize={0.875} fontWeight='bold'>
+              {text}
+            </Text>
+          </HFlow>
+        </div>
       </div>
 
       {file && <FileDetails file={file} />}
@@ -51,7 +51,7 @@ export interface FileDetailsProps {
 
 export function FileDetails(props: FileDetailsProps) {
   const { file } = props
-  const { classes } = useStyles(createStyles)
+  const { css, classes } = useStyles(createStyles)
 
   const returnExtension = () => {
     const { type } = file.selectedFile
@@ -66,7 +66,7 @@ export function FileDetails(props: FileDetailsProps) {
   }
 
   return (
-    <div className={classes.fileDetailsContainer}>
+    <div className={css(classes.file, classes.fileDetailsContainer)}>
       <FileExtension extension={returnExtension()} />
       <div className={classes.fileDetails}>
         <FileInfo file={file} />
@@ -85,7 +85,7 @@ export function FileInfo(props: FileInfoProps) {
   const { classes } = useStyles(createStyles)
 
   return (
-    <div className={classes.fileInfo}>
+    <div className={classes.fileDetailsContainer}>
       {!file.error && !file.uploading && (
         <Icon icon='checkDefault' fill='primary' size={1} style={{ marginRight: 5 }} />
       )}
@@ -119,12 +119,9 @@ export function FileExtension(props: FileExtensionProps) {
 }
 
 export const createStyles = (theme: Theme) => ({
-  dropzone: {
-    backgroundColor: theme.pallete.surface.main,
+  componentWrapper: {
     borderRadius: theme.radius.paper,
-    border: '1px solid ' + theme.pallete.divider,
-    cursor: 'pointer',
-    padding: '0.25rem',
+    backgroundColor: theme.pallete.surface.main,
     transition: 'box-shadow .2s ease',
 
     '&:focus': {
@@ -132,32 +129,41 @@ export const createStyles = (theme: Theme) => ({
       boxShadow: focusBoxShadow(theme),
     },
   } as CSSProperties,
-  wrapper: {
-    display: 'flex',
-    alignItems: 'center',
-    flexDirection: 'column',
-    border: `1px dashed transparent`,
-    padding: '0.25rem',
+  buttonWrapper: {
+    border: `1px solid` + theme.pallete.gray.c40,
+    borderRadius: theme.radius.paper,
+    cursor: 'pointer',
+    padding: '0.25em',
+  } as CSSProperties,
+  dropzone: {
+    borderRadius: theme.radius.paper,
+    padding: '0.52em',
+  } as CSSProperties,
+  dragBackground: {
+    backgroundColor: theme.pallete.surface.background,
   } as CSSProperties,
   dragActive: {
-    borderColor: theme.pallete.divider,
-  },
+    border: `1px dashed` + theme.pallete.gray.c40,
+  } as CSSProperties,
+  disabled: {
+    border: `1px solid` + theme.pallete.gray.c80,
+    cursor: 'not-allowed',
+  } as CSSProperties,
+
   file: {
-    borderTop: '1px solid ' + theme.pallete.divider,
+    borderRadius: theme.radius.paper,
+    borderBottom: '1px solid ' + theme.pallete.gray.c80,
+    borderLeft: '1px solid ' + theme.pallete.gray.c80,
+    borderRight: '1px solid ' + theme.pallete.gray.c80,
     padding: '1rem',
   },
   fileDetailsContainer: {
+    backgroundColor: theme.pallete.surface.main,
     alignItems: 'center',
-    borderTop: `1px solid ${theme.pallete.divider}`,
     display: 'flex',
-    padding: '1rem',
   },
   fileDetails: {
     flexGrow: 1,
     marginLeft: '1rem',
   },
-  fileInfo: {
-    alignItems: 'center',
-    display: 'flex',
-  },
 })
diff --git a/src/components/Paginator/Paginator.tsx b/src/components/Paginator/Paginator.tsx
index b95b80965..97ab970e2 100644
--- a/src/components/Paginator/Paginator.tsx
+++ b/src/components/Paginator/Paginator.tsx
@@ -28,16 +28,13 @@ export function Paginator(props: PaginatorProps) {
   const { page, total, onChange } = props
   const locale = useLocale()
 
-  const [inputValue, setInputValue] = useState<string>(`${page + 1}`)
+  const [inputValue, setInputValue] = useState<number>(0)
   useEffect(() => {
-    setInputValue(`${page + 1}`)
+    setInputValue(page + 1)
   }, [page])
 
   const { classes } = useStyles(createStyles, inputValue)
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(e.target.value)
-  }
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => setInputValue(parseInt(e.target.value, 10))
 
   const handleInputKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
@@ -50,11 +47,12 @@ export function Paginator(props: PaginatorProps) {
   }
 
   const applyInputValue = () => {
-    const inputNumber = parseInt(inputValue, 10)
-    if (!isNaN(inputNumber) && inputNumber !== currentPage() && inputNumber >= 1 && inputNumber <= total) {
-      onChange && onChange(inputNumber - 1)
-    } else {
-      setInputValue(`${page + 1}`)
+    if (inputValue !== currentPage()) {
+      if (inputValue >= 1 && inputValue <= total) {
+        onChange && onChange(inputValue - 1)
+      } else {
+        setInputValue(page + 1)
+      }
     }
   }
 
@@ -111,7 +109,7 @@ Paginator.defaultProps = {
   onChange: (page: number) => null,
 } as Partial<PaginatorProps>
 
-export const createStyles = (theme: Theme, inputValue: string) => ({
+export const createStyles = (theme: Theme, inputValue: number) => ({
   paginator: {
     display: 'inline-flex',
     alignItems: 'center',
@@ -125,7 +123,7 @@ export const createStyles = (theme: Theme, inputValue: string) => ({
     },
   } as CSSProperties,
   input: {
-    width: Number(40 + (inputValue && inputValue.length * 7)),
+    width: 40 + (inputValue && inputValue.toString().length * 7),
     textAlign: 'center',
     margin: '0 0.5rem 0 0.25rem',
   } as CSSProperties,
diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
index 61b3bffe2..6bf90e3fe 100644
--- a/src/components/Select/Select.stories.tsx
+++ b/src/components/Select/Select.stories.tsx
@@ -42,27 +42,6 @@ storiesOf('Components|Select', module)
       multiple={boolean('multiple', false)}
       clearable={boolean('clearable', true)}
       disabled={boolean('disabled', false)}
-      openOnFocus={boolean('openOnFocus', true)}
-      loading={boolean('loading', false)}
-      onChange={action('changed')}
-      onBlur={action('blur')}
-    />
-  ))
-  .add('suggestion', () => (
-    <Select<DefaultItemType>
-      label='Fruit'
-      name='fruit'
-      items={fruits}
-      error={text('error', '')}
-      icon={null}
-      createNewItem={str => ({ value: str, label: str })}
-      itemToString={item => item && item.label}
-      itemIsEqual={(a, b) => a.value === b.value}
-      placeholder='Select a value...'
-      multiple={boolean('multiple', false)}
-      clearable={boolean('clearable', true)}
-      disabled={boolean('disabled', false)}
-      openOnFocus={boolean('openOnFocus', false)}
       loading={boolean('loading', false)}
       onChange={action('changed')}
       onBlur={action('blur')}
@@ -80,7 +59,6 @@ storiesOf('Components|Select', module)
       multiple={boolean('multiple', false)}
       clearable={boolean('clearable', true)}
       disabled={boolean('disabled', false)}
-      openOnFocus={boolean('openOnFocus', true)}
       onChange={action('changed')}
       onBlur={action('blur')}
     />
@@ -105,7 +83,6 @@ storiesOf('Components|Select', module)
       multiple={boolean('multiple', false)}
       clearable={boolean('clearable', true)}
       disabled={boolean('disabled', false)}
-      openOnFocus={boolean('openOnFocus', true)}
       loading={boolean('loading', false)}
       onChange={action('changed')}
       onBlur={action('blur')}
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index be181d756..76f308448 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -35,12 +35,6 @@ export function Select<T = DefaultItemType>(props: SelectProps<T>) {
     checkedValue = value[0]
   }
 
-  if (props.multiple && props.createNewItem) {
-    if (process.env.NODE_ENV !== 'production') {
-      throw new Error(`Select does not support props 'createNewItem' and 'multiple' together`)
-    }
-  }
-
   if (multiple) {
     return <SelectMulti<T> {...rest} value={checkedValue as T[]} onChange={onChange} itemIsEqual={itemIsEqual} />
   } else {
diff --git a/src/components/Select/SelectMenu/SelectMenuItem.tsx b/src/components/Select/SelectMenu/SelectMenuItem.tsx
index 0a8926076..9c0c24cf0 100644
--- a/src/components/Select/SelectMenu/SelectMenuItem.tsx
+++ b/src/components/Select/SelectMenu/SelectMenuItem.tsx
@@ -26,12 +26,7 @@ export function SelectMenuItem(props: SelectMenuItemProps) {
 export function SelectHelperMenuItem(props: SelectMenuItemProps) {
   const theme = useTheme()
 
-  return (
-    <SelectMenuItem
-      style={{ background: theme.pallete.surface.background, paddingTop: '0.25rem', paddingBottom: '0.25rem' }}
-      {...props}
-    />
-  )
+  return <SelectMenuItem style={{ background: theme.pallete.surface.background }} {...props} />
 }
 
 export function SelectLoadingItem(props: SelectMenuItemProps) {
@@ -52,12 +47,6 @@ export function SelectEmptyItem(props: SelectMenuItemProps) {
   return <SelectHelperMenuItem {...props}>{locale.select.emptyItem}</SelectHelperMenuItem>
 }
 
-export function SelectCreateItem(props: SelectMenuItemProps) {
-  const locale = useLocale()
-
-  return <SelectHelperMenuItem {...props}>{locale.select.createItem}</SelectHelperMenuItem>
-}
-
 export const createStyles = (theme: Theme) => ({
   item: {
     ...theme.typography.variant('main'),
diff --git a/src/components/Select/SelectSingle/SelectDownshift.tsx b/src/components/Select/SelectSingle/SelectDownshift.tsx
index 45998e6ac..146312aac 100644
--- a/src/components/Select/SelectSingle/SelectDownshift.tsx
+++ b/src/components/Select/SelectSingle/SelectDownshift.tsx
@@ -1,6 +1,6 @@
-import Downshift, { ControllerStateAndHelpers, DownshiftProps, DownshiftState, StateChangeOptions } from 'downshift'
+import Downshift, { ControllerStateAndHelpers, DownshiftProps, StateChangeOptions } from 'downshift'
 import matchSorter from 'match-sorter'
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 export interface SelectDownshiftProps<T> extends DownshiftProps<T> {
   /**
@@ -8,11 +8,6 @@ export interface SelectDownshiftProps<T> extends DownshiftProps<T> {
    */
   items: T[]
 
-  /**
-   * Whether the select menu should be opened when the select is focused.
-   */
-  openOnFocus?: boolean
-
   children?(props: SelectDownshiftRenderProps<T>): React.ReactNode
 
   /**
@@ -21,13 +16,6 @@ export interface SelectDownshiftProps<T> extends DownshiftProps<T> {
    * @param downshift The downshift controller and helpers.
    */
   onFilterChange?(filter: string, downshift: SelectDownshiftRenderProps<T>): void
-
-  /**
-   * If informed, select will allow insertion of items not present on the select.
-   * @param inputValue The string type in the text box
-   * @return The value that should be created and hold by the select
-   */
-  createNewItem?(inputValue: string): T
 }
 
 export interface SelectDownshiftRenderProps<T> extends ControllerStateAndHelpers<T>, State<T> {
@@ -54,9 +42,7 @@ export function defaultSelectFilter<T>(
  * Downshift extension with item and filter management.
  */
 export function SelectDownshift<T>(props: SelectDownshiftProps<T>) {
-  const { items, onFilterChange, children, createNewItem, openOnFocus, ...rest } = props
-
-  const stateReducer = useMemo(() => createReducer(props), [openOnFocus, props.stateReducer])
+  const { items, onFilterChange, children, ...rest } = props
 
   const [visibleItems, setVisibleItems] = useState<T[]>(items)
   useEffect(() => {
@@ -64,10 +50,6 @@ export function SelectDownshift<T>(props: SelectDownshiftProps<T>) {
   }, [props.items])
 
   const handleStateChange = (options: StateChangeOptions<T>, downshift: ControllerStateAndHelpers<T>) => {
-    if (createNewItem && options.hasOwnProperty('inputValue')) {
-      rest.onChange && rest.onChange(createNewItem(options.inputValue), getStateAndHelpers(downshift))
-    }
-
     if (options.isOpen) {
       onFilterChange(null, getStateAndHelpers(downshift))
     }
@@ -98,7 +80,7 @@ export function SelectDownshift<T>(props: SelectDownshiftProps<T>) {
   })
 
   return (
-    <Downshift {...rest} stateReducer={stateReducer} onStateChange={handleStateChange} onChange={handleChange}>
+    <Downshift {...rest} onStateChange={handleStateChange} onChange={handleChange}>
       {downshift => children(getStateAndHelpers(downshift))}
     </Downshift>
   )
@@ -110,15 +92,3 @@ SelectDownshift.defaultProps = {
     setVisibleItems(defaultSelectFilter(items, filter, itemToString))
   },
 } as Partial<SelectDownshiftProps<any>>
-
-function createReducer(props: SelectDownshiftProps<any>) {
-  const { openOnFocus = props.createNewItem ? false : undefined, stateReducer } = props
-
-  return (state: DownshiftState<any>, changes: StateChangeOptions<any>) => {
-    if (openOnFocus === false && changes.type === undefined && !state.isOpen && changes.isOpen) {
-      return { ...changes, isOpen: false }
-    }
-
-    return stateReducer ? stateReducer(state, changes) : changes
-  }
-}
diff --git a/src/components/Select/SelectSingle/SelectDownshiftMenu.tsx b/src/components/Select/SelectSingle/SelectDownshiftMenu.tsx
index 9b134de3c..545380623 100644
--- a/src/components/Select/SelectSingle/SelectDownshiftMenu.tsx
+++ b/src/components/Select/SelectSingle/SelectDownshiftMenu.tsx
@@ -3,13 +3,12 @@ import React, { CSSProperties } from 'react'
 
 import { useStyles } from '../../../styles'
 import { SelectEmptyItem, SelectLoadingItem, SelectMenu, SelectMenuItem } from '../SelectMenu'
-import { SelectCreateItem } from '../SelectMenu/SelectMenuItem'
 
 export interface SelectDownshiftMenuProps<T> {
   items: T[]
   loading: boolean
   downshift: ControllerStateAndHelpers<T>
-  createNewItem?: boolean
+
   components?: Partial<SelectMenuComponents<T>>
 
   /**
@@ -21,7 +20,6 @@ export interface SelectDownshiftMenuProps<T> {
 }
 
 export interface SelectMenuComponents<T> {
-  CreateItem: React.ComponentType<SelectDownshiftMenuProps<T>>
   LoadingItem: React.ComponentType<SelectDownshiftMenuProps<T>>
   EmptyItem: React.ComponentType<SelectDownshiftMenuProps<T>>
   Item: React.ComponentType<SelectDownshiftMenuProps<T> & { item: T; index: number }>
@@ -32,12 +30,11 @@ export function SelectDownshiftMenu<T>(props: SelectDownshiftMenuProps<T>) {
     items,
     loading: isLoading,
     components,
-    createNewItem,
     downshift: { isOpen, getMenuProps },
   } = props
 
   const { classes } = useStyles(createStyles)
-  const { CreateItem, LoadingItem, EmptyItem, Item } = { ...defaultComponents, ...components }
+  const { LoadingItem, EmptyItem, Item } = { ...defaultComponents, ...components }
 
   return (
     <div className={classes.wrapper}>
@@ -45,9 +42,7 @@ export function SelectDownshiftMenu<T>(props: SelectDownshiftMenuProps<T>) {
         <SelectMenu {...getMenuProps({ refKey: 'menuRef' })}>
           {isLoading && <LoadingItem {...props} />}
 
-          {!isLoading && createNewItem && (items || []).length > 0 && <CreateItem {...props} />}
-
-          {!isLoading && !createNewItem && (items || []).length === 0 && <EmptyItem {...props} />}
+          {!isLoading && (!items || items.length === 0) && <EmptyItem {...props} />}
 
           {items && items.map((item, index) => <Item key={index} index={index} item={item} {...props} />)}
         </SelectMenu>
@@ -57,7 +52,6 @@ export function SelectDownshiftMenu<T>(props: SelectDownshiftMenuProps<T>) {
 }
 
 export const defaultComponents: SelectMenuComponents<any> = {
-  CreateItem: (props: SelectDownshiftMenuProps<any>) => <SelectCreateItem />,
   LoadingItem: (props: SelectDownshiftMenuProps<any>) => <SelectLoadingItem />,
   EmptyItem: (props: SelectDownshiftMenuProps<any>) => <SelectEmptyItem />,
   Item: (props: SelectDownshiftMenuProps<any> & { item: any; index: number }) => {
diff --git a/src/components/Select/SelectSingle/SelectSingle.tsx b/src/components/Select/SelectSingle/SelectSingle.tsx
index a4ea7b9bb..dec37cf10 100644
--- a/src/components/Select/SelectSingle/SelectSingle.tsx
+++ b/src/components/Select/SelectSingle/SelectSingle.tsx
@@ -23,9 +23,7 @@ export interface SelectSingleProps<T = DefaultItemType>
   itemToString: SelectDownshiftProps<T>['itemToString']
   onChange?: SelectDownshiftProps<T>['onChange']
   isOpen?: SelectDownshiftProps<T>['isOpen']
-  openOnFocus?: SelectDownshiftProps<T>['openOnFocus']
   onFilterChange?: SelectDownshiftProps<T>['onFilterChange']
-  createNewItem?: SelectDownshiftProps<T>['createNewItem']
 
   loading?: SelectDownshiftMenuProps<T>['loading']
   renderItem?: SelectDownshiftMenuProps<T>['renderItem']
@@ -39,9 +37,7 @@ export function SelectSingle<T>(props: SelectSingleProps<T>) {
     itemToString,
     onChange,
     isOpen,
-    openOnFocus,
     onFilterChange,
-    createNewItem,
     loading,
     renderItem,
     components,
@@ -83,9 +79,7 @@ export function SelectSingle<T>(props: SelectSingleProps<T>) {
         itemToString={itemToString}
         onChange={onChange}
         isOpen={isOpen}
-        openOnFocus={openOnFocus}
         onFilterChange={onFilterChange}
-        createNewItem={createNewItem}
         labelId={formControlProps.labelId}
       >
         {downshift => {
@@ -95,7 +89,7 @@ export function SelectSingle<T>(props: SelectSingleProps<T>) {
             <div className={css(style)}>
               <div>
                 <TextInput
-                  icon={downshiftOpen ? 'angleUp' : 'angleDown'}
+                  icon={isOpen ? 'zoomOutline' : downshiftOpen ? 'angleUp' : 'angleDown'}
                   {...rest}
                   onBlur={handleInputBlur(downshift)}
                   onFocus={handleInputFocus(downshift)}
@@ -114,7 +108,6 @@ export function SelectSingle<T>(props: SelectSingleProps<T>) {
                 loading={loading}
                 renderItem={renderItem}
                 components={components}
-                createNewItem={!!createNewItem}
               />
             </div>
           )
diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index 84e42876c..3fd679cf9 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -27,7 +27,6 @@ const locale = {
     currentPage: 'Current page',
   },
   select: {
-    createItem: 'Select an item or type a new value',
     emptyItem: 'No results were found',
     loadingItem: 'Loading...',
     removeItem: 'Remove',
diff --git a/src/i18n/locales/pt-BR.ts b/src/i18n/locales/pt-BR.ts
index 2951506b0..1eaded132 100644
--- a/src/i18n/locales/pt-BR.ts
+++ b/src/i18n/locales/pt-BR.ts
@@ -29,7 +29,6 @@ const locale: LocaleConfiguration = {
     currentPage: 'Página atual',
   },
   select: {
-    createItem: 'Selecione um item ou digite um novo valor',
     emptyItem: 'Nenhum resultado encontrado',
     loadingItem: 'Carregando...',
     removeItem: 'Remover',


Test patch:
diff --git a/src/components/FileUploader/__snapshots__/FileUploader.test.tsx.snap b/src/components/FileUploader/__snapshots__/FileUploader.test.tsx.snap
index e343405f9..941b586ec 100644
--- a/src/components/FileUploader/__snapshots__/FileUploader.test.tsx.snap
+++ b/src/components/FileUploader/__snapshots__/FileUploader.test.tsx.snap
@@ -1,51 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correct without extension 1`] = `
-.emotion-11 {
-  background-color: #FFFFFF;
+.emotion-12 {
   border-radius: 4px;
-  border: 1px solid #D3D4DD;
-  cursor: pointer;
-  padding: 0.25rem;
+  background-color: #FFFFFF;
   -webkit-transition: box-shadow .2s ease;
   transition: box-shadow .2s ease;
 }
 
-.emotion-11:focus {
+.emotion-12:focus {
   outline: none;
   box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
+.emotion-4 {
+  border: 1px solid#696979;
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 0.25em;
+}
+
 .emotion-3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  border: 1px dashed transparent;
-  padding: 0.25rem;
+  border-radius: 4px;
+  padding: 0.52em;
 }
 
-.emotion-10 {
+.emotion-9 {
+  background-color: #FFFFFF;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border-top: 1px solid #D3D4DD;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  padding: 1rem;
 }
 
-.emotion-9 {
+.emotion-10 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -53,17 +45,6 @@ exports[`should render correct without extension 1`] = `
   margin-left: 1rem;
 }
 
-.emotion-8 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
 .emotion-2 {
   display: grid;
   grid-auto-flow: column;
@@ -73,6 +54,10 @@ exports[`should render correct without extension 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
 }
 
 .emotion-0 {
@@ -80,7 +65,7 @@ exports[`should render correct without extension 1`] = `
   font-size: 1.5rem;
 }
 
-.emotion-7 {
+.emotion-8 {
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
@@ -97,7 +82,24 @@ exports[`should render correct without extension 1`] = `
   font-weight: bold;
 }
 
-.emotion-4 {
+.emotion-11 {
+  border-radius: 4px;
+  border-bottom: 1px solid #D3D4DD;
+  border-left: 1px solid #D3D4DD;
+  border-right: 1px solid #D3D4DD;
+  padding: 1rem;
+  background-color: #FFFFFF;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-5 {
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
@@ -109,7 +111,7 @@ exports[`should render correct without extension 1`] = `
   padding: 1rem;
 }
 
-.emotion-6 {
+.emotion-7 {
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
@@ -118,7 +120,7 @@ exports[`should render correct without extension 1`] = `
   margin-right: 10px;
 }
 
-.emotion-5 {
+.emotion-6 {
   fill: #0069D0;
   font-size: 1rem;
   margin-right: 5px;
@@ -126,7 +128,7 @@ exports[`should render correct without extension 1`] = `
 
 <div>
   <div
-    class="emotion-11"
+    class="emotion-12"
     tabindex="0"
   >
     <input
@@ -137,43 +139,47 @@ exports[`should render correct without extension 1`] = `
       type="file"
     />
     <div
-      class="emotion-3"
+      class="emotion-4"
     >
       <div
-        class="emotion-2"
+        class="emotion-3"
       >
-        <svg
-          aria-hidden="true"
-          class="emotion-0"
-          height="1em"
-          role="img"
-          viewBox="0 0 24 24"
-          width="1em"
+        <div
+          class="emotion-2"
         >
-          <path
-            d="M13 7.414V15c0 .667-.333 1-1 1s-1-.333-1-1V7.414l-3.293 3.293a1 1 0 1 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5.001 5.001a1 1 0 0 1-1.414 1.414L13 7.414zM4 19c.002-.667.335-1 1-1h14c.667-.004 1 .33 1 1.001 0 .672-.333 1.005-1 .999H5.002c-.67 0-1.004-.334-1.002-1z"
+          <svg
+            aria-hidden="true"
+            class="emotion-0"
+            height="1em"
+            role="img"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M13 7.414V15c0 .667-.333 1-1 1s-1-.333-1-1V7.414l-3.293 3.293a1 1 0 1 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5.001 5.001a1 1 0 0 1-1.414 1.414L13 7.414zM4 19c.002-.667.335-1 1-1h14c.667-.004 1 .33 1 1.001 0 .672-.333 1.005-1 .999H5.002c-.67 0-1.004-.334-1.002-1z"
+            />
+          </svg>
+          <span
+            class="emotion-1"
           />
-        </svg>
-        <span
-          class="emotion-1"
-        />
+        </div>
       </div>
     </div>
     <div
-      class="emotion-10"
+      class="emotion-11"
     >
       <span
-        class="emotion-4"
+        class="emotion-5"
       />
       <div
-        class="emotion-9"
+        class="emotion-10"
       >
         <div
-          class="emotion-8"
+          class="emotion-9"
         >
           <svg
             aria-hidden="true"
-            class="emotion-5"
+            class="emotion-6"
             height="1em"
             role="img"
             viewBox="0 0 24 24"
@@ -184,12 +190,12 @@ exports[`should render correct without extension 1`] = `
             />
           </svg>
           <span
-            class="emotion-6"
+            class="emotion-7"
           >
             teste.pdf
           </span>
           <span
-            class="emotion-7"
+            class="emotion-8"
           >
             0 Bytes
           </span>
@@ -201,35 +207,28 @@ exports[`should render correct without extension 1`] = `
 `;
 
 exports[`should render correctly at initial state 1`] = `
-.emotion-4 {
-  background-color: #FFFFFF;
+.emotion-5 {
   border-radius: 4px;
-  border: 1px solid #D3D4DD;
-  cursor: pointer;
-  padding: 0.25rem;
+  background-color: #FFFFFF;
   -webkit-transition: box-shadow .2s ease;
   transition: box-shadow .2s ease;
 }
 
-.emotion-4:focus {
+.emotion-5:focus {
   outline: none;
   box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
+.emotion-4 {
+  border: 1px solid#696979;
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 0.25em;
+}
+
 .emotion-3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  border: 1px dashed transparent;
-  padding: 0.25rem;
+  border-radius: 4px;
+  padding: 0.52em;
 }
 
 .emotion-2 {
@@ -241,6 +240,10 @@ exports[`should render correctly at initial state 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
 }
 
 .emotion-0 {
@@ -260,7 +263,7 @@ exports[`should render correctly at initial state 1`] = `
 
 <div>
   <div
-    class="emotion-4"
+    class="emotion-5"
     tabindex="0"
   >
     <input
@@ -271,26 +274,30 @@ exports[`should render correctly at initial state 1`] = `
       type="file"
     />
     <div
-      class="emotion-3"
+      class="emotion-4"
     >
       <div
-        class="emotion-2"
+        class="emotion-3"
       >
-        <svg
-          aria-hidden="true"
-          class="emotion-0"
-          height="1em"
-          role="img"
-          viewBox="0 0 24 24"
-          width="1em"
+        <div
+          class="emotion-2"
         >
-          <path
-            d="M13 7.414V15c0 .667-.333 1-1 1s-1-.333-1-1V7.414l-3.293 3.293a1 1 0 1 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5.001 5.001a1 1 0 0 1-1.414 1.414L13 7.414zM4 19c.002-.667.335-1 1-1h14c.667-.004 1 .33 1 1.001 0 .672-.333 1.005-1 .999H5.002c-.67 0-1.004-.334-1.002-1z"
+          <svg
+            aria-hidden="true"
+            class="emotion-0"
+            height="1em"
+            role="img"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M13 7.414V15c0 .667-.333 1-1 1s-1-.333-1-1V7.414l-3.293 3.293a1 1 0 1 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5.001 5.001a1 1 0 0 1-1.414 1.414L13 7.414zM4 19c.002-.667.335-1 1-1h14c.667-.004 1 .33 1 1.001 0 .672-.333 1.005-1 .999H5.002c-.67 0-1.004-.334-1.002-1z"
+            />
+          </svg>
+          <span
+            class="emotion-1"
           />
-        </svg>
-        <span
-          class="emotion-1"
-        />
+        </div>
       </div>
     </div>
   </div>
@@ -298,51 +305,43 @@ exports[`should render correctly at initial state 1`] = `
 `;
 
 exports[`should render correctly at uploading state 1`] = `
-.emotion-11 {
-  background-color: #FFFFFF;
+.emotion-12 {
   border-radius: 4px;
-  border: 1px solid #D3D4DD;
-  cursor: pointer;
-  padding: 0.25rem;
+  background-color: #FFFFFF;
   -webkit-transition: box-shadow .2s ease;
   transition: box-shadow .2s ease;
 }
 
-.emotion-11:focus {
+.emotion-12:focus {
   outline: none;
   box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
+.emotion-4 {
+  border: 1px solid#696979;
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 0.25em;
+}
+
 .emotion-3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  border: 1px dashed transparent;
-  padding: 0.25rem;
+  border-radius: 4px;
+  padding: 0.52em;
 }
 
-.emotion-10 {
+.emotion-8 {
+  background-color: #FFFFFF;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border-top: 1px solid #D3D4DD;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  padding: 1rem;
 }
 
-.emotion-9 {
+.emotion-10 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -350,17 +349,6 @@ exports[`should render correctly at uploading state 1`] = `
   margin-left: 1rem;
 }
 
-.emotion-7 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
 .emotion-2 {
   display: grid;
   grid-auto-flow: column;
@@ -370,6 +358,10 @@ exports[`should render correctly at uploading state 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
 }
 
 .emotion-0 {
@@ -377,7 +369,7 @@ exports[`should render correctly at uploading state 1`] = `
   font-size: 1.5rem;
 }
 
-.emotion-6 {
+.emotion-7 {
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
@@ -394,7 +386,24 @@ exports[`should render correctly at uploading state 1`] = `
   font-weight: bold;
 }
 
-.emotion-4 {
+.emotion-11 {
+  border-radius: 4px;
+  border-bottom: 1px solid #D3D4DD;
+  border-left: 1px solid #D3D4DD;
+  border-right: 1px solid #D3D4DD;
+  padding: 1rem;
+  background-color: #FFFFFF;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-5 {
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
@@ -406,7 +415,7 @@ exports[`should render correctly at uploading state 1`] = `
   padding: 1rem;
 }
 
-.emotion-5 {
+.emotion-6 {
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
@@ -415,7 +424,7 @@ exports[`should render correctly at uploading state 1`] = `
   margin-right: 10px;
 }
 
-.emotion-8 {
+.emotion-9 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -424,19 +433,19 @@ exports[`should render correctly at uploading state 1`] = `
   width: 100%;
 }
 
-.emotion-8::-webkit-progress-bar {
+.emotion-9::-webkit-progress-bar {
   background-color: #F0F0F5;
   border-radius: 4px;
 }
 
-.emotion-8::-webkit-progress-value {
+.emotion-9::-webkit-progress-value {
   background-color: #0069D0;
   border-radius: 4px;
   -webkit-transition: all .3s;
   transition: all .3s;
 }
 
-.emotion-8::-moz-progress-bar {
+.emotion-9::-moz-progress-bar {
   background-color: #0069D0;
   border-radius: 4px;
   -webkit-transition: all .3s;
@@ -445,7 +454,7 @@ exports[`should render correctly at uploading state 1`] = `
 
 <div>
   <div
-    class="emotion-11"
+    class="emotion-12"
     tabindex="0"
   >
     <input
@@ -456,55 +465,59 @@ exports[`should render correctly at uploading state 1`] = `
       type="file"
     />
     <div
-      class="emotion-3"
+      class="emotion-4"
     >
       <div
-        class="emotion-2"
+        class="emotion-3"
       >
-        <svg
-          aria-hidden="true"
-          class="emotion-0"
-          height="1em"
-          role="img"
-          viewBox="0 0 24 24"
-          width="1em"
+        <div
+          class="emotion-2"
         >
-          <path
-            d="M13 7.414V15c0 .667-.333 1-1 1s-1-.333-1-1V7.414l-3.293 3.293a1 1 0 1 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5.001 5.001a1 1 0 0 1-1.414 1.414L13 7.414zM4 19c.002-.667.335-1 1-1h14c.667-.004 1 .33 1 1.001 0 .672-.333 1.005-1 .999H5.002c-.67 0-1.004-.334-1.002-1z"
+          <svg
+            aria-hidden="true"
+            class="emotion-0"
+            height="1em"
+            role="img"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M13 7.414V15c0 .667-.333 1-1 1s-1-.333-1-1V7.414l-3.293 3.293a1 1 0 1 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5.001 5.001a1 1 0 0 1-1.414 1.414L13 7.414zM4 19c.002-.667.335-1 1-1h14c.667-.004 1 .33 1 1.001 0 .672-.333 1.005-1 .999H5.002c-.67 0-1.004-.334-1.002-1z"
+            />
+          </svg>
+          <span
+            class="emotion-1"
           />
-        </svg>
-        <span
-          class="emotion-1"
-        />
+        </div>
       </div>
     </div>
     <div
-      class="emotion-10"
+      class="emotion-11"
     >
       <span
-        class="emotion-4"
+        class="emotion-5"
       >
         pdf
       </span>
       <div
-        class="emotion-9"
+        class="emotion-10"
       >
         <div
-          class="emotion-7"
+          class="emotion-8"
         >
           <span
-            class="emotion-5"
+            class="emotion-6"
           >
             teste.pdf
           </span>
           <span
-            class="emotion-6"
+            class="emotion-7"
           >
             0 Bytes
           </span>
         </div>
         <progress
-          class="emotion-8"
+          class="emotion-9"
           max="100"
           value="40"
         />
@@ -515,51 +528,43 @@ exports[`should render correctly at uploading state 1`] = `
 `;
 
 exports[`should render correctly complete state 1`] = `
-.emotion-11 {
-  background-color: #FFFFFF;
+.emotion-12 {
   border-radius: 4px;
-  border: 1px solid #D3D4DD;
-  cursor: pointer;
-  padding: 0.25rem;
+  background-color: #FFFFFF;
   -webkit-transition: box-shadow .2s ease;
   transition: box-shadow .2s ease;
 }
 
-.emotion-11:focus {
+.emotion-12:focus {
   outline: none;
   box-shadow: 0 0 0 2px #F0F0F5,0 0 0 4px #0069D0;
 }
 
+.emotion-4 {
+  border: 1px solid#696979;
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 0.25em;
+}
+
 .emotion-3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  border: 1px dashed transparent;
-  padding: 0.25rem;
+  border-radius: 4px;
+  padding: 0.52em;
 }
 
-.emotion-10 {
+.emotion-9 {
+  background-color: #FFFFFF;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border-top: 1px solid #D3D4DD;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  padding: 1rem;
 }
 
-.emotion-9 {
+.emotion-10 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -567,17 +572,6 @@ exports[`should render correctly complete state 1`] = `
   margin-left: 1rem;
 }
 
-.emotion-8 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
 .emotion-2 {
   display: grid;
   grid-auto-flow: column;
@@ -587,6 +581,10 @@ exports[`should render correctly complete state 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
 }
 
 .emotion-0 {
@@ -594,7 +592,7 @@ exports[`should render correctly complete state 1`] = `
   font-size: 1.5rem;
 }
 
-.emotion-7 {
+.emotion-8 {
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
@@ -611,7 +609,24 @@ exports[`should render correctly complete state 1`] = `
   font-weight: bold;
 }
 
-.emotion-4 {
+.emotion-11 {
+  border-radius: 4px;
+  border-bottom: 1px solid #D3D4DD;
+  border-left: 1px solid #D3D4DD;
+  border-right: 1px solid #D3D4DD;
+  padding: 1rem;
+  background-color: #FFFFFF;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-5 {
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
@@ -623,7 +638,7 @@ exports[`should render correctly complete state 1`] = `
   padding: 1rem;
 }
 
-.emotion-6 {
+.emotion-7 {
   font-family: "IBM Plex Sans",sans-serif;
   font-size: 0.8125rem;
   line-height: 1.5;
@@ -632,7 +647,7 @@ exports[`should render correctly complete state 1`] = `
   margin-right: 10px;
 }
 
-.emotion-5 {
+.emotion-6 {
   fill: #0069D0;
   font-size: 1rem;
   margin-right: 5px;
@@ -640,7 +655,7 @@ exports[`should render correctly complete state 1`] = `
 
 <div>
   <div
-    class="emotion-11"
+    class="emotion-12"
     tabindex="0"
   >
     <input
@@ -651,45 +666,49 @@ exports[`should render correctly complete state 1`] = `
       type="file"
     />
     <div
-      class="emotion-3"
+      class="emotion-4"
     >
       <div
-        class="emotion-2"
+        class="emotion-3"
       >
-        <svg
-          aria-hidden="true"
-          class="emotion-0"
-          height="1em"
-          role="img"
-          viewBox="0 0 24 24"
-          width="1em"
+        <div
+          class="emotion-2"
         >
-          <path
-            d="M13 7.414V15c0 .667-.333 1-1 1s-1-.333-1-1V7.414l-3.293 3.293a1 1 0 1 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5.001 5.001a1 1 0 0 1-1.414 1.414L13 7.414zM4 19c.002-.667.335-1 1-1h14c.667-.004 1 .33 1 1.001 0 .672-.333 1.005-1 .999H5.002c-.67 0-1.004-.334-1.002-1z"
+          <svg
+            aria-hidden="true"
+            class="emotion-0"
+            height="1em"
+            role="img"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M13 7.414V15c0 .667-.333 1-1 1s-1-.333-1-1V7.414l-3.293 3.293a1 1 0 1 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5.001 5.001a1 1 0 0 1-1.414 1.414L13 7.414zM4 19c.002-.667.335-1 1-1h14c.667-.004 1 .33 1 1.001 0 .672-.333 1.005-1 .999H5.002c-.67 0-1.004-.334-1.002-1z"
+            />
+          </svg>
+          <span
+            class="emotion-1"
           />
-        </svg>
-        <span
-          class="emotion-1"
-        />
+        </div>
       </div>
     </div>
     <div
-      class="emotion-10"
+      class="emotion-11"
     >
       <span
-        class="emotion-4"
+        class="emotion-5"
       >
         pdf
       </span>
       <div
-        class="emotion-9"
+        class="emotion-10"
       >
         <div
-          class="emotion-8"
+          class="emotion-9"
         >
           <svg
             aria-hidden="true"
-            class="emotion-5"
+            class="emotion-6"
             height="1em"
             role="img"
             viewBox="0 0 24 24"
@@ -700,12 +719,12 @@ exports[`should render correctly complete state 1`] = `
             />
           </svg>
           <span
-            class="emotion-6"
+            class="emotion-7"
           >
             teste.pdf
           </span>
           <span
-            class="emotion-7"
+            class="emotion-8"
           >
             0 Bytes
           </span>
diff --git a/src/components/Paginator/Paginator.test.tsx b/src/components/Paginator/Paginator.test.tsx
index 34e248e29..43ba2df71 100644
--- a/src/components/Paginator/Paginator.test.tsx
+++ b/src/components/Paginator/Paginator.test.tsx
@@ -52,31 +52,6 @@ it('should call onChange when Enter is pressed', () => {
   expect(handleChange).toHaveBeenCalledTimes(1)
 })
 
-it('should reset value if value is not an integer', () => {
-  const handleChange = jest.fn()
-  const { container } = render(<Paginator page={4} total={10} onChange={handleChange} />)
-  const input = container.querySelector('input')
-
-  fireEvent.change(input, { target: { value: 'a' } })
-  fireEvent.blur(input)
-
-  expect(input.value).toBe('5')
-})
-
-it('should reset value if value is less than 1 or bigger than total', () => {
-  const handleChange = jest.fn()
-  const { container } = render(<Paginator page={4} total={10} onChange={handleChange} />)
-  const input = container.querySelector('input')
-
-  fireEvent.change(input, { target: { value: '0' } })
-  fireEvent.blur(input)
-  expect(input.value).toBe('5')
-
-  fireEvent.change(input, { target: { value: '11' } })
-  fireEvent.blur(input)
-  expect(input.value).toBe('5')
-})
-
 it('should allow message customization via locale context', () => {
   const { container, queryByText } = render(
     <LocaleContext.Provider value={ptBr}>
diff --git a/src/components/Paginator/__snapshots__/Paginator.test.tsx.snap b/src/components/Paginator/__snapshots__/Paginator.test.tsx.snap
index d0fd3b546..556becdca 100644
--- a/src/components/Paginator/__snapshots__/Paginator.test.tsx.snap
+++ b/src/components/Paginator/__snapshots__/Paginator.test.tsx.snap
@@ -73,6 +73,65 @@ exports[`should render correctly 1`] = `
   position: relative;
 }
 
+.emotion-4 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: #3A3A47;
+}
+
+.emotion-6 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  line-height: 1.5rem;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-transition: all .2s;
+  transition: all .2s;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: #3A3A47;
+  font-size: 0.875rem;
+  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
+  margin-left: 0.25rem;
+}
+
+.emotion-6 > span {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-6:not(:disabled):active {
+  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
+}
+
+.emotion-6:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #0069D0;
+}
+
+.emotion-6:not(:disabled):hover {
+  background-color: rgba(58,58,71,0.1);
+}
+
 .emotion-2 {
   background-color: #FFFFFF;
   border: solid 1px #8F8FA2;
@@ -147,65 +206,6 @@ exports[`should render correctly 1`] = `
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
-.emotion-4 {
-  font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  color: #3A3A47;
-}
-
-.emotion-6 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  line-height: 1.5rem;
-  position: relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: all .2s;
-  transition: all .2s;
-  font-weight: bold;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: #3A3A47;
-  font-size: 0.875rem;
-  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
-  margin-left: 0.25rem;
-}
-
-.emotion-6 > span {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-6:not(:disabled):active {
-  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
-}
-
-.emotion-6:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #0069D0;
-}
-
-.emotion-6:not(:disabled):hover {
-  background-color: rgba(58,58,71,0.1);
-}
-
 <div>
   <div
     class="emotion-7"
@@ -293,6 +293,65 @@ exports[`should render correctly 2`] = `
   position: relative;
 }
 
+.emotion-4 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: #3A3A47;
+}
+
+.emotion-6 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  line-height: 1.5rem;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-transition: all .2s;
+  transition: all .2s;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: #3A3A47;
+  font-size: 0.875rem;
+  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
+  margin-left: 0.25rem;
+}
+
+.emotion-6 > span {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-6:not(:disabled):active {
+  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
+}
+
+.emotion-6:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #0069D0;
+}
+
+.emotion-6:not(:disabled):hover {
+  background-color: rgba(58,58,71,0.1);
+}
+
 .emotion-2 {
   background-color: #FFFFFF;
   border: solid 1px #8F8FA2;
@@ -367,65 +426,6 @@ exports[`should render correctly 2`] = `
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
-.emotion-4 {
-  font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  color: #3A3A47;
-}
-
-.emotion-6 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  line-height: 1.5rem;
-  position: relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: all .2s;
-  transition: all .2s;
-  font-weight: bold;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: #3A3A47;
-  font-size: 0.875rem;
-  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
-  margin-left: 0.25rem;
-}
-
-.emotion-6 > span {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-6:not(:disabled):active {
-  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
-}
-
-.emotion-6:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #0069D0;
-}
-
-.emotion-6:not(:disabled):hover {
-  background-color: rgba(58,58,71,0.1);
-}
-
 .emotion-1 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -567,6 +567,65 @@ exports[`should render correctly 3`] = `
   position: relative;
 }
 
+.emotion-4 {
+  font-family: "IBM Plex Sans",sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: #3A3A47;
+}
+
+.emotion-6 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  line-height: 1.5rem;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-transition: all .2s;
+  transition: all .2s;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: #3A3A47;
+  font-size: 0.875rem;
+  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
+  margin-left: 0.25rem;
+}
+
+.emotion-6 > span {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-6:not(:disabled):active {
+  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
+}
+
+.emotion-6:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #0069D0;
+}
+
+.emotion-6:not(:disabled):hover {
+  background-color: rgba(58,58,71,0.1);
+}
+
 .emotion-2 {
   background-color: #FFFFFF;
   border: solid 1px #8F8FA2;
@@ -641,65 +700,6 @@ exports[`should render correctly 3`] = `
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
-.emotion-4 {
-  font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  color: #3A3A47;
-}
-
-.emotion-6 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  line-height: 1.5rem;
-  position: relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: all .2s;
-  transition: all .2s;
-  font-weight: bold;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: #3A3A47;
-  font-size: 0.875rem;
-  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
-  margin-left: 0.25rem;
-}
-
-.emotion-6 > span {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-6:not(:disabled):active {
-  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
-}
-
-.emotion-6:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #0069D0;
-}
-
-.emotion-6:not(:disabled):hover {
-  background-color: rgba(58,58,71,0.1);
-}
-
 .emotion-1 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
diff --git a/src/components/Select/Select.test.tsx b/src/components/Select/Select.test.tsx
index fc777c92d..1590e457c 100644
--- a/src/components/Select/Select.test.tsx
+++ b/src/components/Select/Select.test.tsx
@@ -17,35 +17,28 @@ const items: DefaultItemType[] = [
 afterEach(jest.clearAllMocks)
 
 // tslint:disable jsx-no-lambda
-function SelectTest(props: Partial<SelectProps<DefaultItemType>>) {
+function createSelect(props: Partial<SelectProps<DefaultItemType>> = {}) {
   return <Select<DefaultItemType> items={items} itemToString={item => item && item.label} {...props} />
 }
 
 describe('single', () => {
   it('should render without errors', () => {
-    render(<SelectTest value={items[3]} />)
+    render(createSelect({ value: items[3] }))
   })
   it('should warn when value is an array', () => {
     const spy = jest.spyOn(console, 'warn').mockImplementation(() => null)
-    render(<SelectTest value={[]} />)
+    render(createSelect({ value: [] }))
     expect(spy).toMatchSnapshot()
   })
 })
 
 describe('multiple', () => {
   it('should render without errors', () => {
-    render(SelectTest({ multiple: true, value: [items[4], items[3]] }))
+    render(createSelect({ multiple: true, value: [items[4], items[3]] }))
   })
   it('should warn when value is NOT an array', () => {
     const spy = jest.spyOn(console, 'warn').mockImplementation(() => null)
-    render(<SelectTest value={items[0]} multiple />)
+    render(createSelect({ multiple: true, value: items[0] }))
     expect(spy).toMatchSnapshot()
   })
-  it('should throw an error when createNewItem is set together with multiple prop', () => {
-    jest.spyOn(console, 'error').mockImplementation(() => undefined)
-
-    expect(() => {
-      render(<SelectTest createNewItem={jest.fn()} multiple />)
-    }).toThrowErrorMatchingInlineSnapshot(`"Select does not support props 'createNewItem' and 'multiple' together"`)
-  })
 })
diff --git a/src/components/Select/SelectMenu/SelectMenuItem.test.tsx b/src/components/Select/SelectMenu/SelectMenuItem.test.tsx
index f08e933ae..a45842c3a 100644
--- a/src/components/Select/SelectMenu/SelectMenuItem.test.tsx
+++ b/src/components/Select/SelectMenu/SelectMenuItem.test.tsx
@@ -1,13 +1,7 @@
 import { render } from '@testing-library/react'
 import React from 'react'
 
-import {
-  SelectCreateItem,
-  SelectEmptyItem,
-  SelectHelperMenuItem,
-  SelectLoadingItem,
-  SelectMenuItem,
-} from './SelectMenuItem'
+import { SelectEmptyItem, SelectHelperMenuItem, SelectLoadingItem, SelectMenuItem } from './SelectMenuItem'
 
 describe('SelectMenuItem', () => {
   it('should render correctly', () => {
@@ -46,10 +40,3 @@ describe('SelectEmptyItem', () => {
     expect(container).toMatchSnapshot()
   })
 })
-
-describe('SelectCreateItem', () => {
-  it('should render correctly', () => {
-    const { container } = render(<SelectCreateItem />)
-    expect(container).toMatchSnapshot()
-  })
-})
diff --git a/src/components/Select/SelectMenu/__snapshots__/SelectMenuItem.test.tsx.snap b/src/components/Select/SelectMenu/__snapshots__/SelectMenuItem.test.tsx.snap
index 84c14bd25..18f0b5a14 100644
--- a/src/components/Select/SelectMenu/__snapshots__/SelectMenuItem.test.tsx.snap
+++ b/src/components/Select/SelectMenu/__snapshots__/SelectMenuItem.test.tsx.snap
@@ -1,45 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SelectCreateItem should render correctly 1`] = `
-.emotion-0 {
-  font-family: "IBM Plex Sans",sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  color: #3A3A47;
-  border-bottom: 1px solid #D3D4DD;
-  cursor: pointer;
-  padding: 0.5rem 0.5rem;
-  -webkit-transition: .1s ease;
-  transition: .1s ease;
-  background: #F0F0F5;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-
-.emotion-0:last-of-type {
-  border-bottom: none;
-}
-
-.emotion-0:hover {
-  background: #F0F0F5;
-}
-
-.emotion-0:focus {
-  outline: 0;
-  border-radius: 3px;
-  box-shadow: inset 0 0 0 2px #0069D0;
-}
-
-<div>
-  <li
-    aria-selected="false"
-    class="emotion-0"
-  >
-    Select an item or type a new value
-  </li>
-</div>
-`;
-
 exports[`SelectEmptyItem should render correctly 1`] = `
 .emotion-0 {
   font-family: "IBM Plex Sans",sans-serif;
@@ -52,8 +12,6 @@ exports[`SelectEmptyItem should render correctly 1`] = `
   -webkit-transition: .1s ease;
   transition: .1s ease;
   background: #F0F0F5;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
 }
 
 .emotion-0:last-of-type {
@@ -143,8 +101,6 @@ exports[`SelectLoadingItem should render correctly 1`] = `
   -webkit-transition: .1s ease;
   transition: .1s ease;
   background: #F0F0F5;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
 }
 
 .emotion-1:last-of-type {
diff --git a/src/components/Select/SelectSingle/SelectSingle.test.tsx b/src/components/Select/SelectSingle/SelectSingle.test.tsx
index e900c6030..4ca6a4702 100644
--- a/src/components/Select/SelectSingle/SelectSingle.test.tsx
+++ b/src/components/Select/SelectSingle/SelectSingle.test.tsx
@@ -1,8 +1,6 @@
 import { fireEvent, render } from '@testing-library/react'
 import React from 'react'
 
-import en from '../../../i18n/locales/en-US'
-
 import { DefaultItemType, SelectSingle, SelectSingleProps } from './SelectSingle'
 
 jest.mock('../../../util/string')
@@ -129,39 +127,3 @@ describe('input label', () => {
     expect(container.querySelector('input').getAttribute('aria-labelledby')).toBeFalsy()
   })
 })
-
-describe('createNewItem', () => {
-  it('should allow selectedItem to become whatever is typed on text input', () => {
-    const createNewItem = jest.fn(text => ({ value: -1, label: text }))
-    const change = jest.fn()
-    const { container } = render(<SelectTest id='foo' createNewItem={createNewItem} onChange={change} />)
-
-    fireEvent.change(container.querySelector('input'), { target: { value: 'my item' } })
-
-    expect(createNewItem).toHaveBeenCalledWith('my item')
-    expect(change).toHaveBeenCalledWith({ value: -1, label: 'my item' }, expect.anything())
-  })
-  it('should render CreateItemSelect message', () => {
-    const createNewItem = jest.fn(text => ({ value: -1, label: text }))
-    const { queryByText } = render(<SelectTest id='foo' createNewItem={createNewItem} isOpen />)
-    expect(queryByText(en.select.createItem)).toBeTruthy()
-  })
-  it('should NOT render CreateItemSelect message when suggestion list is empty', () => {
-    const createNewItem = jest.fn(text => ({ value: -1, label: text }))
-    const { container, queryByText } = render(<SelectTest id='foo' createNewItem={createNewItem} isOpen />)
-    fireEvent.change(container.querySelector('input'), { target: { value: 'empty suggestion' } })
-    expect(queryByText(en.select.createItem)).toBeFalsy()
-  })
-  it('should NOT open select when focus by default', () => {
-    const createNewItem = jest.fn(text => ({ value: -1, label: text }))
-    const { container } = render(<SelectTest id='foo' createNewItem={createNewItem} />)
-    fireEvent.focus(container.querySelector('input'))
-    expect(container.querySelector('ul')).toBeFalsy()
-  })
-  it('should open select when focus and openOnFocus is true', () => {
-    const createNewItem = jest.fn(text => ({ value: -1, label: text }))
-    const { container } = render(<SelectTest id='foo' createNewItem={createNewItem} openOnFocus />)
-    fireEvent.focus(container.querySelector('input'))
-    expect(container.querySelector('ul')).toBeTruthy()
-  })
-})
diff --git a/src/components/Select/SelectSingle/__snapshots__/SelectSingle.test.tsx.snap b/src/components/Select/SelectSingle/__snapshots__/SelectSingle.test.tsx.snap
index b3867f152..9a14ba966 100644
--- a/src/components/Select/SelectSingle/__snapshots__/SelectSingle.test.tsx.snap
+++ b/src/components/Select/SelectSingle/__snapshots__/SelectSingle.test.tsx.snap
@@ -955,7 +955,7 @@ exports[`should render correctly when opened 1`] = `
                   width="1em"
                 >
                   <path
-                    d="M7.707 14.707a1 1 0 1 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5.001 5.001a1 1 0 0 1-1.414 1.414L12 10.414l-4.293 4.293z"
+                    d="M14.605 13.194l7 6.998a1 1 0 0 1-1.415 1.414l-6.997-7a7 7 0 1 1 1.412-1.412zM9 14A5 5 0 1 0 9 4a5 5 0 0 0 0 10z"
                   />
                 </svg>
               </span>
diff --git a/src/components/SelectInline/__snapshots__/SelectInline.test.tsx.snap b/src/components/SelectInline/__snapshots__/SelectInline.test.tsx.snap
index ea9b8f905..f4d7af6ac 100644
--- a/src/components/SelectInline/__snapshots__/SelectInline.test.tsx.snap
+++ b/src/components/SelectInline/__snapshots__/SelectInline.test.tsx.snap
@@ -394,7 +394,7 @@ exports[`SelectInline should render correctly when closed 1`] = `
                       width="1em"
                     >
                       <path
-                        d="M7.707 14.707a1 1 0 1 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5.001 5.001a1 1 0 0 1-1.414 1.414L12 10.414l-4.293 4.293z"
+                        d="M14.605 13.194l7 6.998a1 1 0 0 1-1.415 1.414l-6.997-7a7 7 0 1 1 1.412-1.412zM9 14A5 5 0 1 0 9 4a5 5 0 0 0 0 10z"
                       />
                     </svg>
                   </span>
@@ -847,7 +847,7 @@ exports[`SelectInline should render correctly when opened 1`] = `
                         width="1em"
                       >
                         <path
-                          d="M7.707 14.707a1 1 0 1 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5.001 5.001a1 1 0 0 1-1.414 1.414L12 10.414l-4.293 4.293z"
+                          d="M14.605 13.194l7 6.998a1 1 0 0 1-1.415 1.414l-6.997-7a7 7 0 1 1 1.412-1.412zM9 14A5 5 0 1 0 9 4a5 5 0 0 0 0 10z"
                         />
                       </svg>
                     </span>
@@ -1301,7 +1301,7 @@ exports[`SelectInline should render correctly with button placeholder 1`] = `
                       width="1em"
                     >
                       <path
-                        d="M7.707 14.707a1 1 0 1 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5.001 5.001a1 1 0 0 1-1.414 1.414L12 10.414l-4.293 4.293z"
+                        d="M14.605 13.194l7 6.998a1 1 0 0 1-1.415 1.414l-6.997-7a7 7 0 1 1 1.412-1.412zM9 14A5 5 0 1 0 9 4a5 5 0 0 0 0 10z"
                       />
                     </svg>
                   </span>
diff --git a/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap b/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap
index 74c49d6c1..7b3f75412 100644
--- a/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap
+++ b/src/components/Table/TableFooter/__snapshots__/TableFooter.test.tsx.snap
@@ -196,6 +196,58 @@ exports[`renders correctly 1`] = `
   position: relative;
 }
 
+.emotion-12 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  line-height: 1.5rem;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-transition: all .2s;
+  transition: all .2s;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: #3A3A47;
+  font-size: 0.875rem;
+  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
+  margin-left: 0.25rem;
+}
+
+.emotion-12 > span {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.emotion-12:not(:disabled):active {
+  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
+}
+
+.emotion-12:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #0069D0;
+}
+
+.emotion-12:not(:disabled):hover {
+  background-color: rgba(58,58,71,0.1);
+}
+
 .emotion-8 {
   background-color: #FFFFFF;
   border: solid 1px #8F8FA2;
@@ -270,58 +322,6 @@ exports[`renders correctly 1`] = `
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
 }
 
-.emotion-12 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  line-height: 1.5rem;
-  position: relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-transition: all .2s;
-  transition: all .2s;
-  font-weight: bold;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: #3A3A47;
-  font-size: 0.875rem;
-  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
-  margin-left: 0.25rem;
-}
-
-.emotion-12 > span {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-12:not(:disabled):active {
-  box-shadow: inset 0 2px 8px 0 rgba(0,0,0,0.1);
-}
-
-.emotion-12:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #0069D0;
-}
-
-.emotion-12:not(:disabled):hover {
-  background-color: rgba(58,58,71,0.1);
-}
-
 <div>
   <div
     class="emotion-15"