@plusscommunities/pluss-core-web 1.1.1 → 1.1.5

package/dist/index.umd.js

@@ -36,7 +36,7 @@
       colourBrandingMain: '',
       colourBrandingOff: '',
       colourBrandingApp: '',
-      defaultProfileImage: 'https://pluss-prd-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:80aecdcb-9955-493e-a341-2f2263f64777/public/31164ebf4807a5f0de438dd02a/profilepic2.png',
+      defaultProfileImage: 'https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-uploads/android/TinyDefaultProfile.png',
       utcOffset: '',
       hasAvailableNews: false,
       newsHaveTags: true,
@@ -115,8 +115,9 @@
               _context2.prev = 11;
               _context2.t0 = _context2["catch"](0);
               console.error('authedFunction error', _context2.t0, request);
+              throw _context2.t0;
 
-            case 14:
+            case 15:
             case "end":
               return _context2.stop();
           }
@@ -551,6 +552,22 @@
     return null;
   };
 
+  var getUserFromState = function getUserFromState(state) {
+    if (!state || !state.auth || !state.auth.user) {
+      return {};
+    }
+
+    return state.auth.user;
+  };
+
+  var getAppColourFromState = function getAppColourFromState(state) {
+    if (!state || !state.auth || !state.auth.siteBranding || !state.auth.siteBranding.MainBrandingColour) {
+      return CoreConfig.env.colourBrandingApp;
+    }
+
+    return state.auth.siteBranding.MainBrandingColour;
+  };
+
   var getExtension = function getExtension(url) {
     if (!url) {
       return null;
@@ -591,6 +608,15 @@
     return url;
   };
 
+  var generateImageName = function generateImageName(name) {
+    return "xxxxxxxx4xxxyxxxxxxxxxxxxx".concat(name).replace(/[xy]/g, function (c) {
+      // eslint-disable-next-line
+      var r = Math.random() * 16 | 0,
+          v = c === 'x' ? r : r & 0x3 | 0x8;
+      return v.toString(16);
+    });
+  };
+
   var getFileName = function getFileName(url, noExtension) {
     if (!url) {
       return null;
@@ -1496,7 +1522,10 @@
     getUrl: getUrl,
     getUrlParams: getUrlParams,
     safeReadParams: safeReadParams,
+    getUserFromState: getUserFromState,
+    getAppColourFromState: getAppColourFromState,
     get1400: get1400,
+    generateImageName: generateImageName,
     getExtension: getExtension,
     getFileName: getFileName,
     getThumb300: getThumb300,
@@ -2038,30 +2067,30 @@
         });
       });
     },
-    // blobToFile: (theBlob, fileName) => {
-    //   const file = new File([theBlob], fileName, { lastModified: new Date() });
-    //   console.log(file);
-    //   return file;
-    // },
-    // putCanvas: (canvas, filename) => {
-    //   return new Promise((resolve, reject) => {
-    //     const img = canvas.getTrimmedCanvas().toDataURL('image/png');
-    //     const imageData = Buffer.from(img.replace(/^data:image\/\w+;base64,/, ''), 'base64');
-    //     canvas.off();
-    //     const imgName = generateImageName(filename);
-    //     Storage.put(`images/${imgName}.png`, imageData, {
-    //       contentType: 'image/png',
-    //       level: 'public',
-    //     })
-    //       .then((res) => {
-    //         console.log('put the image');
-    //         return resolve(res);
-    //       })
-    //       .catch((err) => {
-    //         return reject(err);
-    //       });
-    //   });
-    // },
+    blobToFile: function blobToFile(theBlob, fileName) {
+      var file = new File([theBlob], fileName, {
+        lastModified: new Date()
+      });
+      console.log(file);
+      return file;
+    },
+    putCanvas: function putCanvas(canvas, filename) {
+      return new Promise(function (resolve, reject) {
+        var img = canvas.getTrimmedCanvas().toDataURL('image/png');
+        var imageData = Buffer.from(img.replace(/^data:image\/\w+;base64,/, ''), 'base64');
+        canvas.off();
+        var imgName = generateImageName(filename);
+        awsAmplify.Storage.put("images/".concat(imgName, ".png"), imageData, {
+          contentType: 'image/png',
+          level: 'public'
+        }).then(function (res) {
+          console.log('put the image');
+          return resolve(res);
+        }).catch(function (err) {
+          return reject(err);
+        });
+      });
+    },
     getMediaFolders: function getMediaFolders(site) {
       // console.log('getMediaFolders', 'site', site);
       var query = {
@@ -2949,14 +2978,14 @@
     setNavData: setNavData
   });
 
