From 13b619227906edc6443a6a56cdad8aebad458943 Mon Sep 17 00:00:00 2001
From: Daniel Ayoub <danny.a95@gmail.com>
Date: Wed, 12 Sep 2018 17:40:35 -0400
Subject: [PATCH 01/16] WIP

---
 shared/common-adapters/plain-input.desktop.js |  5 +-
 shared/common-adapters/plain-input.js.flow    |  1 +
 shared/common-adapters/plain-input.native.js  | 41 ++++++++++-
 shared/common-adapters/plain-input.stories.js | 73 ++++++++++++++++++-
 4 files changed, 113 insertions(+), 7 deletions(-)

diff --git a/shared/common-adapters/plain-input.desktop.js b/shared/common-adapters/plain-input.desktop.js
index aaae6d37134d..c8da2d113db6 100644
--- a/shared/common-adapters/plain-input.desktop.js
+++ b/shared/common-adapters/plain-input.desktop.js
@@ -2,6 +2,7 @@
 import * as React from 'react'
 import {getStyle as getTextStyle} from './text.desktop'
 import {collapseStyles, globalColors, styleSheetCreate, platformStyles} from '../styles'
+import {pick} from 'lodash-es'
 
 import type {_StylesDesktop} from '../styles/css'
 import type {InternalProps, TextInfo} from './plain-input'
