19 files changed, 129 insertions, 162 deletions

diff --git a/package-lock.json b/package-lock.json
index 435909e89..6dee2c9e2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3104,7 +3104,7 @@
     "JSONStream": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz",
-      "integrity": "sha1-MgjB8I06TZkmGrZPkjArwV4RHKA=",
+      "integrity": "sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==",
       "dev": true,
       "requires": {
         "jsonparse": "^1.2.0",
@@ -5601,7 +5601,7 @@
     "conventional-changelog-angular": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-5.0.2.tgz",
-      "integrity": "sha1-OdlFY14DttDJ1AeLHfdOBhY9xmo=",
+      "integrity": "sha512-yx7m7lVrXmt4nKWQgWZqxSALEiAKZhOAcbxdUaU9575mB0CzXVbgrgpfSnSP7OqWDUTYGD0YVJ0MSRdyOPgAwA==",
       "dev": true,
       "requires": {
         "compare-func": "^1.3.1",
@@ -5611,7 +5611,7 @@
     "conventional-changelog-core": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/conventional-changelog-core/-/conventional-changelog-core-3.1.5.tgz",
-      "integrity": "sha1-wu35KFOTCLVP4bkKL8cxq8AhhSw=",
+      "integrity": "sha512-iwqAotS4zk0wA4S84YY1JCUG7X3LxaRjJxuUo6GI4dZuIy243j5nOg/Ora35ExT4DOiw5dQbMMQvw2SUjh6moQ==",
       "dev": true,
       "requires": {
         "conventional-changelog-writer": "^4.0.2",
@@ -5632,7 +5632,7 @@
         "dateformat": {
           "version": "3.0.3",
           "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz",
-          "integrity": "sha1-puN0maTZqc+F71hyBE1ikByYia4=",
+          "integrity": "sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==",
           "dev": true
         },
         "find-up": {
@@ -5669,7 +5669,7 @@
         "path-type": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
-          "integrity": "sha1-zvMdyOCho7sNEFwM2Xzzv0f0428=",
+          "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
           "dev": true,
           "requires": {
             "pify": "^3.0.0"
@@ -5713,13 +5713,13 @@
     "conventional-changelog-preset-loader": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/conventional-changelog-preset-loader/-/conventional-changelog-preset-loader-2.0.2.tgz",
-      "integrity": "sha1-gdGgdSORPz0X2jpJ8AkflnrTRbA=",
+      "integrity": "sha512-pBY+qnUoJPXAXXqVGwQaVmcye05xi6z231QM98wHWamGAmu/ghkBprQAwmF5bdmyobdVxiLhPY3PrCfSeUNzRQ==",
       "dev": true
     },
     "conventional-changelog-writer": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/conventional-changelog-writer/-/conventional-changelog-writer-4.0.2.tgz",
-      "integrity": "sha1-60k+2EJp56Zj2jbkmvUcVGOcmmc=",
+      "integrity": "sha512-d8/FQY/fix2xXEBUhOo8u3DCbyEw3UOQgYHxLsPDw+wHUDma/GQGAGsGtoH876WyNs32fViHmTOUrgRKVLvBug==",
       "dev": true,
       "requires": {
         "compare-func": "^1.3.1",
@@ -5754,7 +5754,7 @@
         "dateformat": {
           "version": "3.0.3",
           "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz",
-          "integrity": "sha1-puN0maTZqc+F71hyBE1ikByYia4=",
+          "integrity": "sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==",
           "dev": true
         },
         "find-up": {
@@ -5793,7 +5793,7 @@
         "meow": {
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/meow/-/meow-4.0.1.tgz",
-          "integrity": "sha1-1IWY9vSxRy81v2MXqVlFrONH+XU=",
+          "integrity": "sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==",
           "dev": true,
           "requires": {
             "camelcase-keys": "^4.0.0",
@@ -5820,7 +5820,7 @@
         "path-type": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
-          "integrity": "sha1-zvMdyOCho7sNEFwM2Xzzv0f0428=",
+          "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
           "dev": true,
           "requires": {
             "pify": "^3.0.0"
@@ -5892,7 +5892,7 @@
     "conventional-commits-filter": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/conventional-commits-filter/-/conventional-commits-filter-2.0.1.tgz",
-      "integrity": "sha1-VaE13hgC9lELZ1jgpqqeCyhhjbM=",
+      "integrity": "sha512-92OU8pz/977udhBjgPEbg3sbYzIxMDFTlQT97w7KdhR9igNqdJvy8smmedAAgn4tPiqseFloKkrVfbXCVd+E7A==",
       "dev": true,
       "requires": {
         "is-subset": "^0.1.1",
@@ -5902,7 +5902,7 @@
     "conventional-commits-parser": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-3.0.1.tgz",
-      "integrity": "sha1-/hxJdT3z+Y7bIoWl5IXhH/p/Lkw=",
+      "integrity": "sha512-P6U5UOvDeidUJ8ebHVDIoXzI7gMlQ1OF/id6oUvp8cnZvOXMt1n8nYl74Ey9YMn0uVQtxmCtjPQawpsssBWtGg==",
       "dev": true,
       "requires": {
         "JSONStream": "^1.0.4",
@@ -5967,7 +5967,7 @@
         "meow": {
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/meow/-/meow-4.0.1.tgz",
-          "integrity": "sha1-1IWY9vSxRy81v2MXqVlFrONH+XU=",
+          "integrity": "sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==",
           "dev": true,
           "requires": {
             "camelcase-keys": "^4.0.0",
@@ -5994,7 +5994,7 @@
         "path-type": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
-          "integrity": "sha1-zvMdyOCho7sNEFwM2Xzzv0f0428=",
+          "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
           "dev": true,
           "requires": {
             "pify": "^3.0.0"
@@ -9924,7 +9924,7 @@
     "git-raw-commits": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-2.0.0.tgz",
-      "integrity": "sha1-2Srd90RAwUvMXIPszj+3+KeRGLU=",
+      "integrity": "sha512-w4jFEJFgKXMQJ0H0ikBk2S+4KP2VEjhCvLCNqbNRQC8BgGWgLKNCO7a9K9LI+TVT7Gfoloje502sEnctibffgg==",
       "dev": true,
       "requires": {
         "dargs": "^4.0.1",
@@ -10006,7 +10006,7 @@
         "meow": {
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/meow/-/meow-4.0.1.tgz",
-          "integrity": "sha1-1IWY9vSxRy81v2MXqVlFrONH+XU=",
+          "integrity": "sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==",
           "dev": true,
           "requires": {
             "camelcase-keys": "^4.0.0",
@@ -10033,7 +10033,7 @@
         "path-type": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
-          "integrity": "sha1-zvMdyOCho7sNEFwM2Xzzv0f0428=",
+          "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
           "dev": true,
           "requires": {
             "pify": "^3.0.0"
@@ -10109,7 +10109,7 @@
     "git-semver-tags": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/git-semver-tags/-/git-semver-tags-2.0.2.tgz",
-      "integrity": "sha1-9QbsB8qt4ZGsDI1aIb24ExtJNOM=",
+      "integrity": "sha512-34lMF7Yo1xEmsK2EkbArdoU79umpvm0MfzaDkSNYSJqtM5QLAVTPWgpiXSVI5o/O9EvZPSrP4Zvnec/CqhSd5w==",
       "dev": true,
       "requires": {
         "meow": "^4.0.0",
@@ -10169,7 +10169,7 @@
         "meow": {
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/meow/-/meow-4.0.1.tgz",
-          "integrity": "sha1-1IWY9vSxRy81v2MXqVlFrONH+XU=",
+          "integrity": "sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==",
           "dev": true,
           "requires": {
             "camelcase-keys": "^4.0.0",
@@ -10196,7 +10196,7 @@
         "path-type": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
-          "integrity": "sha1-zvMdyOCho7sNEFwM2Xzzv0f0428=",
+          "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
           "dev": true,
           "requires": {
             "pify": "^3.0.0"
@@ -11206,7 +11206,7 @@
     "handlebars": {
       "version": "4.0.12",
       "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.0.12.tgz",
-      "integrity": "sha1-LBXIqW1G2l4mZwBRi6jLjZGdW8U=",
+      "integrity": "sha512-RhmTekP+FZL+XNhwS1Wf+bTTZpdLougwt5pcgA1tuz6Jcx0fpH/7z0qd71RKnZHBCxIRBHfBOnio4gViPemNzA==",
       "dev": true,
       "requires": {
         "async": "^2.5.0",
@@ -11218,7 +11218,7 @@
         "async": {
           "version": "2.6.1",
           "resolved": "https://registry.npmjs.org/async/-/async-2.6.1.tgz",
-          "integrity": "sha1-skWiPKcZMAROxT+kaqAKPofGphA=",
+          "integrity": "sha512-fNEiL2+AZt6AlAw/29Cr0UDe4sRAHCpEHh54WMz+Bb7QfNcFw4h3loofyJpLeQs4Yx7yuqu/2dLgM5hKOs6HlQ==",
           "dev": true,
           "requires": {
             "lodash": "^4.17.10"
@@ -14046,7 +14046,7 @@
     "minimist-options": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-3.0.2.tgz",
-      "integrity": "sha1-+6TIGRM54T7PTWG+sD8HAQPz2VQ=",
+      "integrity": "sha512-FyBrT/d0d4+uiZRbqznPXqw3IpZZG3gl3wKWiX784FycUKVwBt0uLBFkQrtE4tZOrgo78nZp2jnKz3L65T5LdQ==",
       "dev": true,
       "requires": {
         "arrify": "^1.0.1",
@@ -14261,7 +14261,7 @@
     "modify-values": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz",
-      "integrity": "sha1-s5OfpgVUZHTj4+PGPWS9Q7TuYCI=",
+      "integrity": "sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==",
       "dev": true
     },
     "moment": {
@@ -18138,7 +18138,7 @@
       "dependencies": {
         "minimist": {
           "version": "0.0.10",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
           "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=",
           "dev": true
         },
@@ -20904,7 +20904,7 @@
     "split": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
-      "integrity": "sha1-YFvZvjA6pZ+zX5Ip++oN3snqB9k=",
+      "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
       "dev": true,
       "requires": {
         "through": "2"
@@ -20922,7 +20922,7 @@
     "split2": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/split2/-/split2-2.2.0.tgz",
-      "integrity": "sha1-GGsldbz4PoW30YRldWI47k7kJJM=",
+      "integrity": "sha512-RAb22TG39LhI31MbreBgIuKiIKhVsawfTgEGqKHTK87aG+ul/PB8Sqoi3I7kVdRWiCfrKxK3uo4/YUkpNvhPbw==",
       "dev": true,
       "requires": {
         "through2": "^2.0.2"
@@ -21428,7 +21428,7 @@
     "text-extensions": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/text-extensions/-/text-extensions-1.9.0.tgz",
-      "integrity": "sha1-GFPkX+45yUXOb2w2stZZtaq8KiY=",
+      "integrity": "sha512-wiBrwC1EhBelW12Zy26JeOUkQ5mRu+5o8rpsJk5+2t+Y5vE7e842qtZDQ2g1NpX/29HdyFeJ4nSIhI47ENSxlQ==",
       "dev": true
     },
     "text-table": {
@@ -21942,7 +21942,7 @@
     "uglify-js": {
       "version": "3.4.9",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz",
-      "integrity": "sha1-rwLxgMEgfXZDLkc+0koo9KeCuuM=",
+      "integrity": "sha512-8CJsbKOtEbnJsTyv6LE6m6ZKniqMiFWmm9sRbopbkGs3gMPPfd3Fh8iIA4Ykv5MgaTbqHr4BaoGLJLZNhsrW1Q==",
       "dev": true,
       "requires": {
         "commander": "~2.17.1",
@@ -21952,7 +21952,7 @@
         "commander": {
           "version": "2.17.1",
           "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
-          "integrity": "sha1-vXerfebelCBc6sxy8XFtKfIKd78=",
+          "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==",
           "dev": true
         },
         "source-map": {
diff --git a/packages/forms/package-lock.json b/packages/forms/package-lock.json
index 834db8d33..b5b24c239 100644
--- a/packages/forms/package-lock.json
+++ b/packages/forms/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@meetfranz/forms",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/packages/forms/package.json b/packages/forms/package.json
index af5c46a54..a9151e245 100644
--- a/packages/forms/package.json
+++ b/packages/forms/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@meetfranz/forms",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "React form components for Franz",
   "main": "lib/index.js",
   "scripts": {
-    "dev": "NODE_ENV=development ../../node_modules/.bin/webpack -w",
-    "prepare": "../../node_modules/.bin/webpack"
+    "dev": "tsc -w",
+    "prepare": "tsc"
   },
   "publishConfig": {
     "access": "public"
@@ -31,9 +31,6 @@
   },
   "peerDependencies": {
     "classnames": "^2.2.6",
-    "lodash": "^4.17.11",
-    "mobx": "^5.8.0",
-    "mobx-react": "^5.4.3",
     "react": "^16.7.0",
     "react-dom": "16.7.0",
     "react-jss": "^8.6.1"
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx
index b7cca7fa4..90eda21e7 100644
--- a/packages/forms/src/button/index.tsx
+++ b/packages/forms/src/button/index.tsx
@@ -3,7 +3,6 @@ import Icon from '@mdi/react';
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
 import CSS from 'csstype';
-import { observer } from 'mobx-react';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 import Loader from 'react-loader';
@@ -37,7 +36,7 @@ const styles = (theme: Theme) => ({
     border: 'none',
     display: 'inline-flex',
     position: 'relative' as CSS.PositionProperty,
-    transition: 'background .5s',
+    transition: 'background .5s, opacity 0.3s',
     textAlign: 'center' as CSS.TextAlignProperty,
     outline: 'none',
     alignItems: 'center',
@@ -45,6 +44,14 @@ const styles = (theme: Theme) => ({
     width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.WidthProperty<string>,
     fontSize: theme.uiFontSize,
     textDecoration: 'none',
+
+    '&:hover': {
+      opacity: 0.8,
+    },
+    '&:active': {
+      opacity: 0.5,
+      transition: 'none',
+    },
   },
   label: {
     margin: '10px 20px',
@@ -126,7 +133,6 @@ const styles = (theme: Theme) => ({
   },
 });
 
-@observer
 class ButtonComponent extends Component<IProps> {
   public static defaultProps = {
     type: 'button',
@@ -237,6 +243,7 @@ class ButtonComponent extends Component<IProps> {
             [`${className}`]: className,
           })}
           disabled={disabled}
+          data-type="franz-button"
         >
           {content}
         </button>
@@ -253,6 +260,7 @@ class ButtonComponent extends Component<IProps> {
             [`${className}`]: className,
           })}
           rel={target === '_blank' ? 'noopener' : ''}
+          data-type="franz-button"
         >
           {content}
         </a>
diff --git a/packages/forms/src/error/index.tsx b/packages/forms/src/error/index.tsx
index 9d26e086d..a487bb281 100644
--- a/packages/forms/src/error/index.tsx
+++ b/packages/forms/src/error/index.tsx
@@ -1,6 +1,4 @@
-import classnames from 'classnames';
 import { Classes } from 'jss';
-import { observer } from 'mobx-react';
 import React, { Component } from 'react';
 import injectSheet from 'react-jss';
 
@@ -11,7 +9,6 @@ interface IProps {
   message: string;
 }
 
-@observer
 class ErrorComponent extends Component<IProps> {
   render() {
     const {
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx
index cd6da3778..de7e7848e 100644
--- a/packages/forms/src/input/index.tsx
+++ b/packages/forms/src/input/index.tsx
@@ -1,7 +1,6 @@
 import { mdiEye, mdiEyeOff } from '@mdi/js';
 import Icon from '@mdi/react';
 import classnames from 'classnames';
-import { observer } from 'mobx-react';
 import React, { Component, createRef } from 'react';
 import injectSheet from 'react-jss';
 
@@ -33,7 +32,6 @@ interface IState {
   passwordScore: number;
 }
 
-@observer
 class InputComponent extends Component<IProps, IState> {
   public static defaultProps = {
     focus: false,
@@ -114,6 +112,7 @@ class InputComponent extends Component<IProps, IState> {
     return (
       <Wrapper
         className={className}
+        identifier="franz-input"
       >
         <Label
           title={label}
diff --git a/packages/forms/src/label/index.tsx b/packages/forms/src/label/index.tsx
index ee3268b16..36fcfbedf 100644
--- a/packages/forms/src/label/index.tsx
+++ b/packages/forms/src/label/index.tsx
@@ -1,6 +1,5 @@
 import classnames from 'classnames';
 import { Classes } from 'jss';
-import { observer } from 'mobx-react';
 import React, { Component } from 'react';
 import injectSheet from 'react-jss';
 
@@ -12,7 +11,6 @@ interface ILabel extends IFormField, React.LabelHTMLAttributes<HTMLLabelElement>
   classes: Classes;
 }
 
-@observer
 class LabelComponent extends Component<ILabel> {
   static defaultProps = {
     showLabel: true,
diff --git a/packages/forms/src/select/index.tsx b/packages/forms/src/select/index.tsx
index 58bb7317a..4a9e3c56e 100644
--- a/packages/forms/src/select/index.tsx
+++ b/packages/forms/src/select/index.tsx
@@ -2,8 +2,6 @@ import { mdiArrowRightDropCircleOutline, mdiCloseCircle, mdiMagnify } from '@mdi
 import Icon from '@mdi/react';
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
-import debounce from 'lodash/debounce';
-import { observer } from 'mobx-react';
 import React, { Component, createRef } from 'react';
 import injectStyle from 'react-jss';
 
@@ -86,7 +84,8 @@ const styles = (theme: Theme) => ({
     },
   },
   selected: {
-    fontWeight: 'bold',
+    background: theme.selectOptionItemActive,
+    color: theme.selectOptionItemActiveColor,
   },
   toggle: {
     marginLeft: 'auto',
@@ -133,7 +132,6 @@ const styles = (theme: Theme) => ({
   },
 });
 
-@observer
 class SelectComponent extends Component<IProps> {
   public static defaultProps = {
     onChange: () => {},
@@ -166,7 +164,7 @@ class SelectComponent extends Component<IProps> {
     }
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps: IProps, prevState: IState) {
     const {
       open,
     } = this.state;
@@ -179,41 +177,6 @@ class SelectComponent extends Component<IProps> {
   }
 
   componentDidMount() {
-    if (this.componentRef && this.componentRef.current) {
-      this.keyListener = this.componentRef.current.addEventListener('keydown', debounce((e) => {
-        const {
-          selected,
-          open,
-          options,
-        } = this.state;
-
-        if (!open) return;
-
-        if (e.keyCode === 38 && selected > 0) {
-          this.setState((state: IState) => ({
-            selected: state.selected - 1,
-          }));
-        } else if (e.keyCode === 40 && selected < Object.keys(options!).length - 1) {
-          this.setState((state: IState) => ({
-            selected: state.selected + 1,
-          }));
-        } else if (e.keyCode === 13) {
-          this.select(Object.keys(options!)[selected]);
-        }
-
-        if (this.activeOptionRef && this.activeOptionRef.current && this.scrollContainerRef && this.scrollContainerRef.current) {
-          const containerTopOffset = this.scrollContainerRef.current.offsetTop;
-          const optionTopOffset = this.activeOptionRef.current.offsetTop;
-
-          const topOffset = optionTopOffset - containerTopOffset;
-
-          this.scrollContainerRef.current.scrollTop = topOffset - 35;
-        }
-      },                                                                                10, {
-        leading: true,
-      }));
-    }
-
     if (this.inputRef && this.inputRef.current) {
       const {
         data,
@@ -223,10 +186,14 @@ class SelectComponent extends Component<IProps> {
         Object.keys(data).map(key => this.inputRef.current!.dataset[key] = data[key]);
       }
     }
+
+    window.addEventListener('keydown', this.arrowKeysHandler.bind(this), false);
   }
 
   componentWillMount() {
-    const { value } = this.props;
+    const {
+      value,
+    } = this.props;
 
     if (this.componentRef && this.componentRef.current) {
       this.componentRef.current.removeEventListener('keydown', this.keyListener);
@@ -241,6 +208,10 @@ class SelectComponent extends Component<IProps> {
     this.setFilter();
   }
 
+  componentWillUnmount() {
+    window.removeEventListener('keydown', this.arrowKeysHandler.bind(this));
+  }
+
   setFilter(needle: string = '') {
     const { options } = this.props;
 
@@ -277,6 +248,49 @@ class SelectComponent extends Component<IProps> {
     }
   }
 
+  arrowKeysHandler(e: KeyboardEvent) {
+    const {
+      selected,
+      open,
+      options,
+    } = this.state;
+
+    if (!open) return;
+
+    if (e.keyCode === 38 || e.keyCode === 40) {
+      e.preventDefault();
+    }
+
+    if (this.componentRef && this.componentRef.current) {
+      if (e.keyCode === 38 && selected > 0) {
+        this.setState((state: IState) => ({
+          selected: state.selected - 1,
+        }));
+      } else if (e.keyCode === 40 && selected < Object.keys(options!).length - 1) {
+        this.setState((state: IState) => ({
+          selected: state.selected + 1,
+        }));
+      } else if (e.keyCode === 13) {
+        this.select(Object.keys(options!)[selected]);
+      }
+
+      if (this.activeOptionRef && this.activeOptionRef.current && this.scrollContainerRef && this.scrollContainerRef.current) {
+        const containerTopOffset = this.scrollContainerRef.current.offsetTop;
+        const optionTopOffset = this.activeOptionRef.current.offsetTop;
+
+        const topOffset = optionTopOffset - containerTopOffset;
+
+        this.scrollContainerRef.current.scrollTop = topOffset - 35;
+      }
+    }
+
+    switch (e.keyCode){
+      case 37: case 39: case 38:  case 40: // Arrow keys
+      case 32:  break; // Space
+      default: break; // do not block other keys
+    }
+  }
+
   render() {
     const {
       actionText,
@@ -314,6 +328,7 @@ class SelectComponent extends Component<IProps> {
     return (
       <Wrapper
         className={className}
+        identifier="franz-select"
       >
         <Label
           title={label}
@@ -366,7 +381,7 @@ class SelectComponent extends Component<IProps> {
                   <button
                     type="button"
                     className={classes.clearNeedle}
-                    onClick={() => this.setState({ needle: '', selected: -1 })}
+                    onClick={() => this.setFilter()}
                   >
                     <Icon
                       path={mdiCloseCircle}
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx
index 4f446ab1a..6487f1d07 100644
--- a/packages/forms/src/toggle/index.tsx
+++ b/packages/forms/src/toggle/index.tsx
@@ -1,7 +1,6 @@
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
 import CSS from 'csstype';
-import { observer } from 'mobx-react';
 import React, { Component, createRef } from 'react';
 import injectStyle from 'react-jss';
 
@@ -55,7 +54,6 @@ const styles = (theme: Theme) => ({
   },
 });
 
-@observer
 class ToggleComponent extends Component<IProps> {
   public static defaultProps = {
     onChange: () => {},
@@ -81,6 +79,7 @@ class ToggleComponent extends Component<IProps> {
     return (
       <Wrapper
         className={className}
+        identifier="franz-toggle"
       >
         <Label
           title={label}
diff --git a/packages/forms/src/wrapper/index.tsx b/packages/forms/src/wrapper/index.tsx
index 87e2c6513..d9c61381d 100644
--- a/packages/forms/src/wrapper/index.tsx
+++ b/packages/forms/src/wrapper/index.tsx
@@ -1,5 +1,4 @@
 import classnames from 'classnames';
-import { observer } from 'mobx-react';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 import { IWithStyle } from '../typings/generic';
@@ -9,22 +8,26 @@ import styles from './styles';
 interface IProps extends IWithStyle {
   children: React.ReactNode;
   className?: string;
+  identifier: string;
 }
 
-@observer
 class WrapperComponent extends Component<IProps> {
   render() {
     const {
       children,
       classes,
       className,
+      identifier,
     } = this.props;
 
     return (
-      <div className={classnames({
-        [`${classes.container}`]: true,
-        [`${className}`]: className,
-      })}>
+      <div
+        className={classnames({
+          [`${classes.container}`]: true,
+          [`${className}`]: className,
+        })}
+        data-type={identifier}
+      >
         {children}
       </div>
     );
diff --git a/packages/forms/webpack.config.js b/packages/forms/webpack.config.js
deleted file mode 100644
index cc3370359..000000000
--- a/packages/forms/webpack.config.js
+++ /dev/null
@@ -1,19 +0,0 @@
-const path = require('path');
-const baseConfig = require('../../webpack.config.base')(__dirname);
-
-module.exports = Object.assign({}, baseConfig, {
-  output: {
-    filename: 'index.js',
-    path: path.join(__dirname, 'lib'),
-    libraryTarget: 'commonjs2',
-  },
-  externals: {
-    react: 'react',
-    reactDom: 'react-dom',
-    classnames: 'classnames',
-    lodash: 'lodash',
-    mobx: 'mobx',
-    mobxReact: 'mobx-react',
-    reactJss: 'react-jss',
-  },
-});
diff --git a/packages/theme/package.json b/packages/theme/package.json
index c31271aab..83d58b56d 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meetfranz/theme",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Theme configuration for Franz",
   "author": "Stefan Malzner <stefan@adlk.io>",
   "homepage": "https://github.com/meetfranz/franz",
@@ -14,8 +14,8 @@
     "url": "git+https://github.com/meetfranz/franz.git"
   },
   "scripts": {
-    "dev": "NODE_ENV=development ../../node_modules/.bin/webpack -w",
-    "prepare": "../../node_modules/.bin/webpack",
+    "dev": "tsc -w",
+    "prepare": "tsc",
     "preprepare": "npm run test",
     "test": "npx mocha"
   },
diff --git a/packages/theme/webpack.config.js b/packages/theme/webpack.config.js
deleted file mode 100644
index 8ad7ee3b6..000000000
--- a/packages/theme/webpack.config.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const path = require('path');
-const baseConfig = require('../../webpack.config.base')(__dirname);
-
-module.exports = Object.assign({}, baseConfig, {
-  output: {
-    filename: 'index.js',
-    path: path.join(__dirname, 'lib'),
-    libraryTarget: 'commonjs2',
-  },
-});
diff --git a/packages/ui/package.json b/packages/ui/package.json
index cd7252850..387f8de50 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@meetfranz/ui",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "React UI components for Franz",
   "main": "lib/index.js",
   "scripts": {
-    "dev": "NODE_ENV=development ../../node_modules/.bin/webpack -w",
-    "prepare": "../../node_modules/.bin/webpack"
+    "dev": "tsc -w",
+    "prepare": "tsc"
   },
   "publishConfig": {
     "access": "public"
@@ -30,9 +30,6 @@
   },
   "peerDependencies": {
     "classnames": "^2.2.6",
-    "lodash": "^4.17.11",
-    "mobx": "^5.8.0",
-    "mobx-react": "^5.4.3",
     "react": "^16.7.0",
     "react-dom": "16.7.0",
     "react-jss": "^8.6.1"
diff --git a/packages/ui/src/badge/index.tsx b/packages/ui/src/badge/index.tsx
index 241e778e7..fc52ecc73 100644
--- a/packages/ui/src/badge/index.tsx
+++ b/packages/ui/src/badge/index.tsx
@@ -65,6 +65,7 @@ class BadgeComponent extends Component<IProps> {
           [classes[type]]: true,
           [`${className}`]: className,
         })}
+        data-type="franz-badge"
       >
         {children}
       </div>
diff --git a/packages/ui/src/headline/index.tsx b/packages/ui/src/headline/index.tsx
index 3458a40ad..7eabfcf80 100644
--- a/packages/ui/src/headline/index.tsx
+++ b/packages/ui/src/headline/index.tsx
@@ -3,7 +3,6 @@ import classnames from 'classnames';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 
-import { uiFontSize } from '@meetfranz/theme/lib/themes/default';
 import { IWithStyle, Omit } from '../typings/generic';
 
 interface IProps extends IWithStyle {
@@ -55,6 +54,7 @@ class HeadlineComponent extends Component<IProps> {
           [classes[level ? `h${level}` : 'h1']]: true,
           [`${className}`]: className,
         }),
+        'data-type': 'franz-headline',
       },
       children,
     );
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx
index bf985ea9c..53ed16341 100644
--- a/packages/ui/src/infobox/index.tsx
+++ b/packages/ui/src/infobox/index.tsx
@@ -1,9 +1,7 @@
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
-import { observer } from 'mobx-react';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
-// import Loader from 'react-loader';
 
 import { Icon } from '../';
 import { IWithStyle } from '../typings/generic';
@@ -95,7 +93,6 @@ const styles = (theme: Theme) => ({
   ...buttonStyles(theme),
 });
 
-@observer
 class InfoboxComponent extends Component<IProps, IState> {
   public static defaultProps = {
     type: 'primary',
@@ -160,6 +157,7 @@ class InfoboxComponent extends Component<IProps, IState> {
             [classes[`${type}`]]: type,
             [classes.dismissing]: isDismissing,
           })}
+          data-type="franz-infobox"
         >
           {icon && (
             <Icon icon={icon} className={classes.icon} />
diff --git a/packages/ui/src/loader/index.tsx b/packages/ui/src/loader/index.tsx
index 799caf195..de5ba5237 100644
--- a/packages/ui/src/loader/index.tsx
+++ b/packages/ui/src/loader/index.tsx
@@ -26,10 +26,13 @@ class LoaderComponent extends Component<IProps> {
     } = this.props;
 
     return (
-      <div className={classnames({
-        [classes.container]: true,
-        [`${className}`]: className,
-      })}>
+      <div
+        className={classnames({
+          [classes.container]: true,
+          [`${className}`]: className,
+        })}
+        data-type="franz-loader"
+      >
         <ReactLoader
           loaded={false}
           width={4}
diff --git a/packages/ui/webpack.config.js b/packages/ui/webpack.config.js
deleted file mode 100644
index cc3370359..000000000
--- a/packages/ui/webpack.config.js
+++ /dev/null
@@ -1,19 +0,0 @@
-const path = require('path');
-const baseConfig = require('../../webpack.config.base')(__dirname);
-
-module.exports = Object.assign({}, baseConfig, {
-  output: {
-    filename: 'index.js',
-    path: path.join(__dirname, 'lib'),
-    libraryTarget: 'commonjs2',
-  },
-  externals: {
-    react: 'react',
-    reactDom: 'react-dom',
-    classnames: 'classnames',
-    lodash: 'lodash',
-    mobx: 'mobx',
-    mobxReact: 'mobx-react',
-    reactJss: 'react-jss',
-  },
-});