-  function _createSuper$w(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$w(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+  function _createSuper$x(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$x(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
-  function _isNativeReflectConstruct$w() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+  function _isNativeReflectConstruct$x() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
   var AddButton = /*#__PURE__*/function (_Component) {
     _inherits__default['default'](AddButton, _Component);
 
-    var _super = _createSuper$w(AddButton);
+    var _super = _createSuper$x(AddButton);
 
     function AddButton() {
       _classCallCheck__default['default'](this, AddButton);
@@ -3933,14 +3962,14 @@
   	template_sportingClub: template_sportingClub
   };
 
-  function _createSuper$v(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$v(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+  function _createSuper$w(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$w(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
-  function _isNativeReflectConstruct$v() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+  function _isNativeReflectConstruct$w() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
   var SVGIcon = /*#__PURE__*/function (_Component) {
     _inherits__default['default'](SVGIcon, _Component);
 
-    var _super = _createSuper$v(SVGIcon);
+    var _super = _createSuper$w(SVGIcon);
 
     function SVGIcon() {
       _classCallCheck__default['default'](this, SVGIcon);
@@ -3988,14 +4017,14 @@
     return SVGIcon;
   }(React.Component);
 
-  function _createSuper$u(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$u(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+  function _createSuper$v(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$v(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
-  function _isNativeReflectConstruct$u() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+  function _isNativeReflectConstruct$v() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
   var Attachment = /*#__PURE__*/function (_Component) {
     _inherits__default['default'](Attachment, _Component);
 
-    var _super = _createSuper$u(Attachment);
+    var _super = _createSuper$v(Attachment);
 
     function Attachment() {
       _classCallCheck__default['default'](this, Attachment);
@@ -4033,14 +4062,14 @@
 
   function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$e(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-  function _createSuper$t(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$t(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+  function _createSuper$u(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$u(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
-  function _isNativeReflectConstruct$t() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+  function _isNativeReflectConstruct$u() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
   var Button = /*#__PURE__*/function (_Component) {
     _inherits__default['default'](Button, _Component);
 
-    var _super = _createSuper$t(Button);
+    var _super = _createSuper$u(Button);
 
     function Button() {
       _classCallCheck__default['default'](this, Button);
@@ -4140,14 +4169,14 @@
 
   function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$d(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-  function _createSuper$s(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$s(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+  function _createSuper$t(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$t(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
-  function _isNativeReflectConstruct$s() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+  function _isNativeReflectConstruct$t() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
   var CheckBox = /*#__PURE__*/function (_PureComponent) {
     _inherits__default['default'](CheckBox, _PureComponent);
 
-    var _super = _createSuper$s(CheckBox);
+    var _super = _createSuper$t(CheckBox);
 
     function CheckBox() {
       var _this;
@@ -4253,27 +4282,19 @@
     }
   };
 
-  function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-  function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$c(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-  function _createSuper$r(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$r(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+  function _createSuper$s(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$s(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
-  function _isNativeReflectConstruct$r() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-  var DEFAULT_INPUT$1 = {
-    uploadingFile: false,
-    value: ''
-  };
+  function _isNativeReflectConstruct$s() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-  var FileInputComponent = /*#__PURE__*/function (_Component) {
-    _inherits__default['default'](FileInputComponent, _Component);
+  var P60Icon = /*#__PURE__*/function (_Component) {
+    _inherits__default['default'](P60Icon, _Component);
 
-    var _super = _createSuper$r(FileInputComponent);
+    var _super = _createSuper$s(P60Icon);
 
-    function FileInputComponent() {
+    function P60Icon() {
       var _this;
 
-      _classCallCheck__default['default'](this, FileInputComponent);
+      _classCallCheck__default['default'](this, P60Icon);
 
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
@@ -4282,472 +4303,863 @@
       _this = _super.call.apply(_super, [this].concat(args));
 
       _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "state", {
-        inputs: [{
-          uploadingFile: false,
-          value: ''
-        }]
+        doublePaths: ['add-image', 'add-circle', 'facility', 'news'],
+        triplePaths: []
       });
 
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "checkRefreshCallback", function (inputs) {
-        if (___default['default'].isUndefined(_this.props.refreshCallback)) {
-          return;
-        }
-
-        if (!_this.props.multiple) {
-          var file = ___default['default'].find(inputs, function (i) {
-            return !i.uploadingFile && !___default['default'].isEmpty(i.value);
-          });
-
-          _this.props.refreshCallback(file ? file.value : undefined);
-        } else {
-          var files = ___default['default'].filter(inputs, function (i) {
-            return !i.uploadingFile && !___default['default'].isEmpty(i.value);
-          }).map(function (i) {
-            return i.value;
-          });
+      return _this;
+    }
 
-          _this.props.refreshCallback(files);
+    _createClass__default['default'](P60Icon, [{
+      key: "renderIconPaths",
+      value: function renderIconPaths() {
+        if (___default['default'].includes(this.state.doublePaths, this.props.icon)) {
+          return /*#__PURE__*/React__default['default'].createElement("span", null, /*#__PURE__*/React__default['default'].createElement("span", {
+            className: "path1"
+          }), /*#__PURE__*/React__default['default'].createElement("span", {
+            className: "path2".concat(this.props.icon !== 'add-image' ? ' text-white' : '')
+          }));
         }
-      });
-
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onDrop", function (files) {
-        if (_this.props.multiple) {
-          var newInputs = ___default['default'].clone(_this.state.inputs);
-
-          files.forEach(function (file) {
-            if (_this.props.limit && newInputs.length === _this.props.limit) {
-              // hit limit - replace last input if it's empty
-              if (___default['default'].isEmpty(newInputs[newInputs.length - 1].value)) {
-                var newInput = newInputs[newInputs.length - 1];
-
-                _this.handleFile(newInput, file);
-              }
-            } else {
-              var _newInput = _objectSpread$c({}, DEFAULT_INPUT$1);
-
-              newInputs.splice(newInputs.length - 1, 0, _newInput);
-
-              _this.handleFile(_newInput, file);
-            }
-          });
-
-          _this.setState({
-            inputs: newInputs
-          });
 
-          _this.checkRefreshCallback(newInputs);
-        } else {
-          _this.handleFile(_this.state.inputs[0], files[0]);
+        if (___default['default'].includes(this.state.triplePaths, this.props.icon)) {
+          return /*#__PURE__*/React__default['default'].createElement("span", null, /*#__PURE__*/React__default['default'].createElement("span", {
+            className: "path1"
+          }), /*#__PURE__*/React__default['default'].createElement("span", {
+            className: "path2"
+          }), /*#__PURE__*/React__default['default'].createElement("span", {
+            className: "path3"
+          }));
         }
-      });
-
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "handleFile", /*#__PURE__*/function () {
-        var _ref = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee(input, file) {
-          var newInputs, uploadFile, url;
-          return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
-            while (1) {
-              switch (_context.prev = _context.next) {
-                case 0:
-                  if (!(!file || input.uploadingFile)) {
-                    _context.next = 2;
-                    break;
-                  }
-
-                  return _context.abrupt("return");
 
-                case 2:
-                  input.uploadingFile = true;
-                  newInputs = ___default['default'].clone(_this.state.inputs);
+        return null;
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        return /*#__PURE__*/React__default['default'].createElement("div", _extends__default['default']({}, this.props, {
+          className: "".concat(this.props.className, " p60icon-").concat(this.props.icon)
+        }), this.renderIconPaths());
+      }
+    }]);
 
-                  _this.setState({
-                    inputs: newInputs
-                  });
+    return P60Icon;
+  }(React.Component);
 
-                  _this.checkRefreshCallback(newInputs);
+  function _createSuper$r(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$r(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
-                  _context.prev = 6;
-                  uploadFile = file;
-                  _context.next = 10;
-                  return fileActions.uploadMediaAsync(uploadFile, uploadFile.name);
+  function _isNativeReflectConstruct$r() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-                case 10:
-                  url = _context.sent;
+  var DatePicker = /*#__PURE__*/function (_Component) {
+    _inherits__default['default'](DatePicker, _Component);
 
-                  _this.checkSetDisplayValue(input, url);
+    var _super = _createSuper$r(DatePicker);
 
-                  _context.next = 18;
-                  break;
+    function DatePicker() {
+      var _this;
 
-                case 14:
-                  _context.prev = 14;
-                  _context.t0 = _context["catch"](6);
-                  console.log('handleFile error', _context.t0);
+      _classCallCheck__default['default'](this, DatePicker);
 
-                  _this.setState({
-                    uploadingFile: false
-                  });
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
 
-                case 18:
-                case "end":
-                  return _context.stop();
-              }
-            }
-          }, _callee, null, [[6, 14]]);
-        }));
+      _this = _super.call.apply(_super, [this].concat(args));
 
-        return function (_x, _x2) {
-          return _ref.apply(this, arguments);
-        };
-      }());
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "state", {
+        shownMonth: new Date(),
+        grid: []
+      });
 
       return _this;
     }
 
-    _createClass__default['default'](FileInputComponent, [{
-      key: "componentDidMount",
-      value: function componentDidMount() {
-        var _this2 = this;
+    _createClass__default['default'](DatePicker, [{
+      key: "UNSAFE_componentWillMount",
+      value: function UNSAFE_componentWillMount() {
+        this.onNewProps(this.props, true);
+      }
+    }, {
+      key: "UNSAFE_componentWillReceiveProps",
+      value: function UNSAFE_componentWillReceiveProps(nextProps) {
+        this.onNewProps(nextProps);
+      }
+    }, {
+      key: "onNewProps",
+      value: function onNewProps(nextProps, forceUpdate) {
+        if (this.props.multiple && nextProps.selectedDates !== this.props.selectedDates) {
+          this.generateGrid(this.state.shownMonth, nextProps.selectedDates);
+        } else if (forceUpdate || nextProps.selectedDate !== this.props.selectedDate) {
+          var dateToUse = nextProps.selectedDate;
 
-        setTimeout(function () {
-          if (_this2.props.hasDefault) {
-            _this2.setState({
-              inputs: [{
-                uploadingFile: false,
-                value: _this2.props.hasDefault
-              }]
-            });
+          if (!(dateToUse instanceof Date)) {
+            dateToUse = new Date(dateToUse);
+          }
 
-            if (_this2.props.refreshCallback) {
-              _this2.props.refreshCallback(_this2.props.hasDefault);
-            }
+          if (isNaN(dateToUse)) {
+            dateToUse = new Date();
           }
-        }, 100);
-      }
-    }, {
-      key: "setValue",
-      value: function setValue(val) {
-        if (typeof val === 'string') {
-          this.setState({
-            inputs: [{
-              uploadingImage: false,
-              value: val
-            }]
-          });
-        } else {
-          var inputs = [];
-
-          ___default['default'].forEach(val, function (str) {
-            inputs.push({
-              uploadingImage: false,
-              value: str
-            });
-          });
 
-          if (!this.props.limit || this.props.limit > inputs.length) inputs.push(DEFAULT_INPUT$1);
           this.setState({
-            inputs: inputs
+            shownMonth: dateToUse,
+            selectedDate: dateToUse
           });
+          this.generateGrid(dateToUse, dateToUse);
         }
       }
     }, {
-      key: "getClassNames",
-      value: function getClassNames(input, inputsLength) {
-        var classes = 'clearfix imageInput';
-
-        if (input.uploadingFile) {
-          classes += ' imageInput-uploading';
-        } else if (!___default['default'].isEmpty(input.value) && !this.props.onlyAllowUpload) {
-          classes += ' imageInput-hasImage';
+      key: "getDate",
+      value: function getDate() {
+        if (!this.props.selectedDate) {
+          return 'Select day';
         }
 
-        if (inputsLength === 1) {
-          classes += ' imageInput-only';
+        return moment__default['default'](this.props.selectedDate).format('dddd, Do MMMM');
+      }
+    }, {
+      key: "getShortDate",
+      value: function getShortDate() {
+        if (!this.props.selectedDate) {
+          return '';
         }
 
-        if (this.props.style && this.props.style.height && this.props.style.height < 150) {
-          classes += ' imageInput-condensed';
+        return moment__default['default'](this.props.selectedDate).format('DD/MM/YYYY');
+      }
+    }, {
+      key: "getMonth",
+      value: function getMonth() {
+        return moment__default['default'](this.state.shownMonth).format('MMMM YYYY');
+      }
+    }, {
+      key: "isDateSelected",
+      value: function isDateSelected(date, selectedDate) {
+        if (this.props.multiple) {
+          return ___default['default'].includes(selectedDate, date.format('DD-MM-YYYY'));
         }
 
-        return classes;
+        return date.isSame(selectedDate, 'date');
       }
     }, {
-      key: "getErrorState",
-      value: function getErrorState() {
-        if (!___default['default'].isUndefined(this.props.showError) && this.props.showError()) {
-          return ' imageInput_upload--error';
+      key: "changeMonth",
+      value: function changeMonth(change) {
+        var newShownDate = new Date(this.state.shownMonth.getFullYear(), this.state.shownMonth.getMonth() + 1 + change, 0);
+        this.setState({
+          shownMonth: newShownDate
+        });
+        this.generateGrid(newShownDate);
+      }
+    }, {
+      key: "selectRange",
+      value: function selectRange(date) {
+        var _this2 = this;
+
+        var d1 = moment__default['default'](this.state.lastSelected, 'DD-MM-YYYY');
+        var d2 = moment__default['default'](date, 'DD-MM-YYYY');
+        var startDate, endDate;
+
+        if (d1.valueOf() > d2.valueOf()) {
+          // clicked an earlier day
+          startDate = moment__default['default'](d2);
+          endDate = moment__default['default'](d1);
+        } else {
+          // clicked a later day
+          startDate = moment__default['default'](d1);
+          endDate = moment__default['default'](d2);
         }
 
-        return '';
+        var dateRange = [startDate.format('DD-MM-YYYY')];
+
+        while (startDate.format('DD-MM-YYYY') !== endDate.format('DD-MM-YYYY')) {
+          startDate.add(1, 'd');
+          dateRange.push(startDate.format('DD-MM-YYYY'));
+        }
+
+        if (___default['default'].includes(this.props.selectedDates, d2.format('DD-MM-YYYY')) && !___default['default'].includes(this.props.selectedDates, d1.format('DD-MM-YYYY')) || !___default['default'].some(dateRange, function (d) {
+          return !___default['default'].includes(_this2.props.selectedDates, d);
+        })) {
+          // the first clicked date was just de-selected and then clicked on a selected date
+          // or every date in the range is already selected, then
+          // de-select the range
+          this.props.selectDate(___default['default'].filter(this.props.selectedDates, function (d) {
+            return !___default['default'].includes(dateRange, d);
+          }));
+        } else {
+          // select the range
+          var newSelection = [].concat(_toConsumableArray__default['default'](this.props.selectedDates), dateRange);
+          this.props.selectDate(___default['default'].uniq(newSelection));
+        }
       }
     }, {
-      key: "checkSetDisplayValue",
-      value: function checkSetDisplayValue(input, value) {
-        input.value = value;
-        input.uploadingFile = false;
+      key: "selectDate",
+      value: function selectDate(date, e) {
+        console.log('selected a date');
 
-        var newInputs = ___default['default'].clone(this.state.inputs);
+        if (this.props.multiple) {
+          var dateKey = moment__default['default'](date).format('DD-MM-YYYY');
 
-        this.setState({
-          inputs: newInputs
-        });
-        this.checkRefreshCallback(newInputs);
+          if (e.shiftKey && this.state.lastSelected && this.state.lastSelected !== dateKey) {
+            // shift-click to select range
+            this.selectRange(dateKey);
+          } else {
+            // toggle single date
+            var index = this.props.selectedDates.indexOf(dateKey);
+
+            var newSelection = _toConsumableArray__default['default'](this.props.selectedDates);
+
+            if (index > -1) {
+              newSelection.splice(index, 1);
+            } else {
+              newSelection.push(dateKey);
+            }
+
+            this.props.selectDate(newSelection);
+          }
+
+          this.setState({
+            lastSelected: dateKey
+          });
+        } else {
+          this.props.selectDate(moment__default['default'](date).format('YYYY-MM-DD'));
+        }
       }
     }, {
-      key: "removeFile",
-      value: function removeFile(input) {
-        var newState = {};
-        input.value = '';
+      key: "generateGrid",
+      value: function generateGrid(date, selectedDate) {
+        var month = moment__default['default'](date);
+        var dateToTarget = moment__default['default'](date).endOf('month');
+        var dateToModify = moment__default['default'](date).startOf('month');
+        var selectedDateToUse = this.props.multiple ? selectedDate || this.props.selectedDates || [] : moment__default['default'](selectedDate || this.state.selectedDate); // set dateToModify to be Sunday of that week
 
-        var newInputs = ___default['default'].clone(this.state.inputs);
+        while (dateToModify.day() !== 0) {
+          dateToModify = dateToModify.add(-1, 'day');
+        }
 
-        if (newInputs.length > 1) {
-          newInputs.splice(newInputs.indexOf(input), 1);
+        var rows = [[]];
 
-          if (newInputs.length === this.props.limit - 1 && !___default['default'].isEmpty(newInputs[newInputs.length - 1].value)) {
-            // was full
-            newInputs.push(DEFAULT_INPUT$1);
-          }
+        while (dateToTarget.day() !== 6) {
+          dateToTarget = dateToTarget.add(1, 'day');
         }
 
-        newState.inputs = newInputs;
-        this.setState(newState); // for single item
+        dateToTarget = dateToTarget.add(1, 'day'); // add an extra day to complete the week
 
-        if (!___default['default'].isUndefined(this.props.refreshCallback)) {
-          this.props.refreshCallback();
+        while (!dateToModify.isSame(dateToTarget, 'day')) {
+          if (rows[rows.length - 1].length === 7) {
+            // week has filled - add new row
+            rows.push([]);
+          }
+
+          var thisDate = moment__default['default'](dateToModify);
+          rows[rows.length - 1].push({
+            date: thisDate,
+            dateKey: thisDate.format('DD-MM-YYYY'),
+            display: thisDate.date(),
+            isFaded: !thisDate.isSame(month, 'month'),
+            isToday: thisDate.isSame(moment__default['default'](), 'date'),
+            isSelected: this.isDateSelected(thisDate, selectedDateToUse)
+          });
+          dateToModify = dateToModify.add(1, 'day');
         }
+
+        this.setState({
+          grid: rows
+        });
       }
     }, {
-      key: "renderInput",
-      value: function renderInput(input, index, inputsLength) {
+      key: "renderGrid",
+      value: function renderGrid() {
         var _this3 = this;
 
-        var renderContent = function renderContent() {
-          if (_this3.props.onlyAllowUpload) {
-            return null;
-          }
+        return this.state.grid.map(function (row, index) {
+          return /*#__PURE__*/React__default['default'].createElement("div", {
+            className: "datepicker__row marginTop-8",
+            key: index
+          }, row.map(function (date) {
+            var classes = 'datepicker__date';
+
+            if (date.isFaded) {
+              classes += ' datepicker__date--faded';
+            }
+
+            if (date.isToday) {
+              classes += ' datepicker__date--today';
+            }
+
+            if (date.isSelected) {
+              classes += ' datepicker__date--selected';
+            }
 
-          if (!___default['default'].isEmpty(input.value) && !input.uploadingFile) {
             return /*#__PURE__*/React__default['default'].createElement("div", {
-              className: "imageInput_simpleContainer"
+              className: classes,
+              key: date.dateKey
             }, /*#__PURE__*/React__default['default'].createElement("div", {
-              className: "imageInput_image",
-              style: _objectSpread$c(_objectSpread$c({}, _this3.props.style), {}, {
-                height: _this3.props.style && _this3.props.style.height ? _this3.props.style.height - 62 : 80
-              })
-            }, /*#__PURE__*/React__default['default'].createElement("img", {
-              src: "https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-media/pluss/document.svg",
-              className: "imageInput_icon",
-              alt: "file"
-            }), /*#__PURE__*/React__default['default'].createElement("p", {
-              className: "imageInput_text"
-            }, getFileName(input.value))), /*#__PURE__*/React__default['default'].createElement(Dropzone__default['default'], {
-              accept: _this3.props.accept,
-              onDrop: function onDrop(files) {
-                return _this3.onDrop(files, true);
-              },
-              style: {
-                padding: 10
+              className: "datepicker__date__inner",
+              onClick: function onClick(e) {
+                _this3.selectDate(date.date, e);
               }
-            }, /*#__PURE__*/React__default['default'].createElement(Button, {
-              buttonType: "secondary",
-              className: "imageInput_button",
-              disabled: true
-            }, "Change file")));
-          }
-
-          return /*#__PURE__*/React__default['default'].createElement("div", {
-            className: "imageInput_image",
-            style: _objectSpread$c({}, _this3.props.style)
-          });
-        };
-
-        var renderRemove = function renderRemove() {
-          return !_this3.props.disableRemove && !_this3.props.disabled && (_this3.props.simpleStyle ? /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
-            name: "remove",
-            className: "imageInput_removeIcon",
-            onClick: _this3.removeFile.bind(_this3, input)
-          }) : /*#__PURE__*/React__default['default'].createElement("p", {
-            className: "imageInput_remove",
-            onClick: _this3.removeFile.bind(_this3, input)
-          }, "remove"));
-        };
-
-        var renderDownload = function renderDownload() {
-          if (_this3.props.noDownload) return null;
-          return /*#__PURE__*/React__default['default'].createElement("a", {
-            href: input.value,
-            target: "_blank",
-            className: "imageInput_download"
-          }, /*#__PURE__*/React__default['default'].createElement("img", {
-            alt: "",
-            className: "dlicon",
-            src: "https://pluss60-dev-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:efbab8db-136a-446e-b14a-d00af0067841/public/025971e94153af280049fdf3e3/downloadicon.png"
+            }, date.display));
           }));
-        };
-
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          key: index,
-          className: this.getClassNames(input, inputsLength),
-          style: _objectSpread$c({}, this.props.style)
-        }, /*#__PURE__*/React__default['default'].createElement(Dropzone__default['default'], {
-          className: "imageInput_upload ".concat(this.getErrorState()),
-          accept: this.props.accept,
-          onDrop: this.onDrop,
-          style: _objectSpread$c({}, this.props.style)
-        }, function (_ref2) {
-          var isDragActive = _ref2.isDragActive;
-              _ref2.isDragReject;
-          return /*#__PURE__*/React__default['default'].createElement("div", {
-            className: "".concat(isDragActive ? 'imageInput_dropZoneActive' : '')
-          }, !_this3.props.simpleStyle && /*#__PURE__*/React__default['default'].createElement("img", {
-            src: "https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-media/pluss/document.svg",
-            className: "imageInput_icon",
-            alt: "file"
-          }), /*#__PURE__*/React__default['default'].createElement("p", {
-            className: "imageInput_helpText"
-          }, isDragActive ? "Drop file here" : "Drag and drop file or"), !isDragActive && /*#__PURE__*/React__default['default'].createElement(Button, {
-            buttonType: "secondary",
-            className: "imageInput_button",
-            disabled: true
-          }, _this3.props.multiple ? "Upload files" : "Upload a file"));
-        }), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "imageInput_uploading",
-          style: _objectSpread$c({}, this.props.style)
-        }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
-          className: "spinner imageInput_spinner",
-          name: "spinner fa-pulse fa-fw"
-        })), renderContent(), renderRemove(), renderDownload());
+        });
       }
     }, {
-      key: "renderUploadFiles",
-      value: function renderUploadFiles(inputs) {
-        var _this4 = this;
+      key: "renderTop",
+      value: function renderTop() {
+        if (this.props.hideTop) {
+          return null;
+        }
+
+        if (this.props.multiple) {
+          return /*#__PURE__*/React__default['default'].createElement("div", {
+            className: "datepicker__multitop"
+          }, /*#__PURE__*/React__default['default'].createElement("p", {
+            className: "datepicker__multitop__text"
+          }, "Shift + Click to select a range of dates"));
+        }
 
         return /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "imageInputContainer clearfix ".concat(inputs.length === 1 ? 'imageInputContainer-noPadding' : '', " ").concat(this.props.simpleStyle ? 'imageInputContainer-simple' : ''),
-          style: _objectSpread$c({}, this.props.style)
-        }, inputs.map(function (input, index) {
-          return _this4.renderInput(input, index, inputs.length);
-        }));
-      }
-    }, {
-      key: "renderContent",
-      value: function renderContent() {
-        return this.renderUploadFiles(this.state.inputs);
+          className: "datepicker__top"
+        }, /*#__PURE__*/React__default['default'].createElement("p", {
+          className: "datepicker__title truncate"
+        }, this.getDate()));
       }
     }, {
       key: "render",
       value: function render() {
         return /*#__PURE__*/React__default['default'].createElement("div", {
-          style: this.props.containerStyle
-        }, this.renderContent());
+          className: "datepicker noselect",
+          style: this.props.style
+        }, this.renderTop(), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "datepicker__bottom"
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "datepicker__bottomHeader"
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "datepicker__monthSelector"
+        }, /*#__PURE__*/React__default['default'].createElement(P60Icon, {
+          className: "datepicker__monthChevron",
+          icon: "chevron_left",
+          onClick: this.changeMonth.bind(this, -1)
+        }), /*#__PURE__*/React__default['default'].createElement("p", {
+          className: "datepicker__selectedMonth"
+        }, this.getMonth()), /*#__PURE__*/React__default['default'].createElement(P60Icon, {
+          className: "datepicker__monthChevron",
+          icon: "chevron_right",
+          onClick: this.changeMonth.bind(this, 1)
+        }))), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "datepicker__row marginTop-16"
+        }, /*#__PURE__*/React__default['default'].createElement("p", {
+          className: "datepicker__colHeader"
+        }, "SUN"), /*#__PURE__*/React__default['default'].createElement("p", {
+          className: "datepicker__colHeader"
+        }, "MON"), /*#__PURE__*/React__default['default'].createElement("p", {
+          className: "datepicker__colHeader"
+        }, "TUE"), /*#__PURE__*/React__default['default'].createElement("p", {
+          className: "datepicker__colHeader"
+        }, "WED"), /*#__PURE__*/React__default['default'].createElement("p", {
+          className: "datepicker__colHeader"
+        }, "THU"), /*#__PURE__*/React__default['default'].createElement("p", {
+          className: "datepicker__colHeader"
+        }, "FRI"), /*#__PURE__*/React__default['default'].createElement("p", {
+          className: "datepicker__colHeader"
+        }, "SAT")), this.renderGrid()));
       }
     }]);
 
-    return FileInputComponent;
+    return DatePicker;
   }(React.Component);
 
-  var mapStateToProps$5 = function mapStateToProps() {
-    return {};
-  };
-
-  var FileInput = reactRedux.connect(mapStateToProps$5, {}, null, {
-    withRef: true
-  })(FileInputComponent);
-
-  function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+  function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-  function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$b(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$c(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
   function _createSuper$q(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$q(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
   function _isNativeReflectConstruct$q() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+  var DEFAULT_INPUT$1 = {
+    uploadingFile: false,
+    value: ''
+  };
 
-  var GenericInput = /*#__PURE__*/function (_Component) {
-    _inherits__default['default'](GenericInput, _Component);
+  var FileInputComponent = /*#__PURE__*/function (_Component) {
+    _inherits__default['default'](FileInputComponent, _Component);
 
-    var _super = _createSuper$q(GenericInput);
+    var _super = _createSuper$q(FileInputComponent);
 
-    function GenericInput() {
-      _classCallCheck__default['default'](this, GenericInput);
+    function FileInputComponent() {
+      var _this;
 
-      return _super.apply(this, arguments);
-    }
+      _classCallCheck__default['default'](this, FileInputComponent);
 
-    _createClass__default['default'](GenericInput, [{
-      key: "componentDidUpdate",
-      value: function componentDidUpdate(prevProps, prevState) {
-        if (!___default['default'].isUndefined(this.props.autofocus) && this.props.autofocus) {
-          this._input.focus();
-        }
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
       }
-    }, {
-      key: "getAutoComplete",
-      value: function getAutoComplete() {
-        if (!___default['default'].isUndefined(this.props.autoComplete)) {
-          return this.props.autoComplete ? 'on' : 'off';
-        }
 
-        return 'off';
-      }
-    }, {
-      key: "isValid",
-      value: function isValid() {
-        if (!___default['default'].isUndefined(this.props.isValid) && typeof this.props.isValid === 'function') {
-          return this.props.isValid();
-        }
+      _this = _super.call.apply(_super, [this].concat(args));
 
-        return this.props.isValid;
-      }
-    }, {
-      key: "showError",
-      value: function showError() {
-        return !___default['default'].isUndefined(this.props.showError) && (typeof this.props.showError === 'function' && this.props.showError() || typeof this.props.showError === 'boolean' && this.props.showError);
-      }
-    }, {
-      key: "getClassNames",
-      value: function getClassNames() {
-        var string = "".concat(this.props.className, " genericInputContainer");
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "state", {
+        inputs: [{
+          uploadingFile: false,
+          value: ''
+        }]
+      });
 
-        if (!___default['default'].isUndefined(this.props.disabled) && this.props.disabled) {
-          string += ' genericInput-disabled';
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "checkRefreshCallback", function (inputs) {
+        if (___default['default'].isUndefined(_this.props.refreshCallback)) {
+          return;
         }
 
-        if (this.props.large) {
-          string += ' genericInput-large';
-        }
+        if (!_this.props.multiple) {
+          var file = ___default['default'].find(inputs, function (i) {
+            return !i.uploadingFile && !___default['default'].isEmpty(i.value);
+          });
 
-        if (!___default['default'].isUndefined(this.props.type) && this.props.type === 'textarea') {
-          string += ' genericInput-textarea';
-        }
+          _this.props.refreshCallback(file ? file.value : undefined);
+        } else {
+          var files = ___default['default'].filter(inputs, function (i) {
+            return !i.uploadingFile && !___default['default'].isEmpty(i.value);
+          }).map(function (i) {
+            return i.value;
+          });
 
-        if (this.isValid()) {
-          return string + ' genericInput-valid';
+          _this.props.refreshCallback(files);
         }
+      });
 
-        if (this.showError()) {
-          return string + ' genericInput-error';
-        }
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onDrop", function (files) {
+        if (_this.props.multiple) {
+          var newInputs = ___default['default'].clone(_this.state.inputs);
 
-        return string;
-      }
-    }, {
-      key: "getLabelStyle",
-      value: function getLabelStyle() {
-        var style = {};
+          files.forEach(function (file) {
+            if (_this.props.limit && newInputs.length === _this.props.limit) {
+              // hit limit - replace last input if it's empty
+              if (___default['default'].isEmpty(newInputs[newInputs.length - 1].value)) {
+                var newInput = newInputs[newInputs.length - 1];
 
-        if (___default['default'].isEmpty(this.props.value) && !this.props.alwaysShowLabel) {
-          style.opacity = 0;
-        }
+                _this.handleFile(newInput, file);
+              }
+            } else {
+              var _newInput = _objectSpread$c({}, DEFAULT_INPUT$1);
 
-        return style;
-      }
-    }, {
-      key: "renderError",
-      value: function renderError() {
-        if (this.showError() && !this.isValid()) {
-          return /*#__PURE__*/React__default['default'].createElement("div", {
-            className: 'fieldLabel fieldLabel-warning'
+              newInputs.splice(newInputs.length - 1, 0, _newInput);
+
+              _this.handleFile(_newInput, file);
+            }
+          });
+
+          _this.setState({
+            inputs: newInputs
+          });
+
+          _this.checkRefreshCallback(newInputs);
+        } else {
+          _this.handleFile(_this.state.inputs[0], files[0]);
+        }
+      });
+
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "handleFile", /*#__PURE__*/function () {
+        var _ref = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee(input, file) {
+          var newInputs, uploadFile, url;
+          return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  if (!(!file || input.uploadingFile)) {
+                    _context.next = 2;
+                    break;
+                  }
+
+                  return _context.abrupt("return");
+
+                case 2:
+                  input.uploadingFile = true;
+                  newInputs = ___default['default'].clone(_this.state.inputs);
+
+                  _this.setState({
+                    inputs: newInputs
+                  });
+
+                  _this.checkRefreshCallback(newInputs);
+
+                  _context.prev = 6;
+                  uploadFile = file;
+                  _context.next = 10;
+                  return fileActions.uploadMediaAsync(uploadFile, uploadFile.name);
+
+                case 10:
+                  url = _context.sent;
+
+                  _this.checkSetDisplayValue(input, url);
+
+                  _context.next = 18;
+                  break;
+
+                case 14:
+                  _context.prev = 14;
+                  _context.t0 = _context["catch"](6);
+                  console.log('handleFile error', _context.t0);
+
+                  _this.setState({
+                    uploadingFile: false
+                  });
+
+                case 18:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee, null, [[6, 14]]);
+        }));
+
+        return function (_x, _x2) {
+          return _ref.apply(this, arguments);
+        };
+      }());
+
+      return _this;
+    }
+
+    _createClass__default['default'](FileInputComponent, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        var _this2 = this;
+
+        setTimeout(function () {
+          if (_this2.props.hasDefault) {
+            _this2.setState({
+              inputs: [{
+                uploadingFile: false,
+                value: _this2.props.hasDefault
+              }]
+            });
+
+            if (_this2.props.refreshCallback) {
+              _this2.props.refreshCallback(_this2.props.hasDefault);
+            }
+          }
+        }, 100);
+      }
+    }, {
+      key: "setValue",
+      value: function setValue(val) {
+        if (typeof val === 'string') {
+          this.setState({
+            inputs: [{
+              uploadingImage: false,
+              value: val
+            }]
+          });
+        } else {
+          var inputs = [];
+
+          ___default['default'].forEach(val, function (str) {
+            inputs.push({
+              uploadingImage: false,
+              value: str
+            });
+          });
+
+          if (!this.props.limit || this.props.limit > inputs.length) inputs.push(DEFAULT_INPUT$1);
+          this.setState({
+            inputs: inputs
+          });
+        }
+      }
+    }, {
+      key: "getClassNames",
+      value: function getClassNames(input, inputsLength) {
+        var classes = 'clearfix imageInput';
+
+        if (input.uploadingFile) {
+          classes += ' imageInput-uploading';
+        } else if (!___default['default'].isEmpty(input.value) && !this.props.onlyAllowUpload) {
+          classes += ' imageInput-hasImage';
+        }
+
+        if (inputsLength === 1) {
+          classes += ' imageInput-only';
+        }
+
+        if (this.props.style && this.props.style.height && this.props.style.height < 150) {
+          classes += ' imageInput-condensed';
+        }
+
+        return classes;
+      }
+    }, {
+      key: "getErrorState",
+      value: function getErrorState() {
+        if (!___default['default'].isUndefined(this.props.showError) && this.props.showError()) {
+          return ' imageInput_upload--error';
+        }
+
+        return '';
+      }
+    }, {
+      key: "checkSetDisplayValue",
+      value: function checkSetDisplayValue(input, value) {
+        input.value = value;
+        input.uploadingFile = false;
+
+        var newInputs = ___default['default'].clone(this.state.inputs);
+
+        this.setState({
+          inputs: newInputs
+        });
+        this.checkRefreshCallback(newInputs);
+      }
+    }, {
+      key: "removeFile",
+      value: function removeFile(input) {
+        var newState = {};
+        input.value = '';
+
+        var newInputs = ___default['default'].clone(this.state.inputs);
+
+        if (newInputs.length > 1) {
+          newInputs.splice(newInputs.indexOf(input), 1);
+
+          if (newInputs.length === this.props.limit - 1 && !___default['default'].isEmpty(newInputs[newInputs.length - 1].value)) {
+            // was full
+            newInputs.push(DEFAULT_INPUT$1);
+          }
+        }
+
+        newState.inputs = newInputs;
+        this.setState(newState); // for single item
+
+        if (!___default['default'].isUndefined(this.props.refreshCallback)) {
+          this.props.refreshCallback();
+        }
+      }
+    }, {
+      key: "renderInput",
+      value: function renderInput(input, index, inputsLength) {
+        var _this3 = this;
+
+        var renderContent = function renderContent() {
+          if (_this3.props.onlyAllowUpload) {
+            return null;
+          }
+
+          if (!___default['default'].isEmpty(input.value) && !input.uploadingFile) {
+            return /*#__PURE__*/React__default['default'].createElement("div", {
+              className: "imageInput_simpleContainer"
+            }, /*#__PURE__*/React__default['default'].createElement("div", {
+              className: "imageInput_image",
+              style: _objectSpread$c(_objectSpread$c({}, _this3.props.style), {}, {
+                height: _this3.props.style && _this3.props.style.height ? _this3.props.style.height - 62 : 80
+              })
+            }, /*#__PURE__*/React__default['default'].createElement("img", {
+              src: "https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-media/pluss/document.svg",
+              className: "imageInput_icon",
+              alt: "file"
+            }), /*#__PURE__*/React__default['default'].createElement("p", {
+              className: "imageInput_text"
+            }, getFileName(input.value))), /*#__PURE__*/React__default['default'].createElement(Dropzone__default['default'], {
+              accept: _this3.props.accept,
+              onDrop: function onDrop(files) {
+                return _this3.onDrop(files, true);
+              },
+              style: {
+                padding: 10
+              }
+            }, /*#__PURE__*/React__default['default'].createElement(Button, {
+              buttonType: "secondary",
+              className: "imageInput_button",
+              disabled: true
+            }, "Change file")));
+          }
+
+          return /*#__PURE__*/React__default['default'].createElement("div", {
+            className: "imageInput_image",
+            style: _objectSpread$c({}, _this3.props.style)
+          });
+        };
+
+        var renderRemove = function renderRemove() {
+          return !_this3.props.disableRemove && !_this3.props.disabled && (_this3.props.simpleStyle ? /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
+            name: "remove",
+            className: "imageInput_removeIcon",
+            onClick: _this3.removeFile.bind(_this3, input)
+          }) : /*#__PURE__*/React__default['default'].createElement("p", {
+            className: "imageInput_remove",
+            onClick: _this3.removeFile.bind(_this3, input)
+          }, "remove"));
+        };
+
+        var renderDownload = function renderDownload() {
+          if (_this3.props.noDownload) return null;
+          return /*#__PURE__*/React__default['default'].createElement("a", {
+            href: input.value,
+            target: "_blank",
+            className: "imageInput_download"
+          }, /*#__PURE__*/React__default['default'].createElement("img", {
+            alt: "",
+            className: "dlicon",
+            src: "https://pluss60-dev-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:efbab8db-136a-446e-b14a-d00af0067841/public/025971e94153af280049fdf3e3/downloadicon.png"
+          }));
+        };
+
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          key: index,
+          className: this.getClassNames(input, inputsLength),
+          style: _objectSpread$c({}, this.props.style)
+        }, /*#__PURE__*/React__default['default'].createElement(Dropzone__default['default'], {
+          className: "imageInput_upload ".concat(this.getErrorState()),
+          accept: this.props.accept,
+          onDrop: this.onDrop,
+          style: _objectSpread$c({}, this.props.style)
+        }, function (_ref2) {
+          var isDragActive = _ref2.isDragActive;
+              _ref2.isDragReject;
+          return /*#__PURE__*/React__default['default'].createElement("div", {
+            className: "".concat(isDragActive ? 'imageInput_dropZoneActive' : '')
+          }, !_this3.props.simpleStyle && /*#__PURE__*/React__default['default'].createElement("img", {
+            src: "https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-media/pluss/document.svg",
+            className: "imageInput_icon",
+            alt: "file"
+          }), /*#__PURE__*/React__default['default'].createElement("p", {
+            className: "imageInput_helpText"
+          }, isDragActive ? "Drop file here" : "Drag and drop file or"), !isDragActive && /*#__PURE__*/React__default['default'].createElement(Button, {
+            buttonType: "secondary",
+            className: "imageInput_button",
+            disabled: true
+          }, _this3.props.multiple ? "Upload files" : "Upload a file"));
+        }), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "imageInput_uploading",
+          style: _objectSpread$c({}, this.props.style)
+        }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
+          className: "spinner imageInput_spinner",
+          name: "spinner fa-pulse fa-fw"
+        })), renderContent(), renderRemove(), renderDownload());
+      }
+    }, {
+      key: "renderUploadFiles",
+      value: function renderUploadFiles(inputs) {
+        var _this4 = this;
+
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "imageInputContainer clearfix ".concat(inputs.length === 1 ? 'imageInputContainer-noPadding' : '', " ").concat(this.props.simpleStyle ? 'imageInputContainer-simple' : ''),
+          style: _objectSpread$c({}, this.props.style)
+        }, inputs.map(function (input, index) {
+          return _this4.renderInput(input, index, inputs.length);
+        }));
+      }
+    }, {
+      key: "renderContent",
+      value: function renderContent() {
+        return this.renderUploadFiles(this.state.inputs);
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          style: this.props.containerStyle
+        }, this.renderContent());
+      }
+    }]);
+
+    return FileInputComponent;
+  }(React.Component);
+
+  var mapStateToProps$5 = function mapStateToProps() {
+    return {};
+  };
+
+  var FileInput = reactRedux.connect(mapStateToProps$5, {}, null, {
+    withRef: true
+  })(FileInputComponent);
+
+  function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+  function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$b(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+  function _createSuper$p(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$p(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+
+  function _isNativeReflectConstruct$p() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+  var GenericInput = /*#__PURE__*/function (_Component) {
+    _inherits__default['default'](GenericInput, _Component);
+
+    var _super = _createSuper$p(GenericInput);
+
+    function GenericInput() {
+      _classCallCheck__default['default'](this, GenericInput);
+
+      return _super.apply(this, arguments);
+    }
+
+    _createClass__default['default'](GenericInput, [{
+      key: "componentDidUpdate",
+      value: function componentDidUpdate(prevProps, prevState) {
+        if (!___default['default'].isUndefined(this.props.autofocus) && this.props.autofocus) {
+          this._input.focus();
+        }
+      }
+    }, {
+      key: "getAutoComplete",
+      value: function getAutoComplete() {
+        if (!___default['default'].isUndefined(this.props.autoComplete)) {
+          return this.props.autoComplete ? 'on' : 'off';
+        }
+
+        return 'off';
+      }
+    }, {
+      key: "isValid",
+      value: function isValid() {
+        if (!___default['default'].isUndefined(this.props.isValid) && typeof this.props.isValid === 'function') {
+          return this.props.isValid();
+        }
+
+        return this.props.isValid;
+      }
+    }, {
+      key: "showError",
+      value: function showError() {
+        return !___default['default'].isUndefined(this.props.showError) && (typeof this.props.showError === 'function' && this.props.showError() || typeof this.props.showError === 'boolean' && this.props.showError);
+      }
+    }, {
+      key: "getClassNames",
+      value: function getClassNames() {
+        var string = "".concat(this.props.className, " genericInputContainer");
+
+        if (!___default['default'].isUndefined(this.props.disabled) && this.props.disabled) {
+          string += ' genericInput-disabled';
+        }
+
+        if (this.props.large) {
+          string += ' genericInput-large';
+        }
+
+        if (!___default['default'].isUndefined(this.props.type) && this.props.type === 'textarea') {
+          string += ' genericInput-textarea';
+        }
+
+        if (this.isValid()) {
+          return string + ' genericInput-valid';
+        }
+
+        if (this.showError()) {
+          return string + ' genericInput-error';
+        }
+
+        return string;
+      }
+    }, {
+      key: "getLabelStyle",
+      value: function getLabelStyle() {
+        var style = {};
+
+        if (___default['default'].isEmpty(this.props.value) && !this.props.alwaysShowLabel) {
+          style.opacity = 0;
+        }
+
+        return style;
+      }
+    }, {
+      key: "renderError",
+      value: function renderError() {
+        if (this.showError() && !this.isValid()) {
+          return /*#__PURE__*/React__default['default'].createElement("div", {
+            className: 'fieldLabel fieldLabel-warning'
           }, this.props.errorMessage ? this.props.errorMessage : 'Required');
         }
 
@@ -4794,7 +5206,8 @@
             className: "genericInput ".concat(this.props.inputClass),
             value: this.props.value || '',
             onChange: this.props.onChange,
-            onKeyPress: this.props.onEnter,
+            onKeyPress: this.props.onKeyPress || this.props.onEnter,
+            onKeyDown: this.props.onKeyDown,
             style: _objectSpread$b({}, this.props.inputStyle),
             readOnly: !___default['default'].isUndefined(this.props.readOnly) ? this.props.readOnly : false,
             disabled: !___default['default'].isUndefined(this.props.disabled) ? this.props.disabled : false,
@@ -4821,7 +5234,8 @@
           value: this.props.value || '',
           onChange: this.props.onChange,
           onClick: this.props.onClick,
-          onKeyPress: this.props.onEnter,
+          onKeyPress: this.props.onKeyPress || this.props.onEnter,
+          onKeyDown: this.props.onKeyDown,
           style: _objectSpread$b({}, this.props.inputStyle),
           readOnly: !___default['default'].isUndefined(this.props.readOnly) ? this.props.readOnly : false,
           disabled: !___default['default'].isUndefined(this.props.disabled) ? this.props.disabled : false,
@@ -4862,14 +5276,14 @@
     }
   };
 
-  function _createSuper$p(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$p(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+  function _createSuper$o(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$o(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
-  function _isNativeReflectConstruct$p() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+  function _isNativeReflectConstruct$o() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
   var Header = /*#__PURE__*/function (_Component) {
     _inherits__default['default'](Header, _Component);
 
-    var _super = _createSuper$p(Header);
+    var _super = _createSuper$o(Header);
 
     function Header() {
       var _this;
@@ -4900,6 +5314,25 @@
       value: function getHomeLink() {
         this.props.history.replace('/');
       }
+    }, {
+      key: "renderRight",
+      value: function renderRight() {
+        if (this.props.rightContent) {
+          return this.props.rightContent;
+        }
+
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "flex flex-center"
+        }, /*#__PURE__*/React__default['default'].createElement(Button, {
+          buttonType: "primary",
+          onClick: this.goToRoadmap,
+          narrow: true,
+          isActive: true,
+          className: "marginRight-16"
+        }, "Roadmap"), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "sideMenuButtonContainer"
+        }));
+      }
     }, {
       key: "renderHeader",
       value: function renderHeader() {
@@ -4917,17 +5350,7 @@
             alignItems: 'center',
             marginLeft: 16
           }
-        }, this.props.children)), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "flex flex-center"
-        }, /*#__PURE__*/React__default['default'].createElement(Button, {
-          buttonType: "primary",
-          onClick: this.goToRoadmap,
-          narrow: true,
-          isActive: true,
-          className: "marginRight-16"
-        }, "Roadmap"), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "sideMenuButtonContainer"
-        })));
+        }, this.props.children)), this.renderRight());
       }
     }, {
       key: "renderSimpleHeader",
@@ -4942,6 +5365,13 @@
           alt: "logo"
         })));
       }
+    }, {
+      key: "renderContainerHeader",
+      value: function renderContainerHeader() {
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "header header-simple ".concat(this.props.fixed ? 'header-fixed' : '')
+        }, this.props.children);
+      }
     }, {
       key: "render",
       value: function render() {
@@ -4949,6 +5379,10 @@
           return this.renderSimpleHeader();
         }
 
+        if (this.props.onlyContainer) {
+          return this.renderContainerHeader();
+        }
+
         return this.renderHeader();
       }
     }]);
@@ -4971,14 +5405,14 @@
 
   function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$a(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-  function _createSuper$o(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$o(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+  function _createSuper$n(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$n(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
-  function _isNativeReflectConstruct$o() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+  function _isNativeReflectConstruct$n() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
   var Popup = /*#__PURE__*/function (_Component) {
     _inherits__default['default'](Popup, _Component);
 
-    var _super = _createSuper$o(Popup);
+    var _super = _createSuper$n(Popup);
 
     function Popup() {
       _classCallCheck__default['default'](this, Popup);
@@ -5092,9 +5526,9 @@
 
   function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$9(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-  function _createSuper$n(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$n(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+  function _createSuper$m(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$m(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
-  function _isNativeReflectConstruct$n() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+  function _isNativeReflectConstruct$m() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
   var DEFAULT_INPUT = {
     uploadingImage: false,
     value: '',
@@ -5104,7 +5538,7 @@
   var ImageInputComponent = /*#__PURE__*/function (_Component) {
     _inherits__default['default'](ImageInputComponent, _Component);
 
-    var _super = _createSuper$n(ImageInputComponent);
+    var _super = _createSuper$m(ImageInputComponent);
 
     function ImageInputComponent() {
       var _this;
@@ -5887,11 +6321,8 @@
         }
 
         newState.inputs = newInputs;
-        this.setState(newState); // for single item
-
-        if (!___default['default'].isUndefined(this.props.refreshCallback)) {
-          this.props.refreshCallback();
-        }
+        this.setState(newState);
+        this.checkRefreshCallback(newInputs);
       }
     }, {
       key: "selectTab",
@@ -6400,14 +6831,14 @@
     withRef: true
   })(ImageInputComponent);
 
-  function _createSuper$m(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$m(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+  function _createSuper$l(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$l(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
-  function _isNativeReflectConstruct$m() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+  function _isNativeReflectConstruct$l() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
   var MoreMenu = /*#__PURE__*/function (_Component) {
     _inherits__default['default'](MoreMenu, _Component);
 
-    var _super = _createSuper$m(MoreMenu);
+    var _super = _createSuper$l(MoreMenu);
 
     function MoreMenu() {
       _classCallCheck__default['default'](this, MoreMenu);
@@ -6441,14 +6872,14 @@
 
   function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$8(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-  function _createSuper$l(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$l(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+  function _createSuper$k(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$k(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
-  function _isNativeReflectConstruct$l() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+  function _isNativeReflectConstruct$k() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
   var OverlayPage = /*#__PURE__*/function (_Component) {
     _inherits__default['default'](OverlayPage, _Component);
 
-    var _super = _createSuper$l(OverlayPage);
+    var _super = _createSuper$k(OverlayPage);
 
     function OverlayPage(props) {
       var _this;
@@ -6485,6 +6916,18 @@
           height: window.innerHeight
         });
       }
+    }, {
+      key: "renderContent",
+      value: function renderContent() {
+        if (this.props.fullPage) {
+          return /*#__PURE__*/React__default['default'].createElement("div", {
+            className: "overlayPage-full",
+            style: this.props.fullPageStyle
+          }, this.props.children);
+        }
+
+        return this.props.children;
+      }
     }, {
       key: "render",
       value: function render() {
@@ -6492,7 +6935,7 @@
           style: _objectSpread$8(_objectSpread$8({}, styles$5.pageWrapper), this.props.style)
         }, /*#__PURE__*/React__default['default'].createElement("div", {
           style: _objectSpread$8(_objectSpread$8({}, styles$5.backgroundOverlay), this.props.backgroundStyle)
-        }), this.props.children);
+        }), this.renderContent());
       }
     }]);
 
@@ -6522,14 +6965,14 @@
 
   function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-  function _createSuper$k(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$k(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+  function _createSuper$j(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$j(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
-  function _isNativeReflectConstruct$k() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+  function _isNativeReflectConstruct$j() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
   var OverlayPageContents = /*#__PURE__*/function (_Component) {
     _inherits__default['default'](OverlayPageContents, _Component);
 
-    var _super = _createSuper$k(OverlayPageContents);
+    var _super = _createSuper$j(OverlayPageContents);
 
     function OverlayPageContents(props) {
       var _this;
@@ -6588,14 +7031,14 @@
 
   function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-  function _createSuper$j(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$j(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+  function _createSuper$i(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$i(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
-  function _isNativeReflectConstruct$j() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+  function _isNativeReflectConstruct$i() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
   var OverlayPageSection = /*#__PURE__*/function (_Component) {
     _inherits__default['default'](OverlayPageSection, _Component);
 
-    var _super = _createSuper$j(OverlayPageSection);
+    var _super = _createSuper$i(OverlayPageSection);
 
     function OverlayPageSection() {
       _classCallCheck__default['default'](this, OverlayPageSection);
@@ -6640,14 +7083,14 @@
 
   function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-  function _createSuper$i(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$i(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+  function _createSuper$h(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$h(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
-  function _isNativeReflectConstruct$i() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+  function _isNativeReflectConstruct$h() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
   var OverlayPageBottomButtons = /*#__PURE__*/function (_Component) {
     _inherits__default['default'](OverlayPageBottomButtons, _Component);
 
-    var _super = _createSuper$i(OverlayPageBottomButtons);
+    var _super = _createSuper$h(OverlayPageBottomButtons);
 
     function OverlayPageBottomButtons(props) {
       var _this;
@@ -6701,14 +7144,14 @@
     }
   };
 
-  function _createSuper$h(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$h(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+  function _createSuper$g(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$g(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
-  function _isNativeReflectConstruct$h() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+  function _isNativeReflectConstruct$g() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
   var PageTitle = /*#__PURE__*/function (_Component) {
     _inherits__default['default'](PageTitle, _Component);
 
-    var _super = _createSuper$h(PageTitle);
+    var _super = _createSuper$g(PageTitle);
 
     function PageTitle() {
       _classCallCheck__default['default'](this, PageTitle);
@@ -6728,26 +7171,18 @@
     return PageTitle;
   }(React.Component);
 
-  var getAppColourFromState = function getAppColourFromState(state) {
-    if (!state || !state.auth || !state.auth.siteBranding || !state.auth.siteBranding.MainBrandingColour) {
-      return CoreConfig.env.colourBrandingApp;
-    }
-
-    return state.auth.siteBranding.MainBrandingColour;
-  };
-
   function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
   function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-  function _createSuper$g(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$g(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+  function _createSuper$f(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$f(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
-  function _isNativeReflectConstruct$g() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+  function _isNativeReflectConstruct$f() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
   var ProfilePicComponent = /*#__PURE__*/function (_Component) {
     _inherits__default['default'](ProfilePicComponent, _Component);
 
-    var _super = _createSuper$g(ProfilePicComponent);
+    var _super = _createSuper$f(ProfilePicComponent);
 
     function ProfilePicComponent() {
       _classCallCheck__default['default'](this, ProfilePicComponent);
@@ -6789,14 +7224,14 @@
 
   function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-  function _createSuper$f(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$f(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+  function _createSuper$e(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$e(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
-  function _isNativeReflectConstruct$f() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+  function _isNativeReflectConstruct$e() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
   var RadioButton = /*#__PURE__*/function (_Component) {
     _inherits__default['default'](RadioButton, _Component);
 
-    var _super = _createSuper$f(RadioButton);
+    var _super = _createSuper$e(RadioButton);
 
     function RadioButton() {
       _classCallCheck__default['default'](this, RadioButton);
@@ -6954,14 +7389,14 @@
     }
   };
 
-  function _createSuper$e(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$e(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+  function _createSuper$d(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$d(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
-  function _isNativeReflectConstruct$e() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+  function _isNativeReflectConstruct$d() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
   var Tag = /*#__PURE__*/function (_Component) {
     _inherits__default['default'](Tag, _Component);
 
-    var _super = _createSuper$e(Tag);
+    var _super = _createSuper$d(Tag);
 
     function Tag() {
       _classCallCheck__default['default'](this, Tag);
@@ -6976,659 +7411,319 @@
           return null;
         }
 
-        return /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
-          name: this.props.leftIcon,
-          className: "tag_icon tag_icon-left ".concat(this.props.leftClick ? 'tag_icon-clickable' : ''),
-          style: this.props.leftIconStyle,
-          onClick: this.props.leftClick
-        });
-      }
-    }, {
-      key: "renderRight",
-      value: function renderRight() {
-        if (!this.props.rightIcon) {
-          return null;
-        }
-
-        return /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
-          name: this.props.rightIcon,
-          className: "tag_icon tag_icon-right ".concat(this.props.rightClick ? 'tag_icon-clickable' : ''),
-          style: this.props.rightIconStyle,
-          onClick: this.props.rightClick
-        });
-      }
-    }, {
-      key: "renderText",
-      value: function renderText() {
-        if (!this.props.text) {
-          return null;
-        }
-
-        return /*#__PURE__*/React__default['default'].createElement("span", {
-          className: "tag_text"
-        }, this.props.text);
-      }
-    }, {
-      key: "render",
-      value: function render() {
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          onClick: this.props.onClick,
-          className: "tag ".concat(this.props.onClick ? 'tag-clickable' : '', " ").concat(this.props.className || '', " ").concat(this.props.leftIcon || this.props.rightIcon ? 'tag-hasIcon' : ''),
-          style: this.props.style
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "tag_inner"
-        }, this.renderLeft(), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "tag_center ".concat(this.props.centerClass)
-        }, this.renderText(), this.props.children), this.renderRight()));
-      }
-    }]);
-
-    return Tag;
-  }(React.Component);
-
-  function _createSuper$d(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$d(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
-
-  function _isNativeReflectConstruct$d() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-  var Text = /*#__PURE__*/function (_Component) {
-    _inherits__default['default'](Text, _Component);
-
-    var _super = _createSuper$d(Text);
-
-    function Text() {
-      _classCallCheck__default['default'](this, Text);
-
-      return _super.apply(this, arguments);
-    }
-
-    _createClass__default['default'](Text, [{
-      key: "getClassName",
-      value: function getClassName() {
-        if (this.props.className) {
-          return " ".concat(this.props.className);
-        }
-
-        return '';
-      }
-    }, {
-      key: "render",
-      value: function render() {
-        return /*#__PURE__*/React__default['default'].createElement("p", {
-          className: "text-".concat(this.props.type).concat(this.getClassName()),
-          style: this.props.style
-        }, this.props.children);
-      }
-    }]);
-
-    return Text;
-  }(React.Component);
-
-  function _createSuper$c(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$c(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
-
-  function _isNativeReflectConstruct$c() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-  var SuccessPopup = /*#__PURE__*/function (_Component) {
-    _inherits__default['default'](SuccessPopup, _Component);
-
-    var _super = _createSuper$c(SuccessPopup);
-
-    function SuccessPopup() {
-      _classCallCheck__default['default'](this, SuccessPopup);
-
-      return _super.apply(this, arguments);
-    }
-
-    _createClass__default['default'](SuccessPopup, [{
-      key: "getBackgroundClasses",
-      value: function getBackgroundClasses() {
-        return this.props.backgroundClose ? 'successPopupBackground pointer' : 'successPopupBackground';
-      }
-    }, {
-      key: "renderButtons",
-      value: function renderButtons() {
-        if (___default['default'].isEmpty(this.props.buttons)) return null;
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "successPopup_buttons"
-        }, this.props.buttons.map(function (b, i) {
-          return /*#__PURE__*/React__default['default'].createElement(Button, {
-            key: i,
-            buttonClassName: "successPopup_button",
-            buttonType: b.type,
-            isActive: !b.inactive,
-            onClick: b.onClick
-          }, b.text);
-        }));
-      }
-    }, {
-      key: "renderClose",
-      value: function renderClose() {
-        if (!this.props.closeAction) {
-          return null;
-        }
-
-        return /*#__PURE__*/React__default['default'].createElement("a", {
-          style: {
-            position: 'absolute',
-            top: 16,
-            right: 16,
-            cursor: 'pointer'
-          },
-          onClick: this.props.closeAction
-        }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
-          name: "remove"
-        }));
-      }
-    }, {
-      key: "render",
-      value: function render() {
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          className: this.getBackgroundClasses()
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "successPopup"
-        }, this.props.noIcon || /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "successPopup_tick"
-        }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
-          className: "successPopup_tick_icon",
-          name: 'check'
-        })), this.renderClose(), !___default['default'].isEmpty(this.props.text) && /*#__PURE__*/React__default['default'].createElement("p", {
-          className: "successPopup_text"
-        }, this.props.text), this.props.children, this.renderButtons()));
-      }
-    }]);
-
-    return SuccessPopup;
-  }(React.Component);
-
-  function _createSuper$b(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$b(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
-
-  function _isNativeReflectConstruct$b() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-  var getReactions = function getReactions() {
-    return [{
-      key: 'heart',
-      icon: 'https://pluss60-demo-media.s3-ap-southeast-2.amazonaws.com/assets/emojis/heart.png'
-    }, {
-      key: 'smile',
-      icon: 'https://pluss60-demo-media.s3-ap-southeast-2.amazonaws.com/assets/emojis/smile.png'
-    }, {
-      key: 'sad',
-      icon: 'https://pluss60-demo-media.s3-ap-southeast-2.amazonaws.com/assets/emojis/sad.png'
-    }, {
-      key: 'party',
-      icon: 'https://pluss60-demo-media.s3-ap-southeast-2.amazonaws.com/assets/emojis/party.png'
-    }];
-  };
-
-  var Reactions = /*#__PURE__*/function (_Component) {
-    _inherits__default['default'](Reactions, _Component);
-
-    var _super = _createSuper$b(Reactions);
-
-    function Reactions() {
-      var _this;
-
-      _classCallCheck__default['default'](this, Reactions);
-
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      _this = _super.call.apply(_super, [this].concat(args));
-
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "state", {
-        reactions: getReactions()
-      });
-
-      return _this;
-    }
-
-    _createClass__default['default'](Reactions, [{
-      key: "getReaction",
-      value: function getReaction(key) {
-        if (this.props.reactions) {
-          if (!this.props.reactions[key]) {
-            return 0;
-          }
-
-          return this.props.reactions[key];
-        }
-
-        if (!this.props.entity) {
-          return 0;
-        }
-
-        if (!this.props.entity.Reactions) {
-          return 0;
-        }
-
-        if (!this.props.entity.Reactions[key]) {
-          return 0;
+        return /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
+          name: this.props.leftIcon,
+          className: "tag_icon tag_icon-left ".concat(this.props.leftClick ? 'tag_icon-clickable' : ''),
+          style: this.props.leftIconStyle,
+          onClick: this.props.leftClick
+        });
+      }
+    }, {
+      key: "renderRight",
+      value: function renderRight() {
+        if (!this.props.rightIcon) {
+          return null;
         }
 
-        return Object.keys(this.props.entity.Reactions[key]).length;
+        return /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
+          name: this.props.rightIcon,
+          className: "tag_icon tag_icon-right ".concat(this.props.rightClick ? 'tag_icon-clickable' : ''),
+          style: this.props.rightIconStyle,
+          onClick: this.props.rightClick
+        });
       }
     }, {
-      key: "renderReactions",
-      value: function renderReactions() {
-        var _this2 = this;
+      key: "renderText",
+      value: function renderText() {
+        if (!this.props.text) {
+          return null;
+        }
 
-        return this.state.reactions.map(function (r, i) {
-          return /*#__PURE__*/React__default['default'].createElement("div", {
-            className: "polloverview_section",
-            key: r.key
-          }, /*#__PURE__*/React__default['default'].createElement("img", {
-            src: r.icon,
-            className: "polloverview_iconImage",
-            alt: r.key
-          }), /*#__PURE__*/React__default['default'].createElement("div", {
-            className: "polloverview_right"
-          }, /*#__PURE__*/React__default['default'].createElement("p", {
-            className: "polloverview_count"
-          }, _this2.getReaction(r.key))));
-        });
+        return /*#__PURE__*/React__default['default'].createElement("span", {
+          className: "tag_text"
+        }, this.props.text);
       }
     }, {
       key: "render",
       value: function render() {
-        if (this.props.compact) {
-          return /*#__PURE__*/React__default['default'].createElement("div", {
-            className: "compactreactions"
-          }, this.renderReactions());
-        }
-
-        return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Text, {
-          type: "formTitleSmall",
-          className: "marginBottom-16"
-        }, "Reactions"), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "polloverview"
-        }, this.renderReactions()));
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          onClick: this.props.onClick,
+          className: "tag ".concat(this.props.onClick ? 'tag-clickable' : '', " ").concat(this.props.className || '', " ").concat(this.props.leftIcon || this.props.rightIcon ? 'tag-hasIcon' : ''),
+          style: this.props.style
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "tag_inner"
+        }, this.renderLeft(), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "tag_center ".concat(this.props.centerClass)
+        }, this.renderText(), this.props.children), this.renderRight()));
       }
     }]);
 
-    return Reactions;
+    return Tag;
   }(React.Component);
 
-  function _createSuper$a(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$a(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
-
-  function _isNativeReflectConstruct$a() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-  var P60Icon = /*#__PURE__*/function (_Component) {
-    _inherits__default['default'](P60Icon, _Component);
-
-    var _super = _createSuper$a(P60Icon);
-
-    function P60Icon() {
-      var _this;
+  function _createSuper$c(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$c(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
-      _classCallCheck__default['default'](this, P60Icon);
+  function _isNativeReflectConstruct$c() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
+  var Text = /*#__PURE__*/function (_Component) {
+    _inherits__default['default'](Text, _Component);
 
-      _this = _super.call.apply(_super, [this].concat(args));
+    var _super = _createSuper$c(Text);
 
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "state", {
-        doublePaths: ['add-image', 'add-circle', 'facility', 'news'],
-        triplePaths: []
-      });
+    function Text() {
+      _classCallCheck__default['default'](this, Text);
 
-      return _this;
+      return _super.apply(this, arguments);
     }
 
-    _createClass__default['default'](P60Icon, [{
-      key: "renderIconPaths",
-      value: function renderIconPaths() {
-        if (___default['default'].includes(this.state.doublePaths, this.props.icon)) {
-          return /*#__PURE__*/React__default['default'].createElement("span", null, /*#__PURE__*/React__default['default'].createElement("span", {
-            className: "path1"
-          }), /*#__PURE__*/React__default['default'].createElement("span", {
-            className: "path2".concat(this.props.icon !== 'add-image' ? ' text-white' : '')
-          }));
-        }
-
-        if (___default['default'].includes(this.state.triplePaths, this.props.icon)) {
-          return /*#__PURE__*/React__default['default'].createElement("span", null, /*#__PURE__*/React__default['default'].createElement("span", {
-            className: "path1"
-          }), /*#__PURE__*/React__default['default'].createElement("span", {
-            className: "path2"
-          }), /*#__PURE__*/React__default['default'].createElement("span", {
-            className: "path3"
-          }));
+    _createClass__default['default'](Text, [{
+      key: "getClassName",
+      value: function getClassName() {
+        if (this.props.className) {
+          return " ".concat(this.props.className);
         }
 
-        return null;
+        return '';
       }
     }, {
       key: "render",
       value: function render() {
-        return /*#__PURE__*/React__default['default'].createElement("div", _extends__default['default']({}, this.props, {
-          className: "".concat(this.props.className, " p60icon-").concat(this.props.icon)
-        }), this.renderIconPaths());
+        return /*#__PURE__*/React__default['default'].createElement("p", {
+          className: "text-".concat(this.props.type).concat(this.getClassName()),
+          style: this.props.style
+        }, this.props.children);
       }
     }]);
 
-    return P60Icon;
+    return Text;
   }(React.Component);
 
-  function _createSuper$9(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$9(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+  function _createSuper$b(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$b(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
-  function _isNativeReflectConstruct$9() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+  function _isNativeReflectConstruct$b() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-  var DatePicker = /*#__PURE__*/function (_Component) {
-    _inherits__default['default'](DatePicker, _Component);
+  var StatusButton = /*#__PURE__*/function (_Component) {
+    _inherits__default['default'](StatusButton, _Component);
 
-    var _super = _createSuper$9(DatePicker);
+    var _super = _createSuper$b(StatusButton);
 
-    function DatePicker() {
-      var _this;
+    function StatusButton() {
+      _classCallCheck__default['default'](this, StatusButton);
 
-      _classCallCheck__default['default'](this, DatePicker);
+      return _super.apply(this, arguments);
+    }
 
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
+    _createClass__default['default'](StatusButton, [{
+      key: "render",
+      value: function render() {
+        if (this.props.isActive) {
+          return /*#__PURE__*/React__default['default'].createElement("div", {
+            className: "tagWrapper tagWrapper--active",
+            onClick: this.props.deactivate
+          }, /*#__PURE__*/React__default['default'].createElement("p", {
+            className: "tagWrapper__content tagWrapper__text"
+          }, this.props.activeText), /*#__PURE__*/React__default['default'].createElement("p", {
+            className: "tagWrapper__hoverContent tagWrapper__text"
+          }, this.props.deactivateText));
+        }
 
-      _this = _super.call.apply(_super, [this].concat(args));
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "tagWrapper tagWrapper--inactive",
+          onClick: this.props.activate
+        }, /*#__PURE__*/React__default['default'].createElement("p", {
+          className: "tagWrapper__content tagWrapper__text"
+        }, this.props.inactiveText), /*#__PURE__*/React__default['default'].createElement("p", {
+          className: "tagWrapper__hoverContent tagWrapper__text"
+        }, this.props.activateText));
+      }
+    }]);
 
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "state", {
-        shownMonth: new Date(),
-        grid: []
-      });
+    return StatusButton;
+  }(React.Component);
 
-      return _this;
-    }
+  function _createSuper$a(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$a(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
-    _createClass__default['default'](DatePicker, [{
-      key: "UNSAFE_componentWillMount",
-      value: function UNSAFE_componentWillMount() {
-        this.onNewProps(this.props, true);
-      }
-    }, {
-      key: "UNSAFE_componentWillReceiveProps",
-      value: function UNSAFE_componentWillReceiveProps(nextProps) {
-        this.onNewProps(nextProps);
-      }
-    }, {
-      key: "onNewProps",
-      value: function onNewProps(nextProps, forceUpdate) {
-        if (this.props.multiple && nextProps.selectedDates !== this.props.selectedDates) {
-          this.generateGrid(this.state.shownMonth, nextProps.selectedDates);
-        } else if (forceUpdate || nextProps.selectedDate !== this.props.selectedDate) {
-          var dateToUse = nextProps.selectedDate;
+  function _isNativeReflectConstruct$a() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-          if (!(dateToUse instanceof Date)) {
-            dateToUse = new Date(dateToUse);
-          }
+  var SuccessPopup = /*#__PURE__*/function (_Component) {
+    _inherits__default['default'](SuccessPopup, _Component);
 
-          if (isNaN(dateToUse)) {
-            dateToUse = new Date();
-          }
+    var _super = _createSuper$a(SuccessPopup);
 
-          this.setState({
-            shownMonth: dateToUse,
-            selectedDate: dateToUse
-          });
-          this.generateGrid(dateToUse, dateToUse);
-        }
-      }
-    }, {
-      key: "getDate",
-      value: function getDate() {
-        if (!this.props.selectedDate) {
-          return 'Select day';
-        }
+    function SuccessPopup() {
+      _classCallCheck__default['default'](this, SuccessPopup);
 
-        return moment__default['default'](this.props.selectedDate).format('dddd, Do MMMM');
-      }
-    }, {
-      key: "getShortDate",
-      value: function getShortDate() {
-        if (!this.props.selectedDate) {
-          return '';
-        }
+      return _super.apply(this, arguments);
+    }
 
-        return moment__default['default'](this.props.selectedDate).format('DD/MM/YYYY');
+    _createClass__default['default'](SuccessPopup, [{
+      key: "getBackgroundClasses",
+      value: function getBackgroundClasses() {
+        return this.props.backgroundClose ? 'successPopupBackground pointer' : 'successPopupBackground';
       }
     }, {
-      key: "getMonth",
-      value: function getMonth() {
-        return moment__default['default'](this.state.shownMonth).format('MMMM YYYY');
+      key: "renderButtons",
+      value: function renderButtons() {
+        if (___default['default'].isEmpty(this.props.buttons)) return null;
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "successPopup_buttons"
+        }, this.props.buttons.map(function (b, i) {
+          return /*#__PURE__*/React__default['default'].createElement(Button, {
+            key: i,
+            buttonClassName: "successPopup_button",
+            buttonType: b.type,
+            isActive: !b.inactive,
+            onClick: b.onClick
+          }, b.text);
+        }));
       }
     }, {
-      key: "isDateSelected",
-      value: function isDateSelected(date, selectedDate) {
-        if (this.props.multiple) {
-          return ___default['default'].includes(selectedDate, date.format('DD-MM-YYYY'));
+      key: "renderClose",
+      value: function renderClose() {
+        if (!this.props.closeAction) {
+          return null;
         }
 
-        return date.isSame(selectedDate, 'date');
+        return /*#__PURE__*/React__default['default'].createElement("a", {
+          style: {
+            position: 'absolute',
+            top: 16,
+            right: 16,
+            cursor: 'pointer'
+          },
+          onClick: this.props.closeAction
+        }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
+          name: "remove"
+        }));
       }
     }, {
-      key: "changeMonth",
-      value: function changeMonth(change) {
-        var newShownDate = new Date(this.state.shownMonth.getFullYear(), this.state.shownMonth.getMonth() + 1 + change, 0);
-        this.setState({
-          shownMonth: newShownDate
-        });
-        this.generateGrid(newShownDate);
+      key: "render",
+      value: function render() {
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          className: this.getBackgroundClasses()
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "successPopup"
+        }, this.props.noIcon || /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "successPopup_tick"
+        }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
+          className: "successPopup_tick_icon",
+          name: 'check'
+        })), this.renderClose(), !___default['default'].isEmpty(this.props.text) && /*#__PURE__*/React__default['default'].createElement("p", {
+          className: "successPopup_text"
+        }, this.props.text), this.props.children, this.renderButtons()));
       }
-    }, {
-      key: "selectRange",
-      value: function selectRange(date) {
-        var _this2 = this;
-
-        var d1 = moment__default['default'](this.state.lastSelected, 'DD-MM-YYYY');
-        var d2 = moment__default['default'](date, 'DD-MM-YYYY');
-        var startDate, endDate;
+    }]);
 
-        if (d1.valueOf() > d2.valueOf()) {
-          // clicked an earlier day
-          startDate = moment__default['default'](d2);
-          endDate = moment__default['default'](d1);
-        } else {
-          // clicked a later day
-          startDate = moment__default['default'](d1);
-          endDate = moment__default['default'](d2);
-        }
+    return SuccessPopup;
+  }(React.Component);
 
-        var dateRange = [startDate.format('DD-MM-YYYY')];
+  function _createSuper$9(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$9(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
-        while (startDate.format('DD-MM-YYYY') !== endDate.format('DD-MM-YYYY')) {
-          startDate.add(1, 'd');
-          dateRange.push(startDate.format('DD-MM-YYYY'));
-        }
+  function _isNativeReflectConstruct$9() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-        if (___default['default'].includes(this.props.selectedDates, d2.format('DD-MM-YYYY')) && !___default['default'].includes(this.props.selectedDates, d1.format('DD-MM-YYYY')) || !___default['default'].some(dateRange, function (d) {
-          return !___default['default'].includes(_this2.props.selectedDates, d);
-        })) {
-          // the first clicked date was just de-selected and then clicked on a selected date
-          // or every date in the range is already selected, then
-          // de-select the range
-          this.props.selectDate(___default['default'].filter(this.props.selectedDates, function (d) {
-            return !___default['default'].includes(dateRange, d);
-          }));
-        } else {
-          // select the range
-          var newSelection = [].concat(_toConsumableArray__default['default'](this.props.selectedDates), dateRange);
-          this.props.selectDate(___default['default'].uniq(newSelection));
-        }
-      }
+  var getReactions = function getReactions() {
+    return [{
+      key: 'heart',
+      icon: 'https://pluss60-demo-media.s3-ap-southeast-2.amazonaws.com/assets/emojis/heart.png'
     }, {
-      key: "selectDate",
-      value: function selectDate(date, e) {
-        console.log('selected a date');
-
-        if (this.props.multiple) {
-          var dateKey = moment__default['default'](date).format('DD-MM-YYYY');
+      key: 'smile',
+      icon: 'https://pluss60-demo-media.s3-ap-southeast-2.amazonaws.com/assets/emojis/smile.png'
+    }, {
+      key: 'sad',
+      icon: 'https://pluss60-demo-media.s3-ap-southeast-2.amazonaws.com/assets/emojis/sad.png'
+    }, {
+      key: 'party',
+      icon: 'https://pluss60-demo-media.s3-ap-southeast-2.amazonaws.com/assets/emojis/party.png'
+    }];
+  };
 
-          if (e.shiftKey && this.state.lastSelected && this.state.lastSelected !== dateKey) {
-            // shift-click to select range
-            this.selectRange(dateKey);
-          } else {
-            // toggle single date
-            var index = this.props.selectedDates.indexOf(dateKey);
+  var Reactions = /*#__PURE__*/function (_Component) {
+    _inherits__default['default'](Reactions, _Component);
 
-            var newSelection = _toConsumableArray__default['default'](this.props.selectedDates);
+    var _super = _createSuper$9(Reactions);
 
-            if (index > -1) {
-              newSelection.splice(index, 1);
-            } else {
-              newSelection.push(dateKey);
-            }
+    function Reactions() {
+      var _this;
 
-            this.props.selectDate(newSelection);
-          }
+      _classCallCheck__default['default'](this, Reactions);
 
-          this.setState({
-            lastSelected: dateKey
-          });
-        } else {
-          this.props.selectDate(moment__default['default'](date).format('YYYY-MM-DD'));
-        }
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
       }
-    }, {
-      key: "generateGrid",
-      value: function generateGrid(date, selectedDate) {
-        var month = moment__default['default'](date);
-        var dateToTarget = moment__default['default'](date).endOf('month');
-        var dateToModify = moment__default['default'](date).startOf('month');
-        var selectedDateToUse = this.props.multiple ? selectedDate || this.props.selectedDates || [] : moment__default['default'](selectedDate || this.state.selectedDate); // set dateToModify to be Sunday of that week
-
-        while (dateToModify.day() !== 0) {
-          dateToModify = dateToModify.add(-1, 'day');
-        }
 
-        var rows = [[]];
+      _this = _super.call.apply(_super, [this].concat(args));
 
-        while (dateToTarget.day() !== 6) {
-          dateToTarget = dateToTarget.add(1, 'day');
-        }
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "state", {
+        reactions: getReactions()
+      });
 
-        dateToTarget = dateToTarget.add(1, 'day'); // add an extra day to complete the week
+      return _this;
+    }
 
-        while (!dateToModify.isSame(dateToTarget, 'day')) {
-          if (rows[rows.length - 1].length === 7) {
-            // week has filled - add new row
-            rows.push([]);
+    _createClass__default['default'](Reactions, [{
+      key: "getReaction",
+      value: function getReaction(key) {
+        if (this.props.reactions) {
+          if (!this.props.reactions[key]) {
+            return 0;
           }
 
-          var thisDate = moment__default['default'](dateToModify);
-          rows[rows.length - 1].push({
-            date: thisDate,
-            dateKey: thisDate.format('DD-MM-YYYY'),
-            display: thisDate.date(),
-            isFaded: !thisDate.isSame(month, 'month'),
-            isToday: thisDate.isSame(moment__default['default'](), 'date'),
-            isSelected: this.isDateSelected(thisDate, selectedDateToUse)
-          });
-          dateToModify = dateToModify.add(1, 'day');
+          return this.props.reactions[key];
         }
 
-        this.setState({
-          grid: rows
-        });
-      }
-    }, {
-      key: "renderGrid",
-      value: function renderGrid() {
-        var _this3 = this;
-
-        return this.state.grid.map(function (row, index) {
-          return /*#__PURE__*/React__default['default'].createElement("div", {
-            className: "datepicker__row marginTop-8",
-            key: index
-          }, row.map(function (date) {
-            var classes = 'datepicker__date';
-
-            if (date.isFaded) {
-              classes += ' datepicker__date--faded';
-            }
-
-            if (date.isToday) {
-              classes += ' datepicker__date--today';
-            }
-
-            if (date.isSelected) {
-              classes += ' datepicker__date--selected';
-            }
+        if (!this.props.entity) {
+          return 0;
+        }
 
-            return /*#__PURE__*/React__default['default'].createElement("div", {
-              className: classes,
-              key: date.dateKey
-            }, /*#__PURE__*/React__default['default'].createElement("div", {
-              className: "datepicker__date__inner",
-              onClick: function onClick(e) {
-                _this3.selectDate(date.date, e);
-              }
-            }, date.display));
-          }));
-        });
-      }
-    }, {
-      key: "renderTop",
-      value: function renderTop() {
-        if (this.props.hideTop) {
-          return null;
+        if (!this.props.entity.Reactions) {
+          return 0;
         }
 
-        if (this.props.multiple) {
-          return /*#__PURE__*/React__default['default'].createElement("div", {
-            className: "datepicker__multitop"
-          }, /*#__PURE__*/React__default['default'].createElement("p", {
-            className: "datepicker__multitop__text"
-          }, "Shift + Click to select a range of dates"));
+        if (!this.props.entity.Reactions[key]) {
+          return 0;
         }
 
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "datepicker__top"
-        }, /*#__PURE__*/React__default['default'].createElement("p", {
-          className: "datepicker__title truncate"
-        }, this.getDate()));
-      }
-    }, {
-      key: "render",
-      value: function render() {
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "datepicker noselect",
-          style: this.props.style
-        }, this.renderTop(), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "datepicker__bottom"
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "datepicker__bottomHeader"
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "datepicker__monthSelector"
-        }, /*#__PURE__*/React__default['default'].createElement(P60Icon, {
-          className: "datepicker__monthChevron",
-          icon: "chevron_left",
-          onClick: this.changeMonth.bind(this, -1)
-        }), /*#__PURE__*/React__default['default'].createElement("p", {
-          className: "datepicker__selectedMonth"
-        }, this.getMonth()), /*#__PURE__*/React__default['default'].createElement(P60Icon, {
-          className: "datepicker__monthChevron",
-          icon: "chevron_right",
-          onClick: this.changeMonth.bind(this, 1)
-        }))), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "datepicker__row marginTop-16"
-        }, /*#__PURE__*/React__default['default'].createElement("p", {
-          className: "datepicker__colHeader"
-        }, "SUN"), /*#__PURE__*/React__default['default'].createElement("p", {
-          className: "datepicker__colHeader"
-        }, "MON"), /*#__PURE__*/React__default['default'].createElement("p", {
-          className: "datepicker__colHeader"
-        }, "TUE"), /*#__PURE__*/React__default['default'].createElement("p", {
-          className: "datepicker__colHeader"
-        }, "WED"), /*#__PURE__*/React__default['default'].createElement("p", {
-          className: "datepicker__colHeader"
-        }, "THU"), /*#__PURE__*/React__default['default'].createElement("p", {
-          className: "datepicker__colHeader"
-        }, "FRI"), /*#__PURE__*/React__default['default'].createElement("p", {
-          className: "datepicker__colHeader"
-        }, "SAT")), this.renderGrid()));
+        return Object.keys(this.props.entity.Reactions[key]).length;
+      }
+    }, {
+      key: "renderReactions",
+      value: function renderReactions() {
+        var _this2 = this;
+
+        return this.state.reactions.map(function (r, i) {
+          return /*#__PURE__*/React__default['default'].createElement("div", {
+            className: "polloverview_section",
+            key: r.key
+          }, /*#__PURE__*/React__default['default'].createElement("img", {
+            src: r.icon,
+            className: "polloverview_iconImage",
+            alt: r.key
+          }), /*#__PURE__*/React__default['default'].createElement("div", {
+            className: "polloverview_right"
+          }, /*#__PURE__*/React__default['default'].createElement("p", {
+            className: "polloverview_count"
+          }, _this2.getReaction(r.key))));
+        });
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        if (this.props.compact) {
+          return /*#__PURE__*/React__default['default'].createElement("div", {
+            className: "compactreactions"
+          }, this.renderReactions());
+        }
+
+        return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Text, {
+          type: "formTitleSmall",
+          className: "marginBottom-16"
+        }, "Reactions"), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "polloverview"
+        }, this.renderReactions()));
       }
     }]);
 
-    return DatePicker;
+    return Reactions;
   }(React.Component);
 
   function _createSuper$8(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$8(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
@@ -7797,48 +7892,31 @@
       key: "render",
       value: function render() {
         return /*#__PURE__*/React__default['default'].createElement("div", {
+          key: this.props.user.userId || this.props.user.Id || this.props.user.id,
+          className: "userListing",
           style: {
             minHeight: this.getSize() + 5,
-            display: 'flex',
-            cursor: this.props.onClick ? 'pointer' : 'default',
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            marginTop: 10,
+            cursor: this.props.onClick ? 'pointer' : 'inherit',
             opacity: this.props.user && this.props.user.loading ? 0.5 : 1
           },
           onClick: this.props.onClick
         }, /*#__PURE__*/React__default['default'].createElement("div", {
-          key: this.props.user.id,
-          style: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center'
-          }
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          style: {
-            height: this.getSize(),
-            width: this.getSize(),
-            borderRadius: this.getSize() / 2,
-            marginRight: 16,
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
-            backgroundImage: "url(".concat(this.props.user.profilePic != null ? this.props.user.profilePic : CoreConfig.env.defaultProfileImage, ")")
-          },
-          alt: "user profile pic"
+          className: "userListing_inner"
+        }, /*#__PURE__*/React__default['default'].createElement(ProfilePic, {
+          size: this.getSize(),
+          className: "userListing_profilePic",
+          image: this.props.user.profilePic
         }), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "userListing_middle",
           style: {
-            flex: 1,
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
             height: this.getSize()
           }
-        }, /*#__PURE__*/React__default['default'].createElement("p", {
-          className: "fontMedium fontSize-16 ".concat(this.props.whiteText ? 'text-white' : 'text-dark'),
-          style: {
-            margin: 0
-          }
+        }, /*#__PURE__*/React__default['default'].createElement(Text, {
+          type: "name",
+          style: this.props.whiteText ? {
+            color: '#fff'
+          } : null,
+          className: this.props.textClass
         }, this.props.user.displayName), this.renderSub())), this.renderRight());
       }
     }]);
@@ -8293,33 +8371,294 @@
     }, {
       key: "render",
       value: function render() {
-        return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", null, this.renderUserAdd()), /*#__PURE__*/React__default['default'].createElement("div", null, this.renderAttendees()));
+        return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", null, this.renderUserAdd()), /*#__PURE__*/React__default['default'].createElement("div", null, this.renderAttendees()));
+      }
+    }]);
+
+    return AudienceIncluder;
+  }(React.Component);
+
+  var mapStateToProps$1 = function mapStateToProps(state) {
+    return {
+      auth: state.auth
+    };
+  };
+
+  var exportObj$1 = reactRedux.connect(mapStateToProps$1, {})(reactRouter.withRouter(AudienceIncluder));
+
+  function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+  function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+  function _createSuper$4(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$4(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+
+  function _isNativeReflectConstruct$4() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+  var DropdownInput = /*#__PURE__*/function (_Component) {
+    _inherits__default['default'](DropdownInput, _Component);
+
+    var _super = _createSuper$4(DropdownInput);
+
+    function DropdownInput(props) {
+      var _this;
+
+      _classCallCheck__default['default'](this, DropdownInput);
+
+      _this = _super.call(this, props);
+      _this.state = {
+        width: 0,
+        height: 0,
+        open: false
+      };
+      _this.setWrapperRef = _this.setWrapperRef.bind(_assertThisInitialized__default['default'](_this));
+      _this.handleClickOutside = _this.handleClickOutside.bind(_assertThisInitialized__default['default'](_this));
+      return _this;
+    }
+
+    _createClass__default['default'](DropdownInput, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        document.addEventListener('mousedown', this.handleClickOutside);
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        document.removeEventListener('mousedown', this.handleClickOutside);
+      }
+    }, {
+      key: "setWrapperRef",
+      value: function setWrapperRef(node) {
+        this.wrapperRef = node;
+      }
+    }, {
+      key: "handleClickOutside",
+      value: function handleClickOutside(event) {
+        if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
+          this.setState({
+            open: false
+          });
+        }
+      }
+    }, {
+      key: "getAutoComplete",
+      value: function getAutoComplete() {
+        if (!___default['default'].isUndefined(this.props.autoComplete)) {
+          return this.props.autoComplete ? 'on' : 'off';
+        }
+
+        return 'off';
+      }
+    }, {
+      key: "getClassNames",
+      value: function getClassNames() {
+        var string = '';
+
+        if (this.props.className) {
+          string += "".concat(this.props.className, " ");
+        }
+
+        if (!___default['default'].isUndefined(this.props.disabled) && this.props.disabled) {
+          string = 'genericInput-disabled ';
+        }
+
+        if (this.props.large) {
+          string += 'genericInput-large ';
+        }
+
+        if (!___default['default'].isUndefined(this.props.showError) && this.props.showError()) {
+          return string + 'genericInput-error';
+        }
+
+        if (!___default['default'].isUndefined(this.props.isValid) && this.props.isValid()) {
+          return string + 'genericInput-valid';
+        }
+
+        return string;
+      }
+    }, {
+      key: "getLabelStyle",
+      value: function getLabelStyle() {
+        var style = {};
+
+        if (___default['default'].isEmpty(this.props.value) && !this.props.alwaysShowLabel) {
+          style.opacity = 0;
+        }
+
+        if (!___default['default'].isUndefined(this.props.ignoreValue) && this.props.value === this.props.ignoreValue && !this.props.alwaysShowLabel) {
+          style.opacity = 0;
+        } // if (this.props.isRequired) {
+        //     style.marginLeft = 12;
+        // }
+
+
+        return style;
+      }
+    }, {
+      key: "renderError",
+      value: function renderError() {
+        if (!___default['default'].isUndefined(this.props.showError) && this.props.showError()) {
+          return /*#__PURE__*/React__default['default'].createElement("div", {
+            className: 'fieldLabel fieldLabel-warning'
+          }, this.props.errorMessage ? this.props.errorMessage : 'Required');
+        }
+
+        return null;
+      }
+    }, {
+      key: "renderHelp",
+      value: function renderHelp() {
+        if (!___default['default'].isUndefined(this.props.help)) {
+          return /*#__PURE__*/React__default['default'].createElement("div", {
+            className: "genericInput-help"
+          }, this.props.help);
+        }
+
+        return null;
+      }
+    }, {
+      key: "open",
+      value: function open() {
+        if (this.props.disabled) {
+          return;
+        }
+
+        this.setState({
+          open: !this.state.open
+        });
+      }
+    }, {
+      key: "renderOption",
+      value: function renderOption() {
+        var _this2 = this;
+
+        if (!this.state.open) {
+          return null;
+        }
+
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          style: styles.dropdownItemsWrapper
+        }, ___default['default'].values(this.props.options).map(function (cat) {
+          return /*#__PURE__*/React__default['default'].createElement("div", {
+            key: cat.Key,
+            className: "subtleHover fontRegular fontSize-16 text-dark",
+            style: styles.dropDownOption,
+            onClick: function onClick() {
+              _this2.props.onSelect(cat.Key);
+            }
+          }, cat.Title);
+        }));
+      }
+    }, {
+      key: "getBottomBorder",
+      value: function getBottomBorder() {
+        if (!___default['default'].isUndefined(this.props.disabled) && this.props.disabled) {
+          return 'dropdownInput-bottomBorder--disabled';
+        }
+
+        if (!___default['default'].isUndefined(this.props.showError) && this.props.showError()) {
+          return 'dropdownInput-bottomBorder--error';
+        }
+
+        return '';
+      }
+    }, {
+      key: "renderInput",
+      value: function renderInput() {
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          style: styles.row
+        }, this.props.isRequired && /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "inputRequired "
+        }), /*#__PURE__*/React__default['default'].createElement("div", {
+          onClick: this.open.bind(this),
+          className: "dropdownInput-bottomBorder ".concat(this.getBottomBorder(), " ").concat(!this.props.disabled ? 'pointer' : '')
+        }, /*#__PURE__*/React__default['default'].createElement("input", {
+          id: this.props.id,
+          placeholder: !___default['default'].isUndefined(this.props.placeholder) ? this.props.placeholder : this.props.label,
+          type: !___default['default'].isUndefined(this.props.type) ? this.props.type : 'text',
+          className: "genericInput ".concat(!this.props.disabled ? 'pointer' : ''),
+          value: this.props.value,
+          onChange: this.props.onChange,
+          onKeyPress: this.props.onEnter,
+          style: _objectSpread$2({}, this.props.inputStyle),
+          disabled: true,
+          autoComplete: "false"
+        }), /*#__PURE__*/React__default['default'].createElement("div", {
+          style: styles.chevronWrapper
+        }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
+          style: _objectSpread$2(_objectSpread$2({}, styles.chevron), {}, {
+            color: !___default['default'].isUndefined(this.props.disabled) && this.props.disabled ? 'transparent' : INACTIVE_TEXT
+          }),
+          name: this.state.open ? 'chevron-up' : 'chevron-down'
+        })), this.renderOption()));
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          ref: this.setWrapperRef,
+          className: "dropdownInput ".concat(this.getClassNames()),
+          style: _objectSpread$2({
+            marginBottom: 16,
+            position: 'relative'
+          }, this.props.style)
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          style: _objectSpread$2(_objectSpread$2({}, styles.row), {}, {
+            marginBottom: 0,
+            justifyContent: 'space-between'
+          })
+        }, !___default['default'].isUndefined(this.props.label) && /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "fieldLabel",
+          style: this.getLabelStyle()
+        }, this.props.label), this.renderError()), this.renderInput(), this.renderHelp());
       }
     }]);
 
-    return AudienceIncluder;
+    return DropdownInput;
   }(React.Component);
 
-  var mapStateToProps$1 = function mapStateToProps(state) {
-    return {
-      auth: state.auth
-    };
+  var styles = {
+    row: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    chevronWrapper: {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center'
+    },
+    chevron: {
+      fontSize: 12,
+      paddingBottom: 4
+    },
+    dropdownItemsWrapper: {
+      backgroundColor: '#fff',
+      position: 'absolute',
+      width: '100%',
+      top: 35,
+      boxShadow: '2px 2px 10px rgba(106, 163, 216, 0.7)',
+      zIndex: 90,
+      borderRadius: 4,
+      paddingTop: 4,
+      paddingBottom: 4
+    },
+    dropDownOption: {
+      padding: '4px 16px'
+    }
   };
 
-  var exportObj$1 = reactRedux.connect(mapStateToProps$1, {})(reactRouter.withRouter(AudienceIncluder));
-
-  function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+  function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-  function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-  function _createSuper$4(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$4(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+  function _createSuper$3(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$3(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
-  function _isNativeReflectConstruct$4() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+  function _isNativeReflectConstruct$3() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
   var AudienceSelector = /*#__PURE__*/function (_Component) {
     _inherits__default['default'](AudienceSelector, _Component);
 
-    var _super = _createSuper$4(AudienceSelector);
+    var _super = _createSuper$3(AudienceSelector);
 
     function AudienceSelector() {
       var _this;
@@ -8444,7 +8783,7 @@
         profileActions.getUserTagsBySite(this.props.auth.site).then(function (res) {
           _this3.setState({
             tagList: res.data.map(function (t) {
-              return _objectSpread$2(_objectSpread$2({}, t), {}, {
+              return _objectSpread$1(_objectSpread$1({}, t), {}, {
                 Key: t.Id
               });
             })
@@ -8986,14 +9325,14 @@
     withRef: true
   })(AudienceSelector);
 
-  function _createSuper$3(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$3(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+  function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
-  function _isNativeReflectConstruct$3() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+  function _isNativeReflectConstruct$2() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
   var TextFormatPopup = /*#__PURE__*/function (_Component) {
     _inherits__default['default'](TextFormatPopup, _Component);
 
-    var _super = _createSuper$3(TextFormatPopup);
+    var _super = _createSuper$2(TextFormatPopup);
 
     function TextFormatPopup() {
       _classCallCheck__default['default'](this, TextFormatPopup);
@@ -9069,382 +9408,121 @@
             fontWeight: 600,
             fontSize: 16
           }
-        }, "Some Text"), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("br", null), "Create links with ", /*#__PURE__*/React__default['default'].createElement("span", {
-          style: {
-            fontWeight: 400
-          }
-        }, "[website|text]"), ":", /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("span", {
-          style: {
-            fontWeight: 400
-          }
-        }, "[https://example.com|Click here]"), " =", ' ', /*#__PURE__*/React__default['default'].createElement("a", {
-          href: "https://example.com",
-          target: "_blank",
-          rel: "noopener noreferrer",
-          style: {
-            fontWeight: 600,
-            fontSize: 16
-          }
-        }, "Click here")), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "successPopup_buttons"
-        }, /*#__PURE__*/React__default['default'].createElement(Button, {
-          buttonClassName: "successPopup_button",
-          buttonType: "primary",
-          isActive: true,
-          onClick: this.props.onClose
-        }, "Close"))));
-      }
-    }]);
-
-    return TextFormatPopup;
-  }(React.Component);
-
-  function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
-
-  function _isNativeReflectConstruct$2() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-  var OptionsSection = /*#__PURE__*/function (_Component) {
-    _inherits__default['default'](OptionsSection, _Component);
-
-    var _super = _createSuper$2(OptionsSection);
-
-    function OptionsSection() {
-      _classCallCheck__default['default'](this, OptionsSection);
-
-      return _super.apply(this, arguments);
-    }
-
-    _createClass__default['default'](OptionsSection, [{
-      key: "getTitle",
-      value: function getTitle() {
-        var _this = this;
-
-        var selectedOption = ___default['default'].find(this.props.options, function (o) {
-          return _this.props.selected === o.key;
-        });
-
-        if (!selectedOption) {
-          return '';
-        }
-
-        return selectedOption.text;
-      }
-    }, {
-      key: "renderOptionButton",
-      value: function renderOptionButton(o) {
-        var _this2 = this;
-
-        var isSelected = this.props.selected === o.key;
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "optionsButton".concat(isSelected ? ' optionsButton-selected' : ''),
-          key: o.key,
-          onClick: function onClick() {
-            _this2.props.selectOption(o.key);
-          }
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "optionsButton_iconContainer"
-        }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
-          icon: o.icon,
-          colour: isSelected ? '#fff' : COLOUR_BRANDING_MAIN
-        })), /*#__PURE__*/React__default['default'].createElement(Text, {
-          type: "formLabelSmall",
-          className: "optionsButton_text"
-        }, o.text));
-      }
-    }, {
-      key: "render",
-      value: function render() {
-        var _this3 = this;
-
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "optionsSection".concat(this.props.overflowButtons ? ' optionsSection-overflowButtons' : '')
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "optionsSection_banner"
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "optionsSection_banner_top"
-        }, /*#__PURE__*/React__default['default'].createElement(Text, {
-          type: "formTitleMedium",
-          className: "optionsSection_banner_top_title"
-        }, "More Options")), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "optionsSection_banner_buttonSection"
-        }, this.props.options.map(function (o) {
-          return _this3.renderOptionButton(o);
-        }))), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "optionsContent"
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "optionsContent_box"
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "optionsContent_box_top"
-        }, /*#__PURE__*/React__default['default'].createElement(Text, {
-          type: "formTitleSmall"
-        }, this.getTitle())), this.props.children)));
-      }
-    }]);
-
-    return OptionsSection;
-  }(React.Component);
-
-  function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-  function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-  function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
-
-  function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-  var DropdownInput = /*#__PURE__*/function (_Component) {
-    _inherits__default['default'](DropdownInput, _Component);
-
-    var _super = _createSuper$1(DropdownInput);
-
-    function DropdownInput(props) {
-      var _this;
-
-      _classCallCheck__default['default'](this, DropdownInput);
-
-      _this = _super.call(this, props);
-      _this.state = {
-        width: 0,
-        height: 0,
-        open: false
-      };
-      _this.setWrapperRef = _this.setWrapperRef.bind(_assertThisInitialized__default['default'](_this));
-      _this.handleClickOutside = _this.handleClickOutside.bind(_assertThisInitialized__default['default'](_this));
-      return _this;
-    }
-
-    _createClass__default['default'](DropdownInput, [{
-      key: "componentDidMount",
-      value: function componentDidMount() {
-        document.addEventListener('mousedown', this.handleClickOutside);
-      }
-    }, {
-      key: "componentWillUnmount",
-      value: function componentWillUnmount() {
-        document.removeEventListener('mousedown', this.handleClickOutside);
-      }
-    }, {
-      key: "setWrapperRef",
-      value: function setWrapperRef(node) {
-        this.wrapperRef = node;
-      }
-    }, {
-      key: "handleClickOutside",
-      value: function handleClickOutside(event) {
-        if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
-          this.setState({
-            open: false
-          });
-        }
-      }
-    }, {
-      key: "getAutoComplete",
-      value: function getAutoComplete() {
-        if (!___default['default'].isUndefined(this.props.autoComplete)) {
-          return this.props.autoComplete ? 'on' : 'off';
-        }
-
-        return 'off';
+        }, "Some Text"), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("br", null), "Create links with ", /*#__PURE__*/React__default['default'].createElement("span", {
+          style: {
+            fontWeight: 400
+          }
+        }, "[website|text]"), ":", /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("span", {
+          style: {
+            fontWeight: 400
+          }
+        }, "[https://example.com|Click here]"), " =", ' ', /*#__PURE__*/React__default['default'].createElement("a", {
+          href: "https://example.com",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          style: {
+            fontWeight: 600,
+            fontSize: 16
+          }
+        }, "Click here")), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "successPopup_buttons"
+        }, /*#__PURE__*/React__default['default'].createElement(Button, {
+          buttonClassName: "successPopup_button",
+          buttonType: "primary",
+          isActive: true,
+          onClick: this.props.onClose
+        }, "Close"))));
       }
