14 files changed, 200 insertions, 185 deletions

diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx
index b81154a43..48fb61635 100644
--- a/packages/forms/src/button/index.tsx
+++ b/packages/forms/src/button/index.tsx
@@ -1,21 +1,31 @@
 import Icon from '@mdi/react';
-import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
-import CSS from 'csstype';
+import { Property } from 'csstype';
 import React, { Component } from 'react';
 import injectStyle, { withTheme } from 'react-jss';
 import Loader from 'react-loader';
 
 import { IFormField, IWithStyle } from '../typings/generic';
+import { Theme } from '../../../theme';
 
-type ButtonType = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'inverted';
+type ButtonType =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'inverted';
 
 interface IProps extends IFormField, IWithStyle {
   className?: string;
   disabled?: boolean;
   id?: string;
-  type?: "button" | "reset" | "submit" | undefined;
-  onClick: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>) => void;
+  type?: 'button' | 'reset' | 'submit' | undefined;
+  onClick: (
+    event:
+      | React.MouseEvent<HTMLButtonElement>
+      | React.MouseEvent<HTMLAnchorElement>,
+  ) => void;
   buttonType?: ButtonType;
   stretch?: boolean;
   loaded?: boolean;
@@ -25,8 +35,12 @@ interface IProps extends IFormField, IWithStyle {
   target?: string;
 }
 