@@ -129,6 +130,7 @@ class PlainInput extends React.PureComponent<InternalProps> {
 
   _getCommonProps = () => {
     let commonProps: any = {
+      ...pick(this.props, ['maxLength', 'value']), // Props we should only passthrough if supplied
       autoFocus: this.props.autoFocus,
       className: this.props.className,
       onBlur: this._onBlur,
@@ -145,9 +147,6 @@ class PlainInput extends React.PureComponent<InternalProps> {
     if (this.props.disabled) {
       commonProps.readOnly = 'readonly'
     }
-    if (this.props.maxLength) {
-      commonProps.maxlength = this.props.maxLength
-    }
     return commonProps
   }
 
diff --git a/shared/common-adapters/plain-input.js.flow b/shared/common-adapters/plain-input.js.flow
index 2345cb612702..00828c437f66 100644
--- a/shared/common-adapters/plain-input.js.flow
+++ b/shared/common-adapters/plain-input.js.flow
@@ -38,6 +38,7 @@ export type Props = {
   style?: StylesCrossPlatform,
   textType?: TextType,
   type?: 'password' | 'text' | 'number',
+  value?: string, // Makes this a controlled input when passed
 
   /* Platform discrepancies */
   // Maps to onSubmitEditing on native
diff --git a/shared/common-adapters/plain-input.native.js b/shared/common-adapters/plain-input.native.js
index d773b3281666..b35ef019b57c 100644
--- a/shared/common-adapters/plain-input.native.js
+++ b/shared/common-adapters/plain-input.native.js
@@ -4,8 +4,10 @@ import {getStyle as getTextStyle} from './text'
 import {NativeTextInput} from './native-wrappers.native'
 import {collapseStyles, globalColors, styleSheetCreate} from '../styles'
 import {isIOS} from '../constants/platform'
+import {checkTextInfo} from './input.shared'
+import {pick} from 'lodash-es'
 
-import type {InternalProps} from './plain-input'
+import type {InternalProps, TextInfo} from './plain-input'
 
 type ContentSizeChangeEvent = {nativeEvent: {contentSize: {width: number, height: number}}}
 
@@ -26,8 +28,10 @@ class PlainInput extends Component<InternalProps, State> {
     focused: false,
     height: null,
   }
-
   _input: ?NativeTextInput
+  _lastNativeText: ?string // sourced from onChangeText
+  _lastNativeSelection: ?{start: number, end: number}
+
   _setInputRef = (ref: ?NativeTextInput) => {
     this._input = ref
   }
@@ -38,6 +42,32 @@ class PlainInput extends Component<InternalProps, State> {
     this._input && this._input.setNativeProps(nativeProps)
   }
 
+  transformText = (fn: TextInfo => TextInfo) => {
+    const currentTextInfo = {
+      text: this._lastNativeText || '',
+      selection: this._lastNativeSelection || {start: 0, end: 0},
+    }
+    const newTextInfo = fn(currentTextInfo)
+    checkTextInfo(newTextInfo)
+    this.setNativeProps({text: newTextInfo.text, selection: newTextInfo.selection})
+    this._lastNativeText = newTextInfo.text
+    this._lastNativeSelection = newTextInfo.selection
+  }
+
+  _onChangeText = (t: string) => {
+    this._lastNativeText = t
+    this.props.onChangeText && this.props.onChangeText(t)
+  }
+
+  _onSelectionChange = (event: {nativeEvent: {selection: {start: number, end: number}}}) => {
+    let {start: _start, end: _end} = event.nativeEvent.selection
+    // Work around Android bug which sometimes puts end before start:
+    // https://github.com/facebook/react-native/issues/18579 .
+    const start = Math.min(_start, _end)
+    const end = Math.max(_start, _end)
+    this._lastNativeSelection = {start, end}
+  }
+
   _onContentSizeChange = (event: ContentSizeChangeEvent) => {
     if (this.props.multiline) {
       let height = event.nativeEvent.contentSize.height
@@ -116,6 +146,7 @@ class PlainInput extends Component<InternalProps, State> {
 
   _getProps = () => {
     const common: any = {
+      ...pick(this.props, ['maxLength', 'value']), // Props we should only passthrough if supplied
       autoCapitalize: this.props.autoCapitalize || 'none',
       autoCorrect: !!this.props.autoCorrect,
       autoFocus: this.props.autoFocus,
@@ -123,9 +154,10 @@ class PlainInput extends Component<InternalProps, State> {
       keyboardType: this.props.keyboardType,
       multiline: false,
       onBlur: this._onBlur,
-      onChangeText: this.props.onChangeText,
+      onChangeText: this._onChangeText,
       onEndEditing: this.props.onEndEditing,
       onFocus: this._onFocus,
+      onSelectionChange: this._onSelectionChange,
       onSubmitEditing: this.props.onEnterKeyDown,
       placeholder: this.props.placeholder,
       placeholderTextColor: this.props.placeholderColor || globalColors.black_40,
@@ -151,6 +183,9 @@ class PlainInput extends Component<InternalProps, State> {
 
   render = () => {
     const props = this._getProps()
+    if (props.value) {
+      this._lastNativeText = props.value
+    }
     return <NativeTextInput {...props} />
   }
 }
diff --git a/shared/common-adapters/plain-input.stories.js b/shared/common-adapters/plain-input.stories.js
index e0185a6392bf..24a5fb52aa78 100644
--- a/shared/common-adapters/plain-input.stories.js
+++ b/shared/common-adapters/plain-input.stories.js
@@ -2,9 +2,11 @@
 import * as React from 'react'
 import PlainInput from './plain-input'
 import Box, {Box2} from './box'
+import Button from './button'
+import ButtonBar from './button-bar'
 import Text from './text'
 import {action, storiesOf} from '../stories/storybook'
-import {globalColors} from '../styles'
+import {globalColors, globalMargins} from '../styles'
 
 const commonProps = {
   onBlur: action('onBlur'),
@@ -17,6 +19,72 @@ const commonProps = {
   style: {borderWidth: 1, borderStyle: 'solid', borderColor: globalColors.black_10},
 }
 
+type ControlledInputState = {[key: string]: string}
+class ControlledInputPlayground extends React.Component<{}, ControlledInputState> {
+  state = {}
+  mutationTarget = React.createRef()
+  _onChangeText = (valueKey: string) => (t: string) => this.setState({[valueKey]: t})
+  _onChangeSelection = () => {
+    if (this.mutationTarget.current) {
+      const input = this.mutationTarget.current
+      input.transformText(ti => ({text: ti.text, selection: {start: 2, end: 5}}))
+      input.focus()
+    }
+  }
+  _onTestCrossSelection = () => {
+    if (this.mutationTarget.current) {
+      const input = this.mutationTarget.current
+      input.transformText(ti => ({text: '5char', selection: {start: 0, end: 0}}))
+      input.transformText(ti => ({text: 'a lot more than 5 characters', selection: {start: 3, end: 5}}))
+    }
+  }
+  render() {
+    return (
+      <Box2 direction="vertical" fullWidth={true} gap="small" style={{padding: globalMargins.small}}>
+        <Text type="Body">Basic controlled inputs</Text>
+        <PlainInput
+          {...commonProps}
+          value={this.state.value1 || ''}
+          onChangeText={this._onChangeText('value1')}
+          placeholder={`type="text"`}
+        />
+        <PlainInput
+          {...commonProps}
+          value={this.state.value2 || ''}
+          onChangeText={this._onChangeText('value2')}
+          type="password"
+          placeholder={`type="password"`}
+        />
+        <PlainInput
+          {...commonProps}
+          value={this.state.value3 || ''}
+          onChangeText={this._onChangeText('value3')}
+          type="number"
+          placeholder={`type="number" (desktop only)`}
+        />
+        <Box2 direction="vertical" fullWidth={true} gap="small">
+          <Text type="Body">Live mutations</Text>
+          <PlainInput
+            {...commonProps}
+            ref={this.mutationTarget}
+            value={this.state.changingValue || ''}
+            onChangeText={this._onChangeText('changingValue')}
+          />
+          <ButtonBar>
+            <Button
+              type="Secondary"
+              label="Set value"
+              onClick={() => this.setState({changingValue: 'reset value!'})}
+            />
+            <Button type="Secondary" label="Set selection" onClick={this._onChangeSelection} />
+            <Button type="Secondary" label="Run test" onClick={this._onTestCrossSelection} />
+          </ButtonBar>
+        </Box2>
+      </Box2>
+    )
+  }
+}
+
 const load = () => {
   storiesOf('Common/Plain input', module)
     .addDecorator(story => <Box style={{padding: 20}}>{story()}</Box>)
@@ -46,6 +114,9 @@ const load = () => {
     .add('With placeholder color', () => (
       <PlainInput {...commonProps} placeholder="I'm blue!" placeholderColor="blue" />
     ))
+
+  // Sandbox for testing controlled input bugginess
+  storiesOf('Common', module).add('Controlled input playground', () => <ControlledInputPlayground />)
 }
 
 export default load

From 4004de482636b47b04e23bd88c977f8cb4b80536 Mon Sep 17 00:00:00 2001
From: Daniel Ayoub <danny.a95@gmail.com>
Date: Mon, 17 Sep 2018 11:06:55 -0400
Subject: [PATCH 02/16] better typing for plaininput and type casting function

---
 shared/common-adapters/new-input.js           |  8 ++++++--
 shared/common-adapters/plain-input.desktop.js |  1 +
 shared/common-adapters/plain-input.js.flow    | 13 ++++++++-----
 shared/common-adapters/plain-input.native.js  | 11 ++++++++++-
 shared/common-adapters/plain-input.shared.js  |  4 ++++
 shared/teams/join-team/index.native.js        |  1 -
 6 files changed, 29 insertions(+), 9 deletions(-)
 create mode 100644 shared/common-adapters/plain-input.shared.js

diff --git a/shared/common-adapters/new-input.js b/shared/common-adapters/new-input.js
index d7565d2bb516..5ba3f040a0c5 100644
--- a/shared/common-adapters/new-input.js
+++ b/shared/common-adapters/new-input.js
@@ -1,6 +1,10 @@
 // @flow
 import * as React from 'react'
-import PlainInput, {type PropsWithInput, type KeyboardType} from './plain-input'
+import PlainInput, {
+  castProps as plainInputCastProps,
+  type PropsWithInput,
+  type KeyboardType,
+} from './plain-input'
 import Box, {Box2} from './box'
 import Icon, {type IconType, castPlatformStyles} from './icon'
 import {getStyle as getTextStyle, type TextType} from './text'
@@ -75,7 +79,7 @@ class NewInput extends React.Component<DefaultProps & Props, State> {
             />
           </Box>
         )}
-        <PlainInput {...this.props} onFocus={this._onFocus} onBlur={this._onBlur} />
+        <PlainInput {...plainInputCastProps(this.props)} onFocus={this._onFocus} onBlur={this._onBlur} />
         {this.props.decoration}
       </Box2>
     )
diff --git a/shared/common-adapters/plain-input.desktop.js b/shared/common-adapters/plain-input.desktop.js
index c8da2d113db6..d3bbdbcb6e2a 100644
--- a/shared/common-adapters/plain-input.desktop.js
+++ b/shared/common-adapters/plain-input.desktop.js
@@ -231,3 +231,4 @@ const styles = styleSheetCreate({
 })
 
 export default PlainInput
+export {castProps} from './plain-input.shared'
diff --git a/shared/common-adapters/plain-input.js.flow b/shared/common-adapters/plain-input.js.flow
index 00828c437f66..c7f4d2edd729 100644
--- a/shared/common-adapters/plain-input.js.flow
+++ b/shared/common-adapters/plain-input.js.flow
@@ -20,7 +20,7 @@ export type KeyboardType =
   // Android Only
   | 'visible-password'
 
-export type Props = {
+export type Props = {|
   autoFocus?: boolean,
   className?: string,
   disabled?: boolean,
@@ -56,7 +56,7 @@ export type Props = {
   returnKeyType?: 'done' | 'go' | 'next' | 'search' | 'send',
   selectTextOnFocus?: boolean,
   onEndEditing?: () => void,
-}
+|}
 
 // Use this to mix your props with input props like type Props = PropsWithInput<{foo: number}>
 export type PropsWithInput<P> = {|
@@ -64,6 +64,9 @@ export type PropsWithInput<P> = {|
   ...$Exact<P>,
 |}
 
+// Use this in components that use PropsWithInput to pass `this.props` through to this component
+declare export function castProps<T>(p: PropsWithInput<T>): Props
+
 /**
  * Flow does the work of making the default props nullable when instantiating
  * this component, but doesn't go as far as letting the props be
@@ -74,10 +77,10 @@ export type PropsWithInput<P> = {|
  * use `InternalProps`.
  * See more discussion here: https://github.com/facebook/flow/issues/1660
  */
-export type DefaultProps = {
+export type DefaultProps = {|
   keyboardType: KeyboardType,
   textType: TextType,
-}
+|}
 
 export type Selection = {start: number, end: number}
 
@@ -86,7 +89,7 @@ export type TextInfo = {
   selection: Selection,
 }
 
-export type InternalProps = DefaultProps & Props
+export type InternalProps = {...DefaultProps, ...Props}
 declare export default class PlainInput extends React.Component<Props> {
   static defaultProps: DefaultProps;
   blur: () => void;
diff --git a/shared/common-adapters/plain-input.native.js b/shared/common-adapters/plain-input.native.js
index b35ef019b57c..2fbe037103e4 100644
--- a/shared/common-adapters/plain-input.native.js
+++ b/shared/common-adapters/plain-input.native.js
@@ -2,6 +2,7 @@
 import React, {Component} from 'react'
 import {getStyle as getTextStyle} from './text'
 import {NativeTextInput} from './native-wrappers.native'
+import HOCTimers, {type PropsWithTimer} from './hoc-timers'
 import {collapseStyles, globalColors, styleSheetCreate} from '../styles'
 import {isIOS} from '../constants/platform'
 import {checkTextInfo} from './input.shared'
@@ -16,9 +17,11 @@ type State = {
   height: ?number,
 }
 
+type Props = PropsWithTimer<InternalProps>
+
 // A plain text input component. Handles callbacks, text styling, and auto resizing but
 // adds no styling.
-class PlainInput extends Component<InternalProps, State> {
+class _PlainInput extends Component<Props, State> {
   static defaultProps = {
     keyboardType: 'default',
     textType: 'Body',
@@ -54,6 +57,10 @@ class PlainInput extends Component<InternalProps, State> {
     this._lastNativeSelection = newTextInfo.selection
   }
 
+  setSelection = (selection: {end: number, start: number}) => {
+    // this.props.setTimeout()
+  }
+
   _onChangeText = (t: string) => {
     this._lastNativeText = t
     this.props.onChangeText && this.props.onChangeText(t)
@@ -189,6 +196,7 @@ class PlainInput extends Component<InternalProps, State> {
     return <NativeTextInput {...props} />
   }
 }
+const PlainInput = HOCTimers(_PlainInput)
 
 const styles = styleSheetCreate({
   common: {backgroundColor: globalColors.fastBlank, flexGrow: 1, borderWidth: 0},
@@ -202,3 +210,4 @@ const styles = styleSheetCreate({
 })
 
 export default PlainInput
+export {castProps} from './plain-input.shared'
diff --git a/shared/common-adapters/plain-input.shared.js b/shared/common-adapters/plain-input.shared.js
new file mode 100644
index 000000000000..bffce8b82b33
--- /dev/null
+++ b/shared/common-adapters/plain-input.shared.js
@@ -0,0 +1,4 @@
+// @flow
+export function castProps(p: any) {
+  return p
+}
diff --git a/shared/teams/join-team/index.native.js b/shared/teams/join-team/index.native.js
index 2ffaed5cb653..2f1933ab7419 100644
--- a/shared/teams/join-team/index.native.js
+++ b/shared/teams/join-team/index.native.js
@@ -34,7 +34,6 @@ const EntryComponent = ({errorText, name, onNameChange, onSubmit}: Props) => (
               borderColor: errorText ? globalColors.red : globalColors.grey,
             },
           ])}
-          small={true}
         />
         {!!errorText && (
           <Text type="BodySmallError" style={styles.errorText}>

From fa109e507c594baaf0d818252c893177a598f921 Mon Sep 17 00:00:00 2001
From: Daniel Ayoub <danny.a95@gmail.com>
Date: Mon, 17 Sep 2018 13:42:25 -0400
Subject: [PATCH 03/16] finish transform text and changes from testing

---
 shared/common-adapters/hoc-timers.js          |  4 +++
 shared/common-adapters/plain-input.js.flow    |  4 ++-
 shared/common-adapters/plain-input.native.js  | 36 ++++++++++++++-----
 shared/common-adapters/plain-input.stories.js |  1 +
 4 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/shared/common-adapters/hoc-timers.js b/shared/common-adapters/hoc-timers.js
index 4a123e2b916e..417432da7b72 100644
--- a/shared/common-adapters/hoc-timers.js
+++ b/shared/common-adapters/hoc-timers.js
@@ -78,6 +78,10 @@ function HOCTimers<Props: TimerProps>(
     }
   }
 
+  // TODO forward a ref to `WrappedComponent` when react-redux is patched to
+  // work with React.forwardRef.
+  // https://github.com/reduxjs/react-redux/pull/1000
+
   return TimersComponent
 }
 
diff --git a/shared/common-adapters/plain-input.js.flow b/shared/common-adapters/plain-input.js.flow
index c7f4d2edd729..c07623a1e520 100644
--- a/shared/common-adapters/plain-input.js.flow
+++ b/shared/common-adapters/plain-input.js.flow
@@ -94,6 +94,8 @@ declare export default class PlainInput extends React.Component<Props> {
   static defaultProps: DefaultProps;
   blur: () => void;
   focus: () => void;
-  // Supported only on desktop right now
+  // Note that a selection will only appear when the input is focused. Call
+  // `focus()` before this if you want to be sure the user will see the
+  // selection.
   transformText: (fn: (TextInfo) => TextInfo, reflectChange?: boolean) => void;
 }
diff --git a/shared/common-adapters/plain-input.native.js b/shared/common-adapters/plain-input.native.js
index 2fbe037103e4..146e74613ed5 100644
--- a/shared/common-adapters/plain-input.native.js
+++ b/shared/common-adapters/plain-input.native.js
@@ -2,7 +2,6 @@
 import React, {Component} from 'react'
 import {getStyle as getTextStyle} from './text'
 import {NativeTextInput} from './native-wrappers.native'
-import HOCTimers, {type PropsWithTimer} from './hoc-timers'
 import {collapseStyles, globalColors, styleSheetCreate} from '../styles'
 import {isIOS} from '../constants/platform'
 import {checkTextInfo} from './input.shared'
@@ -17,11 +16,9 @@ type State = {
   height: ?number,
 }
 
-type Props = PropsWithTimer<InternalProps>
-
 // A plain text input component. Handles callbacks, text styling, and auto resizing but
 // adds no styling.
-class _PlainInput extends Component<Props, State> {
+class PlainInput extends Component<InternalProps, State> {
   static defaultProps = {
     keyboardType: 'default',
     textType: 'Body',
@@ -35,10 +32,23 @@ class _PlainInput extends Component<Props, State> {
   _lastNativeText: ?string // sourced from onChangeText
   _lastNativeSelection: ?{start: number, end: number}
 
+  // TODO remove this when we can use forwardRef with react-redux. That'd let us
+  // use HOCTimers with this component.
+  // https://github.com/reduxjs/react-redux/pull/1000
+  _timeoutIDs = []
+
   _setInputRef = (ref: ?NativeTextInput) => {
     this._input = ref
   }
 
+  _setTimeout = (fn: () => void, timeoutMS: number) => {
+    this._timeoutIDs.push(setTimeout(fn, timeoutMS))
+  }
+
+  componentWillUnmount() {
+    this._timeoutIDs.forEach(clearTimeout)
+  }
+
   // Needed to support wrapping with e.g. a ClickableBox. See
   // https://facebook.github.io/react-native/docs/direct-manipulation.html .
   setNativeProps = (nativeProps: Object) => {
@@ -54,11 +64,20 @@ class _PlainInput extends Component<Props, State> {
     checkTextInfo(newTextInfo)
     this.setNativeProps({text: newTextInfo.text, selection: newTextInfo.selection})
     this._lastNativeText = newTextInfo.text
-    this._lastNativeSelection = newTextInfo.selection
+    this._setSelection(newTextInfo.selection)
   }
 
-  setSelection = (selection: {end: number, start: number}) => {
-    // this.props.setTimeout()
+  _setSelection = (selection: {start: number, end: number}) => {
+    this._setTimeout(() => {
+      // Validate that this selection makes sense with current value
+      let {start, end} = selection
+      const text = this._lastNativeText || '' // TODO write a good internal getValue fcn for this
+      end = Math.max(0, Math.min(end, text.length))
+      start = Math.min(start, end)
+      const newSelection = {start, end}
+      this.setNativeProps({selection: newSelection})
+      this._lastNativeSelection = selection
+    }, 0)
   }
 
   _onChangeText = (t: string) => {
@@ -67,7 +86,7 @@ class _PlainInput extends Component<Props, State> {
   }
 
   _onSelectionChange = (event: {nativeEvent: {selection: {start: number, end: number}}}) => {
-    let {start: _start, end: _end} = event.nativeEvent.selection
+    const {start: _start, end: _end} = event.nativeEvent.selection
     // Work around Android bug which sometimes puts end before start:
     // https://github.com/facebook/react-native/issues/18579 .
     const start = Math.min(_start, _end)
@@ -196,7 +215,6 @@ class _PlainInput extends Component<Props, State> {
     return <NativeTextInput {...props} />
   }
 }
-const PlainInput = HOCTimers(_PlainInput)
 
 const styles = styleSheetCreate({
   common: {backgroundColor: globalColors.fastBlank, flexGrow: 1, borderWidth: 0},
diff --git a/shared/common-adapters/plain-input.stories.js b/shared/common-adapters/plain-input.stories.js
index 24a5fb52aa78..f071e009a357 100644
--- a/shared/common-adapters/plain-input.stories.js
+++ b/shared/common-adapters/plain-input.stories.js
@@ -34,6 +34,7 @@ class ControlledInputPlayground extends React.Component<{}, ControlledInputState
   _onTestCrossSelection = () => {
     if (this.mutationTarget.current) {
       const input = this.mutationTarget.current
+      input.focus()
       input.transformText(ti => ({text: '5char', selection: {start: 0, end: 0}}))
       input.transformText(ti => ({text: 'a lot more than 5 characters', selection: {start: 3, end: 5}}))
     }

From 7e6e920fb9ce61e9a9330780173f0521d61c23b9 Mon Sep 17 00:00:00 2001
From: Daniel Ayoub <danny.a95@gmail.com>
Date: Mon, 17 Sep 2018 14:19:21 -0400
Subject: [PATCH 04/16] hook up buildingPayment.amount to send for asset input,
 add story, and update storyshots

---
 .../__snapshots__/Storyshots.test.js.snap     | 669 ++++++++++++++++++
 .../send-form/asset-input/container.js        |   1 +
 shared/wallets/send-form/asset-input/index.js |   2 +
 .../send-form/asset-input/index.stories.js    |  13 +-
 shared/wallets/send-form/index.stories.js     |   2 +-
 5 files changed, 685 insertions(+), 2 deletions(-)

diff --git a/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap b/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap
index 29238e0b2341..ab3f936499dd 100644
--- a/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap
+++ b/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap
@@ -63134,6 +63134,427 @@ Array [
 ]
 `;
 
+exports[`Storyshots Common Controlled input playground 1`] = `
+Array [
+  .css-0,
+[data-css-0] {
+  font-size: 13px;
+  line-height: 17px;
+  color: rgba(0, 0, 0, 0.75);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: OpenSans;
+  font-weight: 400;
+}
+
+.css-1,
+[data-css-1] {
+  font-size: 14px;
+  line-height: 18px;
+  color: rgba(0, 0, 0, 0.75);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: OpenSans;
+  font-weight: 600;
+  text-align: center;
+  white-space: pre;
+}
+
+<div
+    style={
+      Object {
+        "height": "100%",
+        "width": "100%",
+      }
+    }
+  >
+    <div
+      style={
+        Object {
+          "alignItems": "stretch",
+          "display": "flex",
+          "flexDirection": "column",
+          "justifyContent": "flex-start",
+          "padding": 16,
+          "width": "100%",
+        }
+      }
+    >
+      <span
+        className="css-0"
+      >
+        Basic controlled inputs
+      </span>
+      <div
+        style={
+          Object {
+            "flexShrink": 0,
+            "height": 16,
+          }
+        }
+      />
+      <style>
+        ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+      </style>
+      <input
+        onBlur={[Function]}
+        onChange={[Function]}
+        onClick={[Function]}
+        onCompositionEnd={[Function]}
+        onCompositionStart={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        placeholder="type=\\"text\\""
+        style={
+          Object {
+            "WebkitFontSmoothing": "antialiased",
+            "borderColor": "rgba(0, 0, 0, 0.10)",
+            "borderStyle": "solid",
+            "borderWidth": 1,
+            "color": "rgba(0, 0, 0, 0.75)",
+            "fontFamily": "OpenSans",
+            "fontSize": 13,
+            "fontWeight": 400,
+            "lineHeight": "unset",
+            "outline": "none",
+            "textRendering": "optimizeLegibility",
+          }
+        }
+        value=""
+      />
+      <div
+        style={
+          Object {
+            "flexShrink": 0,
+            "height": 16,
+          }
+        }
+      />
+      <style>
+        ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+      </style>
+      <input
+        onBlur={[Function]}
+        onChange={[Function]}
+        onClick={[Function]}
+        onCompositionEnd={[Function]}
+        onCompositionStart={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        placeholder="type=\\"password\\""
+        style={
+          Object {
+            "WebkitFontSmoothing": "antialiased",
+            "borderColor": "rgba(0, 0, 0, 0.10)",
+            "borderStyle": "solid",
+            "borderWidth": 1,
+            "color": "rgba(0, 0, 0, 0.75)",
+            "fontFamily": "OpenSans",
+            "fontSize": 13,
+            "fontWeight": 400,
+            "lineHeight": "unset",
+            "outline": "none",
+            "textRendering": "optimizeLegibility",
+          }
+        }
+        type="password"
+        value=""
+      />
+      <div
+        style={
+          Object {
+            "flexShrink": 0,
+            "height": 16,
+          }
+        }
+      />
+      <style>
+        ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+      </style>
+      <input
+        onBlur={[Function]}
+        onChange={[Function]}
+        onClick={[Function]}
+        onCompositionEnd={[Function]}
+        onCompositionStart={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        placeholder="type=\\"number\\" (desktop only)"
+        style={
+          Object {
+            "WebkitFontSmoothing": "antialiased",
+            "borderColor": "rgba(0, 0, 0, 0.10)",
+            "borderStyle": "solid",
+            "borderWidth": 1,
+            "color": "rgba(0, 0, 0, 0.75)",
+            "fontFamily": "OpenSans",
+            "fontSize": 13,
+            "fontWeight": 400,
+            "lineHeight": "unset",
+            "outline": "none",
+            "textRendering": "optimizeLegibility",
+          }
+        }
+        type="number"
+        value=""
+      />
+      <div
+        style={
+          Object {
+            "flexShrink": 0,
+            "height": 16,
+          }
+        }
+      />
+      <div
+        style={
+          Object {
+            "alignItems": "stretch",
+            "display": "flex",
+            "flexDirection": "column",
+            "justifyContent": "flex-start",
+            "width": "100%",
+          }
+        }
+      >
+        <span
+          className="css-0"
+        >
+          Live mutations
+        </span>
+        <div
+          style={
+            Object {
+              "flexShrink": 0,
+              "height": 16,
+            }
+          }
+        />
+        <style>
+          ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+        </style>
+        <input
+          onBlur={[Function]}
+          onChange={[Function]}
+          onClick={[Function]}
+          onCompositionEnd={[Function]}
+          onCompositionStart={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          style={
+            Object {
+              "WebkitFontSmoothing": "antialiased",
+              "borderColor": "rgba(0, 0, 0, 0.10)",
+              "borderStyle": "solid",
+              "borderWidth": 1,
+              "color": "rgba(0, 0, 0, 0.75)",
+              "fontFamily": "OpenSans",
+              "fontSize": 13,
+              "fontWeight": 400,
+              "lineHeight": "unset",
+              "outline": "none",
+              "textRendering": "optimizeLegibility",
+            }
+          }
+          value=""
+        />
+        <div
+          style={
+            Object {
+              "flexShrink": 0,
+              "height": 16,
+            }
+          }
+        />
+        <div
+          style={
+            Object {
+              "alignItems": "center",
+              "display": "flex",
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "minHeight": 64,
+              "width": "100%",
+            }
+          }
+        >
+          <div
+            onClick={[Function]}
+            onMouseDown={[Function]}
+            onMouseUp={[Function]}
+            style={
+              Object {
+                "alignItems": "center",
+                "alignSelf": "center",
+                "backgroundColor": "#e6e6e6",
+                "borderRadius": 50,
+                "cursor": "pointer",
+                "display": "inline-block",
+                "flexDirection": "column",
+                "height": 32,
+                "justifyContent": "center",
+                "lineHeight": "inherit",
+                "minWidth": undefined,
+                "paddingLeft": 24,
+                "paddingRight": 24,
+                "position": "relative",
+                "textAlign": "left",
+                "transform": "none",
+                "transition": "none",
+              }
+            }
+          >
+            <div
+              style={
+                Object {
+                  "alignItems": "center",
+                  "display": "flex",
+                  "flexDirection": "row",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "position": "relative",
+                }
+              }
+            >
+              <span
+                className="css-1"
+              >
+                Set value
+              </span>
+            </div>
+          </div>
+          <div
+            style={
+              Object {
+                "height": 8,
+                "width": 8,
+              }
+            }
+          />
+          <div
+            onClick={[Function]}
+            onMouseDown={[Function]}
+            onMouseUp={[Function]}
+            style={
+              Object {
+                "alignItems": "center",
+                "alignSelf": "center",
+                "backgroundColor": "#e6e6e6",
+                "borderRadius": 50,
+                "cursor": "pointer",
+                "display": "inline-block",
+                "flexDirection": "column",
+                "height": 32,
+                "justifyContent": "center",
+                "lineHeight": "inherit",
+                "minWidth": undefined,
+                "paddingLeft": 24,
+                "paddingRight": 24,
+                "position": "relative",
+                "textAlign": "left",
+                "transform": "none",
+                "transition": "none",
+              }
+            }
+          >
+            <div
+              style={
+                Object {
+                  "alignItems": "center",
+                  "display": "flex",
+                  "flexDirection": "row",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "position": "relative",
+                }
+              }
+            >
+              <span
+                className="css-1"
+              >
+                Set selection
+              </span>
+            </div>
+          </div>
+          <div
+            style={
+              Object {
+                "height": 8,
+                "width": 8,
+              }
+            }
+          />
+          <div
+            onClick={[Function]}
+            onMouseDown={[Function]}
+            onMouseUp={[Function]}
+            style={
+              Object {
+                "alignItems": "center",
+                "alignSelf": "center",
+                "backgroundColor": "#e6e6e6",
+                "borderRadius": 50,
+                "cursor": "pointer",
+                "display": "inline-block",
+                "flexDirection": "column",
+                "height": 32,
+                "justifyContent": "center",
+                "lineHeight": "inherit",
+                "minWidth": undefined,
+                "paddingLeft": 24,
+                "paddingRight": 24,
+                "position": "relative",
+                "textAlign": "left",
+                "transform": "none",
+                "transition": "none",
+              }
+            }
+          >
+            <div
+              style={
+                Object {
+                  "alignItems": "center",
+                  "display": "flex",
+                  "flexDirection": "row",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "position": "relative",
+                }
+              }
+            >
+              <span
+                className="css-1"
+              >
+                Run test
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      id="modal-root"
+    />
+  </div>,
+  <div
+    pointerEvents="box-none"
+    style={
+      Object {
+        "position": "absolute",
+      }
+    }
+  />,
+]
+`;
+
 exports[`Storyshots Common Dropdown 1`] = `
 Array [
   .css-0,
@@ -218529,6 +218950,7 @@ Array [
                 "width": "100%",
               }
             }
+            value=""
           />
           <div
             style={
@@ -218860,6 +219282,7 @@ Array [
                 "width": "100%",
               }
             }
+            value=""
           />
           <div
             style={
@@ -220016,6 +220439,7 @@ Array [
                 "width": "100%",
               }
             }
+            value=""
           />
           <div
             style={
@@ -221511,6 +221935,7 @@ Array [
                 "width": "100%",
               }
             }
+            value=""
           />
           <div
             style={
@@ -223006,6 +223431,7 @@ Array [
                 "width": "100%",
               }
             }
+            value=""
           />
           <div
             style={
@@ -223703,6 +224129,7 @@ Array [
                 "width": "100%",
               }
             }
+            value=""
           />
           <div
             style={
@@ -224928,6 +225355,7 @@ Array [
                 "width": "100%",
               }
             }
+            value=""
           />
           <div
             style={
@@ -226512,6 +226940,7 @@ Array [
                 "width": "100%",
               }
             }
+            value=""
           />
           <div
             style={
@@ -227931,6 +228360,7 @@ Array [
                 "width": "100%",
               }
             }
+            value=""
           />
           <div
             style={
@@ -229602,6 +230032,7 @@ Array [
                 "width": "100%",
               }
             }
+            value=""
           />
           <div
             style={
@@ -234624,6 +235055,7 @@ Array [
                 "width": "100%",
               }
             }
+            value=""
           />
         </div>
         <div
@@ -234958,6 +235390,7 @@ Array [
                 "width": "100%",
               }
             }
+            value=""
           />
         </div>
         <div
@@ -331865,6 +332298,7 @@ input.lighterPlaceholder::placeholder {
                       }
                     }
                     type="number"
+                    value="3.4289000"
                   />
                   <div
                     style={
@@ -332913,6 +333347,7 @@ input.lighterPlaceholder::placeholder {
                       }
                     }
                     type="number"
+                    value="3.4289000"
                   />
                   <div
                     style={
@@ -333498,6 +333933,7 @@ Array [
               }
             }
             type="number"
+            value=""
           />
           <div
             style={
@@ -333596,6 +334032,234 @@ Array [
 ]
 `;
 
+exports[`Storyshots Wallets/SendForm/Asset input Prefilled XLM 1`] = `
+Array [
+  .css-0,
+[data-css-0] {
+  font-size: 24px;
+  line-height: 28px;
+  color: #845cdb;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: OpenSans;
+  font-weight: 800;
+}
+
+.css-1,
+[data-css-1] {
+  font-size: 12px;
+  line-height: 16px;
+  color: #4C8EFF;
+  cursor: pointer;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: OpenSans;
+  font-weight: 400;
+}
+
+.css-2,
+[data-css-2] {
+  font-size: 12px;
+  line-height: 16px;
+  color: rgba(0, 0, 0, 0.40);
+  user-select: text;
+  cursor: text;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: OpenSans;
+  font-weight: 400;
+  margin-left: 1px;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+}
+
+.css-3,
+[data-css-3] {
+  color: rgba(0, 0, 0, 0.40);
+}
+
+.css-3:hover,
+[data-css-3]:hover {
+  color: rgba(0, 0, 0, 0.75);
+}
+
+<div
+    style={
+      Object {
+        "height": "100%",
+        "width": "100%",
+      }
+    }
+  >
+    <div
+      style={
+        Object {
+          "maxWidth": 500,
+          "padding": 20,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "alignItems": "flex-start",
+            "display": "flex",
+            "flexDirection": "column",
+            "justifyContent": "flex-start",
+            "width": "100%",
+          }
+        }
+      >
+        <div
+          style={
+            Object {
+              "alignItems": "center",
+              "alignSelf": "center",
+              "borderColor": "rgba(0, 0, 0, 0.10)",
+              "borderRadius": 4,
+              "borderStyle": "solid",
+              "borderWidth": 0,
+              "display": "flex",
+              "flexDirection": "row",
+              "justifyContent": "flex-start",
+              "margin": 0,
+              "padding": 4,
+              "width": "100%",
+            }
+          }
+        >
+          <style>
+            ::-webkit-input-placeholder { color: rgba(132, 92, 219, 0.4); }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+          </style>
+          <input
+            onBlur={[Function]}
+            onChange={[Function]}
+            onCompositionEnd={[Function]}
+            onCompositionStart={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            placeholder="0.0000000"
+            style={
+              Object {
+                "WebkitFontSmoothing": "antialiased",
+                "borderWidth": 0,
+                "color": "#845cdb",
+                "flex": 1,
+                "fontFamily": "OpenSans",
+                "fontSize": 24,
+                "fontWeight": 800,
+                "lineHeight": "unset",
+                "minWidth": 0,
+                "outline": "none",
+                "position": "relative",
+                "textRendering": "optimizeLegibility",
+                "top": -8,
+                "width": "100%",
+              }
+            }
+            type="number"
+            value="3.4289000"
+          />
+          <div
+            style={
+              Object {
+                "alignItems": "flex-end",
+                "alignSelf": "center",
+                "display": "flex",
+                "flexDirection": "column",
+                "justifyContent": "flex-start",
+              }
+            }
+          >
+            <span
+              className="css-0"
+            >
+              XLM
+            </span>
+            <span
+              className="css-1 hover-underline"
+              onClick={[Function]}
+            >
+              Change
+            </span>
+          </div>
+        </div>
+        <div
+          style={
+            Object {
+              "flexShrink": 0,
+              "height": 4,
+            }
+          }
+        />
+        <div
+          style={
+            Object {
+              "alignItems": "stretch",
+              "display": "flex",
+              "flexDirection": "row",
+              "justifyContent": "flex-start",
+              "width": "100%",
+            }
+          }
+        >
+          <span
+            className="css-2"
+          >
+            1 XLM = $0.2303
+          </span>
+          <div
+            style={
+              Object {
+                "flexShrink": 0,
+                "width": 4,
+              }
+            }
+          />
+          <div>
+            <span
+              className="css-3"
+              onClick={[Function]}
+              style={
+                Object {
+                  "WebkitFontSmoothing": "antialiased",
+                  "cursor": "pointer",
+                  "fontFamily": "kb",
+                  "fontSize": 12,
+                  "fontStyle": "normal",
+                  "fontVariant": "normal",
+                  "fontWeight": "normal",
+                  "lineHeight": 1,
+                  "speak": "none",
+                  "textTransform": "none",
+                  "userSelect": "none",
+                }
+              }
+            >
+              
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      id="modal-root"
+    />
+  </div>,
+  <div
+    pointerEvents="box-none"
+    style={
+      Object {
+        "position": "absolute",
+      }
+    }
+  />,
+]
+`;
+
 exports[`Storyshots Wallets/SendForm/Asset input USD over warning 1`] = `
 Array [
   .css-0,
@@ -333778,6 +334442,7 @@ Array [
               }
             }
             type="number"
+            value=""
           />
           <div
             style={
@@ -334031,6 +334696,7 @@ Array [
               }
             }
             type="number"
+            value=""
           />
           <div
             style={
@@ -334286,6 +334952,7 @@ Array [
               }
             }
             type="number"
+            value=""
           />
           <div
             style={
@@ -334564,6 +335231,7 @@ Array [
               }
             }
             type="number"
+            value=""
           />
           <div
             style={
@@ -334819,6 +335487,7 @@ Array [
               }
             }
             type="number"
+            value=""
           />
           <div
             style={
diff --git a/shared/wallets/send-form/asset-input/container.js b/shared/wallets/send-form/asset-input/container.js
index cf95c2e40cfc..82d078dd95bd 100644
--- a/shared/wallets/send-form/asset-input/container.js
+++ b/shared/wallets/send-form/asset-input/container.js
@@ -8,6 +8,7 @@ const mapStateToProps = (state: TypedState) => ({
   inputPlaceholder: '0.00',
   bottomLabel: '', // TODO
   topLabel: '', // TODO
+  value: state.wallets.buildingPayment.amount,
 })
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
diff --git a/shared/wallets/send-form/asset-input/index.js b/shared/wallets/send-form/asset-input/index.js
index fe34263d6a2a..b31688b3b6bb 100644
--- a/shared/wallets/send-form/asset-input/index.js
+++ b/shared/wallets/send-form/asset-input/index.js
@@ -11,6 +11,7 @@ type Props = {|
   onChangeDisplayUnit: () => void,
   onClickInfo: () => void,
   topLabel: string,
+  value: string,
   warningAsset?: string,
   warningPayee?: string,
 |}
@@ -41,6 +42,7 @@ const AssetInput = (props: Props) => (
       placeholder={props.inputPlaceholder}
       placeholderColor={Styles.globalColors.purple2_40}
       error={!!props.warningAsset}
+      value={props.value}
     />
     {props.warningAsset &&
       !props.warningPayee && (
diff --git a/shared/wallets/send-form/asset-input/index.stories.js b/shared/wallets/send-form/asset-input/index.stories.js
index ba2dcca506b6..aab9a70d9982 100644
--- a/shared/wallets/send-form/asset-input/index.stories.js
+++ b/shared/wallets/send-form/asset-input/index.stories.js
@@ -9,6 +9,7 @@ const common = {
   onChangeDisplayUnit: action('onChangeDisplayUnit'),
   onClickInfo: action('onClickInfo'),
   topLabel: '',
+  value: '',
 }
 
 const props1 = {
@@ -26,13 +27,22 @@ const props2 = {
   inputPlaceholder: '0.0000000',
 }
 
-export const props3 = {
+const props3 = {
   ...common,
   bottomLabel: '1 XLM = $0.2303',
   displayUnit: 'XLM',
   inputPlaceholder: '0.0000000',
 }
 
+// Exported for use in main send form story
+export const props4 = {
+  ...common,
+  bottomLabel: '1 XLM = $0.2303',
+  displayUnit: 'XLM',
+  inputPlaceholder: '0.0000000',
+  value: '3.4289000',
+}
+
 const warning1 = {
   warningAsset: '$13',
 }
@@ -52,6 +62,7 @@ const load = () => {
     .add('XLM worth USD', () => <AssetInput {...props1} />)
     .add('XLM', () => <AssetInput {...props3} />)
     .add('Asset', () => <AssetInput {...props2} />)
+    .add('Prefilled XLM', () => <AssetInput {...props4} />)
     .add('USD over warning', () => <AssetInput {...props1} {...warning1} />)
     .add('XLM over warning', () => <AssetInput {...props2} {...warning2} />)
     .add('asset type warning', () => <AssetInput {...props3} {...warning3} />)
diff --git a/shared/wallets/send-form/index.stories.js b/shared/wallets/send-form/index.stories.js
index 7e1863871492..447fc340488a 100644
--- a/shared/wallets/send-form/index.stories.js
+++ b/shared/wallets/send-form/index.stories.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react'
 import * as Sb from '../../stories/storybook'
-import assetInput, {props3 as assetInputProps} from './asset-input/index.stories'
+import assetInput, {props4 as assetInputProps} from './asset-input/index.stories'
 import chooseAsset from './choose-asset/index.stories'
 import footers from './footer/index.stories'
 import noteAndMemo from './note-and-memo/index.stories'

From b0a334473b65c1aa47b5ac479ab261edb6dee0b1 Mon Sep 17 00:00:00 2001
From: Daniel Ayoub <danny.a95@gmail.com>
Date: Mon, 17 Sep 2018 17:55:47 -0400
Subject: [PATCH 05/16] change api a bit

---
 shared/common-adapters/plain-input.desktop.js | 17 +++++++++-
 shared/common-adapters/plain-input.js.flow    | 19 +++++++++---
 shared/common-adapters/plain-input.native.js  | 21 ++++++++++---
 shared/common-adapters/plain-input.stories.js | 31 ++++++++++++++-----
 4 files changed, 70 insertions(+), 18 deletions(-)

diff --git a/shared/common-adapters/plain-input.desktop.js b/shared/common-adapters/plain-input.desktop.js
index d3bbdbcb6e2a..9a9cdcbfdb5f 100644
--- a/shared/common-adapters/plain-input.desktop.js
+++ b/shared/common-adapters/plain-input.desktop.js
@@ -3,9 +3,10 @@ import * as React from 'react'
 import {getStyle as getTextStyle} from './text.desktop'
 import {collapseStyles, globalColors, styleSheetCreate, platformStyles} from '../styles'
 import {pick} from 'lodash-es'
+import logger from '../logger'
 
 import type {_StylesDesktop} from '../styles/css'
-import type {InternalProps, TextInfo} from './plain-input'
+import type {InternalProps, TextInfo, Selection} from './plain-input'
 import {checkTextInfo} from './input.shared'
 
 // A plain text input component. Handles callbacks, text styling, and auto resizing but
@@ -74,6 +75,12 @@ class PlainInput extends React.PureComponent<InternalProps> {
   }
 
   transformText = (fn: TextInfo => TextInfo, reflectChange?: boolean) => {
+    const controlled = !!this.props.value
+    if (controlled) {
+      const errMsg = 'Attempted to use transformText on controlled input component!'
+      logger.error(errMsg)
+      throw new Error(errMsg)
+    }
     const n = this._input
     if (n) {
       const textInfo: TextInfo = {
@@ -97,6 +104,14 @@ class PlainInput extends React.PureComponent<InternalProps> {
     }
   }
 
+  setSelection = (s: Selection) => {
+    const n = this._input
+    if (n) {
+      n.selectionStart = s.start
+      n.selectionEnd = s.end
+    }
+  }
+
   _onCompositionStart = () => {
     this._isComposingIME = true
   }
diff --git a/shared/common-adapters/plain-input.js.flow b/shared/common-adapters/plain-input.js.flow
index c07623a1e520..ae1a201bd9b1 100644
--- a/shared/common-adapters/plain-input.js.flow
+++ b/shared/common-adapters/plain-input.js.flow
@@ -38,7 +38,7 @@ export type Props = {|
   style?: StylesCrossPlatform,
   textType?: TextType,
   type?: 'password' | 'text' | 'number',
-  value?: string, // Makes this a controlled input when passed
+  value?: string, // Makes this a controlled input when passed. Also disables mutating value via `transformText`, see note at component API
 
   /* Platform discrepancies */
   // Maps to onSubmitEditing on native
@@ -94,8 +94,19 @@ declare export default class PlainInput extends React.Component<Props> {
   static defaultProps: DefaultProps;
   blur: () => void;
   focus: () => void;
-  // Note that a selection will only appear when the input is focused. Call
-  // `focus()` before this if you want to be sure the user will see the
-  // selection.
+  /**
+   *  This can only be used when the input is controlled. Use `transformText` if
+   *  you want to do this on an uncontrolled input. Make sure the Selection is
+   *  valid against the `value` prop. Avoid changing `value` and calling this at
+   *  the same time if you don't want bad things to happen. Note that a
+   *  selection will only appear when the input is focused. Call `focus()`
+   *  before this if you want to be sure the user will see the selection.
+   **/
+  setSelection: Selection => void;
+  /**
+   *  This can only be used when the input is uncontrolled. Like `setSelection`,
+   *  if you want to be sure the user will see a selection use `focus()` before
+   *  calling this.
+   **/
   transformText: (fn: (TextInfo) => TextInfo, reflectChange?: boolean) => void;
 }
diff --git a/shared/common-adapters/plain-input.native.js b/shared/common-adapters/plain-input.native.js
index 146e74613ed5..a0efe2832f55 100644
--- a/shared/common-adapters/plain-input.native.js
+++ b/shared/common-adapters/plain-input.native.js
@@ -6,8 +6,9 @@ import {collapseStyles, globalColors, styleSheetCreate} from '../styles'
 import {isIOS} from '../constants/platform'
 import {checkTextInfo} from './input.shared'
 import {pick} from 'lodash-es'
+import logger from '../logger'
 
-import type {InternalProps, TextInfo} from './plain-input'
+import type {InternalProps, TextInfo, Selection} from './plain-input'
 
 type ContentSizeChangeEvent = {nativeEvent: {contentSize: {width: number, height: number}}}
 
@@ -30,7 +31,7 @@ class PlainInput extends Component<InternalProps, State> {
   }
   _input: ?NativeTextInput
   _lastNativeText: ?string // sourced from onChangeText
-  _lastNativeSelection: ?{start: number, end: number}
+  _lastNativeSelection: ?Selection
 
   // TODO remove this when we can use forwardRef with react-redux. That'd let us
   // use HOCTimers with this component.
@@ -56,18 +57,28 @@ class PlainInput extends Component<InternalProps, State> {
   }
 
   transformText = (fn: TextInfo => TextInfo) => {
+    const controlled = !!this.props.value
+    if (controlled) {
+      const errMsg = 'Attempted to use transformText on controlled input component!'
+      logger.error(errMsg)
+      throw new Error(errMsg)
+    }
     const currentTextInfo = {
       text: this._lastNativeText || '',
       selection: this._lastNativeSelection || {start: 0, end: 0},
     }
     const newTextInfo = fn(currentTextInfo)
     checkTextInfo(newTextInfo)
-    this.setNativeProps({text: newTextInfo.text, selection: newTextInfo.selection})
+    this.setNativeProps({text: newTextInfo.text})
     this._lastNativeText = newTextInfo.text
     this._setSelection(newTextInfo.selection)
   }
 
-  _setSelection = (selection: {start: number, end: number}) => {
+  setSelection = (s: Selection) => {
+    this._setSelection(s)
+  }
+
+  _setSelection = (selection: Selection) => {
     this._setTimeout(() => {
       // Validate that this selection makes sense with current value
       let {start, end} = selection
@@ -85,7 +96,7 @@ class PlainInput extends Component<InternalProps, State> {
     this.props.onChangeText && this.props.onChangeText(t)
   }
 
-  _onSelectionChange = (event: {nativeEvent: {selection: {start: number, end: number}}}) => {
+  _onSelectionChange = (event: {nativeEvent: {selection: Selection}}) => {
     const {start: _start, end: _end} = event.nativeEvent.selection
     // Work around Android bug which sometimes puts end before start:
     // https://github.com/facebook/react-native/issues/18579 .
diff --git a/shared/common-adapters/plain-input.stories.js b/shared/common-adapters/plain-input.stories.js
index f071e009a357..da0d5e2f6fc7 100644
--- a/shared/common-adapters/plain-input.stories.js
+++ b/shared/common-adapters/plain-input.stories.js
@@ -24,19 +24,34 @@ class ControlledInputPlayground extends React.Component<{}, ControlledInputState
   state = {}
   mutationTarget = React.createRef()
   _onChangeText = (valueKey: string) => (t: string) => this.setState({[valueKey]: t})
-  _onChangeSelection = () => {
+
+  _onChangeChangingValue = (t: string) => this.setState({changingValue: t})
+  _testChangingSelection = () => {
     if (this.mutationTarget.current) {
       const input = this.mutationTarget.current
-      input.transformText(ti => ({text: ti.text, selection: {start: 2, end: 5}}))
       input.focus()
+      input.setSelection({start: 2, end: 5})
     }
   }
-  _onTestCrossSelection = () => {
+  _testCrossSelection = () => {
     if (this.mutationTarget.current) {
       const input = this.mutationTarget.current
       input.focus()
-      input.transformText(ti => ({text: '5char', selection: {start: 0, end: 0}}))
-      input.transformText(ti => ({text: 'a lot more than 5 characters', selection: {start: 3, end: 5}}))
+      this.setState({changingValue: '5char'}, () => {
+        this.forceUpdate(() => {
+          if (this.mutationTarget.current) {
+            const input = this.mutationTarget.current
+            input.setSelection({start: 0, end: 0})
+            this.setState({changingValue: 'a lot more than 5 characters'})
+            this.forceUpdate(() => {
+              if (this.mutationTarget.current) {
+                const input = this.mutationTarget.current
+                input.setSelection({start: 3, end: 5})
+              }
+            })
+          }
+        })
+      })
     }
   }
   render() {
@@ -69,7 +84,7 @@ class ControlledInputPlayground extends React.Component<{}, ControlledInputState
             {...commonProps}
             ref={this.mutationTarget}
             value={this.state.changingValue || ''}
-            onChangeText={this._onChangeText('changingValue')}
+            onChangeText={this._onChangeChangingValue}
           />
           <ButtonBar>
             <Button
@@ -77,8 +92,8 @@ class ControlledInputPlayground extends React.Component<{}, ControlledInputState
               label="Set value"
               onClick={() => this.setState({changingValue: 'reset value!'})}
             />
-            <Button type="Secondary" label="Set selection" onClick={this._onChangeSelection} />
-            <Button type="Secondary" label="Run test" onClick={this._onTestCrossSelection} />
+            <Button type="Secondary" label="Set selection" onClick={this._testChangingSelection} />
+            <Button type="Secondary" label="Run test" onClick={this._testCrossSelection} />
           </ButtonBar>
         </Box2>
       </Box2>

From 93471daa84c923a89f06472b025a4e7323054d15 Mon Sep 17 00:00:00 2001
From: Daniel Ayoub <danny.a95@gmail.com>
Date: Mon, 17 Sep 2018 18:03:32 -0400
Subject: [PATCH 06/16] add errors for illegal method use

---
 shared/common-adapters/plain-input.desktop.js | 10 +++++++++-
 shared/common-adapters/plain-input.native.js  | 10 +++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/shared/common-adapters/plain-input.desktop.js b/shared/common-adapters/plain-input.desktop.js
index 9a9cdcbfdb5f..7f3ed3e0ba55 100644
--- a/shared/common-adapters/plain-input.desktop.js
+++ b/shared/common-adapters/plain-input.desktop.js
@@ -77,7 +77,8 @@ class PlainInput extends React.PureComponent<InternalProps> {
   transformText = (fn: TextInfo => TextInfo, reflectChange?: boolean) => {
     const controlled = !!this.props.value
     if (controlled) {
-      const errMsg = 'Attempted to use transformText on controlled input component!'
+      const errMsg =
+        'Attempted to use transformText on controlled input component. Use props.value and setSelection instead.'
       logger.error(errMsg)
       throw new Error(errMsg)
     }
@@ -105,6 +106,13 @@ class PlainInput extends React.PureComponent<InternalProps> {
   }
 
   setSelection = (s: Selection) => {
+    const controlled = !!this.props.value
+    if (!controlled) {
+      const errMsg =
+        'Attempted to use setSelection on uncontrolled input component. Use transformText instead'
+      logger.error(errMsg)
+      throw new Error(errMsg)
+    }
     const n = this._input
     if (n) {
       n.selectionStart = s.start
diff --git a/shared/common-adapters/plain-input.native.js b/shared/common-adapters/plain-input.native.js
index a0efe2832f55..3366fc96df5c 100644
--- a/shared/common-adapters/plain-input.native.js
+++ b/shared/common-adapters/plain-input.native.js
@@ -59,7 +59,8 @@ class PlainInput extends Component<InternalProps, State> {
   transformText = (fn: TextInfo => TextInfo) => {
     const controlled = !!this.props.value
     if (controlled) {
-      const errMsg = 'Attempted to use transformText on controlled input component!'
+      const errMsg =
+        'Attempted to use transformText on controlled input component. Use props.value and setSelection instead.'
       logger.error(errMsg)
       throw new Error(errMsg)
     }
@@ -75,6 +76,13 @@ class PlainInput extends Component<InternalProps, State> {
   }
 
   setSelection = (s: Selection) => {
+    const controlled = !!this.props.value
+    if (!controlled) {
+      const errMsg =
+        'Attempted to use setSelection on uncontrolled input component. Use transformText instead'
+      logger.error(errMsg)
+      throw new Error(errMsg)
+    }
     this._setSelection(s)
   }
 

From f5ce4029d3dd0b1259a1ceea58d600c0d43a4ea0 Mon Sep 17 00:00:00 2001
From: Daniel Ayoub <danny.a95@gmail.com>
Date: Mon, 17 Sep 2018 18:13:51 -0400
Subject: [PATCH 07/16] forward ref from NewInput to PlainInput

---
 shared/common-adapters/new-input.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/shared/common-adapters/new-input.js b/shared/common-adapters/new-input.js
index 5ba3f040a0c5..553633866dfe 100644
--- a/shared/common-adapters/new-input.js
+++ b/shared/common-adapters/new-input.js
@@ -21,6 +21,7 @@ export type _Props = {
   containerStyle?: StylesCrossPlatform,
   decoration?: React.Node,
   error?: boolean,
+  forwardedRef: React.Ref<typeof PlainInput>,
   hideBorder?: boolean,
   icon?: IconType,
 }
@@ -36,7 +37,7 @@ type State = {
   focused: boolean,
 }
 
-class NewInput extends React.Component<DefaultProps & Props, State> {
+class ReflessNewInput extends React.Component<DefaultProps & Props, State> {
   static defaultProps = {
     flexable: true,
     keyboardType: 'default',
@@ -79,12 +80,19 @@ class NewInput extends React.Component<DefaultProps & Props, State> {
             />
           </Box>
         )}
-        <PlainInput {...plainInputCastProps(this.props)} onFocus={this._onFocus} onBlur={this._onBlur} />
+        <PlainInput
+          {...plainInputCastProps(this.props)}
+          onFocus={this._onFocus}
+          onBlur={this._onBlur}
+          ref={this.props.forwardedRef}
+        />
         {this.props.decoration}
       </Box2>
     )
   }
 }
+// $FlowIssue doesn't know about forwardRef
+const NewInput = React.forwardRef((props, ref) => <ReflessNewInput {...props} forwardedRef={ref} />)
 
 const styles = styleSheetCreate({
   container: platformStyles({

From 3f33463303a3eed7ea6c49a4f9dc91657a6434c9 Mon Sep 17 00:00:00 2001
From: Daniel Ayoub <danny.a95@gmail.com>
Date: Mon, 17 Sep 2018 18:15:38 -0400
Subject: [PATCH 08/16] add link to flow issue with forwardRef

---
 shared/common-adapters/new-input.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/shared/common-adapters/new-input.js b/shared/common-adapters/new-input.js
index 553633866dfe..9665e19aead6 100644
--- a/shared/common-adapters/new-input.js
+++ b/shared/common-adapters/new-input.js
@@ -91,7 +91,7 @@ class ReflessNewInput extends React.Component<DefaultProps & Props, State> {
     )
   }
 }
-// $FlowIssue doesn't know about forwardRef
+// $FlowIssue doesn't know about forwardRef (https://github.com/facebook/flow/issues/6103)
 const NewInput = React.forwardRef((props, ref) => <ReflessNewInput {...props} forwardedRef={ref} />)
 
 const styles = styleSheetCreate({

From bb6a7202a074229420fbb39d0a5ec4bdc86749f8 Mon Sep 17 00:00:00 2001
From: Daniel Ayoub <danny.a95@gmail.com>
Date: Tue, 18 Sep 2018 10:11:45 -0400
Subject: [PATCH 09/16] remove castProps and use destructure in NewInput
 instead

---
 shared/common-adapters/new-input.js           | 9 +++------
 shared/common-adapters/plain-input.desktop.js | 1 -
 shared/common-adapters/plain-input.js.flow    | 3 ---
 shared/common-adapters/plain-input.native.js  | 1 -
 shared/common-adapters/plain-input.shared.js  | 4 ----
 5 files changed, 3 insertions(+), 15 deletions(-)
 delete mode 100644 shared/common-adapters/plain-input.shared.js

diff --git a/shared/common-adapters/new-input.js b/shared/common-adapters/new-input.js
index 9665e19aead6..418ba6a38f76 100644
--- a/shared/common-adapters/new-input.js
+++ b/shared/common-adapters/new-input.js
@@ -1,10 +1,6 @@
 // @flow
 import * as React from 'react'
-import PlainInput, {
-  castProps as plainInputCastProps,
-  type PropsWithInput,
-  type KeyboardType,
-} from './plain-input'
+import PlainInput, {type PropsWithInput, type KeyboardType} from './plain-input'
 import Box, {Box2} from './box'
 import Icon, {type IconType, castPlatformStyles} from './icon'
 import {getStyle as getTextStyle, type TextType} from './text'
@@ -59,6 +55,7 @@ class ReflessNewInput extends React.Component<DefaultProps & Props, State> {
 
   render() {
     const textStyle = getTextStyle(this.props.textType)
+    const {containerStyle, decoration, error, forwardedRef, hideBorder, icon, ...plainInputProps} = this.props
     return (
       <Box2
         direction="horizontal"
@@ -81,7 +78,7 @@ class ReflessNewInput extends React.Component<DefaultProps & Props, State> {
           </Box>
         )}
         <PlainInput
-          {...plainInputCastProps(this.props)}
+          {...plainInputProps}
           onFocus={this._onFocus}
           onBlur={this._onBlur}
           ref={this.props.forwardedRef}
diff --git a/shared/common-adapters/plain-input.desktop.js b/shared/common-adapters/plain-input.desktop.js
index 7f3ed3e0ba55..3b14117a8aa6 100644
--- a/shared/common-adapters/plain-input.desktop.js
+++ b/shared/common-adapters/plain-input.desktop.js
@@ -254,4 +254,3 @@ const styles = styleSheetCreate({
 })
 
 export default PlainInput
-export {castProps} from './plain-input.shared'
diff --git a/shared/common-adapters/plain-input.js.flow b/shared/common-adapters/plain-input.js.flow
index ae1a201bd9b1..a6cde6272b22 100644
--- a/shared/common-adapters/plain-input.js.flow
+++ b/shared/common-adapters/plain-input.js.flow
@@ -64,9 +64,6 @@ export type PropsWithInput<P> = {|
   ...$Exact<P>,
 |}
 
-// Use this in components that use PropsWithInput to pass `this.props` through to this component
-declare export function castProps<T>(p: PropsWithInput<T>): Props
-
 /**
  * Flow does the work of making the default props nullable when instantiating
  * this component, but doesn't go as far as letting the props be
diff --git a/shared/common-adapters/plain-input.native.js b/shared/common-adapters/plain-input.native.js
index 3366fc96df5c..e592250bebcd 100644
--- a/shared/common-adapters/plain-input.native.js
+++ b/shared/common-adapters/plain-input.native.js
@@ -247,4 +247,3 @@ const styles = styleSheetCreate({
 })
 
 export default PlainInput
-export {castProps} from './plain-input.shared'
diff --git a/shared/common-adapters/plain-input.shared.js b/shared/common-adapters/plain-input.shared.js
deleted file mode 100644
index bffce8b82b33..000000000000
--- a/shared/common-adapters/plain-input.shared.js
+++ /dev/null
@@ -1,4 +0,0 @@
-// @flow
-export function castProps(p: any) {
-  return p
-}

From 309eaa313aaf1e73e900989b15c2412d3dfb3ab2 Mon Sep 17 00:00:00 2001
From: Daniel Ayoub <danny.a95@gmail.com>
Date: Tue, 18 Sep 2018 10:16:29 -0400
Subject: [PATCH 10/16] storyshots

---
 .../__snapshots__/Storyshots.test.js.snap     | 592 +++++++++---------
 1 file changed, 299 insertions(+), 293 deletions(-)

diff --git a/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap b/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap
index ab3f936499dd..7d051c9e3f6a 100644
--- a/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap
+++ b/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap
@@ -847,7 +847,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -1119,7 +1119,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -11003,7 +11003,7 @@ Array [
                   Object {
                     "backgroundImage": "url([object Object])",
                     "backgroundPosition": "27.45098039215686% 96.07843137254902%",
-                    "backgroundSize": "5200% 5200%",
+                    "backgroundSize": "5200%",
                     "display": "inline-block",
                     "height": 16,
                     "width": 16,
@@ -11176,7 +11176,7 @@ Array [
                   Object {
                     "backgroundImage": "url([object Object])",
                     "backgroundPosition": "74.50980392156862% 45.09803921568627%",
-                    "backgroundSize": "5200% 5200%",
+                    "backgroundSize": "5200%",
                     "display": "inline-block",
                     "height": 16,
                     "width": 16,
@@ -14798,7 +14798,7 @@ Array [
                                       Object {
                                         "backgroundImage": "url([object Object])",
                                         "backgroundPosition": "43.13725490196078% 25.49019607843137%",
-                                        "backgroundSize": "5200% 5200%",
+                                        "backgroundSize": "5200%",
                                         "display": "inline-block",
                                         "height": 16,
                                         "width": 16,
@@ -14919,7 +14919,7 @@ Array [
                                       Object {
                                         "backgroundImage": "url([object Object])",
                                         "backgroundPosition": "7.8431372549019605% 49.01960784313725%",
-                                        "backgroundSize": "5200% 5200%",
+                                        "backgroundSize": "5200%",
                                         "display": "inline-block",
                                         "height": 16,
                                         "width": 16,
@@ -15040,7 +15040,7 @@ Array [
                                       Object {
                                         "backgroundImage": "url([object Object])",
                                         "backgroundPosition": "50.98039215686274% 43.13725490196078%",
-                                        "backgroundSize": "5200% 5200%",
+                                        "backgroundSize": "5200%",
                                         "display": "inline-block",
                                         "height": 16,
                                         "width": 16,
@@ -16744,7 +16744,7 @@ Array [
                                       Object {
                                         "backgroundImage": "url([object Object])",
                                         "backgroundPosition": "96.07843137254902% 100%",
-                                        "backgroundSize": "5200% 5200%",
+                                        "backgroundSize": "5200%",
                                         "display": "inline-block",
                                         "height": 16,
                                         "width": 16,
@@ -17918,7 +17918,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 47.05882352941176%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -17980,7 +17980,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 49.01960784313725%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18042,7 +18042,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 50.98039215686274%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18104,7 +18104,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "74.50980392156862% 50.98039215686274%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18166,7 +18166,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 52.94117647058823%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18228,7 +18228,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 54.90196078431372%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18290,7 +18290,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 56.86274509803921%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18364,7 +18364,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 58.8235294117647%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18426,7 +18426,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 64.70588235294117%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18488,7 +18488,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 66.66666666666666%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18550,7 +18550,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 68.62745098039215%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18612,7 +18612,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 74.50980392156862%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18674,7 +18674,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 72.54901960784314%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18736,7 +18736,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 94.11764705882352%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18810,7 +18810,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 92.15686274509804%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18872,7 +18872,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 96.07843137254902%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18934,7 +18934,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 98.0392156862745%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18996,7 +18996,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "92.15686274509804% 80.3921568627451%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19058,7 +19058,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 74.50980392156862%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19120,7 +19120,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "72.54901960784314% 60.78431372549019%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19182,7 +19182,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "74.50980392156862% 96.07843137254902%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19256,7 +19256,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "72.54901960784314% 54.90196078431372%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19318,7 +19318,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "74.50980392156862% 94.11764705882352%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19380,7 +19380,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 78.4313725490196%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19442,7 +19442,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 80.3921568627451%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19504,7 +19504,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 50.98039215686274%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19566,7 +19566,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 78.4313725490196%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19628,7 +19628,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 76.47058823529412%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19702,7 +19702,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 13.72549019607843%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19764,7 +19764,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 17.64705882352941%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19826,7 +19826,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 35.29411764705882%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19888,7 +19888,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "72.54901960784314% 47.05882352941176%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19950,7 +19950,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 37.25490196078431%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20012,7 +20012,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 27.45098039215686%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20074,7 +20074,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 29.41176470588235%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20148,7 +20148,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 47.05882352941176%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20210,7 +20210,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 70.58823529411764%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20272,7 +20272,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 100%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20334,7 +20334,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 0%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20396,7 +20396,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 1.9607843137254901%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20458,7 +20458,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "74.50980392156862% 52.94117647058823%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20520,7 +20520,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 82.35294117647058%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20594,7 +20594,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 84.31372549019608%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20656,7 +20656,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 86.27450980392156%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20718,7 +20718,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 88.23529411764706%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20780,7 +20780,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 76.47058823529412%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20842,7 +20842,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "72.54901960784314% 49.01960784313725%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20904,7 +20904,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 43.13725490196078%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20966,7 +20966,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "92.15686274509804% 78.4313725490196%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -21040,7 +21040,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 72.54901960784314%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -21102,7 +21102,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 90.19607843137254%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -21164,7 +21164,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 3.9215686274509802%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -21226,7 +21226,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 5.88235294117647%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -21288,7 +21288,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 15.686274509803921%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -21350,7 +21350,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 11.76470588235294%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -21412,7 +21412,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 33.33333333333333%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -21486,7 +21486,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 19.6078431372549%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -21548,7 +21548,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 21.56862745098039%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -21610,7 +21610,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 23.52941176470588%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -21672,7 +21672,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 25.49019607843137%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -21734,7 +21734,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "76.47058823529412% 5.88235294117647%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -21796,7 +21796,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 31.372549019607842%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -21858,7 +21858,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 39.2156862745098%",
-                          "backgroundSize": "5200% 5200%",
+                          "backgroundSize": "5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -22024,7 +22024,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 47.05882352941176%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22086,7 +22086,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 49.01960784313725%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22148,7 +22148,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 50.98039215686274%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22210,7 +22210,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "74.50980392156862% 50.98039215686274%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22272,7 +22272,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 52.94117647058823%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22334,7 +22334,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 54.90196078431372%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22396,7 +22396,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 56.86274509803921%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22470,7 +22470,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 58.8235294117647%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22532,7 +22532,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 64.70588235294117%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22594,7 +22594,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 66.66666666666666%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22656,7 +22656,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 68.62745098039215%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22718,7 +22718,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 74.50980392156862%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22780,7 +22780,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 72.54901960784314%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22842,7 +22842,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 94.11764705882352%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22916,7 +22916,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 92.15686274509804%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22978,7 +22978,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 96.07843137254902%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23040,7 +23040,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 98.0392156862745%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23102,7 +23102,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "92.15686274509804% 80.3921568627451%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23164,7 +23164,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 74.50980392156862%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23226,7 +23226,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "72.54901960784314% 60.78431372549019%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23288,7 +23288,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "74.50980392156862% 96.07843137254902%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23362,7 +23362,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "72.54901960784314% 54.90196078431372%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23424,7 +23424,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "74.50980392156862% 94.11764705882352%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23486,7 +23486,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 78.4313725490196%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23548,7 +23548,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 80.3921568627451%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23610,7 +23610,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 50.98039215686274%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23672,7 +23672,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 78.4313725490196%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23734,7 +23734,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 76.47058823529412%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23808,7 +23808,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 13.72549019607843%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23870,7 +23870,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 17.64705882352941%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23932,7 +23932,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 35.29411764705882%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23994,7 +23994,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "72.54901960784314% 47.05882352941176%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24056,7 +24056,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 37.25490196078431%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24118,7 +24118,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 27.45098039215686%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24180,7 +24180,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 29.41176470588235%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24254,7 +24254,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 47.05882352941176%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24316,7 +24316,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 70.58823529411764%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24378,7 +24378,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 100%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24440,7 +24440,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 0%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24502,7 +24502,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 1.9607843137254901%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24564,7 +24564,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "74.50980392156862% 52.94117647058823%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24626,7 +24626,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 82.35294117647058%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24700,7 +24700,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 84.31372549019608%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24762,7 +24762,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 86.27450980392156%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24824,7 +24824,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 88.23529411764706%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24886,7 +24886,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 76.47058823529412%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24948,7 +24948,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "72.54901960784314% 49.01960784313725%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25010,7 +25010,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 43.13725490196078%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25072,7 +25072,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "92.15686274509804% 78.4313725490196%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25146,7 +25146,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 72.54901960784314%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25208,7 +25208,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 90.19607843137254%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25270,7 +25270,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 3.9215686274509802%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25332,7 +25332,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 5.88235294117647%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25394,7 +25394,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 15.686274509803921%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25456,7 +25456,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 11.76470588235294%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25518,7 +25518,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 33.33333333333333%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25592,7 +25592,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 19.6078431372549%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25654,7 +25654,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 21.56862745098039%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25716,7 +25716,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 23.52941176470588%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25778,7 +25778,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 25.49019607843137%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25840,7 +25840,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "76.47058823529412% 5.88235294117647%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25902,7 +25902,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 31.372549019607842%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25964,7 +25964,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 39.2156862745098%",
-                        "backgroundSize": "5200% 5200%",
+                        "backgroundSize": "5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -26078,7 +26078,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "96.07843137254902% 96.07843137254902%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -26140,7 +26140,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "23.52941176470588% 25.49019607843137%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -26202,7 +26202,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "90.19607843137254% 86.27450980392156%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -26264,7 +26264,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "50.98039215686274% 58.8235294117647%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -26326,7 +26326,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "11.76470588235294% 11.76470588235294%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -26388,7 +26388,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "96.07843137254902% 33.33333333333333%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -26450,7 +26450,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "11.76470588235294% 13.72549019607843%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -26512,7 +26512,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "29.41176470588235% 45.09803921568627%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -26574,7 +26574,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "11.76470588235294% 78.4313725490196%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -26636,7 +26636,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "49.01960784313725% 64.70588235294117%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -26698,7 +26698,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "13.72549019607843% 0%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -26760,7 +26760,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 98.0392156862745%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -26822,7 +26822,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "25.49019607843137% 84.31372549019608%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -26884,7 +26884,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "25.49019607843137% 86.27450980392156%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -26946,7 +26946,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "25.49019607843137% 82.35294117647058%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27008,7 +27008,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "25.49019607843137% 88.23529411764706%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27070,7 +27070,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "50.98039215686274% 62.745098039215684%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27132,7 +27132,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "96.07843137254902% 98.0392156862745%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27194,7 +27194,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "13.72549019607843% 15.686274509803921%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27256,7 +27256,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "98.0392156862745% 11.76470588235294%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27318,7 +27318,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "76.47058823529412% 5.88235294117647%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27380,7 +27380,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "82.35294117647058% 56.86274509803921%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27442,7 +27442,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "58.8235294117647% 80.3921568627451%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27504,7 +27504,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "23.52941176470588% 1.9607843137254901%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27566,7 +27566,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 19.6078431372549%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27628,7 +27628,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "11.76470588235294% 9.80392156862745%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27690,7 +27690,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "82.35294117647058% 11.76470588235294%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27752,7 +27752,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "52.94117647058823% 54.90196078431372%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27814,7 +27814,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "90.19607843137254% 19.6078431372549%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27876,7 +27876,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "52.94117647058823% 27.45098039215686%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27938,7 +27938,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "25.49019607843137% 3.9215686274509802%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28000,7 +28000,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "47.05882352941176% 78.4313725490196%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28062,7 +28062,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "13.72549019607843% 19.6078431372549%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28124,7 +28124,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "52.94117647058823% 98.0392156862745%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28186,7 +28186,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "62.745098039215684% 84.31372549019608%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28248,7 +28248,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "50.98039215686274% 50.98039215686274%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28310,7 +28310,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "62.745098039215684% 86.27450980392156%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28372,7 +28372,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "98.0392156862745% 13.72549019607843%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28434,7 +28434,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "25.49019607843137% 15.686274509803921%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28496,7 +28496,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "49.01960784313725% 60.78431372549019%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28558,7 +28558,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "70.58823529411764% 60.78431372549019%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28620,7 +28620,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "49.01960784313725% 9.80392156862745%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28682,7 +28682,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "49.01960784313725% 7.8431372549019605%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28744,7 +28744,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "49.01960784313725% 1.9607843137254901%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28806,7 +28806,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "50.98039215686274% 39.2156862745098%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28868,7 +28868,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "49.01960784313725% 56.86274509803921%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28930,7 +28930,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "13.72549019607843% 1.9607843137254901%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28992,7 +28992,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "52.94117647058823% 43.13725490196078%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -29054,7 +29054,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "96.07843137254902% 86.27450980392156%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -29116,7 +29116,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "47.05882352941176% 96.07843137254902%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -29227,7 +29227,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "15.686274509803921% 49.01960784313725%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -29289,7 +29289,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "15.686274509803921% 50.98039215686274%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -29351,7 +29351,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "98.0392156862745% 0%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -29462,7 +29462,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "3.9215686274509802% 100%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -29524,7 +29524,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "23.52941176470588% 35.29411764705882%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -29586,7 +29586,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "23.52941176470588% 33.33333333333333%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -29648,7 +29648,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "23.52941176470588% 31.372549019607842%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -29710,7 +29710,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "9.80392156862745% 54.90196078431372%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -29772,7 +29772,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "9.80392156862745% 52.94117647058823%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -29834,7 +29834,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 60.78431372549019%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -29896,7 +29896,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 62.745098039215684%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -29958,7 +29958,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 64.70588235294117%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30020,7 +30020,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 66.66666666666666%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30082,7 +30082,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 68.62745098039215%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30144,7 +30144,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "15.686274509803921% 66.66666666666666%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30206,7 +30206,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 70.58823529411764%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30268,7 +30268,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 72.54901960784314%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30330,7 +30330,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 74.50980392156862%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30392,7 +30392,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 76.47058823529412%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30454,7 +30454,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 78.4313725490196%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30516,7 +30516,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 80.3921568627451%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30578,7 +30578,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 82.35294117647058%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30640,7 +30640,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 84.31372549019608%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30702,7 +30702,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 86.27450980392156%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30764,7 +30764,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 88.23529411764706%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30826,7 +30826,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 90.19607843137254%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30888,7 +30888,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 92.15686274509804%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30950,7 +30950,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 94.11764705882352%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31012,7 +31012,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 96.07843137254902%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31074,7 +31074,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 98.0392156862745%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31136,7 +31136,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 100%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31198,7 +31198,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 0%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31260,7 +31260,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 1.9607843137254901%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31322,7 +31322,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 3.9215686274509802%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31384,7 +31384,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 5.88235294117647%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31446,7 +31446,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 7.8431372549019605%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31508,7 +31508,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 9.80392156862745%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31570,7 +31570,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 11.76470588235294%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31632,7 +31632,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 13.72549019607843%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31694,7 +31694,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 15.686274509803921%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31756,7 +31756,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 17.64705882352941%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31818,7 +31818,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 19.6078431372549%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31880,7 +31880,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 21.56862745098039%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31942,7 +31942,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 23.52941176470588%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32004,7 +32004,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 25.49019607843137%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32066,7 +32066,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 27.45098039215686%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32128,7 +32128,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 29.41176470588235%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32190,7 +32190,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 31.372549019607842%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32252,7 +32252,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "9.80392156862745% 50.98039215686274%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32314,7 +32314,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 33.33333333333333%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32376,7 +32376,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 35.29411764705882%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32438,7 +32438,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 37.25490196078431%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32500,7 +32500,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 39.2156862745098%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32611,7 +32611,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "58.8235294117647% 86.27450980392156%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32673,7 +32673,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "47.05882352941176% 90.19607843137254%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32735,7 +32735,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "60.78431372549019% 3.9215686274509802%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32797,7 +32797,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "60.78431372549019% 11.76470588235294%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32859,7 +32859,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "60.78431372549019% 25.49019607843137%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32921,7 +32921,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "58.8235294117647% 84.31372549019608%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32983,7 +32983,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "60.78431372549019% 33.33333333333333%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33045,7 +33045,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "60.78431372549019% 68.62745098039215%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33107,7 +33107,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "60.78431372549019% 72.54901960784314%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33218,7 +33218,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "58.8235294117647% 54.90196078431372%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33280,7 +33280,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "58.8235294117647% 52.94117647058823%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33342,7 +33342,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "60.78431372549019% 54.90196078431372%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33404,7 +33404,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "60.78431372549019% 58.8235294117647%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33466,7 +33466,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "58.8235294117647% 56.86274509803921%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33528,7 +33528,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "58.8235294117647% 47.05882352941176%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33590,7 +33590,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "58.8235294117647% 76.47058823529412%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33652,7 +33652,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "60.78431372549019% 74.50980392156862%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33714,7 +33714,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "60.78431372549019% 62.745098039215684%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33776,7 +33776,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "58.8235294117647% 66.66666666666666%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33838,7 +33838,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "60.78431372549019% 76.47058823529412%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33900,7 +33900,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "58.8235294117647% 74.50980392156862%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33962,7 +33962,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "58.8235294117647% 49.01960784313725%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -34024,7 +34024,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "58.8235294117647% 64.70588235294117%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -34086,7 +34086,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "58.8235294117647% 68.62745098039215%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -34148,7 +34148,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "58.8235294117647% 100%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -34210,7 +34210,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "60.78431372549019% 1.9607843137254901%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -34272,7 +34272,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "60.78431372549019% 0%",
-                  "backgroundSize": "5200% 5200%",
+                  "backgroundSize": "5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -93181,7 +93181,7 @@ else echo "bar";
                     Object {
                       "backgroundImage": "url([object Object])",
                       "backgroundPosition": "58.8235294117647% 54.90196078431372%",
-                      "backgroundSize": "5200% 5200%",
+                      "backgroundSize": "5200%",
                       "display": "inline-block",
                       "height": 16,
                       "width": 16,
@@ -334107,6 +334107,10 @@ Array [
             "display": "flex",
             "flexDirection": "column",
             "justifyContent": "flex-start",
+            "paddingBottom": 8,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 8,
             "width": "100%",
           }
         }
@@ -334125,6 +334129,8 @@ Array [
               "justifyContent": "flex-start",
               "margin": 0,
               "padding": 4,
+              "paddingLeft": 0,
+              "paddingTop": 0,
               "width": "100%",
             }
           }
@@ -339189,7 +339195,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                              "backgroundSize": "5200% 5200%",
+                              "backgroundSize": "5200%",
                               "display": "inline-block",
                               "height": 16,
                               "width": 16,
@@ -339377,7 +339383,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 29.41176470588235%",
-                              "backgroundSize": "5200% 5200%",
+                              "backgroundSize": "5200%",
                               "display": "inline-block",
                               "height": 32,
                               "width": 32,
@@ -340560,7 +340566,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                              "backgroundSize": "5200% 5200%",
+                              "backgroundSize": "5200%",
                               "display": "inline-block",
                               "height": 16,
                               "width": 16,
@@ -340748,7 +340754,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 29.41176470588235%",
-                              "backgroundSize": "5200% 5200%",
+                              "backgroundSize": "5200%",
                               "display": "inline-block",
                               "height": 32,
                               "width": 32,
@@ -341940,7 +341946,7 @@ Array [
                               Object {
                                 "backgroundImage": "url([object Object])",
                                 "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                                "backgroundSize": "5200% 5200%",
+                                "backgroundSize": "5200%",
                                 "display": "inline-block",
                                 "height": 16,
                                 "width": 16,
@@ -342813,7 +342819,7 @@ Array [
                               Object {
                                 "backgroundImage": "url([object Object])",
                                 "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                                "backgroundSize": "5200% 5200%",
+                                "backgroundSize": "5200%",
                                 "display": "inline-block",
                                 "height": 16,
                                 "width": 16,
@@ -343681,7 +343687,7 @@ Array [
                               Object {
                                 "backgroundImage": "url([object Object])",
                                 "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                                "backgroundSize": "5200% 5200%",
+                                "backgroundSize": "5200%",
                                 "display": "inline-block",
                                 "height": 16,
                                 "width": 16,
@@ -344557,7 +344563,7 @@ Array [
                               Object {
                                 "backgroundImage": "url([object Object])",
                                 "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                                "backgroundSize": "5200% 5200%",
+                                "backgroundSize": "5200%",
                                 "display": "inline-block",
                                 "height": 16,
                                 "width": 16,
@@ -345457,7 +345463,7 @@ Array [
                               Object {
                                 "backgroundImage": "url([object Object])",
                                 "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                                "backgroundSize": "5200% 5200%",
+                                "backgroundSize": "5200%",
                                 "display": "inline-block",
                                 "height": 16,
                                 "width": 16,
@@ -346300,7 +346306,7 @@ Array [
                               Object {
                                 "backgroundImage": "url([object Object])",
                                 "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                                "backgroundSize": "5200% 5200%",
+                                "backgroundSize": "5200%",
                                 "display": "inline-block",
                                 "height": 16,
                                 "width": 16,
@@ -347223,7 +347229,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                              "backgroundSize": "5200% 5200%",
+                              "backgroundSize": "5200%",
                               "display": "inline-block",
                               "height": 16,
                               "width": 16,
@@ -347425,7 +347431,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 29.41176470588235%",
-                              "backgroundSize": "5200% 5200%",
+                              "backgroundSize": "5200%",
                               "display": "inline-block",
                               "height": 32,
                               "width": 32,
@@ -348794,7 +348800,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                              "backgroundSize": "5200% 5200%",
+                              "backgroundSize": "5200%",
                               "display": "inline-block",
                               "height": 16,
                               "width": 16,
@@ -348996,7 +349002,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 29.41176470588235%",
-                              "backgroundSize": "5200% 5200%",
+                              "backgroundSize": "5200%",
                               "display": "inline-block",
                               "height": 32,
                               "width": 32,
@@ -350350,7 +350356,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                              "backgroundSize": "5200% 5200%",
+                              "backgroundSize": "5200%",
                               "display": "inline-block",
                               "height": 16,
                               "width": 16,
@@ -350553,7 +350559,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 29.41176470588235%",
-                              "backgroundSize": "5200% 5200%",
+                              "backgroundSize": "5200%",
                               "display": "inline-block",
                               "height": 32,
                               "width": 32,
@@ -351897,7 +351903,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                              "backgroundSize": "5200% 5200%",
+                              "backgroundSize": "5200%",
                               "display": "inline-block",
                               "height": 16,
                               "width": 16,
@@ -352100,7 +352106,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 29.41176470588235%",
-                              "backgroundSize": "5200% 5200%",
+                              "backgroundSize": "5200%",
                               "display": "inline-block",
                               "height": 32,
                               "width": 32,
@@ -353444,7 +353450,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                              "backgroundSize": "5200% 5200%",
+                              "backgroundSize": "5200%",
                               "display": "inline-block",
                               "height": 16,
                               "width": 16,
@@ -353647,7 +353653,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 29.41176470588235%",
-                              "backgroundSize": "5200% 5200%",
+                              "backgroundSize": "5200%",
                               "display": "inline-block",
                               "height": 32,
                               "width": 32,
@@ -354991,7 +354997,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                              "backgroundSize": "5200% 5200%",
+                              "backgroundSize": "5200%",
                               "display": "inline-block",
                               "height": 16,
                               "width": 16,
@@ -355194,7 +355200,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 29.41176470588235%",
-                              "backgroundSize": "5200% 5200%",
+                              "backgroundSize": "5200%",
                               "display": "inline-block",
                               "height": 32,
                               "width": 32,
@@ -356549,7 +356555,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                              "backgroundSize": "5200% 5200%",
+                              "backgroundSize": "5200%",
                               "display": "inline-block",
                               "height": 16,
                               "width": 16,
@@ -356749,7 +356755,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 29.41176470588235%",
-                              "backgroundSize": "5200% 5200%",
+                              "backgroundSize": "5200%",
                               "display": "inline-block",
                               "height": 32,
                               "width": 32,
@@ -358104,7 +358110,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                              "backgroundSize": "5200% 5200%",
+                              "backgroundSize": "5200%",
                               "display": "inline-block",
                               "height": 16,
                               "width": 16,
@@ -358304,7 +358310,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 29.41176470588235%",
-                              "backgroundSize": "5200% 5200%",
+                              "backgroundSize": "5200%",
                               "display": "inline-block",
                               "height": 32,
                               "width": 32,
@@ -360679,7 +360685,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                              "backgroundSize": "5200% 5200%",
+                              "backgroundSize": "5200%",
                               "display": "inline-block",
                               "height": 16,
                               "width": 16,
@@ -360868,7 +360874,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 29.41176470588235%",
-                              "backgroundSize": "5200% 5200%",
+                              "backgroundSize": "5200%",
                               "display": "inline-block",
                               "height": 32,
                               "width": 32,

From 820d9ca6af11a35ec07b52c2fd4aa17cc47e3261 Mon Sep 17 00:00:00 2001
From: Daniel Ayoub <danny.a95@gmail.com>
Date: Tue, 18 Sep 2018 10:29:07 -0400
Subject: [PATCH 11/16] remove outdated comment

---
 shared/common-adapters/plain-input.native.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/shared/common-adapters/plain-input.native.js b/shared/common-adapters/plain-input.native.js
index e592250bebcd..22c5bf1c4e08 100644
--- a/shared/common-adapters/plain-input.native.js
+++ b/shared/common-adapters/plain-input.native.js
@@ -30,7 +30,7 @@ class PlainInput extends Component<InternalProps, State> {
     height: null,
   }
   _input: ?NativeTextInput
-  _lastNativeText: ?string // sourced from onChangeText
+  _lastNativeText: ?string
   _lastNativeSelection: ?Selection
 
   // TODO remove this when we can use forwardRef with react-redux. That'd let us

From 368bc23daab8f6914a4302ae32dda6777b1a2290 Mon Sep 17 00:00:00 2001
From: Daniel Ayoub <danny.a95@gmail.com>
Date: Tue, 18 Sep 2018 10:35:06 -0400
Subject: [PATCH 12/16] fix storyshots from jest cache

---
 .../__snapshots__/Storyshots.test.js.snap     | 586 +++++++++---------
 1 file changed, 293 insertions(+), 293 deletions(-)

diff --git a/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap b/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap
index 7d051c9e3f6a..5bc1df8492a1 100644
--- a/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap
+++ b/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap
@@ -847,7 +847,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -1119,7 +1119,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -11003,7 +11003,7 @@ Array [
                   Object {
                     "backgroundImage": "url([object Object])",
                     "backgroundPosition": "27.45098039215686% 96.07843137254902%",
-                    "backgroundSize": "5200%",
+                    "backgroundSize": "5200% 5200%",
                     "display": "inline-block",
                     "height": 16,
                     "width": 16,
@@ -11176,7 +11176,7 @@ Array [
                   Object {
                     "backgroundImage": "url([object Object])",
                     "backgroundPosition": "74.50980392156862% 45.09803921568627%",
-                    "backgroundSize": "5200%",
+                    "backgroundSize": "5200% 5200%",
                     "display": "inline-block",
                     "height": 16,
                     "width": 16,
@@ -14798,7 +14798,7 @@ Array [
                                       Object {
                                         "backgroundImage": "url([object Object])",
                                         "backgroundPosition": "43.13725490196078% 25.49019607843137%",
-                                        "backgroundSize": "5200%",
+                                        "backgroundSize": "5200% 5200%",
                                         "display": "inline-block",
                                         "height": 16,
                                         "width": 16,
@@ -14919,7 +14919,7 @@ Array [
                                       Object {
                                         "backgroundImage": "url([object Object])",
                                         "backgroundPosition": "7.8431372549019605% 49.01960784313725%",
-                                        "backgroundSize": "5200%",
+                                        "backgroundSize": "5200% 5200%",
                                         "display": "inline-block",
                                         "height": 16,
                                         "width": 16,
@@ -15040,7 +15040,7 @@ Array [
                                       Object {
                                         "backgroundImage": "url([object Object])",
                                         "backgroundPosition": "50.98039215686274% 43.13725490196078%",
-                                        "backgroundSize": "5200%",
+                                        "backgroundSize": "5200% 5200%",
                                         "display": "inline-block",
                                         "height": 16,
                                         "width": 16,
@@ -16744,7 +16744,7 @@ Array [
                                       Object {
                                         "backgroundImage": "url([object Object])",
                                         "backgroundPosition": "96.07843137254902% 100%",
-                                        "backgroundSize": "5200%",
+                                        "backgroundSize": "5200% 5200%",
                                         "display": "inline-block",
                                         "height": 16,
                                         "width": 16,
@@ -17918,7 +17918,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 47.05882352941176%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -17980,7 +17980,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 49.01960784313725%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18042,7 +18042,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 50.98039215686274%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18104,7 +18104,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "74.50980392156862% 50.98039215686274%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18166,7 +18166,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 52.94117647058823%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18228,7 +18228,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 54.90196078431372%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18290,7 +18290,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 56.86274509803921%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18364,7 +18364,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 58.8235294117647%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18426,7 +18426,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 64.70588235294117%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18488,7 +18488,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 66.66666666666666%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18550,7 +18550,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 68.62745098039215%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18612,7 +18612,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 74.50980392156862%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18674,7 +18674,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 72.54901960784314%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18736,7 +18736,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 94.11764705882352%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18810,7 +18810,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 92.15686274509804%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18872,7 +18872,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 96.07843137254902%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18934,7 +18934,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 98.0392156862745%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -18996,7 +18996,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "92.15686274509804% 80.3921568627451%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19058,7 +19058,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 74.50980392156862%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19120,7 +19120,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "72.54901960784314% 60.78431372549019%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19182,7 +19182,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "74.50980392156862% 96.07843137254902%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19256,7 +19256,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "72.54901960784314% 54.90196078431372%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19318,7 +19318,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "74.50980392156862% 94.11764705882352%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19380,7 +19380,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 78.4313725490196%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19442,7 +19442,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 80.3921568627451%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19504,7 +19504,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 50.98039215686274%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19566,7 +19566,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 78.4313725490196%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19628,7 +19628,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 76.47058823529412%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19702,7 +19702,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 13.72549019607843%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19764,7 +19764,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 17.64705882352941%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19826,7 +19826,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 35.29411764705882%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19888,7 +19888,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "72.54901960784314% 47.05882352941176%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -19950,7 +19950,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 37.25490196078431%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20012,7 +20012,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 27.45098039215686%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20074,7 +20074,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 29.41176470588235%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20148,7 +20148,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 47.05882352941176%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20210,7 +20210,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 70.58823529411764%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20272,7 +20272,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 100%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20334,7 +20334,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 0%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20396,7 +20396,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 1.9607843137254901%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20458,7 +20458,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "74.50980392156862% 52.94117647058823%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20520,7 +20520,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 82.35294117647058%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20594,7 +20594,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 84.31372549019608%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20656,7 +20656,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 86.27450980392156%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20718,7 +20718,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 88.23529411764706%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20780,7 +20780,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 76.47058823529412%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20842,7 +20842,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "72.54901960784314% 49.01960784313725%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20904,7 +20904,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 43.13725490196078%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -20966,7 +20966,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "92.15686274509804% 78.4313725490196%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -21040,7 +21040,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 72.54901960784314%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -21102,7 +21102,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "58.8235294117647% 90.19607843137254%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -21164,7 +21164,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 3.9215686274509802%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -21226,7 +21226,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 5.88235294117647%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -21288,7 +21288,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 15.686274509803921%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -21350,7 +21350,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 11.76470588235294%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -21412,7 +21412,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 33.33333333333333%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -21486,7 +21486,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 19.6078431372549%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -21548,7 +21548,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 21.56862745098039%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -21610,7 +21610,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 23.52941176470588%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -21672,7 +21672,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 25.49019607843137%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -21734,7 +21734,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "76.47058823529412% 5.88235294117647%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -21796,7 +21796,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 31.372549019607842%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -21858,7 +21858,7 @@ Array [
                         Object {
                           "backgroundImage": "url([object Object])",
                           "backgroundPosition": "60.78431372549019% 39.2156862745098%",
-                          "backgroundSize": "5200%",
+                          "backgroundSize": "5200% 5200%",
                           "display": "inline-block",
                           "height": 32,
                           "width": 32,
@@ -22024,7 +22024,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 47.05882352941176%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22086,7 +22086,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 49.01960784313725%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22148,7 +22148,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 50.98039215686274%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22210,7 +22210,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "74.50980392156862% 50.98039215686274%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22272,7 +22272,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 52.94117647058823%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22334,7 +22334,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 54.90196078431372%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22396,7 +22396,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 56.86274509803921%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22470,7 +22470,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 58.8235294117647%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22532,7 +22532,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 64.70588235294117%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22594,7 +22594,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 66.66666666666666%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22656,7 +22656,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 68.62745098039215%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22718,7 +22718,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 74.50980392156862%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22780,7 +22780,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 72.54901960784314%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22842,7 +22842,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 94.11764705882352%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22916,7 +22916,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 92.15686274509804%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -22978,7 +22978,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 96.07843137254902%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23040,7 +23040,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 98.0392156862745%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23102,7 +23102,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "92.15686274509804% 80.3921568627451%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23164,7 +23164,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 74.50980392156862%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23226,7 +23226,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "72.54901960784314% 60.78431372549019%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23288,7 +23288,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "74.50980392156862% 96.07843137254902%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23362,7 +23362,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "72.54901960784314% 54.90196078431372%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23424,7 +23424,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "74.50980392156862% 94.11764705882352%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23486,7 +23486,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 78.4313725490196%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23548,7 +23548,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 80.3921568627451%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23610,7 +23610,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 50.98039215686274%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23672,7 +23672,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 78.4313725490196%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23734,7 +23734,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 76.47058823529412%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23808,7 +23808,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 13.72549019607843%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23870,7 +23870,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 17.64705882352941%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23932,7 +23932,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 35.29411764705882%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -23994,7 +23994,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "72.54901960784314% 47.05882352941176%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24056,7 +24056,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 37.25490196078431%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24118,7 +24118,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 27.45098039215686%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24180,7 +24180,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 29.41176470588235%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24254,7 +24254,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 47.05882352941176%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24316,7 +24316,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 70.58823529411764%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24378,7 +24378,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 100%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24440,7 +24440,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 0%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24502,7 +24502,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 1.9607843137254901%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24564,7 +24564,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "74.50980392156862% 52.94117647058823%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24626,7 +24626,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 82.35294117647058%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24700,7 +24700,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 84.31372549019608%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24762,7 +24762,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 86.27450980392156%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24824,7 +24824,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 88.23529411764706%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24886,7 +24886,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 76.47058823529412%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -24948,7 +24948,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "72.54901960784314% 49.01960784313725%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25010,7 +25010,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 43.13725490196078%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25072,7 +25072,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "92.15686274509804% 78.4313725490196%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25146,7 +25146,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 72.54901960784314%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25208,7 +25208,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "58.8235294117647% 90.19607843137254%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25270,7 +25270,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 3.9215686274509802%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25332,7 +25332,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 5.88235294117647%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25394,7 +25394,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 15.686274509803921%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25456,7 +25456,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 11.76470588235294%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25518,7 +25518,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 33.33333333333333%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25592,7 +25592,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 19.6078431372549%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25654,7 +25654,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 21.56862745098039%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25716,7 +25716,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 23.52941176470588%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25778,7 +25778,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 25.49019607843137%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25840,7 +25840,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "76.47058823529412% 5.88235294117647%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25902,7 +25902,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 31.372549019607842%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -25964,7 +25964,7 @@ Array [
                       Object {
                         "backgroundImage": "url([object Object])",
                         "backgroundPosition": "60.78431372549019% 39.2156862745098%",
-                        "backgroundSize": "5200%",
+                        "backgroundSize": "5200% 5200%",
                         "display": "inline-block",
                         "height": 32,
                         "width": 32,
@@ -26078,7 +26078,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "96.07843137254902% 96.07843137254902%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -26140,7 +26140,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "23.52941176470588% 25.49019607843137%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -26202,7 +26202,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "90.19607843137254% 86.27450980392156%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -26264,7 +26264,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "50.98039215686274% 58.8235294117647%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -26326,7 +26326,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "11.76470588235294% 11.76470588235294%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -26388,7 +26388,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "96.07843137254902% 33.33333333333333%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -26450,7 +26450,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "11.76470588235294% 13.72549019607843%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -26512,7 +26512,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "29.41176470588235% 45.09803921568627%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -26574,7 +26574,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "11.76470588235294% 78.4313725490196%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -26636,7 +26636,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "49.01960784313725% 64.70588235294117%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -26698,7 +26698,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "13.72549019607843% 0%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -26760,7 +26760,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 98.0392156862745%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -26822,7 +26822,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "25.49019607843137% 84.31372549019608%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -26884,7 +26884,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "25.49019607843137% 86.27450980392156%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -26946,7 +26946,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "25.49019607843137% 82.35294117647058%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27008,7 +27008,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "25.49019607843137% 88.23529411764706%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27070,7 +27070,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "50.98039215686274% 62.745098039215684%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27132,7 +27132,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "96.07843137254902% 98.0392156862745%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27194,7 +27194,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "13.72549019607843% 15.686274509803921%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27256,7 +27256,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "98.0392156862745% 11.76470588235294%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27318,7 +27318,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "76.47058823529412% 5.88235294117647%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27380,7 +27380,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "82.35294117647058% 56.86274509803921%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27442,7 +27442,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "58.8235294117647% 80.3921568627451%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27504,7 +27504,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "23.52941176470588% 1.9607843137254901%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27566,7 +27566,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 19.6078431372549%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27628,7 +27628,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "11.76470588235294% 9.80392156862745%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27690,7 +27690,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "82.35294117647058% 11.76470588235294%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27752,7 +27752,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "52.94117647058823% 54.90196078431372%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27814,7 +27814,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "90.19607843137254% 19.6078431372549%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27876,7 +27876,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "52.94117647058823% 27.45098039215686%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -27938,7 +27938,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "25.49019607843137% 3.9215686274509802%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28000,7 +28000,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "47.05882352941176% 78.4313725490196%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28062,7 +28062,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "13.72549019607843% 19.6078431372549%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28124,7 +28124,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "52.94117647058823% 98.0392156862745%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28186,7 +28186,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "62.745098039215684% 84.31372549019608%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28248,7 +28248,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "50.98039215686274% 50.98039215686274%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28310,7 +28310,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "62.745098039215684% 86.27450980392156%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28372,7 +28372,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "98.0392156862745% 13.72549019607843%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28434,7 +28434,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "25.49019607843137% 15.686274509803921%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28496,7 +28496,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "49.01960784313725% 60.78431372549019%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28558,7 +28558,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "70.58823529411764% 60.78431372549019%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28620,7 +28620,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "49.01960784313725% 9.80392156862745%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28682,7 +28682,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "49.01960784313725% 7.8431372549019605%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28744,7 +28744,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "49.01960784313725% 1.9607843137254901%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28806,7 +28806,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "50.98039215686274% 39.2156862745098%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28868,7 +28868,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "49.01960784313725% 56.86274509803921%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28930,7 +28930,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "13.72549019607843% 1.9607843137254901%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -28992,7 +28992,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "52.94117647058823% 43.13725490196078%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -29054,7 +29054,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "96.07843137254902% 86.27450980392156%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -29116,7 +29116,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "47.05882352941176% 96.07843137254902%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -29227,7 +29227,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "15.686274509803921% 49.01960784313725%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -29289,7 +29289,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "15.686274509803921% 50.98039215686274%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -29351,7 +29351,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "98.0392156862745% 0%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -29462,7 +29462,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "3.9215686274509802% 100%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -29524,7 +29524,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "23.52941176470588% 35.29411764705882%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -29586,7 +29586,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "23.52941176470588% 33.33333333333333%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -29648,7 +29648,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "23.52941176470588% 31.372549019607842%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -29710,7 +29710,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "9.80392156862745% 54.90196078431372%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -29772,7 +29772,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "9.80392156862745% 52.94117647058823%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -29834,7 +29834,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 60.78431372549019%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -29896,7 +29896,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 62.745098039215684%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -29958,7 +29958,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 64.70588235294117%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30020,7 +30020,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 66.66666666666666%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30082,7 +30082,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 68.62745098039215%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30144,7 +30144,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "15.686274509803921% 66.66666666666666%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30206,7 +30206,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 70.58823529411764%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30268,7 +30268,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 72.54901960784314%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30330,7 +30330,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 74.50980392156862%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30392,7 +30392,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 76.47058823529412%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30454,7 +30454,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 78.4313725490196%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30516,7 +30516,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 80.3921568627451%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30578,7 +30578,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 82.35294117647058%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30640,7 +30640,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 84.31372549019608%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30702,7 +30702,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 86.27450980392156%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30764,7 +30764,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 88.23529411764706%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30826,7 +30826,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 90.19607843137254%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30888,7 +30888,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 92.15686274509804%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -30950,7 +30950,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 94.11764705882352%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31012,7 +31012,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 96.07843137254902%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31074,7 +31074,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 98.0392156862745%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31136,7 +31136,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "0% 100%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31198,7 +31198,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 0%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31260,7 +31260,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 1.9607843137254901%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31322,7 +31322,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 3.9215686274509802%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31384,7 +31384,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 5.88235294117647%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31446,7 +31446,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 7.8431372549019605%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31508,7 +31508,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 9.80392156862745%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31570,7 +31570,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 11.76470588235294%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31632,7 +31632,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 13.72549019607843%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31694,7 +31694,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 15.686274509803921%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31756,7 +31756,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 17.64705882352941%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31818,7 +31818,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 19.6078431372549%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31880,7 +31880,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 21.56862745098039%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -31942,7 +31942,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 23.52941176470588%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32004,7 +32004,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 25.49019607843137%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32066,7 +32066,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 27.45098039215686%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32128,7 +32128,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 29.41176470588235%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32190,7 +32190,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 31.372549019607842%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32252,7 +32252,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "9.80392156862745% 50.98039215686274%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32314,7 +32314,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 33.33333333333333%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32376,7 +32376,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 35.29411764705882%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32438,7 +32438,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 37.25490196078431%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32500,7 +32500,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "1.9607843137254901% 39.2156862745098%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32611,7 +32611,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "58.8235294117647% 86.27450980392156%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32673,7 +32673,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "47.05882352941176% 90.19607843137254%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32735,7 +32735,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "60.78431372549019% 3.9215686274509802%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32797,7 +32797,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "60.78431372549019% 11.76470588235294%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32859,7 +32859,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "60.78431372549019% 25.49019607843137%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32921,7 +32921,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "58.8235294117647% 84.31372549019608%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -32983,7 +32983,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "60.78431372549019% 33.33333333333333%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33045,7 +33045,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "60.78431372549019% 68.62745098039215%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33107,7 +33107,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "60.78431372549019% 72.54901960784314%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33218,7 +33218,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "58.8235294117647% 54.90196078431372%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33280,7 +33280,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "58.8235294117647% 52.94117647058823%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33342,7 +33342,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "60.78431372549019% 54.90196078431372%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33404,7 +33404,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "60.78431372549019% 58.8235294117647%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33466,7 +33466,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "58.8235294117647% 56.86274509803921%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33528,7 +33528,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "58.8235294117647% 47.05882352941176%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33590,7 +33590,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "58.8235294117647% 76.47058823529412%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33652,7 +33652,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "60.78431372549019% 74.50980392156862%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33714,7 +33714,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "60.78431372549019% 62.745098039215684%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33776,7 +33776,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "58.8235294117647% 66.66666666666666%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33838,7 +33838,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "60.78431372549019% 76.47058823529412%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33900,7 +33900,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "58.8235294117647% 74.50980392156862%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -33962,7 +33962,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "58.8235294117647% 49.01960784313725%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -34024,7 +34024,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "58.8235294117647% 64.70588235294117%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -34086,7 +34086,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "58.8235294117647% 68.62745098039215%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -34148,7 +34148,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "58.8235294117647% 100%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -34210,7 +34210,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "60.78431372549019% 1.9607843137254901%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -34272,7 +34272,7 @@ Array [
                 Object {
                   "backgroundImage": "url([object Object])",
                   "backgroundPosition": "60.78431372549019% 0%",
-                  "backgroundSize": "5200%",
+                  "backgroundSize": "5200% 5200%",
                   "display": "inline-block",
                   "height": 32,
                   "width": 32,
@@ -93181,7 +93181,7 @@ else echo "bar";
                     Object {
                       "backgroundImage": "url([object Object])",
                       "backgroundPosition": "58.8235294117647% 54.90196078431372%",
-                      "backgroundSize": "5200%",
+                      "backgroundSize": "5200% 5200%",
                       "display": "inline-block",
                       "height": 16,
                       "width": 16,
@@ -339195,7 +339195,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                              "backgroundSize": "5200%",
+                              "backgroundSize": "5200% 5200%",
                               "display": "inline-block",
                               "height": 16,
                               "width": 16,
@@ -339383,7 +339383,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 29.41176470588235%",
-                              "backgroundSize": "5200%",
+                              "backgroundSize": "5200% 5200%",
                               "display": "inline-block",
                               "height": 32,
                               "width": 32,
@@ -340566,7 +340566,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                              "backgroundSize": "5200%",
+                              "backgroundSize": "5200% 5200%",
                               "display": "inline-block",
                               "height": 16,
                               "width": 16,
@@ -340754,7 +340754,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 29.41176470588235%",
-                              "backgroundSize": "5200%",
+                              "backgroundSize": "5200% 5200%",
                               "display": "inline-block",
                               "height": 32,
                               "width": 32,
@@ -341946,7 +341946,7 @@ Array [
                               Object {
                                 "backgroundImage": "url([object Object])",
                                 "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                                "backgroundSize": "5200%",
+                                "backgroundSize": "5200% 5200%",
                                 "display": "inline-block",
                                 "height": 16,
                                 "width": 16,
@@ -342819,7 +342819,7 @@ Array [
                               Object {
                                 "backgroundImage": "url([object Object])",
                                 "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                                "backgroundSize": "5200%",
+                                "backgroundSize": "5200% 5200%",
                                 "display": "inline-block",
                                 "height": 16,
                                 "width": 16,
@@ -343687,7 +343687,7 @@ Array [
                               Object {
                                 "backgroundImage": "url([object Object])",
                                 "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                                "backgroundSize": "5200%",
+                                "backgroundSize": "5200% 5200%",
                                 "display": "inline-block",
                                 "height": 16,
                                 "width": 16,
@@ -344563,7 +344563,7 @@ Array [
                               Object {
                                 "backgroundImage": "url([object Object])",
                                 "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                                "backgroundSize": "5200%",
+                                "backgroundSize": "5200% 5200%",
                                 "display": "inline-block",
                                 "height": 16,
                                 "width": 16,
@@ -345463,7 +345463,7 @@ Array [
                               Object {
                                 "backgroundImage": "url([object Object])",
                                 "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                                "backgroundSize": "5200%",
+                                "backgroundSize": "5200% 5200%",
                                 "display": "inline-block",
                                 "height": 16,
                                 "width": 16,
@@ -346306,7 +346306,7 @@ Array [
                               Object {
                                 "backgroundImage": "url([object Object])",
                                 "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                                "backgroundSize": "5200%",
+                                "backgroundSize": "5200% 5200%",
                                 "display": "inline-block",
                                 "height": 16,
                                 "width": 16,
@@ -347229,7 +347229,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                              "backgroundSize": "5200%",
+                              "backgroundSize": "5200% 5200%",
                               "display": "inline-block",
                               "height": 16,
                               "width": 16,
@@ -347431,7 +347431,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 29.41176470588235%",
-                              "backgroundSize": "5200%",
+                              "backgroundSize": "5200% 5200%",
                               "display": "inline-block",
                               "height": 32,
                               "width": 32,
@@ -348800,7 +348800,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                              "backgroundSize": "5200%",
+                              "backgroundSize": "5200% 5200%",
                               "display": "inline-block",
                               "height": 16,
                               "width": 16,
@@ -349002,7 +349002,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 29.41176470588235%",
-                              "backgroundSize": "5200%",
+                              "backgroundSize": "5200% 5200%",
                               "display": "inline-block",
                               "height": 32,
                               "width": 32,
@@ -350356,7 +350356,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                              "backgroundSize": "5200%",
+                              "backgroundSize": "5200% 5200%",
                               "display": "inline-block",
                               "height": 16,
                               "width": 16,
@@ -350559,7 +350559,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 29.41176470588235%",
-                              "backgroundSize": "5200%",
+                              "backgroundSize": "5200% 5200%",
                               "display": "inline-block",
                               "height": 32,
                               "width": 32,
@@ -351903,7 +351903,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                              "backgroundSize": "5200%",
+                              "backgroundSize": "5200% 5200%",
                               "display": "inline-block",
                               "height": 16,
                               "width": 16,
@@ -352106,7 +352106,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 29.41176470588235%",
-                              "backgroundSize": "5200%",
+                              "backgroundSize": "5200% 5200%",
                               "display": "inline-block",
                               "height": 32,
                               "width": 32,
@@ -353450,7 +353450,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                              "backgroundSize": "5200%",
+                              "backgroundSize": "5200% 5200%",
                               "display": "inline-block",
                               "height": 16,
                               "width": 16,
@@ -353653,7 +353653,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 29.41176470588235%",
-                              "backgroundSize": "5200%",
+                              "backgroundSize": "5200% 5200%",
                               "display": "inline-block",
                               "height": 32,
                               "width": 32,
@@ -354997,7 +354997,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                              "backgroundSize": "5200%",
+                              "backgroundSize": "5200% 5200%",
                               "display": "inline-block",
                               "height": 16,
                               "width": 16,
@@ -355200,7 +355200,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 29.41176470588235%",
-                              "backgroundSize": "5200%",
+                              "backgroundSize": "5200% 5200%",
                               "display": "inline-block",
                               "height": 32,
                               "width": 32,
@@ -356555,7 +356555,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                              "backgroundSize": "5200%",
+                              "backgroundSize": "5200% 5200%",
                               "display": "inline-block",
                               "height": 16,
                               "width": 16,
@@ -356755,7 +356755,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 29.41176470588235%",
-                              "backgroundSize": "5200%",
+                              "backgroundSize": "5200% 5200%",
                               "display": "inline-block",
                               "height": 32,
                               "width": 32,
@@ -358110,7 +358110,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                              "backgroundSize": "5200%",
+                              "backgroundSize": "5200% 5200%",
                               "display": "inline-block",
                               "height": 16,
                               "width": 16,
@@ -358310,7 +358310,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 29.41176470588235%",
-                              "backgroundSize": "5200%",
+                              "backgroundSize": "5200% 5200%",
                               "display": "inline-block",
                               "height": 32,
                               "width": 32,
@@ -360685,7 +360685,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 15.686274509803921%",
-                              "backgroundSize": "5200%",
+                              "backgroundSize": "5200% 5200%",
                               "display": "inline-block",
                               "height": 16,
                               "width": 16,
@@ -360874,7 +360874,7 @@ Array [
                             Object {
                               "backgroundImage": "url([object Object])",
                               "backgroundPosition": "15.686274509803921% 29.41176470588235%",
-                              "backgroundSize": "5200%",
+                              "backgroundSize": "5200% 5200%",
                               "display": "inline-block",
                               "height": 32,
                               "width": 32,

From 537429f96ecc5a452cb65d025fa7e5b8a399c23c Mon Sep 17 00:00:00 2001
From: Daniel Ayoub <danny.a95@gmail.com>
Date: Thu, 20 Sep 2018 11:51:58 -0400
Subject: [PATCH 13/16] add getSelection and example of changing text and
 selection at same time

---
 shared/common-adapters/plain-input.desktop.js |   8 ++
 shared/common-adapters/plain-input.js.flow    |   1 +
 shared/common-adapters/plain-input.native.js  |   2 +
 shared/common-adapters/plain-input.stories.js |  50 ++++++++
 .../__snapshots__/Storyshots.test.js.snap     | 116 ++++++++++++++++++
 5 files changed, 177 insertions(+)

diff --git a/shared/common-adapters/plain-input.desktop.js b/shared/common-adapters/plain-input.desktop.js
index 3b14117a8aa6..f7c2baf6b1c8 100644
--- a/shared/common-adapters/plain-input.desktop.js
+++ b/shared/common-adapters/plain-input.desktop.js
@@ -105,6 +105,14 @@ class PlainInput extends React.PureComponent<InternalProps> {
     }
   }
 
+  getSelection = () => {
+    const n = this._input
+    if (n) {
+      return {start: n.selectionStart, end: n.selectionEnd}
+    }
+    return null
+  }
+
   setSelection = (s: Selection) => {
     const controlled = !!this.props.value
     if (!controlled) {
diff --git a/shared/common-adapters/plain-input.js.flow b/shared/common-adapters/plain-input.js.flow
index a6cde6272b22..3002c45c3f79 100644
--- a/shared/common-adapters/plain-input.js.flow
+++ b/shared/common-adapters/plain-input.js.flow
@@ -91,6 +91,7 @@ declare export default class PlainInput extends React.Component<Props> {
   static defaultProps: DefaultProps;
   blur: () => void;
   focus: () => void;
+  getSelection: () => ?Selection;
   /**
    *  This can only be used when the input is controlled. Use `transformText` if
    *  you want to do this on an uncontrolled input. Make sure the Selection is
diff --git a/shared/common-adapters/plain-input.native.js b/shared/common-adapters/plain-input.native.js
index 22c5bf1c4e08..304e92091b2b 100644
--- a/shared/common-adapters/plain-input.native.js
+++ b/shared/common-adapters/plain-input.native.js
@@ -75,6 +75,8 @@ class PlainInput extends Component<InternalProps, State> {
     this._setSelection(newTextInfo.selection)
   }
 
+  getSelection = () => this._lastNativeSelection || {start: 0, end: 0}
+
   setSelection = (s: Selection) => {
     const controlled = !!this.props.value
     if (!controlled) {
diff --git a/shared/common-adapters/plain-input.stories.js b/shared/common-adapters/plain-input.stories.js
index da0d5e2f6fc7..e4433dbfddb1 100644
--- a/shared/common-adapters/plain-input.stories.js
+++ b/shared/common-adapters/plain-input.stories.js
@@ -19,6 +19,55 @@ const commonProps = {
   style: {borderWidth: 1, borderStyle: 'solid', borderColor: globalColors.black_10},
 }
 
+type TestInputState = {
+  value: string,
+}
+class TestInput extends React.Component<{}, TestInputState> {
+  state = {value: ''}
+  // prettier-ignore
+  _input = React.createRef<typeof PlainInput>()
+
+  _insertText = (t: string) => {
+    const input = this._input.current
+    if (input) {
+      const selection = input.getSelection()
+      if (selection) {
+        this.setState(
+          s => {
+            const value = s.value.substring(0, selection.start) + t + s.value.substring(selection.start)
+            return {value}
+          },
+          () => {
+            const input = this._input.current
+            if (input) {
+              const newCursorPos = selection.start + t.length
+              input.setSelection({start: newCursorPos, end: newCursorPos})
+              input.focus()
+            }
+          }
+        )
+      }
+    }
+  }
+
+  render() {
+    return (
+      <Box2 direction="vertical" fullWidth={true} gap="small">
+        <PlainInput
+          {...commonProps}
+          ref={this._input}
+          value={this.state.value}
+          onEnterKeyDown={() => this._insertText('foo')}
+          onChangeText={v => this.setState(s => (s.value === v ? null : {value: v}))}
+        />
+        <ButtonBar>
+          <Button type="Secondary" label="Insert 'foo' (Enter)" onClick={() => this._insertText('foo')} />
+        </ButtonBar>
+      </Box2>
+    )
+  }
+}
+
 type ControlledInputState = {[key: string]: string}
 class ControlledInputPlayground extends React.Component<{}, ControlledInputState> {
   state = {}
@@ -96,6 +145,7 @@ class ControlledInputPlayground extends React.Component<{}, ControlledInputState
             <Button type="Secondary" label="Run test" onClick={this._testCrossSelection} />
           </ButtonBar>
         </Box2>
+        <TestInput />
       </Box2>
     )
   }
diff --git a/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap b/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap
index d055afe56727..c3549fd4c642 100644
--- a/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap
+++ b/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap
@@ -63545,6 +63545,122 @@ Array [
           </div>
         </div>
       </div>
+      <div
+        style={
+          Object {
+            "flexShrink": 0,
+            "height": 16,
+          }
+        }
+      />
+      <div
+        style={
+          Object {
+            "alignItems": "stretch",
+            "display": "flex",
+            "flexDirection": "column",
+            "justifyContent": "flex-start",
+            "width": "100%",
+          }
+        }
+      >
+        <style>
+          ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+        </style>
+        <input
+          onBlur={[Function]}
+          onChange={[Function]}
+          onClick={[Function]}
+          onCompositionEnd={[Function]}
+          onCompositionStart={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          style={
+            Object {
+              "WebkitFontSmoothing": "antialiased",
+              "borderColor": "rgba(0, 0, 0, 0.10)",
+              "borderStyle": "solid",
+              "borderWidth": 1,
+              "color": "rgba(0, 0, 0, 0.75)",
+              "fontFamily": "OpenSans",
+              "fontSize": 13,
+              "fontWeight": 400,
+              "lineHeight": "unset",
+              "outline": "none",
+              "textRendering": "optimizeLegibility",
+            }
+          }
+          value=""
+        />
+        <div
+          style={
+            Object {
+              "flexShrink": 0,
+              "height": 16,
+            }
+          }
+        />
+        <div
+          style={
+            Object {
+              "alignItems": "center",
+              "display": "flex",
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "minHeight": 64,
+              "width": "100%",
+            }
+          }
+        >
+          <div
+            onClick={[Function]}
+            onMouseDown={[Function]}
+            onMouseUp={[Function]}
+            style={
+              Object {
+                "alignItems": "center",
+                "alignSelf": "center",
+                "backgroundColor": "#e6e6e6",
+                "borderRadius": 50,
+                "cursor": "pointer",
+                "display": "inline-block",
+                "flexDirection": "column",
+                "height": 32,
+                "justifyContent": "center",
+                "lineHeight": "inherit",
+                "minWidth": undefined,
+                "paddingLeft": 24,
+                "paddingRight": 24,
+                "position": "relative",
+                "textAlign": "left",
+                "transform": "none",
+                "transition": "none",
+              }
+            }
+          >
+            <div
+              style={
+                Object {
+                  "alignItems": "center",
+                  "display": "flex",
+                  "flexDirection": "row",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "position": "relative",
+                }
+              }
+            >
+              <span
+                className="css-1"
+              >
+                Insert 'foo' (Enter)
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <div
       id="modal-root"

From 05d5357b59dee0ebc114ec54437b642accc5c15a Mon Sep 17 00:00:00 2001
From: Daniel Ayoub <danny.a95@gmail.com>
Date: Fri, 21 Sep 2018 16:55:47 -0400
Subject: [PATCH 14/16] review feedback

---
 shared/common-adapters/plain-input.stories.js |   30 +-
 .../__snapshots__/Storyshots.test.js.snap     | 2559 +++++++++++------
 2 files changed, 1656 insertions(+), 933 deletions(-)

diff --git a/shared/common-adapters/plain-input.stories.js b/shared/common-adapters/plain-input.stories.js
index e4433dbfddb1..547a4205e516 100644
--- a/shared/common-adapters/plain-input.stories.js
+++ b/shared/common-adapters/plain-input.stories.js
@@ -5,7 +5,7 @@ import Box, {Box2} from './box'
 import Button from './button'
 import ButtonBar from './button-bar'
 import Text from './text'
-import {action, storiesOf} from '../stories/storybook'
+import {action, scrollViewDecorator, storiesOf} from '../stories/storybook'
 import {globalColors, globalMargins} from '../styles'
 
 const commonProps = {
@@ -19,10 +19,7 @@ const commonProps = {
   style: {borderWidth: 1, borderStyle: 'solid', borderColor: globalColors.black_10},
 }
 
-type TestInputState = {
-  value: string,
-}
-class TestInput extends React.Component<{}, TestInputState> {
+class TestInput extends React.Component<{multiline: boolean}, {value: string}> {
   state = {value: ''}
   // prettier-ignore
   _input = React.createRef<typeof PlainInput>()
@@ -34,7 +31,7 @@ class TestInput extends React.Component<{}, TestInputState> {
       if (selection) {
         this.setState(
           s => {
-            const value = s.value.substring(0, selection.start) + t + s.value.substring(selection.start)
+            const value = s.value.substring(0, selection.start) + t + s.value.substring(selection.end)
             return {value}
           },
           () => {
@@ -57,6 +54,7 @@ class TestInput extends React.Component<{}, TestInputState> {
           {...commonProps}
           ref={this._input}
           value={this.state.value}
+          multiline={this.props.multiline}
           onEnterKeyDown={() => this._insertText('foo')}
           onChangeText={v => this.setState(s => (s.value === v ? null : {value: v}))}
         />
@@ -69,7 +67,7 @@ class TestInput extends React.Component<{}, TestInputState> {
 }
 
 type ControlledInputState = {[key: string]: string}
-class ControlledInputPlayground extends React.Component<{}, ControlledInputState> {
+class ControlledInputPlayground extends React.Component<{multiline: boolean}, ControlledInputState> {
   state = {}
   mutationTarget = React.createRef()
   _onChangeText = (valueKey: string) => (t: string) => this.setState({[valueKey]: t})
@@ -104,24 +102,25 @@ class ControlledInputPlayground extends React.Component<{}, ControlledInputState
     }
   }
   render() {
+    const common = {...commonProps, multiline: this.props.multiline}
     return (
       <Box2 direction="vertical" fullWidth={true} gap="small" style={{padding: globalMargins.small}}>
         <Text type="Body">Basic controlled inputs</Text>
         <PlainInput
-          {...commonProps}
+          {...common}
           value={this.state.value1 || ''}
           onChangeText={this._onChangeText('value1')}
           placeholder={`type="text"`}
         />
         <PlainInput
-          {...commonProps}
+          {...common}
           value={this.state.value2 || ''}
           onChangeText={this._onChangeText('value2')}
           type="password"
           placeholder={`type="password"`}
         />
         <PlainInput
-          {...commonProps}
+          {...common}
           value={this.state.value3 || ''}
           onChangeText={this._onChangeText('value3')}
           type="number"
@@ -130,7 +129,7 @@ class ControlledInputPlayground extends React.Component<{}, ControlledInputState
         <Box2 direction="vertical" fullWidth={true} gap="small">
           <Text type="Body">Live mutations</Text>
           <PlainInput
-            {...commonProps}
+            {...common}
             ref={this.mutationTarget}
             value={this.state.changingValue || ''}
             onChangeText={this._onChangeChangingValue}
@@ -145,7 +144,7 @@ class ControlledInputPlayground extends React.Component<{}, ControlledInputState
             <Button type="Secondary" label="Run test" onClick={this._testCrossSelection} />
           </ButtonBar>
         </Box2>
-        <TestInput />
+        <TestInput multiline={this.props.multiline} />
       </Box2>
     )
   }
@@ -154,6 +153,7 @@ class ControlledInputPlayground extends React.Component<{}, ControlledInputState
 const load = () => {
   storiesOf('Common/Plain input', module)
     .addDecorator(story => <Box style={{padding: 20}}>{story()}</Box>)
+    .addDecorator(scrollViewDecorator)
     .add('Basic', () => <PlainInput {...commonProps} />)
     .add('Different text type', () => <PlainInput {...commonProps} textType="BodyExtrabold" />)
     .add('Larger text type', () => <PlainInput {...commonProps} textType="HeaderBig" />)
@@ -180,9 +180,9 @@ const load = () => {
     .add('With placeholder color', () => (
       <PlainInput {...commonProps} placeholder="I'm blue!" placeholderColor="blue" />
     ))
-
-  // Sandbox for testing controlled input bugginess
-  storiesOf('Common', module).add('Controlled input playground', () => <ControlledInputPlayground />)
+    // Sandbox for testing controlled input bugginess
+    .add('Controlled input playground', () => <ControlledInputPlayground multiline={false} />)
+    .add('Controlled input playground (multiline)', () => <ControlledInputPlayground multiline={true} />)
 }
 
 export default load
diff --git a/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap b/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap
index c3549fd4c642..e970a3ae5d0b 100644
--- a/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap
+++ b/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap
@@ -63140,543 +63140,6 @@ Array [
 ]
 `;
 
-exports[`Storyshots Common Controlled input playground 1`] = `
-Array [
-  .css-0,
-[data-css-0] {
-  font-size: 13px;
-  line-height: 17px;
-  color: rgba(0, 0, 0, 0.75);
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  font-family: OpenSans;
-  font-weight: 400;
-}
-
-.css-1,
-[data-css-1] {
-  font-size: 14px;
-  line-height: 18px;
-  color: rgba(0, 0, 0, 0.75);
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  font-family: OpenSans;
-  font-weight: 600;
-  text-align: center;
-  white-space: pre;
-}
-
-<div
-    style={
-      Object {
-        "height": "100%",
-        "width": "100%",
-      }
-    }
-  >
-    <div
-      style={
-        Object {
-          "alignItems": "stretch",
-          "display": "flex",
-          "flexDirection": "column",
-          "justifyContent": "flex-start",
-          "padding": 16,
-          "width": "100%",
-        }
-      }
-    >
-      <span
-        className="css-0"
-      >
-        Basic controlled inputs
-      </span>
-      <div
-        style={
-          Object {
-            "flexShrink": 0,
-            "height": 16,
-          }
-        }
-      />
-      <style>
-        ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
-                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
-      </style>
-      <input
-        onBlur={[Function]}
-        onChange={[Function]}
-        onClick={[Function]}
-        onCompositionEnd={[Function]}
-        onCompositionStart={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        placeholder="type=\\"text\\""
-        style={
-          Object {
-            "WebkitFontSmoothing": "antialiased",
-            "borderColor": "rgba(0, 0, 0, 0.10)",
-            "borderStyle": "solid",
-            "borderWidth": 1,
-            "color": "rgba(0, 0, 0, 0.75)",
-            "fontFamily": "OpenSans",
-            "fontSize": 13,
-            "fontWeight": 400,
-            "lineHeight": "unset",
-            "outline": "none",
-            "textRendering": "optimizeLegibility",
-          }
-        }
-        value=""
-      />
-      <div
-        style={
-          Object {
-            "flexShrink": 0,
-            "height": 16,
-          }
-        }
-      />
-      <style>
-        ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
-                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
-      </style>
-      <input
-        onBlur={[Function]}
-        onChange={[Function]}
-        onClick={[Function]}
-        onCompositionEnd={[Function]}
-        onCompositionStart={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        placeholder="type=\\"password\\""
-        style={
-          Object {
-            "WebkitFontSmoothing": "antialiased",
-            "borderColor": "rgba(0, 0, 0, 0.10)",
-            "borderStyle": "solid",
-            "borderWidth": 1,
-            "color": "rgba(0, 0, 0, 0.75)",
-            "fontFamily": "OpenSans",
-            "fontSize": 13,
-            "fontWeight": 400,
-            "lineHeight": "unset",
-            "outline": "none",
-            "textRendering": "optimizeLegibility",
-          }
-        }
-        type="password"
-        value=""
-      />
-      <div
-        style={
-          Object {
-            "flexShrink": 0,
-            "height": 16,
-          }
-        }
-      />
-      <style>
-        ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
-                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
-      </style>
-      <input
-        onBlur={[Function]}
-        onChange={[Function]}
-        onClick={[Function]}
-        onCompositionEnd={[Function]}
-        onCompositionStart={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        placeholder="type=\\"number\\" (desktop only)"
-        style={
-          Object {
-            "WebkitFontSmoothing": "antialiased",
-            "borderColor": "rgba(0, 0, 0, 0.10)",
-            "borderStyle": "solid",
-            "borderWidth": 1,
-            "color": "rgba(0, 0, 0, 0.75)",
-            "fontFamily": "OpenSans",
-            "fontSize": 13,
-            "fontWeight": 400,
-            "lineHeight": "unset",
-            "outline": "none",
-            "textRendering": "optimizeLegibility",
-          }
-        }
-        type="number"
-        value=""
-      />
-      <div
-        style={
-          Object {
-            "flexShrink": 0,
-            "height": 16,
-          }
-        }
-      />
-      <div
-        style={
-          Object {
-            "alignItems": "stretch",
-            "display": "flex",
-            "flexDirection": "column",
-            "justifyContent": "flex-start",
-            "width": "100%",
-          }
-        }
-      >
-        <span
-          className="css-0"
-        >
-          Live mutations
-        </span>
-        <div
-          style={
-            Object {
-              "flexShrink": 0,
-              "height": 16,
-            }
-          }
-        />
-        <style>
-          ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
-                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
-        </style>
-        <input
-          onBlur={[Function]}
-          onChange={[Function]}
-          onClick={[Function]}
-          onCompositionEnd={[Function]}
-          onCompositionStart={[Function]}
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
-          style={
-            Object {
-              "WebkitFontSmoothing": "antialiased",
-              "borderColor": "rgba(0, 0, 0, 0.10)",
-              "borderStyle": "solid",
-              "borderWidth": 1,
-              "color": "rgba(0, 0, 0, 0.75)",
-              "fontFamily": "OpenSans",
-              "fontSize": 13,
-              "fontWeight": 400,
-              "lineHeight": "unset",
-              "outline": "none",
-              "textRendering": "optimizeLegibility",
-            }
-          }
-          value=""
-        />
-        <div
-          style={
-            Object {
-              "flexShrink": 0,
-              "height": 16,
-            }
-          }
-        />
-        <div
-          style={
-            Object {
-              "alignItems": "center",
-              "display": "flex",
-              "flexDirection": "row",
-              "justifyContent": "center",
-              "minHeight": 64,
-              "width": "100%",
-            }
-          }
-        >
-          <div
-            onClick={[Function]}
-            onMouseDown={[Function]}
-            onMouseUp={[Function]}
-            style={
-              Object {
-                "alignItems": "center",
-                "alignSelf": "center",
-                "backgroundColor": "#e6e6e6",
-                "borderRadius": 50,
-                "cursor": "pointer",
-                "display": "inline-block",
-                "flexDirection": "column",
-                "height": 32,
-                "justifyContent": "center",
-                "lineHeight": "inherit",
-                "minWidth": undefined,
-                "paddingLeft": 24,
-                "paddingRight": 24,
-                "position": "relative",
-                "textAlign": "left",
-                "transform": "none",
-                "transition": "none",
-              }
-            }
-          >
-            <div
-              style={
-                Object {
-                  "alignItems": "center",
-                  "display": "flex",
-                  "flexDirection": "row",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "position": "relative",
-                }
-              }
-            >
-              <span
-                className="css-1"
-              >
-                Set value
-              </span>
-            </div>
-          </div>
-          <div
-            style={
-              Object {
-                "height": 8,
-                "width": 8,
-              }
-            }
-          />
-          <div
-            onClick={[Function]}
-            onMouseDown={[Function]}
-            onMouseUp={[Function]}
-            style={
-              Object {
-                "alignItems": "center",
-                "alignSelf": "center",
-                "backgroundColor": "#e6e6e6",
-                "borderRadius": 50,
-                "cursor": "pointer",
-                "display": "inline-block",
-                "flexDirection": "column",
-                "height": 32,
-                "justifyContent": "center",
-                "lineHeight": "inherit",
-                "minWidth": undefined,
-                "paddingLeft": 24,
-                "paddingRight": 24,
-                "position": "relative",
-                "textAlign": "left",
-                "transform": "none",
-                "transition": "none",
-              }
-            }
-          >
-            <div
-              style={
-                Object {
-                  "alignItems": "center",
-                  "display": "flex",
-                  "flexDirection": "row",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "position": "relative",
-                }
-              }
-            >
-              <span
-                className="css-1"
-              >
-                Set selection
-              </span>
-            </div>
-          </div>
-          <div
-            style={
-              Object {
-                "height": 8,
-                "width": 8,
-              }
-            }
-          />
-          <div
-            onClick={[Function]}
-            onMouseDown={[Function]}
-            onMouseUp={[Function]}
-            style={
-              Object {
-                "alignItems": "center",
-                "alignSelf": "center",
-                "backgroundColor": "#e6e6e6",
-                "borderRadius": 50,
-                "cursor": "pointer",
-                "display": "inline-block",
-                "flexDirection": "column",
-                "height": 32,
-                "justifyContent": "center",
-                "lineHeight": "inherit",
-                "minWidth": undefined,
-                "paddingLeft": 24,
-                "paddingRight": 24,
-                "position": "relative",
-                "textAlign": "left",
-                "transform": "none",
-                "transition": "none",
-              }
-            }
-          >
-            <div
-              style={
-                Object {
-                  "alignItems": "center",
-                  "display": "flex",
-                  "flexDirection": "row",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "position": "relative",
-                }
-              }
-            >
-              <span
-                className="css-1"
-              >
-                Run test
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        style={
-          Object {
-            "flexShrink": 0,
-            "height": 16,
-          }
-        }
-      />
-      <div
-        style={
-          Object {
-            "alignItems": "stretch",
-            "display": "flex",
-            "flexDirection": "column",
-            "justifyContent": "flex-start",
-            "width": "100%",
-          }
-        }
-      >
-        <style>
-          ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
-                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
-        </style>
-        <input
-          onBlur={[Function]}
-          onChange={[Function]}
-          onClick={[Function]}
-          onCompositionEnd={[Function]}
-          onCompositionStart={[Function]}
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
-          style={
-            Object {
-              "WebkitFontSmoothing": "antialiased",
-              "borderColor": "rgba(0, 0, 0, 0.10)",
-              "borderStyle": "solid",
-              "borderWidth": 1,
-              "color": "rgba(0, 0, 0, 0.75)",
-              "fontFamily": "OpenSans",
-              "fontSize": 13,
-              "fontWeight": 400,
-              "lineHeight": "unset",
-              "outline": "none",
-              "textRendering": "optimizeLegibility",
-            }
-          }
-          value=""
-        />
-        <div
-          style={
-            Object {
-              "flexShrink": 0,
-              "height": 16,
-            }
-          }
-        />
-        <div
-          style={
-            Object {
-              "alignItems": "center",
-              "display": "flex",
-              "flexDirection": "row",
-              "justifyContent": "center",
-              "minHeight": 64,
-              "width": "100%",
-            }
-          }
-        >
-          <div
-            onClick={[Function]}
-            onMouseDown={[Function]}
-            onMouseUp={[Function]}
-            style={
-              Object {
-                "alignItems": "center",
-                "alignSelf": "center",
-                "backgroundColor": "#e6e6e6",
-                "borderRadius": 50,
-                "cursor": "pointer",
-                "display": "inline-block",
-                "flexDirection": "column",
-                "height": 32,
-                "justifyContent": "center",
-                "lineHeight": "inherit",
-                "minWidth": undefined,
-                "paddingLeft": 24,
-                "paddingRight": 24,
-                "position": "relative",
-                "textAlign": "left",
-                "transform": "none",
-                "transition": "none",
-              }
-            }
-          >
-            <div
-              style={
-                Object {
-                  "alignItems": "center",
-                  "display": "flex",
-                  "flexDirection": "row",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "position": "relative",
-                }
-              }
-            >
-              <span
-                className="css-1"
-              >
-                Insert 'foo' (Enter)
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      id="modal-root"
-    />
-  </div>,
-  <div
-    pointerEvents="box-none"
-    style={
-      Object {
-        "position": "absolute",
-      }
-    }
-  />,
-]
-`;
-
 exports[`Storyshots Common Dropdown 1`] = `
 Array [
   .css-0,
@@ -96409,39 +95872,1420 @@ Array [
     <div
       style={
         Object {
-          "padding": 20,
+          "height": "100%",
+          "overflow": "auto",
+          "width": "100%",
+        }
+      }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "padding": 20,
+            }
+          }
+        >
+          <style>
+            ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+          </style>
+          <input
+            onBlur={[Function]}
+            onChange={[Function]}
+            onClick={[Function]}
+            onCompositionEnd={[Function]}
+            onCompositionStart={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            style={
+              Object {
+                "WebkitFontSmoothing": "antialiased",
+                "borderColor": "rgba(0, 0, 0, 0.10)",
+                "borderStyle": "solid",
+                "borderWidth": 1,
+                "color": "rgba(0, 0, 0, 0.75)",
+                "fontFamily": "OpenSans",
+                "fontSize": 13,
+                "fontWeight": 400,
+                "lineHeight": "unset",
+                "outline": "none",
+                "textRendering": "optimizeLegibility",
+              }
+            }
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      id="modal-root"
+    />
+  </div>,
+  <div
+    pointerEvents="box-none"
+    style={
+      Object {
+        "position": "absolute",
+      }
+    }
+  />,
+]
+`;
+
+exports[`Storyshots Common/Plain input Controlled input playground (multiline) 1`] = `
+Array [
+  .css-0,
+[data-css-0] {
+  font-size: 13px;
+  line-height: 17px;
+  color: rgba(0, 0, 0, 0.75);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: OpenSans;
+  font-weight: 400;
+}
+
+.css-1,
+[data-css-1] {
+  font-size: 14px;
+  line-height: 18px;
+  color: rgba(0, 0, 0, 0.75);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: OpenSans;
+  font-weight: 600;
+  text-align: center;
+  white-space: pre;
+}
+
+<div
+    style={
+      Object {
+        "height": "100%",
+        "width": "100%",
+      }
+    }
+  >
+    <div
+      style={
+        Object {
+          "height": "100%",
+          "overflow": "auto",
+          "width": "100%",
+        }
+      }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "padding": 20,
+            }
+          }
+        >
+          <div
+            style={
+              Object {
+                "alignItems": "stretch",
+                "display": "flex",
+                "flexDirection": "column",
+                "justifyContent": "flex-start",
+                "padding": 16,
+                "width": "100%",
+              }
+            }
+          >
+            <span
+              className="css-0"
+            >
+              Basic controlled inputs
+            </span>
+            <div
+              style={
+                Object {
+                  "flexShrink": 0,
+                  "height": 16,
+                }
+              }
+            />
+            <style>
+              ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+            </style>
+            <textarea
+              onBlur={[Function]}
+              onChange={[Function]}
+              onClick={[Function]}
+              onCompositionEnd={[Function]}
+              onCompositionStart={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              placeholder="type=\\"text\\""
+              rows={2}
+              style={
+                Object {
+                  "WebkitFontSmoothing": "antialiased",
+                  "borderColor": "rgba(0, 0, 0, 0.10)",
+                  "borderStyle": "solid",
+                  "borderWidth": 1,
+                  "color": "rgba(0, 0, 0, 0.75)",
+                  "fontFamily": "OpenSans",
+                  "fontSize": 13,
+                  "fontWeight": 400,
+                  "height": "initial",
+                  "lineHeight": "17px",
+                  "minHeight": 26,
+                  "outline": "none",
+                  "overflowY": "hidden",
+                  "paddingBottom": 0,
+                  "paddingTop": 0,
+                  "resize": "none",
+                  "textRendering": "optimizeLegibility",
+                  "width": "100%",
+                }
+              }
+              value=""
+            />
+            <div
+              style={
+                Object {
+                  "flexShrink": 0,
+                  "height": 16,
+                }
+              }
+            />
+            <style>
+              ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+            </style>
+            <textarea
+              onBlur={[Function]}
+              onChange={[Function]}
+              onClick={[Function]}
+              onCompositionEnd={[Function]}
+              onCompositionStart={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              placeholder="type=\\"password\\""
+              rows={2}
+              style={
+                Object {
+                  "WebkitFontSmoothing": "antialiased",
+                  "borderColor": "rgba(0, 0, 0, 0.10)",
+                  "borderStyle": "solid",
+                  "borderWidth": 1,
+                  "color": "rgba(0, 0, 0, 0.75)",
+                  "fontFamily": "OpenSans",
+                  "fontSize": 13,
+                  "fontWeight": 400,
+                  "height": "initial",
+                  "lineHeight": "17px",
+                  "minHeight": 26,
+                  "outline": "none",
+                  "overflowY": "hidden",
+                  "paddingBottom": 0,
+                  "paddingTop": 0,
+                  "resize": "none",
+                  "textRendering": "optimizeLegibility",
+                  "width": "100%",
+                }
+              }
+              value=""
+            />
+            <div
+              style={
+                Object {
+                  "flexShrink": 0,
+                  "height": 16,
+                }
+              }
+            />
+            <style>
+              ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+            </style>
+            <textarea
+              onBlur={[Function]}
+              onChange={[Function]}
+              onClick={[Function]}
+              onCompositionEnd={[Function]}
+              onCompositionStart={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              placeholder="type=\\"number\\" (desktop only)"
+              rows={2}
+              style={
+                Object {
+                  "WebkitFontSmoothing": "antialiased",
+                  "borderColor": "rgba(0, 0, 0, 0.10)",
+                  "borderStyle": "solid",
+                  "borderWidth": 1,
+                  "color": "rgba(0, 0, 0, 0.75)",
+                  "fontFamily": "OpenSans",
+                  "fontSize": 13,
+                  "fontWeight": 400,
+                  "height": "initial",
+                  "lineHeight": "17px",
+                  "minHeight": 26,
+                  "outline": "none",
+                  "overflowY": "hidden",
+                  "paddingBottom": 0,
+                  "paddingTop": 0,
+                  "resize": "none",
+                  "textRendering": "optimizeLegibility",
+                  "width": "100%",
+                }
+              }
+              value=""
+            />
+            <div
+              style={
+                Object {
+                  "flexShrink": 0,
+                  "height": 16,
+                }
+              }
+            />
+            <div
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "display": "flex",
+                  "flexDirection": "column",
+                  "justifyContent": "flex-start",
+                  "width": "100%",
+                }
+              }
+            >
+              <span
+                className="css-0"
+              >
+                Live mutations
+              </span>
+              <div
+                style={
+                  Object {
+                    "flexShrink": 0,
+                    "height": 16,
+                  }
+                }
+              />
+              <style>
+                ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+              </style>
+              <textarea
+                onBlur={[Function]}
+                onChange={[Function]}
+                onClick={[Function]}
+                onCompositionEnd={[Function]}
+                onCompositionStart={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                rows={2}
+                style={
+                  Object {
+                    "WebkitFontSmoothing": "antialiased",
+                    "borderColor": "rgba(0, 0, 0, 0.10)",
+                    "borderStyle": "solid",
+                    "borderWidth": 1,
+                    "color": "rgba(0, 0, 0, 0.75)",
+                    "fontFamily": "OpenSans",
+                    "fontSize": 13,
+                    "fontWeight": 400,
+                    "height": "initial",
+                    "lineHeight": "17px",
+                    "minHeight": 26,
+                    "outline": "none",
+                    "overflowY": "hidden",
+                    "paddingBottom": 0,
+                    "paddingTop": 0,
+                    "resize": "none",
+                    "textRendering": "optimizeLegibility",
+                    "width": "100%",
+                  }
+                }
+                value=""
+              />
+              <div
+                style={
+                  Object {
+                    "flexShrink": 0,
+                    "height": 16,
+                  }
+                }
+              />
+              <div
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "display": "flex",
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                    "minHeight": 64,
+                    "width": "100%",
+                  }
+                }
+              >
+                <div
+                  onClick={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseUp={[Function]}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "alignSelf": "center",
+                      "backgroundColor": "#e6e6e6",
+                      "borderRadius": 50,
+                      "cursor": "pointer",
+                      "display": "inline-block",
+                      "flexDirection": "column",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "lineHeight": "inherit",
+                      "minWidth": undefined,
+                      "paddingLeft": 24,
+                      "paddingRight": 24,
+                      "position": "relative",
+                      "textAlign": "left",
+                      "transform": "none",
+                      "transition": "none",
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "alignItems": "center",
+                        "display": "flex",
+                        "flexDirection": "row",
+                        "height": "100%",
+                        "justifyContent": "center",
+                        "position": "relative",
+                      }
+                    }
+                  >
+                    <span
+                      className="css-1"
+                    >
+                      Set value
+                    </span>
+                  </div>
+                </div>
+                <div
+                  style={
+                    Object {
+                      "height": 8,
+                      "width": 8,
+                    }
+                  }
+                />
+                <div
+                  onClick={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseUp={[Function]}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "alignSelf": "center",
+                      "backgroundColor": "#e6e6e6",
+                      "borderRadius": 50,
+                      "cursor": "pointer",
+                      "display": "inline-block",
+                      "flexDirection": "column",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "lineHeight": "inherit",
+                      "minWidth": undefined,
+                      "paddingLeft": 24,
+                      "paddingRight": 24,
+                      "position": "relative",
+                      "textAlign": "left",
+                      "transform": "none",
+                      "transition": "none",
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "alignItems": "center",
+                        "display": "flex",
+                        "flexDirection": "row",
+                        "height": "100%",
+                        "justifyContent": "center",
+                        "position": "relative",
+                      }
+                    }
+                  >
+                    <span
+                      className="css-1"
+                    >
+                      Set selection
+                    </span>
+                  </div>
+                </div>
+                <div
+                  style={
+                    Object {
+                      "height": 8,
+                      "width": 8,
+                    }
+                  }
+                />
+                <div
+                  onClick={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseUp={[Function]}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "alignSelf": "center",
+                      "backgroundColor": "#e6e6e6",
+                      "borderRadius": 50,
+                      "cursor": "pointer",
+                      "display": "inline-block",
+                      "flexDirection": "column",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "lineHeight": "inherit",
+                      "minWidth": undefined,
+                      "paddingLeft": 24,
+                      "paddingRight": 24,
+                      "position": "relative",
+                      "textAlign": "left",
+                      "transform": "none",
+                      "transition": "none",
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "alignItems": "center",
+                        "display": "flex",
+                        "flexDirection": "row",
+                        "height": "100%",
+                        "justifyContent": "center",
+                        "position": "relative",
+                      }
+                    }
+                  >
+                    <span
+                      className="css-1"
+                    >
+                      Run test
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              style={
+                Object {
+                  "flexShrink": 0,
+                  "height": 16,
+                }
+              }
+            />
+            <div
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "display": "flex",
+                  "flexDirection": "column",
+                  "justifyContent": "flex-start",
+                  "width": "100%",
+                }
+              }
+            >
+              <style>
+                ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+              </style>
+              <textarea
+                onBlur={[Function]}
+                onChange={[Function]}
+                onClick={[Function]}
+                onCompositionEnd={[Function]}
+                onCompositionStart={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                rows={2}
+                style={
+                  Object {
+                    "WebkitFontSmoothing": "antialiased",
+                    "borderColor": "rgba(0, 0, 0, 0.10)",
+                    "borderStyle": "solid",
+                    "borderWidth": 1,
+                    "color": "rgba(0, 0, 0, 0.75)",
+                    "fontFamily": "OpenSans",
+                    "fontSize": 13,
+                    "fontWeight": 400,
+                    "height": "initial",
+                    "lineHeight": "17px",
+                    "minHeight": 26,
+                    "outline": "none",
+                    "overflowY": "hidden",
+                    "paddingBottom": 0,
+                    "paddingTop": 0,
+                    "resize": "none",
+                    "textRendering": "optimizeLegibility",
+                    "width": "100%",
+                  }
+                }
+                value=""
+              />
+              <div
+                style={
+                  Object {
+                    "flexShrink": 0,
+                    "height": 16,
+                  }
+                }
+              />
+              <div
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "display": "flex",
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                    "minHeight": 64,
+                    "width": "100%",
+                  }
+                }
+              >
+                <div
+                  onClick={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseUp={[Function]}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "alignSelf": "center",
+                      "backgroundColor": "#e6e6e6",
+                      "borderRadius": 50,
+                      "cursor": "pointer",
+                      "display": "inline-block",
+                      "flexDirection": "column",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "lineHeight": "inherit",
+                      "minWidth": undefined,
+                      "paddingLeft": 24,
+                      "paddingRight": 24,
+                      "position": "relative",
+                      "textAlign": "left",
+                      "transform": "none",
+                      "transition": "none",
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "alignItems": "center",
+                        "display": "flex",
+                        "flexDirection": "row",
+                        "height": "100%",
+                        "justifyContent": "center",
+                        "position": "relative",
+                      }
+                    }
+                  >
+                    <span
+                      className="css-1"
+                    >
+                      Insert 'foo' (Enter)
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      id="modal-root"
+    />
+  </div>,
+  <div
+    pointerEvents="box-none"
+    style={
+      Object {
+        "position": "absolute",
+      }
+    }
+  />,
+]
+`;
+
+exports[`Storyshots Common/Plain input Controlled input playground 1`] = `
+Array [
+  .css-0,
+[data-css-0] {
+  font-size: 13px;
+  line-height: 17px;
+  color: rgba(0, 0, 0, 0.75);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: OpenSans;
+  font-weight: 400;
+}
+
+.css-1,
+[data-css-1] {
+  font-size: 14px;
+  line-height: 18px;
+  color: rgba(0, 0, 0, 0.75);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: OpenSans;
+  font-weight: 600;
+  text-align: center;
+  white-space: pre;
+}
+
+<div
+    style={
+      Object {
+        "height": "100%",
+        "width": "100%",
+      }
+    }
+  >
+    <div
+      style={
+        Object {
+          "height": "100%",
+          "overflow": "auto",
+          "width": "100%",
+        }
+      }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "padding": 20,
+            }
+          }
+        >
+          <div
+            style={
+              Object {
+                "alignItems": "stretch",
+                "display": "flex",
+                "flexDirection": "column",
+                "justifyContent": "flex-start",
+                "padding": 16,
+                "width": "100%",
+              }
+            }
+          >
+            <span
+              className="css-0"
+            >
+              Basic controlled inputs
+            </span>
+            <div
+              style={
+                Object {
+                  "flexShrink": 0,
+                  "height": 16,
+                }
+              }
+            />
+            <style>
+              ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+            </style>
+            <input
+              onBlur={[Function]}
+              onChange={[Function]}
+              onClick={[Function]}
+              onCompositionEnd={[Function]}
+              onCompositionStart={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              placeholder="type=\\"text\\""
+              style={
+                Object {
+                  "WebkitFontSmoothing": "antialiased",
+                  "borderColor": "rgba(0, 0, 0, 0.10)",
+                  "borderStyle": "solid",
+                  "borderWidth": 1,
+                  "color": "rgba(0, 0, 0, 0.75)",
+                  "fontFamily": "OpenSans",
+                  "fontSize": 13,
+                  "fontWeight": 400,
+                  "lineHeight": "unset",
+                  "outline": "none",
+                  "textRendering": "optimizeLegibility",
+                }
+              }
+              value=""
+            />
+            <div
+              style={
+                Object {
+                  "flexShrink": 0,
+                  "height": 16,
+                }
+              }
+            />
+            <style>
+              ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+            </style>
+            <input
+              onBlur={[Function]}
+              onChange={[Function]}
+              onClick={[Function]}
+              onCompositionEnd={[Function]}
+              onCompositionStart={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              placeholder="type=\\"password\\""
+              style={
+                Object {
+                  "WebkitFontSmoothing": "antialiased",
+                  "borderColor": "rgba(0, 0, 0, 0.10)",
+                  "borderStyle": "solid",
+                  "borderWidth": 1,
+                  "color": "rgba(0, 0, 0, 0.75)",
+                  "fontFamily": "OpenSans",
+                  "fontSize": 13,
+                  "fontWeight": 400,
+                  "lineHeight": "unset",
+                  "outline": "none",
+                  "textRendering": "optimizeLegibility",
+                }
+              }
+              type="password"
+              value=""
+            />
+            <div
+              style={
+                Object {
+                  "flexShrink": 0,
+                  "height": 16,
+                }
+              }
+            />
+            <style>
+              ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+            </style>
+            <input
+              onBlur={[Function]}
+              onChange={[Function]}
+              onClick={[Function]}
+              onCompositionEnd={[Function]}
+              onCompositionStart={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              placeholder="type=\\"number\\" (desktop only)"
+              style={
+                Object {
+                  "WebkitFontSmoothing": "antialiased",
+                  "borderColor": "rgba(0, 0, 0, 0.10)",
+                  "borderStyle": "solid",
+                  "borderWidth": 1,
+                  "color": "rgba(0, 0, 0, 0.75)",
+                  "fontFamily": "OpenSans",
+                  "fontSize": 13,
+                  "fontWeight": 400,
+                  "lineHeight": "unset",
+                  "outline": "none",
+                  "textRendering": "optimizeLegibility",
+                }
+              }
+              type="number"
+              value=""
+            />
+            <div
+              style={
+                Object {
+                  "flexShrink": 0,
+                  "height": 16,
+                }
+              }
+            />
+            <div
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "display": "flex",
+                  "flexDirection": "column",
+                  "justifyContent": "flex-start",
+                  "width": "100%",
+                }
+              }
+            >
+              <span
+                className="css-0"
+              >
+                Live mutations
+              </span>
+              <div
+                style={
+                  Object {
+                    "flexShrink": 0,
+                    "height": 16,
+                  }
+                }
+              />
+              <style>
+                ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+              </style>
+              <input
+                onBlur={[Function]}
+                onChange={[Function]}
+                onClick={[Function]}
+                onCompositionEnd={[Function]}
+                onCompositionStart={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                style={
+                  Object {
+                    "WebkitFontSmoothing": "antialiased",
+                    "borderColor": "rgba(0, 0, 0, 0.10)",
+                    "borderStyle": "solid",
+                    "borderWidth": 1,
+                    "color": "rgba(0, 0, 0, 0.75)",
+                    "fontFamily": "OpenSans",
+                    "fontSize": 13,
+                    "fontWeight": 400,
+                    "lineHeight": "unset",
+                    "outline": "none",
+                    "textRendering": "optimizeLegibility",
+                  }
+                }
+                value=""
+              />
+              <div
+                style={
+                  Object {
+                    "flexShrink": 0,
+                    "height": 16,
+                  }
+                }
+              />
+              <div
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "display": "flex",
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                    "minHeight": 64,
+                    "width": "100%",
+                  }
+                }
+              >
+                <div
+                  onClick={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseUp={[Function]}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "alignSelf": "center",
+                      "backgroundColor": "#e6e6e6",
+                      "borderRadius": 50,
+                      "cursor": "pointer",
+                      "display": "inline-block",
+                      "flexDirection": "column",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "lineHeight": "inherit",
+                      "minWidth": undefined,
+                      "paddingLeft": 24,
+                      "paddingRight": 24,
+                      "position": "relative",
+                      "textAlign": "left",
+                      "transform": "none",
+                      "transition": "none",
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "alignItems": "center",
+                        "display": "flex",
+                        "flexDirection": "row",
+                        "height": "100%",
+                        "justifyContent": "center",
+                        "position": "relative",
+                      }
+                    }
+                  >
+                    <span
+                      className="css-1"
+                    >
+                      Set value
+                    </span>
+                  </div>
+                </div>
+                <div
+                  style={
+                    Object {
+                      "height": 8,
+                      "width": 8,
+                    }
+                  }
+                />
+                <div
+                  onClick={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseUp={[Function]}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "alignSelf": "center",
+                      "backgroundColor": "#e6e6e6",
+                      "borderRadius": 50,
+                      "cursor": "pointer",
+                      "display": "inline-block",
+                      "flexDirection": "column",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "lineHeight": "inherit",
+                      "minWidth": undefined,
+                      "paddingLeft": 24,
+                      "paddingRight": 24,
+                      "position": "relative",
+                      "textAlign": "left",
+                      "transform": "none",
+                      "transition": "none",
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "alignItems": "center",
+                        "display": "flex",
+                        "flexDirection": "row",
+                        "height": "100%",
+                        "justifyContent": "center",
+                        "position": "relative",
+                      }
+                    }
+                  >
+                    <span
+                      className="css-1"
+                    >
+                      Set selection
+                    </span>
+                  </div>
+                </div>
+                <div
+                  style={
+                    Object {
+                      "height": 8,
+                      "width": 8,
+                    }
+                  }
+                />
+                <div
+                  onClick={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseUp={[Function]}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "alignSelf": "center",
+                      "backgroundColor": "#e6e6e6",
+                      "borderRadius": 50,
+                      "cursor": "pointer",
+                      "display": "inline-block",
+                      "flexDirection": "column",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "lineHeight": "inherit",
+                      "minWidth": undefined,
+                      "paddingLeft": 24,
+                      "paddingRight": 24,
+                      "position": "relative",
+                      "textAlign": "left",
+                      "transform": "none",
+                      "transition": "none",
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "alignItems": "center",
+                        "display": "flex",
+                        "flexDirection": "row",
+                        "height": "100%",
+                        "justifyContent": "center",
+                        "position": "relative",
+                      }
+                    }
+                  >
+                    <span
+                      className="css-1"
+                    >
+                      Run test
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              style={
+                Object {
+                  "flexShrink": 0,
+                  "height": 16,
+                }
+              }
+            />
+            <div
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "display": "flex",
+                  "flexDirection": "column",
+                  "justifyContent": "flex-start",
+                  "width": "100%",
+                }
+              }
+            >
+              <style>
+                ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+              </style>
+              <input
+                onBlur={[Function]}
+                onChange={[Function]}
+                onClick={[Function]}
+                onCompositionEnd={[Function]}
+                onCompositionStart={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                style={
+                  Object {
+                    "WebkitFontSmoothing": "antialiased",
+                    "borderColor": "rgba(0, 0, 0, 0.10)",
+                    "borderStyle": "solid",
+                    "borderWidth": 1,
+                    "color": "rgba(0, 0, 0, 0.75)",
+                    "fontFamily": "OpenSans",
+                    "fontSize": 13,
+                    "fontWeight": 400,
+                    "lineHeight": "unset",
+                    "outline": "none",
+                    "textRendering": "optimizeLegibility",
+                  }
+                }
+                value=""
+              />
+              <div
+                style={
+                  Object {
+                    "flexShrink": 0,
+                    "height": 16,
+                  }
+                }
+              />
+              <div
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "display": "flex",
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                    "minHeight": 64,
+                    "width": "100%",
+                  }
+                }
+              >
+                <div
+                  onClick={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseUp={[Function]}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "alignSelf": "center",
+                      "backgroundColor": "#e6e6e6",
+                      "borderRadius": 50,
+                      "cursor": "pointer",
+                      "display": "inline-block",
+                      "flexDirection": "column",
+                      "height": 32,
+                      "justifyContent": "center",
+                      "lineHeight": "inherit",
+                      "minWidth": undefined,
+                      "paddingLeft": 24,
+                      "paddingRight": 24,
+                      "position": "relative",
+                      "textAlign": "left",
+                      "transform": "none",
+                      "transition": "none",
+                    }
+                  }
+                >
+                  <div
+                    style={
+                      Object {
+                        "alignItems": "center",
+                        "display": "flex",
+                        "flexDirection": "row",
+                        "height": "100%",
+                        "justifyContent": "center",
+                        "position": "relative",
+                      }
+                    }
+                  >
+                    <span
+                      className="css-1"
+                    >
+                      Insert 'foo' (Enter)
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      id="modal-root"
+    />
+  </div>,
+  <div
+    pointerEvents="box-none"
+    style={
+      Object {
+        "position": "absolute",
+      }
+    }
+  />,
+]
+`;
+
+exports[`Storyshots Common/Plain input Different text type 1`] = `
+Array [
+  <div
+    style={
+      Object {
+        "height": "100%",
+        "width": "100%",
+      }
+    }
+  >
+    <div
+      style={
+        Object {
+          "height": "100%",
+          "overflow": "auto",
+          "width": "100%",
         }
       }
     >
-      <style>
-        ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
-                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
-      </style>
-      <input
-        onBlur={[Function]}
-        onChange={[Function]}
-        onClick={[Function]}
-        onCompositionEnd={[Function]}
-        onCompositionStart={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        style={
-          Object {
-            "WebkitFontSmoothing": "antialiased",
-            "borderColor": "rgba(0, 0, 0, 0.10)",
-            "borderStyle": "solid",
-            "borderWidth": 1,
-            "color": "rgba(0, 0, 0, 0.75)",
-            "fontFamily": "OpenSans",
-            "fontSize": 13,
-            "fontWeight": 400,
-            "lineHeight": "unset",
-            "outline": "none",
-            "textRendering": "optimizeLegibility",
+      <div>
+        <div
+          style={
+            Object {
+              "padding": 20,
+            }
           }
+        >
+          <style>
+            ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+          </style>
+          <input
+            onBlur={[Function]}
+            onChange={[Function]}
+            onClick={[Function]}
+            onCompositionEnd={[Function]}
+            onCompositionStart={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            style={
+              Object {
+                "WebkitFontSmoothing": "antialiased",
+                "borderColor": "rgba(0, 0, 0, 0.10)",
+                "borderStyle": "solid",
+                "borderWidth": 1,
+                "color": "rgba(0, 0, 0, 0.75)",
+                "fontFamily": "OpenSans",
+                "fontSize": 13,
+                "fontWeight": 800,
+                "lineHeight": "unset",
+                "outline": "none",
+                "textRendering": "optimizeLegibility",
+              }
+            }
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      id="modal-root"
+    />
+  </div>,
+  <div
+    pointerEvents="box-none"
+    style={
+      Object {
+        "position": "absolute",
+      }
+    }
+  />,
+]
+`;
+
+exports[`Storyshots Common/Plain input Flexable 1`] = `
+Array [
+  .css-0,
+[data-css-0] {
+  font-size: 13px;
+  line-height: 17px;
+  color: rgba(0, 0, 0, 0.75);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: OpenSans;
+  font-weight: 400;
+}
+
+<div
+    style={
+      Object {
+        "height": "100%",
+        "width": "100%",
+      }
+    }
+  >
+    <div
+      style={
+        Object {
+          "height": "100%",
+          "overflow": "auto",
+          "width": "100%",
         }
-      />
+      }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "padding": 20,
+            }
+          }
+        >
+          <div
+            style={
+              Object {
+                "alignItems": "stretch",
+                "display": "flex",
+                "flexDirection": "column",
+                "justifyContent": "flex-start",
+                "width": "100%",
+              }
+            }
+          >
+            <div
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "backgroundColor": "#ff6f21",
+                  "display": "flex",
+                  "flexDirection": "row",
+                  "justifyContent": "flex-start",
+                  "padding": 10,
+                  "width": "100%",
+                }
+              }
+            >
+              <style>
+                ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+              </style>
+              <input
+                onBlur={[Function]}
+                onChange={[Function]}
+                onClick={[Function]}
+                onCompositionEnd={[Function]}
+                onCompositionStart={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                style={
+                  Object {
+                    "WebkitFontSmoothing": "antialiased",
+                    "borderColor": "rgba(0, 0, 0, 0.10)",
+                    "borderStyle": "solid",
+                    "borderWidth": 1,
+                    "color": "rgba(0, 0, 0, 0.75)",
+                    "flex": 1,
+                    "fontFamily": "OpenSans",
+                    "fontSize": 13,
+                    "fontWeight": 400,
+                    "lineHeight": "unset",
+                    "minWidth": 0,
+                    "outline": "none",
+                    "textRendering": "optimizeLegibility",
+                    "width": "100%",
+                  }
+                }
+              />
+              <div
+                style={
+                  Object {
+                    "flexShrink": 0,
+                    "width": 16,
+                  }
+                }
+              />
+              <div
+                style={
+                  Object {
+                    "backgroundColor": "#3DCCA6",
+                    "width": 200,
+                  }
+                }
+              />
+            </div>
+            <div
+              style={
+                Object {
+                  "flexShrink": 0,
+                  "height": 24,
+                }
+              }
+            />
+            <span
+              className="css-0"
+            >
+              Resize your window to see the text input flex
+            </span>
+          </div>
+        </div>
+      </div>
     </div>
     <div
       id="modal-root"
@@ -96458,7 +97302,7 @@ Array [
 ]
 `;
 
-exports[`Storyshots Common/Plain input Different text type 1`] = `
+exports[`Storyshots Common/Plain input Larger text type 1`] = `
 Array [
   <div
     style={
@@ -96471,104 +97315,17 @@ Array [
     <div
       style={
         Object {
-          "padding": 20,
-        }
-      }
-    >
-      <style>
-        ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
-                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
-      </style>
-      <input
-        onBlur={[Function]}
-        onChange={[Function]}
-        onClick={[Function]}
-        onCompositionEnd={[Function]}
-        onCompositionStart={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        style={
-          Object {
-            "WebkitFontSmoothing": "antialiased",
-            "borderColor": "rgba(0, 0, 0, 0.10)",
-            "borderStyle": "solid",
-            "borderWidth": 1,
-            "color": "rgba(0, 0, 0, 0.75)",
-            "fontFamily": "OpenSans",
-            "fontSize": 13,
-            "fontWeight": 800,
-            "lineHeight": "unset",
-            "outline": "none",
-            "textRendering": "optimizeLegibility",
-          }
-        }
-      />
-    </div>
-    <div
-      id="modal-root"
-    />
-  </div>,
-  <div
-    pointerEvents="box-none"
-    style={
-      Object {
-        "position": "absolute",
-      }
-    }
-  />,
-]
-`;
-
-exports[`Storyshots Common/Plain input Flexable 1`] = `
-Array [
-  .css-0,
-[data-css-0] {
-  font-size: 13px;
-  line-height: 17px;
-  color: rgba(0, 0, 0, 0.75);
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  font-family: OpenSans;
-  font-weight: 400;
-}
-
-<div
-    style={
-      Object {
-        "height": "100%",
-        "width": "100%",
-      }
-    }
-  >
-    <div
-      style={
-        Object {
-          "padding": 20,
+          "height": "100%",
+          "overflow": "auto",
+          "width": "100%",
         }
       }
     >
-      <div
-        style={
-          Object {
-            "alignItems": "stretch",
-            "display": "flex",
-            "flexDirection": "column",
-            "justifyContent": "flex-start",
-            "width": "100%",
-          }
-        }
-      >
+      <div>
         <div
           style={
             Object {
-              "alignItems": "stretch",
-              "backgroundColor": "#ff6f21",
-              "display": "flex",
-              "flexDirection": "row",
-              "justifyContent": "flex-start",
-              "padding": 10,
-              "width": "100%",
+              "padding": 20,
             }
           }
         >
@@ -96592,48 +97349,16 @@ Array [
                 "borderStyle": "solid",
                 "borderWidth": 1,
                 "color": "rgba(0, 0, 0, 0.75)",
-                "flex": 1,
                 "fontFamily": "OpenSans",
-                "fontSize": 13,
-                "fontWeight": 400,
+                "fontSize": 24,
+                "fontWeight": 700,
                 "lineHeight": "unset",
-                "minWidth": 0,
                 "outline": "none",
                 "textRendering": "optimizeLegibility",
-                "width": "100%",
-              }
-            }
-          />
-          <div
-            style={
-              Object {
-                "flexShrink": 0,
-                "width": 16,
-              }
-            }
-          />
-          <div
-            style={
-              Object {
-                "backgroundColor": "#3DCCA6",
-                "width": 200,
               }
             }
           />
         </div>
-        <div
-          style={
-            Object {
-              "flexShrink": 0,
-              "height": 24,
-            }
-          }
-        />
-        <span
-          className="css-0"
-        >
-          Resize your window to see the text input flex
-        </span>
       </div>
     </div>
     <div
@@ -96651,68 +97376,6 @@ Array [
 ]
 `;
 
-exports[`Storyshots Common/Plain input Larger text type 1`] = `
-Array [
-  <div
-    style={
-      Object {
-        "height": "100%",
-        "width": "100%",
-      }
-    }
-  >
-    <div
-      style={
-        Object {
-          "padding": 20,
-        }
-      }
-    >
-      <style>
-        ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
-                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
-      </style>
-      <input
-        onBlur={[Function]}
-        onChange={[Function]}
-        onClick={[Function]}
-        onCompositionEnd={[Function]}
-        onCompositionStart={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        style={
-          Object {
-            "WebkitFontSmoothing": "antialiased",
-            "borderColor": "rgba(0, 0, 0, 0.10)",
-            "borderStyle": "solid",
-            "borderWidth": 1,
-            "color": "rgba(0, 0, 0, 0.75)",
-            "fontFamily": "OpenSans",
-            "fontSize": 24,
-            "fontWeight": 700,
-            "lineHeight": "unset",
-            "outline": "none",
-            "textRendering": "optimizeLegibility",
-          }
-        }
-      />
-    </div>
-    <div
-      id="modal-root"
-    />
-  </div>,
-  <div
-    pointerEvents="box-none"
-    style={
-      Object {
-        "position": "absolute",
-      }
-    }
-  />,
-]
-`;
-
 exports[`Storyshots Common/Plain input Multiline 1`] = `
 Array [
   <div
@@ -96726,47 +97389,59 @@ Array [
     <div
       style={
         Object {
-          "padding": 20,
+          "height": "100%",
+          "overflow": "auto",
+          "width": "100%",
         }
       }
     >
-      <style>
-        ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
-                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
-      </style>
-      <textarea
-        onBlur={[Function]}
-        onChange={[Function]}
-        onClick={[Function]}
-        onCompositionEnd={[Function]}
-        onCompositionStart={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        rows={2}
-        style={
-          Object {
-            "WebkitFontSmoothing": "antialiased",
-            "borderColor": "rgba(0, 0, 0, 0.10)",
-            "borderStyle": "solid",
-            "borderWidth": 1,
-            "color": "rgba(0, 0, 0, 0.75)",
-            "fontFamily": "OpenSans",
-            "fontSize": 13,
-            "fontWeight": 400,
-            "height": "initial",
-            "lineHeight": "17px",
-            "minHeight": 26,
-            "outline": "none",
-            "overflowY": "hidden",
-            "paddingBottom": 0,
-            "paddingTop": 0,
-            "resize": "none",
-            "textRendering": "optimizeLegibility",
-            "width": "100%",
+      <div>
+        <div
+          style={
+            Object {
+              "padding": 20,
+            }
           }
-        }
-      />
+        >
+          <style>
+            ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+          </style>
+          <textarea
+            onBlur={[Function]}
+            onChange={[Function]}
+            onClick={[Function]}
+            onCompositionEnd={[Function]}
+            onCompositionStart={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            rows={2}
+            style={
+              Object {
+                "WebkitFontSmoothing": "antialiased",
+                "borderColor": "rgba(0, 0, 0, 0.10)",
+                "borderStyle": "solid",
+                "borderWidth": 1,
+                "color": "rgba(0, 0, 0, 0.75)",
+                "fontFamily": "OpenSans",
+                "fontSize": 13,
+                "fontWeight": 400,
+                "height": "initial",
+                "lineHeight": "17px",
+                "minHeight": 26,
+                "outline": "none",
+                "overflowY": "hidden",
+                "paddingBottom": 0,
+                "paddingTop": 0,
+                "resize": "none",
+                "textRendering": "optimizeLegibility",
+                "width": "100%",
+              }
+            }
+          />
+        </div>
+      </div>
     </div>
     <div
       id="modal-root"
@@ -96796,47 +97471,59 @@ Array [
     <div
       style={
         Object {
-          "padding": 20,
+          "height": "100%",
+          "overflow": "auto",
+          "width": "100%",
         }
       }
     >
-      <style>
-        ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
-                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
-      </style>
-      <textarea
-        onBlur={[Function]}
-        onChange={[Function]}
-        onClick={[Function]}
-        onCompositionEnd={[Function]}
-        onCompositionStart={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        rows={4}
-        style={
-          Object {
-            "WebkitFontSmoothing": "antialiased",
-            "borderColor": "rgba(0, 0, 0, 0.10)",
-            "borderStyle": "solid",
-            "borderWidth": 1,
-            "color": "rgba(0, 0, 0, 0.75)",
-            "fontFamily": "OpenSans",
-            "fontSize": 13,
-            "fontWeight": 400,
-            "height": "initial",
-            "lineHeight": "17px",
-            "maxHeight": 136,
-            "minHeight": 52,
-            "outline": "none",
-            "paddingBottom": 0,
-            "paddingTop": 0,
-            "resize": "none",
-            "textRendering": "optimizeLegibility",
-            "width": "100%",
+      <div>
+        <div
+          style={
+            Object {
+              "padding": 20,
+            }
           }
-        }
-      />
+        >
+          <style>
+            ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+          </style>
+          <textarea
+            onBlur={[Function]}
+            onChange={[Function]}
+            onClick={[Function]}
+            onCompositionEnd={[Function]}
+            onCompositionStart={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            rows={4}
+            style={
+              Object {
+                "WebkitFontSmoothing": "antialiased",
+                "borderColor": "rgba(0, 0, 0, 0.10)",
+                "borderStyle": "solid",
+                "borderWidth": 1,
+                "color": "rgba(0, 0, 0, 0.75)",
+                "fontFamily": "OpenSans",
+                "fontSize": 13,
+                "fontWeight": 400,
+                "height": "initial",
+                "lineHeight": "17px",
+                "maxHeight": 136,
+                "minHeight": 52,
+                "outline": "none",
+                "paddingBottom": 0,
+                "paddingTop": 0,
+                "resize": "none",
+                "textRendering": "optimizeLegibility",
+                "width": "100%",
+              }
+            }
+          />
+        </div>
+      </div>
     </div>
     <div
       id="modal-root"
@@ -96866,40 +97553,52 @@ Array [
     <div
       style={
         Object {
-          "padding": 20,
+          "height": "100%",
+          "overflow": "auto",
+          "width": "100%",
         }
       }
     >
-      <style>
-        ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
-                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
-      </style>
-      <input
-        onBlur={[Function]}
-        onChange={[Function]}
-        onClick={[Function]}
-        onCompositionEnd={[Function]}
-        onCompositionStart={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        style={
-          Object {
-            "WebkitFontSmoothing": "antialiased",
-            "borderColor": "rgba(0, 0, 0, 0.10)",
-            "borderStyle": "solid",
-            "borderWidth": 1,
-            "color": "rgba(0, 0, 0, 0.75)",
-            "fontFamily": "OpenSans",
-            "fontSize": 13,
-            "fontWeight": 400,
-            "lineHeight": "unset",
-            "outline": "none",
-            "textRendering": "optimizeLegibility",
+      <div>
+        <div
+          style={
+            Object {
+              "padding": 20,
+            }
           }
-        }
-        type="number"
-      />
+        >
+          <style>
+            ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+          </style>
+          <input
+            onBlur={[Function]}
+            onChange={[Function]}
+            onClick={[Function]}
+            onCompositionEnd={[Function]}
+            onCompositionStart={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            style={
+              Object {
+                "WebkitFontSmoothing": "antialiased",
+                "borderColor": "rgba(0, 0, 0, 0.10)",
+                "borderStyle": "solid",
+                "borderWidth": 1,
+                "color": "rgba(0, 0, 0, 0.75)",
+                "fontFamily": "OpenSans",
+                "fontSize": 13,
+                "fontWeight": 400,
+                "lineHeight": "unset",
+                "outline": "none",
+                "textRendering": "optimizeLegibility",
+              }
+            }
+            type="number"
+          />
+        </div>
+      </div>
     </div>
     <div
       id="modal-root"
@@ -96929,40 +97628,52 @@ Array [
     <div
       style={
         Object {
-          "padding": 20,
+          "height": "100%",
+          "overflow": "auto",
+          "width": "100%",
         }
       }
     >
-      <style>
-        ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
-                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
-      </style>
-      <input
-        onBlur={[Function]}
-        onChange={[Function]}
-        onClick={[Function]}
-        onCompositionEnd={[Function]}
-        onCompositionStart={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        style={
-          Object {
-            "WebkitFontSmoothing": "antialiased",
-            "borderColor": "rgba(0, 0, 0, 0.10)",
-            "borderStyle": "solid",
-            "borderWidth": 1,
-            "color": "rgba(0, 0, 0, 0.75)",
-            "fontFamily": "OpenSans",
-            "fontSize": 13,
-            "fontWeight": 400,
-            "lineHeight": "unset",
-            "outline": "none",
-            "textRendering": "optimizeLegibility",
+      <div>
+        <div
+          style={
+            Object {
+              "padding": 20,
+            }
           }
-        }
-        type="password"
-      />
+        >
+          <style>
+            ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.40); }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+          </style>
+          <input
+            onBlur={[Function]}
+            onChange={[Function]}
+            onClick={[Function]}
+            onCompositionEnd={[Function]}
+            onCompositionStart={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            style={
+              Object {
+                "WebkitFontSmoothing": "antialiased",
+                "borderColor": "rgba(0, 0, 0, 0.10)",
+                "borderStyle": "solid",
+                "borderWidth": 1,
+                "color": "rgba(0, 0, 0, 0.75)",
+                "fontFamily": "OpenSans",
+                "fontSize": 13,
+                "fontWeight": 400,
+                "lineHeight": "unset",
+                "outline": "none",
+                "textRendering": "optimizeLegibility",
+              }
+            }
+            type="password"
+          />
+        </div>
+      </div>
     </div>
     <div
       id="modal-root"
@@ -96992,40 +97703,52 @@ Array [
     <div
       style={
         Object {
-          "padding": 20,
+          "height": "100%",
+          "overflow": "auto",
+          "width": "100%",
         }
       }
     >
-      <style>
-        ::-webkit-input-placeholder { color: blue; }
-                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
-      </style>
-      <input
-        onBlur={[Function]}
-        onChange={[Function]}
-        onClick={[Function]}
-        onCompositionEnd={[Function]}
-        onCompositionStart={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        placeholder="I'm blue!"
-        style={
-          Object {
-            "WebkitFontSmoothing": "antialiased",
-            "borderColor": "rgba(0, 0, 0, 0.10)",
-            "borderStyle": "solid",
-            "borderWidth": 1,
-            "color": "rgba(0, 0, 0, 0.75)",
-            "fontFamily": "OpenSans",
-            "fontSize": 13,
-            "fontWeight": 400,
-            "lineHeight": "unset",
-            "outline": "none",
-            "textRendering": "optimizeLegibility",
+      <div>
+        <div
+          style={
+            Object {
+              "padding": 20,
+            }
           }
-        }
-      />
+        >
+          <style>
+            ::-webkit-input-placeholder { color: blue; }
+                 ::-webkit-outer-spin-button, ::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
+          </style>
+          <input
+            onBlur={[Function]}
+            onChange={[Function]}
+            onClick={[Function]}
+            onCompositionEnd={[Function]}
+            onCompositionStart={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            placeholder="I'm blue!"
+            style={
+              Object {
+                "WebkitFontSmoothing": "antialiased",
+                "borderColor": "rgba(0, 0, 0, 0.10)",
+                "borderStyle": "solid",
+                "borderWidth": 1,
+                "color": "rgba(0, 0, 0, 0.75)",
+                "fontFamily": "OpenSans",
+                "fontSize": 13,
+                "fontWeight": 400,
+                "lineHeight": "unset",
+                "outline": "none",
+                "textRendering": "optimizeLegibility",
+              }
+            }
+          />
+        </div>
+      </div>
     </div>
     <div
       id="modal-root"

From e80be0e950677c6b820e0de86e1d7faf72420a0b Mon Sep 17 00:00:00 2001
From: Daniel Ayoub <danny.a95@gmail.com>
Date: Mon, 24 Sep 2018 09:47:41 -0400
Subject: [PATCH 15/16] native getProps cleanup

---
 shared/common-adapters/plain-input.native.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/shared/common-adapters/plain-input.native.js b/shared/common-adapters/plain-input.native.js
index 304e92091b2b..d352ebca2b6f 100644
--- a/shared/common-adapters/plain-input.native.js
+++ b/shared/common-adapters/plain-input.native.js
@@ -192,7 +192,7 @@ class PlainInput extends Component<InternalProps, State> {
   }
 
   _getProps = () => {
-    const common: any = {
+    const common = {
       ...pick(this.props, ['maxLength', 'value']), // Props we should only passthrough if supplied
       autoCapitalize: this.props.autoCapitalize || 'none',
       autoCorrect: !!this.props.autoCorrect,
@@ -214,9 +214,6 @@ class PlainInput extends Component<InternalProps, State> {
       style: this._getStyle(),
       underlineColorAndroid: 'transparent',
     }
-    if (this.props.maxLength) {
-      common.maxLength = this.props.maxLength
-    }
     if (this.props.multiline) {
       return {
         ...common,

From bbc8dc89933b3f20bdea0c74a9f0ecf835de737a Mon Sep 17 00:00:00 2001
From: Daniel Ayoub <danny.a95@gmail.com>
Date: Tue, 25 Sep 2018 16:36:23 -0400
Subject: [PATCH 16/16] better check for controlled

---
 shared/common-adapters/plain-input.desktop.js | 9 +++++----
 shared/common-adapters/plain-input.native.js  | 9 +++++----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/shared/common-adapters/plain-input.desktop.js b/shared/common-adapters/plain-input.desktop.js
index f7c2baf6b1c8..625c0f8188bd 100644
--- a/shared/common-adapters/plain-input.desktop.js
+++ b/shared/common-adapters/plain-input.desktop.js
@@ -23,6 +23,9 @@ class PlainInput extends React.PureComponent<InternalProps> {
     this._input = ref
   }
 
+  // This is controlled if a value prop is passed
+  _controlled = () => typeof this.props.value === 'string'
+
   _onChange = ({target: {value = ''}}) => {
     this.props.onChangeText && this.props.onChangeText(value)
     this._autoResize()
@@ -75,8 +78,7 @@ class PlainInput extends React.PureComponent<InternalProps> {
   }
 
   transformText = (fn: TextInfo => TextInfo, reflectChange?: boolean) => {
-    const controlled = !!this.props.value
-    if (controlled) {
+    if (this._controlled()) {
       const errMsg =
         'Attempted to use transformText on controlled input component. Use props.value and setSelection instead.'
       logger.error(errMsg)
@@ -114,8 +116,7 @@ class PlainInput extends React.PureComponent<InternalProps> {
   }
 
   setSelection = (s: Selection) => {
-    const controlled = !!this.props.value
-    if (!controlled) {
+    if (!this._controlled()) {
       const errMsg =
         'Attempted to use setSelection on uncontrolled input component. Use transformText instead'
       logger.error(errMsg)
diff --git a/shared/common-adapters/plain-input.native.js b/shared/common-adapters/plain-input.native.js
index d352ebca2b6f..f8bb27e8cbea 100644
--- a/shared/common-adapters/plain-input.native.js
+++ b/shared/common-adapters/plain-input.native.js
@@ -46,6 +46,9 @@ class PlainInput extends Component<InternalProps, State> {
     this._timeoutIDs.push(setTimeout(fn, timeoutMS))
   }
 
+  // This is controlled if a value prop is passed
+  _controlled = () => typeof this.props.value === 'string'
+
   componentWillUnmount() {
     this._timeoutIDs.forEach(clearTimeout)
   }
@@ -57,8 +60,7 @@ class PlainInput extends Component<InternalProps, State> {
   }
 
   transformText = (fn: TextInfo => TextInfo) => {
-    const controlled = !!this.props.value
-    if (controlled) {
+    if (this._controlled()) {
       const errMsg =
         'Attempted to use transformText on controlled input component. Use props.value and setSelection instead.'
       logger.error(errMsg)
@@ -78,8 +80,7 @@ class PlainInput extends Component<InternalProps, State> {
   getSelection = () => this._lastNativeSelection || {start: 0, end: 0}
 
   setSelection = (s: Selection) => {
-    const controlled = !!this.props.value
-    if (!controlled) {
+    if (!this._controlled()) {
       const errMsg =
         'Attempted to use setSelection on uncontrolled input component. Use transformText instead'
       logger.error(errMsg)