-    }, {
-      key: "getClassNames",
-      value: function getClassNames() {
-        var string = '';
-
-        if (this.props.className) {
-          string += "".concat(this.props.className, " ");
-        }
-
-        if (!___default['default'].isUndefined(this.props.disabled) && this.props.disabled) {
-          string = 'genericInput-disabled ';
-        }
-
-        if (this.props.large) {
-          string += 'genericInput-large ';
-        }
-
-        if (!___default['default'].isUndefined(this.props.showError) && this.props.showError()) {
-          return string + 'genericInput-error';
-        }
+    }]);
 
-        if (!___default['default'].isUndefined(this.props.isValid) && this.props.isValid()) {
-          return string + 'genericInput-valid';
-        }
+    return TextFormatPopup;
+  }(React.Component);
 
-        return string;
-      }
-    }, {
-      key: "getLabelStyle",
-      value: function getLabelStyle() {
-        var style = {};
+  function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
-        if (___default['default'].isEmpty(this.props.value) && !this.props.alwaysShowLabel) {
-          style.opacity = 0;
-        }
+  function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-        if (!___default['default'].isUndefined(this.props.ignoreValue) && this.props.value === this.props.ignoreValue && !this.props.alwaysShowLabel) {
-          style.opacity = 0;
-        } // if (this.props.isRequired) {
-        //     style.marginLeft = 12;
-        // }
+  var OptionsSection = /*#__PURE__*/function (_Component) {
+    _inherits__default['default'](OptionsSection, _Component);
 
+    var _super = _createSuper$1(OptionsSection);
 
-        return style;
-      }
-    }, {
-      key: "renderError",
-      value: function renderError() {
-        if (!___default['default'].isUndefined(this.props.showError) && this.props.showError()) {
-          return /*#__PURE__*/React__default['default'].createElement("div", {
-            className: 'fieldLabel fieldLabel-warning'
-          }, this.props.errorMessage ? this.props.errorMessage : 'Required');
-        }
+    function OptionsSection() {
+      _classCallCheck__default['default'](this, OptionsSection);
 
-        return null;
-      }
-    }, {
-      key: "renderHelp",
-      value: function renderHelp() {
-        if (!___default['default'].isUndefined(this.props.help)) {
-          return /*#__PURE__*/React__default['default'].createElement("div", {
-            className: "genericInput-help"
-          }, this.props.help);
-        }
+      return _super.apply(this, arguments);
+    }
 
-        return null;
-      }
-    }, {
-      key: "open",
-      value: function open() {
-        if (this.props.disabled) {
-          return;
-        }
+    _createClass__default['default'](OptionsSection, [{
+      key: "getTitle",
+      value: function getTitle() {
+        var _this = this;
 
-        this.setState({
-          open: !this.state.open
+        var selectedOption = ___default['default'].find(this.props.options, function (o) {
+          return _this.props.selected === o.key;
         });
-      }
-    }, {
-      key: "renderOption",
-      value: function renderOption() {
-        var _this2 = this;
 
-        if (!this.state.open) {
-          return null;
+        if (!selectedOption) {
+          return '';
         }
 
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          style: styles.dropdownItemsWrapper
-        }, ___default['default'].values(this.props.options).map(function (cat) {
-          return /*#__PURE__*/React__default['default'].createElement("div", {
-            key: cat.Key,
-            className: "subtleHover fontRegular fontSize-16 text-dark",
-            style: styles.dropDownOption,
-            onClick: function onClick() {
-              _this2.props.onSelect(cat.Key);
-            }
-          }, cat.Title);
-        }));
+        return selectedOption.text;
       }
     }, {
-      key: "getBottomBorder",
-      value: function getBottomBorder() {
-        if (!___default['default'].isUndefined(this.props.disabled) && this.props.disabled) {
-          return 'dropdownInput-bottomBorder--disabled';
-        }
-
-        if (!___default['default'].isUndefined(this.props.showError) && this.props.showError()) {
-          return 'dropdownInput-bottomBorder--error';
-        }
+      key: "renderOptionButton",
+      value: function renderOptionButton(o) {
+        var _this2 = this;
 
-        return '';
-      }
-    }, {
-      key: "renderInput",
-      value: function renderInput() {
+        var isSelected = this.props.selected === o.key;
         return /*#__PURE__*/React__default['default'].createElement("div", {
-          style: styles.row
-        }, this.props.isRequired && /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "inputRequired "
-        }), /*#__PURE__*/React__default['default'].createElement("div", {
-          onClick: this.open.bind(this),
-          className: "dropdownInput-bottomBorder ".concat(this.getBottomBorder(), " ").concat(!this.props.disabled ? 'pointer' : '')
-        }, /*#__PURE__*/React__default['default'].createElement("input", {
-          id: this.props.id,
-          placeholder: !___default['default'].isUndefined(this.props.placeholder) ? this.props.placeholder : this.props.label,
-          type: !___default['default'].isUndefined(this.props.type) ? this.props.type : 'text',
-          className: "genericInput ".concat(!this.props.disabled ? 'pointer' : ''),
-          value: this.props.value,
-          onChange: this.props.onChange,
-          onKeyPress: this.props.onEnter,
-          style: _objectSpread$1({}, this.props.inputStyle),
-          disabled: true,
-          autoComplete: "false"
-        }), /*#__PURE__*/React__default['default'].createElement("div", {
-          style: styles.chevronWrapper
-        }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
-          style: _objectSpread$1(_objectSpread$1({}, styles.chevron), {}, {
-            color: !___default['default'].isUndefined(this.props.disabled) && this.props.disabled ? 'transparent' : INACTIVE_TEXT
-          }),
-          name: this.state.open ? 'chevron-up' : 'chevron-down'
-        })), this.renderOption()));
+          className: "optionsButton".concat(isSelected ? ' optionsButton-selected' : ''),
+          key: o.key,
+          onClick: function onClick() {
+            _this2.props.selectOption(o.key);
+          }
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "optionsButton_iconContainer"
+        }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+          icon: o.icon,
+          colour: isSelected ? '#fff' : COLOUR_BRANDING_MAIN
+        })), /*#__PURE__*/React__default['default'].createElement(Text, {
+          type: "formLabelSmall",
+          className: "optionsButton_text"
+        }, o.text));
       }
     }, {
       key: "render",
       value: function render() {
+        var _this3 = this;
+
         return /*#__PURE__*/React__default['default'].createElement("div", {
-          ref: this.setWrapperRef,
-          className: "dropdownInput ".concat(this.getClassNames()),
-          style: _objectSpread$1({
-            marginBottom: 16,
-            position: 'relative'
-          }, this.props.style)
+          className: "optionsSection".concat(this.props.overflowButtons ? ' optionsSection-overflowButtons' : '')
         }, /*#__PURE__*/React__default['default'].createElement("div", {
-          style: _objectSpread$1(_objectSpread$1({}, styles.row), {}, {
-            marginBottom: 0,
-            justifyContent: 'space-between'
-          })
-        }, !___default['default'].isUndefined(this.props.label) && /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "fieldLabel",
-          style: this.getLabelStyle()
-        }, this.props.label), this.renderError()), this.renderInput(), this.renderHelp());
+          className: "optionsSection_banner"
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "optionsSection_banner_top"
+        }, /*#__PURE__*/React__default['default'].createElement(Text, {
+          type: "formTitleMedium",
+          className: "optionsSection_banner_top_title"
+        }, "More Options")), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "optionsSection_banner_buttonSection"
+        }, this.props.options.map(function (o) {
+          return _this3.renderOptionButton(o);
+        }))), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "optionsContent"
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "optionsContent_box"
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "optionsContent_box_top"
+        }, /*#__PURE__*/React__default['default'].createElement(Text, {
+          type: "formTitleSmall"
+        }, this.getTitle())), this.props.children)));
       }
     }]);
 
