@plusscommunities/pluss-core-web 1.1.1 → 1.1.5

package/dist/index.cjs.js

@@ -60,7 +60,7 @@ var CoreConfig = {
     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,
@@ -139,8 +139,9 @@ var authedFunction = /*#__PURE__*/function () {
             _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();
         }
@@ -575,6 +576,22 @@ var safeReadParams = function safeReadParams(props, key) {
   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;
@@ -615,6 +632,15 @@ var get1400 = function get1400(url) {
   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;
@@ -1520,7 +1546,10 @@ var index$3 = /*#__PURE__*/Object.freeze({
   getUrl: getUrl,
   getUrlParams: getUrlParams,
   safeReadParams: safeReadParams,
+  getUserFromState: getUserFromState,
+  getAppColourFromState: getAppColourFromState,
   get1400: get1400,
+  generateImageName: generateImageName,
   getExtension: getExtension,
   getFileName: getFileName,
   getThumb300: getThumb300,
@@ -2062,30 +2091,30 @@ var fileActions = {
       });
     });
   },
-  // 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 = {
@@ -2973,14 +3002,14 @@ var index$1 = /*#__PURE__*/Object.freeze({
   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);
@@ -3957,14 +3986,14 @@ var icons = {
 	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);
@@ -4012,14 +4041,14 @@ var SVGIcon = /*#__PURE__*/function (_Component) {
   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);
@@ -4057,14 +4086,14 @@ function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if
 
 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);
@@ -4164,14 +4193,14 @@ function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if
 
 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;
@@ -4277,27 +4306,19 @@ var styles$8 = {
   }
 };
 
-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];
@@ -4306,472 +4327,863 @@ var FileInputComponent = /*#__PURE__*/function (_Component) {
     _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');
       }
 
@@ -4818,7 +5230,8 @@ var GenericInput = /*#__PURE__*/function (_Component) {
           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,
@@ -4845,7 +5258,8 @@ var GenericInput = /*#__PURE__*/function (_Component) {
         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,
@@ -4886,14 +5300,14 @@ var styles$7 = {
   }
 };
 
-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;
@@ -4924,6 +5338,25 @@ var Header = /*#__PURE__*/function (_Component) {
     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() {
@@ -4941,17 +5374,7 @@ var Header = /*#__PURE__*/function (_Component) {
           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",
@@ -4966,6 +5389,13 @@ var Header = /*#__PURE__*/function (_Component) {
         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() {
@@ -4973,6 +5403,10 @@ var Header = /*#__PURE__*/function (_Component) {
         return this.renderSimpleHeader();
       }
 
+      if (this.props.onlyContainer) {
+        return this.renderContainerHeader();
+      }
+
       return this.renderHeader();
     }
   }]);
@@ -4995,14 +5429,14 @@ function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if
 
 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);
@@ -5116,9 +5550,9 @@ function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if
 
 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: '',
@@ -5128,7 +5562,7 @@ var DEFAULT_INPUT = {
 var ImageInputComponent = /*#__PURE__*/function (_Component) {
   _inherits__default['default'](ImageInputComponent, _Component);
 
-  var _super = _createSuper$n(ImageInputComponent);
+  var _super = _createSuper$m(ImageInputComponent);
 
   function ImageInputComponent() {
     var _this;
@@ -5911,11 +6345,8 @@ var ImageInputComponent = /*#__PURE__*/function (_Component) {
       }
 
       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",
@@ -6424,14 +6855,14 @@ var ImageInput = reactRedux.connect(mapStateToProps$3, {}, null, {
   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);
@@ -6465,14 +6896,14 @@ function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if
 
 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;
@@ -6509,6 +6940,18 @@ var OverlayPage = /*#__PURE__*/function (_Component) {
         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() {
@@ -6516,7 +6959,7 @@ var OverlayPage = /*#__PURE__*/function (_Component) {
         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());
     }
   }]);
 
@@ -6546,14 +6989,14 @@ function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if
 
 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;
@@ -6612,14 +7055,14 @@ function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if
 
 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);
@@ -6664,14 +7107,14 @@ function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if
 
 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;
@@ -6725,14 +7168,14 @@ var styles$2 = {
   }
 };
 
-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);
@@ -6752,26 +7195,18 @@ var PageTitle = /*#__PURE__*/function (_Component) {
   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);
@@ -6813,14 +7248,14 @@ function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if
 
 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);
@@ -6978,14 +7413,14 @@ var styles$1 = {
   }
 };
 
-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);
@@ -7000,659 +7435,319 @@ var Tag = /*#__PURE__*/function (_Component) {
         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); }; }
@@ -7821,48 +7916,31 @@ var UserListing = /*#__PURE__*/function (_Component) {
     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());
     }
   }]);
@@ -8317,33 +8395,294 @@ var AudienceIncluder = /*#__PURE__*/function (_Component) {
   }, {
     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;
@@ -8468,7 +8807,7 @@ var AudienceSelector = /*#__PURE__*/function (_Component) {
       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
             });
           })
@@ -9010,14 +9349,14 @@ var toExport = reactRedux.connect(null, {
   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);
@@ -9093,382 +9432,121 @@ var TextFormatPopup = /*#__PURE__*/function (_Component) {
           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; }
@@ -9802,6 +9880,7 @@ var index = /*#__PURE__*/Object.freeze({
   Attachment: Attachment,
   Button: Button,
   CheckBox: CheckBox,
+  DatePicker: DatePicker,
   FileInput: FileInput,
   GenericInput: GenericInput,
   Header: exportObj$2,
@@ -9813,15 +9892,15 @@ var index = /*#__PURE__*/Object.freeze({
   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,