Merge tag 'v5.1.0'

# Conflicts:
#	README.md
#	src/components/layout/AppLayout.js

19 files changed, 1631 insertions, 0 deletions

diff --git a/packages/forms/.gitignore b/packages/forms/.gitignore
new file mode 100644
index 000000000..d01826a6b
--- /dev/null
+++ b/packages/forms/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+lib
diff --git a/packages/forms/package-lock.json b/packages/forms/package-lock.json
new file mode 100644
index 000000000..b5b24c239
--- /dev/null
+++ b/packages/forms/package-lock.json
@@ -0,0 +1,220 @@
+{
+  "name": "@meetfranz/forms",
+  "version": "1.0.6",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@mdi/js": {
+      "version": "3.3.92",
+      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-3.3.92.tgz",
+      "integrity": "sha512-l+12IwTycHlijWMiRWBAssm0RSgkQiwMthIy/EcBAdSqtnsHnFjHq+aI2MBZ8/AYX0QBxNUv4+EN0SXZgNkWDg=="
+    },
+    "@mdi/react": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@mdi/react/-/react-1.1.0.tgz",
+      "integrity": "sha512-c0+avMYEZ6i7Pg1ULLFs+p7k8bDPiie9rrgGYs8VWQhw2tUUYz7r0lIPVzD3bzMghWfyhfkArj88K5Of0WTMNw=="
+    },
+    "@meetfranz/theme": {
+      "version": "file:../theme",
+      "requires": {
+        "color": "^3.1.0"
+      },
+      "dependencies": {
+        "color": {
+          "version": "3.1.0",
+          "bundled": true,
+          "requires": {
+            "color-convert": "^1.9.1",
+            "color-string": "^1.5.2"
+          }
+        },
+        "color-convert": {
+          "version": "1.9.3",
+          "bundled": true,
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "bundled": true
+        },
+        "color-string": {
+          "version": "1.5.3",
+          "bundled": true,
+          "requires": {
+            "color-name": "^1.0.0",
+            "simple-swizzle": "^0.2.2"
+          }
+        },
+        "is-arrayish": {
+          "version": "0.3.2",
+          "bundled": true
+        },
+        "simple-swizzle": {
+          "version": "0.2.2",
+          "bundled": true,
+          "requires": {
+            "is-arrayish": "^0.3.1"
+          }
+        }
+      }
+    },
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
+    },
+    "core-js": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+      "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+    },
+    "create-react-class": {
+      "version": "15.6.3",
+      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.3.tgz",
+      "integrity": "sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==",
+      "requires": {
+        "fbjs": "^0.8.9",
+        "loose-envify": "^1.3.1",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "encoding": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
+      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
+      "requires": {
+        "iconv-lite": "~0.4.13"
+      }
+    },
+    "fbjs": {
+      "version": "0.8.17",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
+      "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
+      "requires": {
+        "core-js": "^1.0.0",
+        "isomorphic-fetch": "^2.1.1",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.18"
+      }
+    },
+    "html-element-attributes": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/html-element-attributes/-/html-element-attributes-1.3.1.tgz",
+      "integrity": "sha512-UrRKgp5sQmRnDy4TEwAUsu14XBUlzKB8U3hjIYDjcZ3Hbp86Jtftzxfgrv6E/ii/h78tsaZwAnAE8HwnHr0dPA=="
+    },
+    "iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
+    "is-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
+    },
+    "isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
+      "requires": {
+        "node-fetch": "^1.0.1",
+        "whatwg-fetch": ">=0.10.0"
+      }
+    },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "node-fetch": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+      "requires": {
+        "encoding": "^0.1.11",
+        "is-stream": "^1.0.1"
+      }
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+    },
+    "promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "requires": {
+        "asap": "~2.0.3"
+      }
+    },
+    "prop-types": {
+      "version": "15.6.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
+      "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+      "requires": {
+        "loose-envify": "^1.3.1",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "react-html-attributes": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/react-html-attributes/-/react-html-attributes-1.4.3.tgz",
+      "integrity": "sha1-jDbDX85rdQk40oavQo7R2nYlGG4=",
+      "requires": {
+        "html-element-attributes": "^1.0.0"
+      }
+    },
+    "react-loader": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/react-loader/-/react-loader-2.4.5.tgz",
+      "integrity": "sha1-zT5VHGzQc4wcDxPwc2VPk4KL5ak=",
+      "requires": {
+        "create-react-class": "^15.5.2",
+        "prop-types": "^15.5.8",
+        "spin.js": "2.x"
+      }
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
+    },
+    "spin.js": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/spin.js/-/spin.js-2.3.2.tgz",
+      "integrity": "sha1-bKpW1SBnNFD9XPvGlx5tB3LDeho="
+    },
+    "ua-parser-js": {
+      "version": "0.7.19",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz",
+      "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ=="
+    },
+    "whatwg-fetch": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz",
+      "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q=="
+    }
+  }
+}
diff --git a/packages/forms/package.json b/packages/forms/package.json
new file mode 100644
index 000000000..0ac9a846f
--- /dev/null
+++ b/packages/forms/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "@meetfranz/forms",
+  "version": "1.0.15",
+  "description": "React form components for Franz",
+  "main": "lib/index.js",
+  "scripts": {
+    "dev": "tsc -w",
+    "prepare": "tsc"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/meetfranz/franz.git"
+  },
+  "keywords": [
+    "Franz",
+    "Forms",
+    "React",
+    "UI"
+  ],
+  "author": "Stefan Malzner <stefan@adlk.io>",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@mdi/js": "^3.3.92",
+    "@mdi/react": "^1.1.0",
+    "@meetfranz/theme": "^1.0.13",
+    "react-html-attributes": "^1.4.3",
+    "react-loader": "^2.4.5"
+  },
+  "peerDependencies": {
+    "classnames": "^2.2.6",
+    "react": "^16.7.0",
+    "react-dom": "16.7.0",
+    "react-jss": "^8.6.1"
+  },
+  "gitHead": "e9b9079dc921e85961954727a7b2a8eabe5b9798"
+}
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx
new file mode 100644
index 000000000..6959cde73
--- /dev/null
+++ b/packages/forms/src/button/index.tsx
@@ -0,0 +1,275 @@
+import * as mdiIcons from '@mdi/js';
+import Icon from '@mdi/react';
+import { Theme } from '@meetfranz/theme';
+import classnames from 'classnames';
+import CSS from 'csstype';
+import React, { Component } from 'react';
+import injectStyle, { withTheme } from 'react-jss';
+import Loader from 'react-loader';
+
+import { IFormField, IWithStyle } from '../typings/generic';
+
+type ButtonType = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'inverted';
+
+interface IProps extends IFormField, IWithStyle {
+  className?: string;
+  disabled?: boolean;
+  id?: string;
+  type?: string;
+  onClick: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>) => void;
+  buttonType?: ButtonType;
+  stretch?: boolean;
+  loaded?: boolean;
+  busy?: boolean;
+  icon?: keyof typeof mdiIcons;
+  href?: string;
+  target?: string;
+}
+
+interface IState {
+  busy: boolean;
+}
+
+const styles = (theme: Theme) => ({
+  button: {
+    borderRadius: theme.borderRadiusSmall,
+    border: 'none',
+    display: 'inline-flex',
+    position: 'relative' as CSS.PositionProperty,
+    transition: 'background .5s, opacity 0.3s',
+    textAlign: 'center' as CSS.TextAlignProperty,
+    outline: 'none',
+    alignItems: 'center',
+    padding: 0,
+    width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.WidthProperty<string>,
+    fontSize: theme.uiFontSize,
+    textDecoration: 'none',
+    height: theme.buttonHeight,
+
+    '&:hover': {
+      opacity: 0.8,
+    },
+    '&:active': {
+      opacity: 0.5,
+      transition: 'none',
+    },
+  },
+  label: {
+    margin: '10px 20px',
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  primary: {
+    background: theme.buttonPrimaryBackground,
+    color: theme.buttonPrimaryTextColor,
+
+    '& svg': {
+      fill: theme.buttonPrimaryTextColor,
+    },
+  },
+  secondary: {
+    background: theme.buttonSecondaryBackground,
+    color: theme.buttonSecondaryTextColor,
+
+    '& svg': {
+      fill: theme.buttonSecondaryTextColor,
+    },
+  },
+  success: {
+    background: theme.buttonSuccessBackground,
+    color: theme.buttonSuccessTextColor,
+
+    '& svg': {
+      fill: theme.buttonSuccessTextColor,
+    },
+  },
+  danger: {
+    background: theme.buttonDangerBackground,
+    color: theme.buttonDangerTextColor,
+
+    '& svg': {
+      fill: theme.buttonDangerTextColor,
+    },
+  },
+  warning: {
+    background: theme.buttonWarningBackground,
+    color: theme.buttonWarningTextColor,
+
+    '& svg': {
+      fill: theme.buttonWarningTextColor,
+    },
+  },
+  inverted: {
+    background: theme.buttonInvertedBackground,
+    color: theme.buttonInvertedTextColor,
+    border: theme.buttonInvertedBorder,
+
+    '& svg': {
+      fill: theme.buttonInvertedTextColor,
+    },
+  },
+  disabled: {
+    opacity: theme.inputDisabledOpacity,
+  },
+  loader: {
+    position: 'relative' as CSS.PositionProperty,
+    width: 20,
+    height: 18,
+    zIndex: 9999,
+  },
+  loaderContainer: {
+    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',
+  },
+  icon: {
+    marginLeft: -5,
+    marginRight: 10,
+  },
+});
+
+class ButtonComponent extends Component<IProps> {
+  public static defaultProps = {
+    type: 'button',
+    disabled: false,
+    onClick: () => null,
+    buttonType: 'primary' as ButtonType,
+    stretch: false,
+    busy: false,
+    // target: '_self'
+  };
+
+  state = {
+    busy: false,
+  };
+
+  componentWillMount() {
+    this.setState({ busy: this.props.busy });
+  }
+
+  componentWillReceiveProps(nextProps: IProps) {
+    if (nextProps.busy !== this.props.busy) {
+      if (this.props.busy) {
+        setTimeout(() => {
+          this.setState({ busy: nextProps.busy });
+        },         300);
+      } else {
+        this.setState({ busy: nextProps.busy });
+      }
+    }
+  }
+
+  render() {
+    const {
+      classes,
+      className,
+      theme,
+      disabled,
+      id,
+      label,
+      type,
+      onClick,
+      buttonType,
+      loaded,
+      icon: iconName,
+      busy: busyProp,
+      href,
+      target,
+    } = this.props;
+
+    const {
+      busy,
+    } = this.state;
+
+    let icon = '';
+    if (iconName && mdiIcons[iconName]) {
+      icon = mdiIcons[iconName];
+    } else if (iconName && !mdiIcons[iconName]) {
+      console.warn(`Icon '${iconName}' was not found`);
+    }
+
+    let showLoader = false;
+    if (loaded) {
+      showLoader = !loaded;
+      console.warn('Franz Button prop `loaded` will be deprecated in the future. Please use `busy` instead');
+    }
+    if (busy) {
+      showLoader = busy;
+    }
+
+    const content = (
+      <>
+        <div className={classes.loaderContainer}>
+          {showLoader && (
+            <Loader
+              loaded={false}
+              width={4}
+              scale={0.45}
+              color={theme.buttonLoaderColor[buttonType!]}
+              parentClassName={classes.loader}
+            />
+          )}
+        </div>
+        <div className={classes.label}>
+          {icon && (
+            <Icon
+              path={icon}
+              size={1}
+              className={classes.icon}
+            />
+          )}
+          {label}
+        </div>
+      </>
+    );
+
+    let wrapperComponent = null;
+
+    if (!href) {
+      wrapperComponent = (
+        <button
+          id={id}
+          type={type}
+          onClick={onClick}
+          className={classnames({
+            [`${classes.button}`]: true,
+            [`${classes[buttonType as ButtonType]}`]: true,
+            [`${classes.disabled}`]: disabled,
+            [`${className}`]: className,
+          })}
+          disabled={disabled}
+          data-type="franz-button"
+        >
+          {content}
+        </button>
+      );
+    } else {
+      wrapperComponent = (
+        <a
+          href={href}
+          target={target}
+          onClick={onClick}
+          className={classnames({
+            [`${classes.button}`]: true,
+            [`${classes[buttonType as ButtonType]}`]: true,
+            [`${className}`]: className,
+          })}
+          rel={target === '_blank' ? 'noopener' : ''}
+          data-type="franz-button"
+        >
+          {content}
+        </a>
+      );
+    }
+
+    return wrapperComponent;
+  }
+}
+
+export const Button = injectStyle(styles)(withTheme(ButtonComponent));
diff --git a/packages/forms/src/error/index.tsx b/packages/forms/src/error/index.tsx
new file mode 100644
index 000000000..a487bb281
--- /dev/null
+++ b/packages/forms/src/error/index.tsx
@@ -0,0 +1,29 @@
+import { Classes } from 'jss';
+import React, { Component } from 'react';
+import injectSheet from 'react-jss';
+
+import styles from './styles';
+
+interface IProps {
+  classes: Classes;
+  message: string;
+}
+
+class ErrorComponent extends Component<IProps> {
+  render() {
+    const {
+      classes,
+      message,
+    } = this.props;
+
+    return (
+      <p
+        className={classes.message}
+      >
+        {message}
+      </p>
+    );
+  }
+}
+
+export const Error = injectSheet(styles)(ErrorComponent);
diff --git a/packages/forms/src/error/styles.ts b/packages/forms/src/error/styles.ts
new file mode 100644
index 000000000..5104838a5
--- /dev/null
+++ b/packages/forms/src/error/styles.ts
@@ -0,0 +1,9 @@
+import { Theme } from '../../../theme/lib';
+
+export default (theme: Theme) => ({
+  message: {
+    color: theme.brandDanger,
+    margin: '5px 0 0',
+    fontSize: theme.uiFontSize,
+  },
+});
diff --git a/packages/forms/src/index.ts b/packages/forms/src/index.ts
new file mode 100644
index 000000000..ea47fe25e
--- /dev/null
+++ b/packages/forms/src/index.ts
@@ -0,0 +1,4 @@
+export { Input } from './input';
+export { Toggle } from './toggle';
+export { Button } from './button';
+export { Select } from './select';
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx
new file mode 100644
index 000000000..a2d7c62d5
--- /dev/null
+++ b/packages/forms/src/input/index.tsx
@@ -0,0 +1,211 @@
+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';
+
+import { IFormField, IWithStyle } from '../typings/generic';
+
+import { Error } from '../error';
+import { Label } from '../label';
+import { Wrapper } from '../wrapper';
+import { scorePasswordFunc } from './scorePassword';
+
+import styles from './styles';
+
+interface IData {
+  [index: string]: string;
+}
+
+interface IProps extends React.InputHTMLAttributes<HTMLInputElement>, IFormField, IWithStyle {
+  focus?: boolean;
+  prefix?: string;
+  suffix?: string;
+  scorePassword?: boolean;
+  showPasswordToggle?: boolean;
+  data: IData;
+  inputClassName?: string;
+  onEnterKey?: Function;
+}
+
+interface IState {
+  showPassword: boolean;
+  passwordScore: number;
+}
+
+class InputComponent extends Component<IProps, IState> {
+  static defaultProps = {
+    focus: false,
+    onChange: () => {},
+    onBlur: () => {},
+    onFocus: () => {},
+    scorePassword: false,
+    showLabel: true,
+    showPasswordToggle: false,
+    type: 'text',
+    disabled: false,
+  };
+
+  state = {
+    passwordScore: 0,
+    showPassword: false,
+  };
+
+  private inputRef = createRef<HTMLInputElement>();
+
+  componentDidMount() {
+    const { focus, data } = this.props;
+
+    if (this.inputRef && this.inputRef.current) {
+      if (focus) {
+        this.inputRef.current.focus();
+      }
+
+      if (data) {
+        Object.keys(data).map(key => this.inputRef.current!.dataset[key] = data[key]);
+      }
+    }
+  }
+
+  onChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const {
+      scorePassword,
+      onChange,
+    } = this.props;
+
+    if (onChange) {
+      onChange(e);
+    }
+
+    if (this.inputRef && this.inputRef.current && scorePassword) {
+      this.setState({ passwordScore: scorePasswordFunc(this.inputRef.current.value) });
+    }
+  }
+
+  onInputKeyPress(e: React.KeyboardEvent) {
+    if (e.key === "Enter") {
+      const { onEnterKey } = this.props;
+      onEnterKey && onEnterKey();
+    }
+  }
+
+  render() {
+    const {
+      classes,
+      className,
+      disabled,
+      error,
+      id,
+      inputClassName,
+      label,
+      prefix,
+      scorePassword,
+      suffix,
+      showLabel,
+      showPasswordToggle,
+      type,
+      value,
+      name,
+      placeholder,
+      spellCheck,
+      onBlur,
+      onFocus,
+      min,
+      max,
+      step,
+      required,
+    } = this.props;
+
+    const {
+      showPassword,
+      passwordScore,
+    } = this.state;
+
+    const inputType = type === 'password' && showPassword ? 'text' : type;
+
+    return (
+      <Wrapper
+        className={className}
+        identifier="franz-input"
+      >
+        <Label
+          title={label}
+          showLabel={showLabel}
+          htmlFor={id}
+          className={classes.label}
+          isRequired={required}
+        >
+          <div
+            className={classnames({
+              [`${inputClassName}`]: inputClassName,
+              [`${classes.hasPasswordScore}`]: scorePassword,
+              [`${classes.wrapper}`]: true,
+              [`${classes.disabled}`]: disabled,
+              [`${classes.hasError}`]: error,
+            })}>
+            {prefix && (
+              <span className={classes.prefix}>
+                {prefix}
+              </span>
+            )}
+            <input
+              id={id}
+              type={inputType}
+              name={name}
+              value={value as string}
+              placeholder={placeholder}
+              spellCheck={spellCheck}
+              className={classes.input}
+              ref={this.inputRef}
+              onChange={this.onChange.bind(this)}
+              onFocus={onFocus}
+              onBlur={onBlur}
+              disabled={disabled}
+              onKeyPress={this.onInputKeyPress.bind(this)}
+              min={min}
+              max={max}
+              step={step}
+            />
+            {suffix && (
+              <span className={classes.suffix}>
+                {suffix}
+              </span>
+            )}
+            {showPasswordToggle && (
+              <button
+                type="button"
+                className={classes.formModifier}
+                onClick={() => this.setState(prevState => ({ showPassword: !prevState.showPassword }))}
+                tabIndex={-1}
+              >
+                <Icon
+                  path={!showPassword ? mdiEye : mdiEyeOff}
+                  size={1}
+                />
+              </button>
+            )}
+          </div>
+          {scorePassword && (
+            <div className={classnames({
+              [`${classes.passwordScore}`]: true,
+              [`${classes.hasError}`]: error,
+            })}>
+              <meter
+                value={passwordScore < 5 ? 5 : passwordScore}
+                low={30}
+                high={75}
+                optimum={100}
+                max={100}
+              />
+            </div>
+          )}
+        </Label>
+        {error && (
+          <Error message={error} />
+        )}
+      </Wrapper>
+    );
+  }
+}
+
+export const Input = injectSheet(styles)(InputComponent);
diff --git a/packages/forms/src/input/scorePassword.ts b/packages/forms/src/input/scorePassword.ts
new file mode 100644
index 000000000..0b7719ec1
--- /dev/null
+++ b/packages/forms/src/input/scorePassword.ts
@@ -0,0 +1,42 @@
+interface ILetters {
+  [key: string]: number;
+}
+
+interface IVariations {
+  [index: string]: boolean;
+  digits: boolean;
+  lower: boolean;
+  nonWords: boolean;
+  upper: boolean;
+}
+
+export function scorePasswordFunc(password: string): number {
+  let score: number = 0;
+  if (!password) {
+    return score;
+  }
+
+  // award every unique letter until 5 repetitions
+  const letters: ILetters = {};
+  for (let i = 0; i < password.length; i += 1) {
+    letters[password[i]] = (letters[password[i]] || 0) + 1;
+    score += 5.0 / letters[password[i]];
+  }
+
+  // bonus points for mixing it up
+  const variations: IVariations = {
+    digits: /\d/.test(password),
+    lower: /[a-z]/.test(password),
+    nonWords: /\W/.test(password),
+    upper: /[A-Z]/.test(password),
+  };
+
+  let variationCount = 0;
+  Object.keys(variations).forEach((key) => {
+    variationCount += (variations[key] === true) ? 1 : 0;
+  });
+
+  score += (variationCount - 1) * 10;
+
+  return Math.round(score);
+}
diff --git a/packages/forms/src/input/styles.ts b/packages/forms/src/input/styles.ts
new file mode 100644
index 000000000..e2ab30a4f
--- /dev/null
+++ b/packages/forms/src/input/styles.ts
@@ -0,0 +1,101 @@
+import { Theme } from '@meetfranz/theme';
+import CSS from 'csstype';
+
+const prefixStyles = (theme: Theme) => ({
+  background: theme.inputPrefixBackground,
+  color: theme.inputPrefixColor,
+  lineHeight: `${theme.inputHeight}px`,
+  padding: '0 10px',
+  fontSize: theme.uiFontSize,
+});
+
+export default (theme: Theme) => ({
+  label: {
+    '& > div': {
+      marginTop: 5,
+    }
+  },
+  disabled: {
+    opacity: theme.inputDisabledOpacity,
+  },
+  formModifier: {
+    background: 'none',
+    border: 0,
+    borderLeft: theme.inputBorder,
+    padding: '4px 20px 0',
+    outline: 'none',
+
+    '&:active': {
+      opacity: 0.5,
+    },
+
+    '& svg': {
+      fill: theme.inputModifierColor,
+    },
+  },
+  input: {
+    background: 'none',
+    border: 0,
+    fontSize: theme.uiFontSize,
+    outline: 'none',
+    padding: 8,
+    width: '100%',
+    color: theme.inputColor,
+
+    '&::placeholder': {
+      color: theme.inputPlaceholderColor,
+    },
+  },
+  passwordScore: {
+    background: theme.inputScorePasswordBackground,
+    border: theme.inputBorder,
+    borderTopWidth: 0,
+    borderBottomLeftRadius: theme.borderRadiusSmall,
+    borderBottomRightRadius: theme.borderRadiusSmall,
+    display: 'block',
+    flexBasis: '100%',
+    height: 5,
+    overflow: 'hidden',
+
+    '& meter': {
+      display: 'block',
+      height: '100%',
+      width: '100%',
+
+      '&::-webkit-meter-bar': {
+        background: 'none',
+      },
+
+      '&::-webkit-meter-even-less-good-value': {
+        background: theme.brandDanger,
+      },
+
+      '&::-webkit-meter-suboptimum-value': {
+        background: theme.brandWarning,
+      },
+
+      '&::-webkit-meter-optimum-value': {
+        background: theme.brandSuccess,
+      },
+    },
+  },
+  prefix: prefixStyles(theme),
+  suffix: prefixStyles(theme),
+  wrapper: {
+    background: theme.inputBackground,
+    border: theme.inputBorder,
+    borderRadius: theme.borderRadiusSmall,
+    boxSizing: 'border-box' as CSS.BoxSizingProperty,
+    display: 'flex',
+    height: theme.inputHeight,
+    order: 1,
+    width: '100%',
+  },
+  hasPasswordScore: {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+  hasError: {
+    borderColor: theme.brandDanger,
+  },
+});
diff --git a/packages/forms/src/label/index.tsx b/packages/forms/src/label/index.tsx
new file mode 100644
index 000000000..1b33ba22c
--- /dev/null
+++ b/packages/forms/src/label/index.tsx
@@ -0,0 +1,51 @@
+import classnames from 'classnames';
+import { Classes } from 'jss';
+import React, { Component } from 'react';
+import injectSheet from 'react-jss';
+
+import { IFormField } from '../typings/generic';
+
+import styles from './styles';
+
+interface ILabel extends IFormField, React.LabelHTMLAttributes<HTMLLabelElement> {
+  classes: Classes;
+  isRequired: boolean;
+}
+
+class LabelComponent extends Component<ILabel> {
+  static defaultProps = {
+    showLabel: true,
+  };
+
+  render() {
+    const {
+      title,
+      showLabel,
+      classes,
+      className,
+      children,
+      htmlFor,
+      isRequired,
+    } = this.props;
+
+    if (!showLabel) return children;
+
+    return (
+      <label
+        className={classnames({
+          [`${className}`]: className,
+        })}
+        htmlFor={htmlFor}
+      >
+        {showLabel && (
+          <span className={classes.label}>{title}{isRequired && ' *'}</span>
+        )}
+        <div className={classes.content}>
+          {children}
+        </div>
+      </label>
+    );
+  }
+}
+
+export const Label = injectSheet(styles)(LabelComponent);
diff --git a/packages/forms/src/label/styles.ts b/packages/forms/src/label/styles.ts
new file mode 100644
index 000000000..c64c9b285
--- /dev/null
+++ b/packages/forms/src/label/styles.ts
@@ -0,0 +1,12 @@
+import { Theme } from '../../../theme/lib';
+
+export default (theme: Theme) => ({
+  content: {},
+  label: {
+    color: theme.labelColor,
+    fontSize: theme.uiFontSize,
+  },
+  hasError: {
+    color: theme.brandDanger,
+  },
+});
diff --git a/packages/forms/src/select/index.tsx b/packages/forms/src/select/index.tsx
new file mode 100644
index 000000000..0e5ded176
--- /dev/null
+++ b/packages/forms/src/select/index.tsx
@@ -0,0 +1,445 @@
+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 { NONAME } from 'dns';
+import { Error } from '../error';
+import { Label } from '../label';
+import { Wrapper } from '../wrapper';
+
+interface IOptions {
+  [index: string]: string;
+}
+
+interface IData {
+  [index: string]: string;
+}
+
+interface IProps extends IFormField, IWithStyle {
+  actionText: string;
+  className?: string;
+  inputClassName?: string;
+  defaultValue?: string;
+  disabled?: boolean;
+  id?: string;
+  name: string;
+  options: IOptions;
+  value: string;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  showSearch: boolean;
+  data: IData;
+}
+
+interface IState {
+  open: boolean;
+  value: string;
+  needle: string;
+  selected: number;
+  options: IOptions;
+}
+
+const styles = (theme: Theme) => ({
+  select: {
+    background: theme.selectBackground,
+    border: theme.selectBorder,
+    borderRadius: theme.borderRadiusSmall,
+    height: theme.selectHeight,
+    fontSize: theme.uiFontSize,
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    textAlign: 'left',
+    color: theme.selectColor,
+  },
+  label: {
+    '& > div': {
+      marginTop: 5,
+    }
+  },
+  popup: {
+    opacity: 0,
+    height: 0,
+    overflowX: 'scroll',
+    border: theme.selectBorder,
+    borderTop: 0,
+    transition: 'all 0.3s',
+  },
+  open: {
+    opacity: 1,
+    height: 350,
+    background: theme.selectPopupBackground,
+  },
+  option: {
+    padding: 10,
+    borderBottom: theme.selectOptionBorder,
+    color: theme.selectOptionColor,
+
+    '&:hover': {
+      background: theme.selectOptionItemHover,
+      color: theme.selectOptionItemHoverColor,
+    },
+    '&:active': {
+      background: theme.selectOptionItemActive,
+      color: theme.selectOptionItemActiveColor,
+    },
+  },
+  selected: {
+    background: theme.selectOptionItemActive,
+    color: theme.selectOptionItemActiveColor,
+  },
+  toggle: {
+    marginLeft: 'auto',
+    fill: theme.selectToggleColor,
+    transition: 'transform 0.3s',
+  },
+  toggleOpened: {
+    transform: 'rotateZ(90deg)',
+  },
+  searchContainer: {
+    display: 'flex',
+    background: theme.selectSearchBackground,
+    alignItems: 'center',
+    paddingLeft: 10,
+    color: theme.selectColor,
+
+    '& svg': {
+      fill: theme.selectSearchColor,
+    },
+  },
+  search: {
+    border: 0,
+    width: '100%',
+    fontSize: theme.uiFontSize,
+    background: 'none',
+    marginLeft: 10,
+    padding: [10, 0],
+    color: theme.selectSearchColor,
+  },
+  clearNeedle: {
+    background: 'none',
+    border: 0,
+  },
+  focused: {
+    fontWeight: 'bold',
+    background: theme.selectOptionItemHover,
+    color: theme.selectOptionItemHoverColor,
+  },
+  hasError: {
+    borderColor: theme.brandDanger,
+  },
+  disabled: {
+    opacity: theme.selectDisabledOpacity,
+  },
+});
+
+class SelectComponent extends Component<IProps> {
+  public static defaultProps = {
+    onChange: () => {},
+    showLabel: true,
+    disabled: false,
+    error: '',
+  };
+
+  state = {
+    open: false,
+    value: '',
+    needle: '',
+    selected: 0,
+    options: null,
+  };
+
+  private componentRef = createRef<HTMLDivElement>();
+  private inputRef = createRef<HTMLInputElement>();
+  private searchInputRef = createRef<HTMLInputElement>();
+  private scrollContainerRef = createRef<HTMLDivElement>();
+  private activeOptionRef = createRef<HTMLDivElement>();
+
+  private keyListener: any;
+
+  componentWillReceiveProps(nextProps: IProps) {
+    if (nextProps.value && nextProps.value !== this.props.value) {
+      this.setState({
+        value: nextProps.value,
+      });
+    }
+  }
+
+  componentDidUpdate(prevProps: IProps, prevState: IState) {
+    const {
+      open,
+    } = this.state;
+
+    if (this.searchInputRef && this.searchInputRef.current) {
+      if (open) {
+        this.searchInputRef.current.focus();
+      }
+    }
+  }
+
+  componentDidMount() {
+    if (this.inputRef && this.inputRef.current) {
+      const {
+        data,
+      } = this.props;
+
+      if (data) {
+        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;
+
+    if (this.componentRef && this.componentRef.current) {
+      this.componentRef.current.removeEventListener('keydown', this.keyListener);
+    }
+
+    if (value) {
+      this.setState({
+        value,
+      });
+    }
+
+    this.setFilter();
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('keydown', this.arrowKeysHandler.bind(this));
+  }
+
+  setFilter(needle: string = '') {
+    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.assign(filteredOptions, {
+            [`${key}`]: options[key],
+          });
+        }
+      });
+    } else {
+      filteredOptions = options;
+    }
+
+    this.setState({
+      needle,
+      options: filteredOptions,
+      selected: 0,
+    });
+  }
+
+  select(key: string) {
+    this.setState((state: IState) => ({
+      value: key,
+      open: false,
+    }));
+
+    this.setFilter();
+
+    if (this.props.onChange) {
+      this.props.onChange(key as any);
+    }
+  }
+
+  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,
+      classes,
+      className,
+      defaultValue,
+      disabled,
+      error,
+      id,
+      inputClassName,
+      name,
+      label,
+      showLabel,
+      showSearch,
+      onChange,
+      required,
+    } = this.props;
+
+    const {
+      open,
+      needle,
+      value,
+      selected,
+      options,
+    } = this.state;
+
+    let selection = '';
+    if (!value && defaultValue && options![defaultValue]) {
+      selection = options![defaultValue];
+    } else if (value && options![value]) {
+      selection = options![value];
+    } else {
+      selection = actionText;
+    }
+
+    return (
+      <Wrapper
+        className={className}
+        identifier="franz-select"
+      >
+        <Label
+          title={label}
+          showLabel={showLabel}
+          htmlFor={id}
+          className={classes.label}
+          isRequired={required}
+        >
+          <div
+            className={classnames({
+              [`${classes.hasError}`]: error,
+              [`${classes.disabled}`]: disabled,
+            })}
+            ref={this.componentRef}
+          >
+            <button
+              type="button"
+               className={classnames({
+                 [`${inputClassName}`]: inputClassName,
+                 [`${classes.select}`]: true,
+                 [`${classes.hasError}`]: error,
+               })}
+              onClick= {!disabled ? () => this.setState((state: IState) => ({
+                open: !state.open,
+              })) : () => {}}
+            >
+              {selection}
+              <Icon
+                path={mdiArrowRightDropCircleOutline}
+                size={0.8}
+                className={classnames({
+                  [`${classes.toggle}`]: true,
+                  [`${classes.toggleOpened}`]: open,
+                })}
+              />
+            </button>
+            {showSearch && open && (
+              <div className={classes.searchContainer}>
+                <Icon
+                  path={mdiMagnify}
+                  size={0.8}
+                />
+                <input
+                  type="text"
+                  value={needle}
+                  onChange={e => this.setFilter(e.currentTarget.value)}
+                  placeholder="Search"
+                  className={classes.search}
+                  ref={this.searchInputRef}
+                />
+                {needle && (
+                  <button
+                    type="button"
+                    className={classes.clearNeedle}
+                    onClick={() => this.setFilter()}
+                  >
+                    <Icon
+                      path={mdiCloseCircle}
+                      size={0.7}
+                    />
+                  </button>
+                )}
+              </div>
+            )}
+            <div
+              className={classnames({
+                [`${classes.popup}`]: true,
+                [`${classes.open}`]: open,
+              })}
+              ref={this.scrollContainerRef}
+            >
+              {Object.keys(options!).map(((key, i) => (
+                <div
+                  key={key}
+                  onClick={() => this.select(key)}
+                  className={classnames({
+                    [`${classes.option}`]: true,
+                    [`${classes.selected}`]: options![key] === selection,
+                    [`${classes.focused}`]: selected === i,
+                  })}
+                  onMouseOver={() => this.setState({ selected: i })}
+                  ref={selected === i ? this.activeOptionRef : null}
+                >
+                  {options![key]}
+                </div>
+              )))}
+            </div>
+          </div>
+          <input
+            className={classes.input}
+            id={id}
+            name={name}
+            type="hidden"
+            defaultValue={value}
+            onChange={onChange}
+            disabled={disabled}
+            ref={this.inputRef}
+          />
+        </Label>
+        {error && (
+          <Error message={error} />
+        )}
+      </Wrapper>
+    );
+  }
+}
+
+export const Select = injectStyle(styles)(SelectComponent);
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx
new file mode 100644
index 000000000..d84508a5f
--- /dev/null
+++ b/packages/forms/src/toggle/index.tsx
@@ -0,0 +1,117 @@
+import { Theme } from '@meetfranz/theme';
+import classnames from 'classnames';
+import CSS from 'csstype';
+import React, { Component } from 'react';
+import injectStyle from 'react-jss';
+
+import { IFormField, IWithStyle, Omit } from '../typings/generic';
+
+import { Error } from '../error';
+import { Label } from '../label';
+import { Wrapper } from '../wrapper';
+
+interface IProps extends React.InputHTMLAttributes<HTMLInputElement>, IFormField, IWithStyle {
+  className?: string;
+}
+
+const styles = (theme: Theme) => ({
+  toggle: {
+    background: theme.toggleBackground,
+    borderRadius: theme.borderRadius,
+    height: theme.toggleHeight,
+    position: 'relative' as CSS.PositionProperty,
+    width: theme.toggleWidth,
+  },
+  button: {
+    background: theme.toggleButton,
+    borderRadius: '100%',
+    boxShadow: '0 1px 4px rgba(0, 0, 0, .3)',
+    width: theme.toggleHeight - 2,
+    height: theme.toggleHeight - 2,
+    left: 1,
+    top: 1,
+    position: 'absolute' as CSS.PositionProperty,
+    transition: 'all .5s',
+  },
+  buttonActive: {
+    background: theme.toggleButtonActive,
+    left: (theme.toggleWidth - theme.toggleHeight) + 1,
+  },
+  input: {
+    visibility: 'hidden' as any,
+  },
+  disabled: {
+    opacity: theme.inputDisabledOpacity,
+  },
+  toggleLabel: {
+    display: 'flex',
+    alignItems: 'center',
+
+    '& > span': {
+      order: 1,
+      marginLeft: 15,
+    },
+  },
+});
+
+class ToggleComponent extends Component<IProps> {
+  public static defaultProps = {
+    onChange: () => {},
+    showLabel: true,
+    disabled: false,
+    error: '',
+  };
+
+  render() {
+    const {
+      classes,
+      className,
+      disabled,
+      error,
+      id,
+      label,
+      showLabel,
+      checked,
+      value,
+      onChange,
+    } = this.props;
+
+    return (
+      <Wrapper
+        className={className}
+        identifier="franz-toggle"
+      >
+        <Label
+          title={label}
+          showLabel={showLabel}
+          htmlFor={id}
+          className={classes.toggleLabel}
+        >
+          <div className={classnames({
+            [`${classes.toggle}`]: true,
+            [`${classes.disabled}`]: disabled,
+          })}>
+            <div className={classnames({
+              [`${classes.button}`]: true,
+              [`${classes.buttonActive}`]: checked,
+            })} />
+            <input
+              className={classes.input}
+              id={id || name}
+              type="checkbox"
+              checked={checked}
+              value={value}
+              onChange={onChange}
+              disabled={disabled}
+            />
+          </div>
+        </Label>
+        {error && (
+          <Error message={error} />
+        )}
+      </Wrapper>
+    );
+  }
+}
+
+export const Toggle = injectStyle(styles)(ToggleComponent);
diff --git a/packages/forms/src/typings/generic.ts b/packages/forms/src/typings/generic.ts
new file mode 100644
index 000000000..9688ce2c7
--- /dev/null
+++ b/packages/forms/src/typings/generic.ts
@@ -0,0 +1,17 @@
+import { Theme } from '@meetfranz/theme/lib';
+import { Classes } from 'jss';
+
+export interface IFormField {
+  showLabel?: boolean;
+  label?: string;
+  error?: string;
+  required?: boolean;
+}
+
+export interface IWithStyle {
+  classes: Classes;
+  theme: Theme;
+}
+
+export type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
+export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
diff --git a/packages/forms/src/wrapper/index.tsx b/packages/forms/src/wrapper/index.tsx
new file mode 100644
index 000000000..d9c61381d
--- /dev/null
+++ b/packages/forms/src/wrapper/index.tsx
@@ -0,0 +1,37 @@
+import classnames from 'classnames';
+import React, { Component } from 'react';
+import injectStyle from 'react-jss';
+import { IWithStyle } from '../typings/generic';
+
+import styles from './styles';
+
+interface IProps extends IWithStyle {
+  children: React.ReactNode;
+  className?: string;
+  identifier: string;
+}
+
+class WrapperComponent extends Component<IProps> {
+  render() {
+    const {
+      children,
+      classes,
+      className,
+      identifier,
+    } = this.props;
+
+    return (
+      <div
+        className={classnames({
+          [`${classes.container}`]: true,
+          [`${className}`]: className,
+        })}
+        data-type={identifier}
+      >
+        {children}
+      </div>
+    );
+  }
+}
+
+export const Wrapper = injectStyle(styles)(WrapperComponent);
diff --git a/packages/forms/src/wrapper/styles.ts b/packages/forms/src/wrapper/styles.ts
new file mode 100644
index 000000000..72306b252
--- /dev/null
+++ b/packages/forms/src/wrapper/styles.ts
@@ -0,0 +1,5 @@
+export default {
+  container: {
+    marginBottom: 20,
+  },
+};
diff --git a/packages/forms/tsconfig.json b/packages/forms/tsconfig.json
new file mode 100644
index 000000000..8b9507eac
--- /dev/null
+++ b/packages/forms/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.settings.json",
+  "compilerOptions": {
+    "outDir": "lib",
+    "rootDir": "src"
+  },
+  "references": [
+    {
+      "path": "../theme"
+    }
+  ]
+}
diff --git a/packages/forms/tslint.json b/packages/forms/tslint.json
new file mode 100644
index 000000000..0946f2096
--- /dev/null
+++ b/packages/forms/tslint.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tslint.json"
+}