-    return DropdownInput;
+    return OptionsSection;
   }(React.Component);
 
-  var styles = {
-    row: {
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center'
-    },
-    chevronWrapper: {
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center'
-    },
-    chevron: {
-      fontSize: 12,
-      paddingBottom: 4
-    },
-    dropdownItemsWrapper: {
-      backgroundColor: '#fff',
-      position: 'absolute',
-      width: '100%',
-      top: 35,
-      boxShadow: '2px 2px 10px rgba(106, 163, 216, 0.7)',
-      zIndex: 90,
-      borderRadius: 4,
-      paddingTop: 4,
-      paddingBottom: 4
-    },
-    dropDownOption: {
-      padding: '4px 16px'
-    }
-  };
-
   function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
   function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -9778,6 +9856,7 @@
     Attachment: Attachment,
     Button: Button,
     CheckBox: CheckBox,
+    DatePicker: DatePicker,
     FileInput: FileInput,
     GenericInput: GenericInput,
     Header: exportObj$2,
@@ -9789,15 +9868,15 @@
     OverlayPageBottomButtons: OverlayPageBottomButtons,
     PageTitle: PageTitle,
     Popup: Popup,
+    P60Icon: P60Icon,
     ProfilePic: ProfilePic,
     RadioButton: RadioButton,
     SVGIcon: SVGIcon,
     Tag: Tag,
     Text: Text,
+    StatusButton: StatusButton,
     SuccessPopup: SuccessPopup,
     Reactions: Reactions,
-    P60Icon: P60Icon,
-    DatePicker: DatePicker,
     AnalyticsFilter: AnalyticsFilter,
     UserListing: UserListing,
     TimePicker: TimePicker,