-interface IState {
-  busy: boolean;
+let buttonTransition: string = 'none';
+let loaderContainerTransition: string = 'none';
+
+if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  buttonTransition = 'background .5s, opacity 0.3s';
+  loaderContainerTransition = 'all 0.3s';
 }
 
 const styles = (theme: Theme) => ({
@@ -34,16 +48,16 @@ const styles = (theme: Theme) => ({
     borderRadius: theme.borderRadiusSmall,
     border: 'none',
     display: 'inline-flex',
-    position: 'relative' as CSS.PositionProperty,
-    transition: 'background .5s, opacity 0.3s',
-    textAlign: 'center' as CSS.TextAlignProperty,
+    position: 'relative' as Property.Position,
+    transition: buttonTransition,
+    textAlign: 'center' as Property.TextAlign,
     outline: 'none',
     alignItems: 'center',
     padding: 0,
-    width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.WidthProperty<string>,
+    width: (props: IProps) =>
+      (props.stretch ? '100%' : 'auto') as Property.Width<string>,
     fontSize: theme.uiFontSize,
     textDecoration: 'none',
-    // height: theme.buttonHeight,
 
     '&:hover': {
       opacity: 0.8,
@@ -113,7 +127,7 @@ const styles = (theme: Theme) => ({
     opacity: theme.inputDisabledOpacity,
   },
   loader: {
-    position: 'relative' as CSS.PositionProperty,
+    position: 'relative' as Property.Position,
     width: 20,
     height: 18,
     zIndex: 9999,
@@ -122,10 +136,11 @@ const styles = (theme: Theme) => ({
     width: (props: IProps): string => (!props.busy ? '0' : '40px'),
     height: 20,
     overflow: 'hidden',
-    transition: 'all 0.3s',
-    marginLeft: (props: IProps): number => !props.busy ? 10 : 20,
-    marginRight: (props: IProps): number => !props.busy ? -10 : -20,
-    position: (props: IProps): CSS.PositionProperty => props.stretch ? 'absolute' : 'inherit',
+    transition: loaderContainerTransition,
+    marginLeft: (props: IProps): number => (!props.busy ? 10 : 20),
+    marginRight: (props: IProps): number => (!props.busy ? -10 : -20),
+    position: (props: IProps): Property.Position =>
+      props.stretch ? 'absolute' : 'inherit',
   },
   icon: {
     margin: [1, 10, 0, -5],
@@ -155,7 +170,7 @@ class ButtonComponent extends Component<IProps> {
       if (this.props.busy) {
         setTimeout(() => {
           this.setState({ busy: nextProps.busy });
-        },         300);
+        }, 300);
       } else {
         this.setState({ busy: nextProps.busy });
       }
@@ -175,19 +190,18 @@ class ButtonComponent extends Component<IProps> {
       buttonType,
       loaded,
       icon,
-      busy: busyProp,
       href,
       target,
     } = this.props;
 
-    const {
-      busy,
-    } = this.state;
+    const { busy } = this.state;
 
     let showLoader = false;
     if (loaded) {
       showLoader = !loaded;
-      console.warn('Ferdi Button prop `loaded` will be deprecated in the future. Please use `busy` instead');
+      console.warn(
+        'Ferdi Button prop `loaded` will be deprecated in the future. Please use `busy` instead',
+      );
     }
     if (busy) {
       showLoader = busy;
@@ -207,19 +221,13 @@ class ButtonComponent extends Component<IProps> {
           )}
         </div>
         <div className={classes.label}>
-          {icon && (
-            <Icon
-              path={icon}
-              size={0.8}
-              className={classes.icon}
-            />
-          )}
+          {icon && <Icon path={icon} size={0.8} className={classes.icon} />}
           {label}
         </div>
       </>
     );
 
-    let wrapperComponent = null;
+    let wrapperComponent: JSX.Element;
 
     if (!href) {
       wrapperComponent = (
diff --git a/packages/forms/src/error/index.tsx b/packages/forms/src/error/index.tsx
index a487bb281..243321d97 100644
--- a/packages/forms/src/error/index.tsx
+++ b/packages/forms/src/error/index.tsx
@@ -11,18 +11,9 @@ interface IProps {
 
 class ErrorComponent extends Component<IProps> {
   render() {
-    const {
-      classes,
-      message,
-    } = this.props;
+    const { classes, message } = this.props;
 
-    return (
-      <p
-        className={classes.message}
-      >
-        {message}
-      </p>
-    );
+    return <p className={classes.message}>{message}</p>;
   }
 }
 
diff --git a/packages/forms/src/error/styles.ts b/packages/forms/src/error/styles.ts
index 5104838a5..4c0c7e2c0 100644
--- a/packages/forms/src/error/styles.ts
+++ b/packages/forms/src/error/styles.ts
@@ -1,4 +1,4 @@
-import { Theme } from '../../../theme/lib';
+import { Theme } from '../../../theme';
 
 export default (theme: Theme) => ({
   message: {
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx
index b96dbc12d..41751710a 100644
--- a/packages/forms/src/input/index.tsx
+++ b/packages/forms/src/input/index.tsx
@@ -17,7 +17,10 @@ interface IData {
   [index: string]: string;
 }
 
-interface IProps extends React.InputHTMLAttributes<HTMLInputElement>, IFormField, IWithStyle {
+interface IProps
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    IFormField,
+    IWithStyle {
   focus?: boolean;
   prefix?: string;
   suffix?: string;
@@ -62,23 +65,24 @@ class InputComponent extends Component<IProps, IState> {
       }
 
       if (data) {
-        Object.keys(data).map(key => this.inputRef.current!.dataset[key] = data[key]);
+        Object.keys(data).map(
+          key => (this.inputRef.current!.dataset[key] = data[key]),
+        );
       }
     }
   }
 
   onChange(e: React.ChangeEvent<HTMLInputElement>) {
-    const {
-      scorePassword,
-      onChange,
-    } = this.props;
+    const { scorePassword, onChange } = this.props;
 
     if (onChange) {
       onChange(e);
     }
 
     if (this.inputRef && this.inputRef.current && scorePassword) {
-      this.setState({ passwordScore: scorePasswordFunc(this.inputRef.current.value) });
+      this.setState({
+        passwordScore: scorePasswordFunc(this.inputRef.current.value),
+      });
     }
   }
 
@@ -117,10 +121,7 @@ class InputComponent extends Component<IProps, IState> {
       noMargin,
     } = this.props;
 
-    const {
-      showPassword,
-      passwordScore,
-    } = this.state;
+    const { showPassword, passwordScore } = this.state;
 
     const inputType = type === 'password' && showPassword ? 'text' : type;
 
@@ -144,12 +145,9 @@ class InputComponent extends Component<IProps, IState> {
               [`${classes.wrapper}`]: true,
               [`${classes.disabled}`]: disabled,
               [`${classes.hasError}`]: error,
-            })}>
-            {prefix && (
-              <span className={classes.prefix}>
-                {prefix}
-              </span>
-            )}
+            })}
+          >
+            {prefix && <span className={classes.prefix}>{prefix}</span>}
             <input
               id={id}
               type={inputType}
@@ -168,30 +166,29 @@ class InputComponent extends Component<IProps, IState> {
               max={max}
               step={step}
             />
-            {suffix && (
-              <span className={classes.suffix}>
-                {suffix}
-              </span>
-            )}
+            {suffix && <span className={classes.suffix}>{suffix}</span>}
             {showPasswordToggle && (
               <button
                 type="button"
                 className={classes.formModifier}
-                onClick={() => this.setState(prevState => ({ showPassword: !prevState.showPassword }))}
+                onClick={() =>
+                  this.setState(prevState => ({
+                    showPassword: !prevState.showPassword,
+                  }))
+                }
                 tabIndex={-1}
               >
-                <Icon
-                  path={!showPassword ? mdiEye : mdiEyeOff}
-                  size={1}
-                />
+                <Icon path={!showPassword ? mdiEye : mdiEyeOff} size={1} />
               </button>
             )}
           </div>
           {scorePassword && (
-            <div className={classnames({
-              [`${classes.passwordScore}`]: true,
-              [`${classes.hasError}`]: error,
-            })}>
+            <div
+              className={classnames({
+                [`${classes.passwordScore}`]: true,
+                [`${classes.hasError}`]: error,
+              })}
+            >
               <meter
                 value={passwordScore < 5 ? 5 : passwordScore}
                 low={30}
@@ -202,9 +199,7 @@ class InputComponent extends Component<IProps, IState> {
             </div>
           )}
         </Label>
-        {error && (
-          <Error message={error} />
-        )}
+        {error && <Error message={error} />}
       </Wrapper>
     );
   }
diff --git a/packages/forms/src/input/scorePassword.ts b/packages/forms/src/input/scorePassword.ts
index 0b7719ec1..bc30de4b8 100644
--- a/packages/forms/src/input/scorePassword.ts
+++ b/packages/forms/src/input/scorePassword.ts
@@ -11,7 +11,7 @@ interface IVariations {
 }
 
 export function scorePasswordFunc(password: string): number {
-  let score: number = 0;
+  let score = 0;
   if (!password) {
     return score;
   }
@@ -32,8 +32,8 @@ export function scorePasswordFunc(password: string): number {
   };
 
   let variationCount = 0;
-  Object.keys(variations).forEach((key) => {
-    variationCount += (variations[key] === true) ? 1 : 0;
+  Object.keys(variations).forEach(key => {
+    variationCount += variations[key] === true ? 1 : 0;
   });
 
   score += (variationCount - 1) * 10;
diff --git a/packages/forms/src/input/styles.ts b/packages/forms/src/input/styles.ts
index e2ab30a4f..6d56e93b3 100644
--- a/packages/forms/src/input/styles.ts
+++ b/packages/forms/src/input/styles.ts
@@ -1,5 +1,6 @@
-import { Theme } from '@meetfranz/theme';
-import CSS from 'csstype';
+import { Property } from 'csstype';
+
+import { Theme } from '../../../theme';
 
 const prefixStyles = (theme: Theme) => ({
   background: theme.inputPrefixBackground,
@@ -13,7 +14,7 @@ export default (theme: Theme) => ({
   label: {
     '& > div': {
       marginTop: 5,
-    }
+    },
   },
   disabled: {
     opacity: theme.inputDisabledOpacity,
@@ -85,7 +86,7 @@ export default (theme: Theme) => ({
     background: theme.inputBackground,
     border: theme.inputBorder,
     borderRadius: theme.borderRadiusSmall,
-    boxSizing: 'border-box' as CSS.BoxSizingProperty,
+    boxSizing: 'border-box' as Property.BoxSizing,
     display: 'flex',
     height: theme.inputHeight,
     order: 1,
diff --git a/packages/forms/src/label/index.tsx b/packages/forms/src/label/index.tsx
index 1b33ba22c..ad503b785 100644
--- a/packages/forms/src/label/index.tsx
+++ b/packages/forms/src/label/index.tsx
@@ -7,7 +7,9 @@ import { IFormField } from '../typings/generic';
 
 import styles from './styles';
 
-interface ILabel extends IFormField, React.LabelHTMLAttributes<HTMLLabelElement> {
+interface ILabel
+  extends IFormField,
+    React.LabelHTMLAttributes<HTMLLabelElement> {
   classes: Classes;
   isRequired: boolean;
 }
@@ -38,11 +40,12 @@ class LabelComponent extends Component<ILabel> {
         htmlFor={htmlFor}
       >
         {showLabel && (
-          <span className={classes.label}>{title}{isRequired && ' *'}</span>
+          <span className={classes.label}>
+            {title}
+            {isRequired && ' *'}
+          </span>
         )}
-        <div className={classes.content}>
-          {children}
-        </div>
+        <div className={classes.content}>{children}</div>
       </label>
     );
   }
diff --git a/packages/forms/src/label/styles.ts b/packages/forms/src/label/styles.ts
index c64c9b285..7c62b6b4c 100644
--- a/packages/forms/src/label/styles.ts
+++ b/packages/forms/src/label/styles.ts
@@ -1,4 +1,4 @@
-import { Theme } from '../../../theme/lib';
+import { Theme } from '../../../theme';
 
 export default (theme: Theme) => ({
   content: {},
diff --git a/packages/forms/src/select/index.tsx b/packages/forms/src/select/index.tsx
index 0e5ded176..d7479f63e 100644
--- a/packages/forms/src/select/index.tsx
+++ b/packages/forms/src/select/index.tsx
@@ -1,13 +1,16 @@
-import { mdiArrowRightDropCircleOutline, mdiCloseCircle, mdiMagnify } from '@mdi/js';
+import {
+  mdiArrowRightDropCircleOutline,
+  mdiCloseCircle,
+  mdiMagnify,
+} from '@mdi/js';
 import Icon from '@mdi/react';
-import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
 import React, { Component, createRef } from 'react';
 import injectStyle from 'react-jss';
 
 import { IFormField, IWithStyle } from '../typings/generic';
+import { Theme } from '../../../theme';
 
-import { NONAME } from 'dns';
 import { Error } from '../error';
 import { Label } from '../label';
 import { Wrapper } from '../wrapper';
@@ -43,6 +46,14 @@ interface IState {
   options: IOptions;
 }
 
+let popupTransition: string = 'none';
+let toggleTransition: string = 'none';
+
+if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  popupTransition = 'all 0.3s';
+  toggleTransition = 'transform 0.3s';
+}
+
 const styles = (theme: Theme) => ({
   select: {
     background: theme.selectBackground,
@@ -59,7 +70,7 @@ const styles = (theme: Theme) => ({
   label: {
     '& > div': {
       marginTop: 5,
-    }
+    },
   },
   popup: {
     opacity: 0,
@@ -67,7 +78,7 @@ const styles = (theme: Theme) => ({
     overflowX: 'scroll',
     border: theme.selectBorder,
     borderTop: 0,
-    transition: 'all 0.3s',
+    transition: popupTransition,
   },
   open: {
     opacity: 1,
@@ -95,7 +106,7 @@ const styles = (theme: Theme) => ({
   toggle: {
     marginLeft: 'auto',
     fill: theme.selectToggleColor,
-    transition: 'transform 0.3s',
+    transition: toggleTransition,
   },
   toggleOpened: {
     transform: 'rotateZ(90deg)',
@@ -154,9 +165,13 @@ class SelectComponent extends Component<IProps> {
   };
 
   private componentRef = createRef<HTMLDivElement>();
+
   private inputRef = createRef<HTMLInputElement>();
+
   private searchInputRef = createRef<HTMLInputElement>();
+
   private scrollContainerRef = createRef<HTMLDivElement>();
+
   private activeOptionRef = createRef<HTMLDivElement>();
 
   private keyListener: any;
@@ -169,10 +184,8 @@ class SelectComponent extends Component<IProps> {
     }
   }
 
-  componentDidUpdate(prevProps: IProps, prevState: IState) {
-    const {
-      open,
-    } = this.state;
+  componentDidUpdate() {
+    const { open } = this.state;
 
     if (this.searchInputRef && this.searchInputRef.current) {
       if (open) {
@@ -183,12 +196,12 @@ class SelectComponent extends Component<IProps> {
 
   componentDidMount() {
     if (this.inputRef && this.inputRef.current) {
-      const {
-        data,
-      } = this.props;
+      const { data } = this.props;
 
       if (data) {
-        Object.keys(data).map(key => this.inputRef.current!.dataset[key] = data[key]);
+        Object.keys(data).map(
+          key => (this.inputRef.current!.dataset[key] = data[key]),
+        );
       }
     }
 
@@ -196,12 +209,13 @@ class SelectComponent extends Component<IProps> {
   }
 
   componentWillMount() {
-    const {
-      value,
-    } = this.props;
+    const { value } = this.props;
 
     if (this.componentRef && this.componentRef.current) {
-      this.componentRef.current.removeEventListener('keydown', this.keyListener);
+      this.componentRef.current.removeEventListener(
+        'keydown',
+        this.keyListener,
+      );
     }
 
     if (value) {
@@ -217,13 +231,18 @@ class SelectComponent extends Component<IProps> {
     window.removeEventListener('keydown', this.arrowKeysHandler.bind(this));
   }
 
-  setFilter(needle: string = '') {
+  setFilter(needle = '') {
     const { options } = this.props;
 
     let filteredOptions = {};
     if (needle) {
-      Object.keys(options).map((key) => {
-        if (key.toLocaleLowerCase().startsWith(needle.toLocaleLowerCase()) || options[key].toLocaleLowerCase().startsWith(needle.toLocaleLowerCase())) {
+      Object.keys(options).map(key => {
+        if (
+          key.toLocaleLowerCase().startsWith(needle.toLocaleLowerCase()) ||
+          options[key]
+            .toLocaleLowerCase()
+            .startsWith(needle.toLocaleLowerCase())
+        ) {
           Object.assign(filteredOptions, {
             [`${key}`]: options[key],
           });
@@ -241,7 +260,7 @@ class SelectComponent extends Component<IProps> {
   }
 
   select(key: string) {
-    this.setState((state: IState) => ({
+    this.setState(() => ({
       value: key,
       open: false,
     }));
@@ -254,11 +273,7 @@ class SelectComponent extends Component<IProps> {
   }
 
   arrowKeysHandler(e: KeyboardEvent) {
-    const {
-      selected,
-      open,
-      options,
-    } = this.state;
+    const { selected, open, options } = this.state;
 
     if (!open) return;
 
@@ -271,7 +286,10 @@ class SelectComponent extends Component<IProps> {
         this.setState((state: IState) => ({
           selected: state.selected - 1,
         }));
-      } else if (e.keyCode === 40 && selected < Object.keys(options!).length - 1) {
+      } else if (
+        e.keyCode === 40 &&
+        selected < Object.keys(options!).length - 1
+      ) {
         this.setState((state: IState) => ({
           selected: state.selected + 1,
         }));
@@ -279,7 +297,12 @@ class SelectComponent extends Component<IProps> {
         this.select(Object.keys(options!)[selected]);
       }
 
-      if (this.activeOptionRef && this.activeOptionRef.current && this.scrollContainerRef && this.scrollContainerRef.current) {
+      if (
+        this.activeOptionRef &&
+        this.activeOptionRef.current &&
+        this.scrollContainerRef &&
+        this.scrollContainerRef.current
+      ) {
         const containerTopOffset = this.scrollContainerRef.current.offsetTop;
         const optionTopOffset = this.activeOptionRef.current.offsetTop;
 
@@ -289,10 +312,15 @@ class SelectComponent extends Component<IProps> {
       }
     }
 
-    switch (e.keyCode){
-      case 37: case 39: case 38:  case 40: // Arrow keys
-      case 32:  break; // Space
-      default: break; // do not block other keys
+    switch (e.keyCode) {
+      case 37:
+      case 39:
+      case 38:
+      case 40: // Arrow keys
+      case 32:
+        break; // Space
+      default:
+        break; // do not block other keys
     }
   }
 
@@ -314,13 +342,7 @@ class SelectComponent extends Component<IProps> {
       required,
     } = this.props;
 
-    const {
-      open,
-      needle,
-      value,
-      selected,
-      options,
-    } = this.state;
+    const { open, needle, value, selected, options } = this.state;
 
     let selection = '';
     if (!value && defaultValue && options![defaultValue]) {
@@ -332,10 +354,7 @@ class SelectComponent extends Component<IProps> {
     }
 
     return (
-      <Wrapper
-        className={className}
-        identifier="franz-select"
-      >
+      <Wrapper className={className} identifier="franz-select">
         <Label
           title={label}
           showLabel={showLabel}
@@ -352,14 +371,19 @@ class SelectComponent extends Component<IProps> {
           >
             <button
               type="button"
-               className={classnames({
-                 [`${inputClassName}`]: inputClassName,
-                 [`${classes.select}`]: true,
-                 [`${classes.hasError}`]: error,
-               })}
-              onClick= {!disabled ? () => this.setState((state: IState) => ({
-                open: !state.open,
-              })) : () => {}}
+              className={classnames({
+                [`${inputClassName}`]: inputClassName,
+                [`${classes.select}`]: true,
+                [`${classes.hasError}`]: error,
+              })}
+              onClick={
+                !disabled
+                  ? () =>
+                      this.setState((state: IState) => ({
+                        open: !state.open,
+                      }))
+                  : () => {}
+              }
             >
               {selection}
               <Icon
@@ -373,10 +397,7 @@ class SelectComponent extends Component<IProps> {
             </button>
             {showSearch && open && (
               <div className={classes.searchContainer}>
-                <Icon
-                  path={mdiMagnify}
-                  size={0.8}
-                />
+                <Icon path={mdiMagnify} size={0.8} />
                 <input
                   type="text"
                   value={needle}
@@ -391,10 +412,7 @@ class SelectComponent extends Component<IProps> {
                     className={classes.clearNeedle}
                     onClick={() => this.setFilter()}
                   >
-                    <Icon
-                      path={mdiCloseCircle}
-                      size={0.7}
-                    />
+                    <Icon path={mdiCloseCircle} size={0.7} />
                   </button>
                 )}
               </div>
@@ -406,7 +424,7 @@ class SelectComponent extends Component<IProps> {
               })}
               ref={this.scrollContainerRef}
             >
-              {Object.keys(options!).map(((key, i) => (
+              {Object.keys(options!).map((key, i) => (
                 <div
                   key={key}
                   onClick={() => this.select(key)}
@@ -420,7 +438,7 @@ class SelectComponent extends Component<IProps> {
                 >
                   {options![key]}
                 </div>
-              )))}
+              ))}
             </div>
           </div>
           <input
@@ -434,9 +452,7 @@ class SelectComponent extends Component<IProps> {
             ref={this.inputRef}
           />
         </Label>
-        {error && (
-          <Error message={error} />
-        )}
+        {error && <Error message={error} />}
       </Wrapper>
     );
   }
diff --git a/packages/forms/src/textarea/index.tsx b/packages/forms/src/textarea/index.tsx
index cd691a507..2d89d1c9f 100644
--- a/packages/forms/src/textarea/index.tsx
+++ b/packages/forms/src/textarea/index.tsx
@@ -1,5 +1,3 @@
-import { mdiEye, mdiEyeOff } from '@mdi/js';
-import Icon from '@mdi/react';
 import classnames from 'classnames';
 import React, { Component, createRef } from 'react';
 import injectSheet from 'react-jss';
@@ -16,7 +14,10 @@ interface IData {
   [index: string]: string;
 }
 
-interface IProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, IFormField, IWithStyle {
+interface IProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    IFormField,
+    IWithStyle {
   focus?: boolean;
   data: IData;
   textareaClassName?: string;
@@ -39,14 +40,14 @@ class TextareaComponent extends Component<IProps> {
     const { data } = this.props;
 
     if (this.textareaRef && this.textareaRef.current && data) {
-      Object.keys(data).map(key => this.textareaRef.current!.dataset[key] = data[key]);
+      Object.keys(data).map(
+        key => (this.textareaRef.current!.dataset[key] = data[key]),
+      );
     }
   }
 
   onChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
-    const {
-      onChange,
-    } = this.props;
+    const { onChange } = this.props;
 
     if (onChange) {
       onChange(e);
@@ -59,7 +60,6 @@ class TextareaComponent extends Component<IProps> {
       className,
       disabled,
       error,
-      focus,
       id,
       textareaClassName,
       label,
@@ -96,9 +96,9 @@ class TextareaComponent extends Component<IProps> {
               [`${classes.wrapper}`]: true,
               [`${classes.disabled}`]: disabled,
               [`${classes.hasError}`]: error,
-            })}>
+            })}
+          >
             <textarea
-              autoFocus={focus}
               id={id}
               name={name}
               placeholder={placeholder}
@@ -117,9 +117,7 @@ class TextareaComponent extends Component<IProps> {
             </textarea>
           </div>
         </Label>
-        {error && (
-          <Error message={error} />
-        )}
+        {error && <Error message={error} />}
       </Wrapper>
     );
   }
diff --git a/packages/forms/src/textarea/styles.ts b/packages/forms/src/textarea/styles.ts
index c1cbd76a5..ff3a3202b 100644
--- a/packages/forms/src/textarea/styles.ts
+++ b/packages/forms/src/textarea/styles.ts
@@ -1,5 +1,6 @@
-import { Theme } from '@meetfranz/theme';
-import CSS from 'csstype';
+import { Property } from 'csstype';
+
+import { Theme } from '../../../theme';
 
 export default (theme: Theme) => ({
   label: {
@@ -42,7 +43,7 @@ export default (theme: Theme) => ({
     background: theme.inputBackground,
     border: theme.inputBorder,
     borderRadius: theme.borderRadiusSmall,
-    boxSizing: 'border-box' as CSS.BoxSizingProperty,
+    boxSizing: 'border-box' as Property.BoxSizing,
     display: 'flex',
     order: 1,
     width: '100%',
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx
index ea335f281..bdf1d22cf 100644
--- a/packages/forms/src/toggle/index.tsx
+++ b/packages/forms/src/toggle/index.tsx
@@ -1,10 +1,10 @@
-import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
-import CSS from 'csstype';
+import { Property } from 'csstype';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 
-import { IFormField, IWithStyle, Omit } from '../typings/generic';
+import { IFormField, IWithStyle } from '../typings/generic';
+import { Theme } from '../../../theme';
 
 import { Error } from '../error';
 import { Label } from '../label';
@@ -17,12 +17,18 @@ interface IProps
   className?: string;
 }
 
+let buttonTransition: string = 'none';
+
+if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  buttonTransition = 'all .5s';
+}
+
 const styles = (theme: Theme) => ({
   toggle: {
     background: theme.toggleBackground,
     borderRadius: theme.borderRadius,
     height: theme.toggleHeight,
-    position: 'relative' as CSS.PositionProperty,
+    position: 'relative' as Property.Position,
     width: theme.toggleWidth,
   },
   button: {
@@ -33,8 +39,8 @@ const styles = (theme: Theme) => ({
     height: theme.toggleHeight - 2,
     left: 1,
     top: 1,
-    position: 'absolute' as CSS.PositionProperty,
-    transition: 'all .5s',
+    position: 'absolute' as Property.Position,
+    transition: buttonTransition,
   },
   buttonActive: {
     background: theme.toggleButtonActive,
diff --git a/packages/forms/src/typings/generic.ts b/packages/forms/src/typings/generic.ts
index 29136dfed..0fd0cdbf3 100644
--- a/packages/forms/src/typings/generic.ts
+++ b/packages/forms/src/typings/generic.ts
@@ -1,6 +1,7 @@
-import { Theme } from '@meetfranz/theme/lib';
 import { Classes } from 'jss';
 
+import { Theme } from '../../../theme';
+
 export interface IFormField {
   showLabel?: boolean;
   label?: string;
diff --git a/packages/forms/src/wrapper/index.tsx b/packages/forms/src/wrapper/index.tsx
index cf179bc5e..3ae551e2c 100644
--- a/packages/forms/src/wrapper/index.tsx
+++ b/packages/forms/src/wrapper/index.tsx
@@ -12,18 +12,13 @@ interface IProps extends IWithStyle {
 
 const styles = {
   container: {
-    marginBottom: (props: IProps) => props.noMargin ? 0 : 20,
+    marginBottom: (props: IProps) => (props.noMargin ? 0 : 20),
   },
 };
 
 class WrapperComponent extends Component<IProps> {
   render() {
-    const {
-      children,
-      classes,
-      className,
-      identifier,
-    } = this.props;
+    const { children, classes, className, identifier } = this.props;
 
     return (
       <div