@plusscommunities/pluss-circles-web 1.0.13 → 1.0.15-beta.0

package/dist/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@babel/runtime/helpers/defineProperty'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/assertThisInitialized'), require('@babel/runtime/helpers/inherits'), require('@babel/runtime/helpers/possibleConstructorReturn'), require('@babel/runtime/helpers/getPrototypeOf'), require('@babel/runtime/regenerator'), require('react'), require('react-redux'), require('lodash'), require('moment'), require('react-router-dom'), require('@plusscommunities/pluss-core-web'), require('react-bootstrap'), require('react-fontawesome'), require('@babel/runtime/helpers/toConsumableArray'), require('react-router')) :
   typeof define === 'function' && define.amd ? define(['exports', '@babel/runtime/helpers/defineProperty', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/assertThisInitialized', '@babel/runtime/helpers/inherits', '@babel/runtime/helpers/possibleConstructorReturn', '@babel/runtime/helpers/getPrototypeOf', '@babel/runtime/regenerator', 'react', 'react-redux', 'lodash', 'moment', 'react-router-dom', '@plusscommunities/pluss-core-web', 'react-bootstrap', 'react-fontawesome', '@babel/runtime/helpers/toConsumableArray', 'react-router'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['@plusscommunities/pluss-circles-web'] = {}, global._defineProperty, global._asyncToGenerator, global._classCallCheck, global._createClass, global._assertThisInitialized, global._inherits, global._possibleConstructorReturn, global._getPrototypeOf, global._regeneratorRuntime, global.React, global.reactRedux, global._, global.moment, global.reactRouterDom, global.PlussCore, global.reactBootstrap, global.FontAwesome, global._toConsumableArray, global.reactRouter));
-}(this, (function (exports, _defineProperty, _asyncToGenerator, _classCallCheck, _createClass, _assertThisInitialized, _inherits, _possibleConstructorReturn, _getPrototypeOf, _regeneratorRuntime, React, reactRedux, _, moment, reactRouterDom, PlussCore, reactBootstrap, FontAwesome, _toConsumableArray, reactRouter) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['@plusscommunities/pluss-circles-web'] = {}, global._defineProperty, global._asyncToGenerator, global._classCallCheck, global._createClass, global._assertThisInitialized, global._inherits, global._possibleConstructorReturn, global._getPrototypeOf, global._regeneratorRuntime, global.React$1, global.reactRedux, global._, global.moment, global.reactRouterDom, global.PlussCore, global.reactBootstrap, global.FontAwesome, global._toConsumableArray, global.reactRouter));
+}(this, (function (exports, _defineProperty, _asyncToGenerator, _classCallCheck, _createClass, _assertThisInitialized, _inherits, _possibleConstructorReturn, _getPrototypeOf, _regeneratorRuntime, React$1, reactRedux, _, moment, reactRouterDom, PlussCore, reactBootstrap, FontAwesome, _toConsumableArray, reactRouter) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -35,7 +35,7 @@
   var _possibleConstructorReturn__default = /*#__PURE__*/_interopDefaultLegacy(_possibleConstructorReturn);
   var _getPrototypeOf__default = /*#__PURE__*/_interopDefaultLegacy(_getPrototypeOf);
   var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
-  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+  var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
   var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
   var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
   var PlussCore__namespace = /*#__PURE__*/_interopNamespace(PlussCore);
@@ -88,6 +88,11 @@
       defaultNew: values.allowPublicKeyDefault,
       default: values.allowPublicKeyDefault
     }],
+    featurePickerInfo: {
+      image: 'https://pluss-prd-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:80aecdcb-9955-493e-a341-2f2263f64777/public/e4a5948c40908e2137f0a65eb1/groups.jpg',
+      text: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Open and closed group chat - where your community does its planning, discussing and sharing."), /*#__PURE__*/React.createElement("p", null, "Keep them open for any member to join, or private to the admins - ", values.textFeatureTitle, " gives you that control."), /*#__PURE__*/React.createElement("p", null, "Your ", values.textFeatureTitle, " activity will keep the app close to your communities hands.")),
+      layoutDisclaimer: true
+    },
     menu: {
       order: 11,
       text: values.textFeatureTitle,
@@ -327,7 +332,7 @@
   function _createSuper$7(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$7(); 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$7() { 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 Components$2 = PlussCore__namespace.Components,
+  var Components$3 = PlussCore__namespace.Components,
       Session$2 = PlussCore__namespace.Session,
       Helper$2 = PlussCore__namespace.Helper;
 
@@ -578,7 +583,7 @@
         }, /*#__PURE__*/React__default['default'].createElement(reactRouterDom.Link, {
           to: "/".concat(values.featureKey, "/").concat(values.entityKey, "/").concat(circle.Id)
         }, this.getTitle(circle))), /*#__PURE__*/React__default['default'].createElement("td", null, moment__default['default'](circle.Changed).local().format('D MMM YYYY')), /*#__PURE__*/React__default['default'].createElement("td", null, circle.Audience.map(function (user) {
-          return /*#__PURE__*/React__default['default'].createElement(Components$2.ProfilePic, {
+          return /*#__PURE__*/React__default['default'].createElement(Components$3.ProfilePic, {
             size: 30,
             image: user.profilePic,
             hoverText: user.displayName,
@@ -618,24 +623,24 @@
     }, {
       key: "renderFilters",
       value: function renderFilters() {
-        var userFilter = /*#__PURE__*/React__default['default'].createElement(Components$2.Tag, {
+        var userFilter = /*#__PURE__*/React__default['default'].createElement(Components$3.Tag, {
           className: "marginRight-10",
           onClick: this.openUserFilter,
           text: "User"
         });
-        var typeFilter = /*#__PURE__*/React__default['default'].createElement(Components$2.Tag, {
+        var typeFilter = /*#__PURE__*/React__default['default'].createElement(Components$3.Tag, {
           className: "marginRight-10",
           onClick: this.openTypeFilter,
           text: "Type"
         });
 
         if (this.state.selectedUserFilter) {
-          userFilter = /*#__PURE__*/React__default['default'].createElement(Components$2.Tag, {
+          userFilter = /*#__PURE__*/React__default['default'].createElement(Components$3.Tag, {
             className: "marginRight-10",
             onClick: this.openUserFilter,
             rightIcon: "close",
             rightClick: this.removeUserFilter
-          }, /*#__PURE__*/React__default['default'].createElement(Components$2.UserListing, {
+          }, /*#__PURE__*/React__default['default'].createElement(Components$3.UserListing, {
             size: 15,
             user: this.state.selectedUserFilter,
             textClass: "tag_text"
@@ -643,7 +648,7 @@
         }
 
         if (this.state.selectedTypeFilter) {
-          typeFilter = /*#__PURE__*/React__default['default'].createElement(Components$2.Tag, {
+          typeFilter = /*#__PURE__*/React__default['default'].createElement(Components$3.Tag, {
             className: "marginRight-10",
             onClick: this.openTypeFilter,
             rightIcon: "close",
@@ -654,7 +659,7 @@
 
         return /*#__PURE__*/React__default['default'].createElement("div", {
           className: "flex flex-center marginTop-20"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$3.Text, {
           type: "h5",
           className: "marginRight-20"
         }, "Filter by"), userFilter, typeFilter);
@@ -668,14 +673,14 @@
           return null;
         }
 
-        return /*#__PURE__*/React__default['default'].createElement(Components$2.Popup, {
+        return /*#__PURE__*/React__default['default'].createElement(Components$3.Popup, {
           title: "Select User",
           maxWidth: 600,
           minWidth: 400,
           minHeight: 400,
           hasPadding: true,
           onClose: this.closeUserFilter
-        }, /*#__PURE__*/React__default['default'].createElement(Components$2.GenericInput, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$3.GenericInput, {
           id: "userSearch",
           type: "text",
           label: "Search",
@@ -686,7 +691,7 @@
           },
           alwaysShowLabel: true
         }), this.getUsers().map(function (user) {
-          return /*#__PURE__*/React__default['default'].createElement(Components$2.UserListing, {
+          return /*#__PURE__*/React__default['default'].createElement(Components$3.UserListing, {
             key: user.userId,
             user: user,
             onClick: function onClick() {
@@ -704,19 +709,19 @@
           return null;
         }
 
-        return /*#__PURE__*/React__default['default'].createElement(Components$2.Popup, {
+        return /*#__PURE__*/React__default['default'].createElement(Components$3.Popup, {
           title: "Select Type",
           maxWidth: 600,
           minWidth: 400,
           hasPadding: true,
           onClose: this.closeTypeFilter
-        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Tag, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$3.Tag, {
           onClick: function onClick() {
             _this7.selectTypeFilter('circle');
           },
           text: ___default['default'].capitalize(values.entityName),
           className: "marginRight-10"
-        }), /*#__PURE__*/React__default['default'].createElement(Components$2.Tag, {
+        }), /*#__PURE__*/React__default['default'].createElement(Components$3.Tag, {
           onClick: function onClick() {
             _this7.selectTypeFilter('private');
           },
@@ -728,12 +733,12 @@
       value: function render() {
         var _this8 = this;
 
-        return /*#__PURE__*/React__default['default'].createElement("div", null, this.renderTypeFilterPopup(), this.renderUserFilterPopup(), /*#__PURE__*/React__default['default'].createElement(Components$2.Header, null, this.canAddNew() && /*#__PURE__*/React__default['default'].createElement(Components$2.AddButton, {
+        return /*#__PURE__*/React__default['default'].createElement("div", null, this.renderTypeFilterPopup(), this.renderUserFilterPopup(), /*#__PURE__*/React__default['default'].createElement(Components$3.Header, null, this.canAddNew() && /*#__PURE__*/React__default['default'].createElement(Components$3.AddButton, {
           onClick: this.onAddNew,
           text: "NEW ".concat(___default['default'].upperCase(values.entityName))
         })), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "pageContainer paddingVertical-20 paddingHorizontal-40"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$3.Text, {
           type: "h1",
           className: ""
         }, values.textFeatureTitle), this.renderFilters(), /*#__PURE__*/React__default['default'].createElement(reactBootstrap.Table, {
@@ -758,7 +763,7 @@
     }]);
 
     return Circles;
-  }(React.Component);
+  }(React$1.Component);
 
   var mapStateToProps$2 = function mapStateToProps(state) {
     var circles = state[values.reducerKey].circles;
@@ -779,10 +784,10 @@
 
   function _isNativeReflectConstruct$6() { 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 Actions$1 = PlussCore__namespace.Actions,
-      Components$1 = PlussCore__namespace.Components,
+      Components$2 = PlussCore__namespace.Components,
       Session$1 = PlussCore__namespace.Session,
       Apis = PlussCore__namespace.Apis,
-      Colours$1 = PlussCore__namespace.Colours,
+      Colours$2 = PlussCore__namespace.Colours,
       Helper$1 = PlussCore__namespace.Helper;
 
   var AddCircle = /*#__PURE__*/function (_Component) {
@@ -1102,7 +1107,7 @@
       key: "renderSuccess",
       value: function renderSuccess() {
         if (!this.state.success) return null;
-        return /*#__PURE__*/React__default['default'].createElement(Components$1.SuccessPopup, {
+        return /*#__PURE__*/React__default['default'].createElement(Components$2.SuccessPopup, {
           text: "".concat(___default['default'].capitalize(values.entityName), " has been ").concat(this.state.circleId == null ? 'added' : 'edited'),
           buttons: [{
             type: 'outlined',
@@ -1119,12 +1124,12 @@
         var _this4 = this;
 
         if (this.state.updating) {
-          return /*#__PURE__*/React__default['default'].createElement(Components$1.Button, {
+          return /*#__PURE__*/React__default['default'].createElement(Components$2.Button, {
             buttonType: "secondary"
           }, "Saving...");
         }
 
-        return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Components$1.Button, {
+        return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Components$2.Button, {
           inline: true,
           buttonType: "tertiary",
           onClick: function onClick() {
@@ -1134,7 +1139,7 @@
           style: {
             marginRight: 16
           }
-        }, "Cancel"), /*#__PURE__*/React__default['default'].createElement(Components$1.Button, {
+        }, "Cancel"), /*#__PURE__*/React__default['default'].createElement(Components$2.Button, {
           inline: true,
           buttonType: "primary",
           onClick: this.onSave,
@@ -1148,7 +1153,7 @@
 
         return /*#__PURE__*/React__default['default'].createElement("div", {
           className: "optionsContent_bottom"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$1.RadioButton, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$2.RadioButton, {
           label: "Do you want to make this ".concat(values.entityName, " a public ").concat(values.entityName, "?"),
           isActive: this.state.isPublic,
           options: [{
@@ -1203,7 +1208,7 @@
           return null;
         }
 
-        return /*#__PURE__*/React__default['default'].createElement(Components$1.OptionsSection, {
+        return /*#__PURE__*/React__default['default'].createElement(Components$2.OptionsSection, {
           options: options,
           selected: this.state.selectedOption,
           selectOption: this.selectOption
@@ -1216,12 +1221,12 @@
 
         return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
           className: "padding-60 paddingVertical-40 bottomDivideBorder"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
           type: "formTitleLarge",
           className: "marginBottom-24"
         }, this.state.circleId == null ? 'New' : 'Edit', " ", ___default['default'].capitalize(values.entityName)), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "flex flex-reverse"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$1.ImageInput, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$2.ImageInput, {
           ref: function ref(_ref2) {
             _this6.imageInput = _ref2;
           },
@@ -1233,7 +1238,7 @@
           }
         }), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "flex-1"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$1.GenericInput, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$2.GenericInput, {
           id: "title",
           type: "text",
           label: "Title",
@@ -1252,16 +1257,16 @@
           }
         })))), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "padding-60 paddingVertical-40 bottomDivideBorder"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
           type: "formTitleMedium"
         }, "Members"), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "flex marginTop-20"
         }, /*#__PURE__*/React__default['default'].createElement("div", {
           className: "flex-1"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
           type: "formTitleSmall",
           className: "marginBottom-10"
-        }, "Select Users"), /*#__PURE__*/React__default['default'].createElement(Components$1.GenericInput, {
+        }, "Select Users"), /*#__PURE__*/React__default['default'].createElement(Components$2.GenericInput, {
           id: "userSearch",
           type: "text",
           label: "Search",
@@ -1272,7 +1277,7 @@
           },
           alwaysShowLabel: true
         }), this.getShownUsers().map(function (user) {
-          return /*#__PURE__*/React__default['default'].createElement(Components$1.UserListing, {
+          return /*#__PURE__*/React__default['default'].createElement(Components$2.UserListing, {
             key: user.userId,
             user: user,
             onClick: function onClick() {
@@ -1281,23 +1286,23 @@
           });
         })), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "flex-1"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
           type: "formTitleSmall",
           className: "marginBottom-10"
         }, "Selected"), this.state.selectedUsers.map(function (user) {
-          return /*#__PURE__*/React__default['default'].createElement(Components$1.UserListing, {
+          return /*#__PURE__*/React__default['default'].createElement(Components$2.UserListing, {
             key: user.userId,
             user: user,
             rightContent: /*#__PURE__*/React__default['default'].createElement("div", {
               className: "flex flex-reverse flex-center"
-            }, /*#__PURE__*/React__default['default'].createElement(Components$1.SVGIcon, {
+            }, /*#__PURE__*/React__default['default'].createElement(Components$2.SVGIcon, {
               className: "removeIcon marginLeft-8",
               icon: "close",
-              colour: Colours$1.COLOUR_DUSK,
+              colour: Colours$2.COLOUR_DUSK,
               onClick: function onClick() {
                 _this6.onSelectUser(user);
               }
-            }), /*#__PURE__*/React__default['default'].createElement(Components$1.StatusButton, {
+            }), /*#__PURE__*/React__default['default'].createElement(Components$2.StatusButton, {
               isActive: user.isAdmin,
               activate: function activate() {
                 _this6.addAdmin(user);
@@ -1317,16 +1322,16 @@
       key: "render",
       value: function render() {
         var success = this.state.success;
-        return /*#__PURE__*/React__default['default'].createElement(Components$1.OverlayPage, null, /*#__PURE__*/React__default['default'].createElement(Components$1.OverlayPageContents, {
+        return /*#__PURE__*/React__default['default'].createElement(Components$2.OverlayPage, null, /*#__PURE__*/React__default['default'].createElement(Components$2.OverlayPageContents, {
           noBottomButtons: success
-        }, /*#__PURE__*/React__default['default'].createElement(Components$1.OverlayPageSection, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$2.OverlayPageSection, {
           className: "pageSectionWrapper--newPopup"
-        }, /*#__PURE__*/React__default['default'].createElement("div", null, this.renderSuccess(), !success && this.renderMain()))), /*#__PURE__*/React__default['default'].createElement(Components$1.OverlayPageBottomButtons, null, this.renderSubmit()));
+        }, /*#__PURE__*/React__default['default'].createElement("div", null, this.renderSuccess(), !success && this.renderMain()))), /*#__PURE__*/React__default['default'].createElement(Components$2.OverlayPageBottomButtons, null, this.renderSubmit()));
       }
     }]);
 
     return AddCircle;
-  }(React.Component);
+  }(React$1.Component);
 
   var mapStateToProps$1 = function mapStateToProps(state) {
     var circles = state[values.reducerKey].circles;
@@ -1347,11 +1352,11 @@
   function _createSuper$5(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$5(); 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$5() { 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 Components = PlussCore__namespace.Components,
+  var Components$1 = PlussCore__namespace.Components,
       Helper = PlussCore__namespace.Helper,
       Actions = PlussCore__namespace.Actions,
       Session = PlussCore__namespace.Session,
-      Colours = PlussCore__namespace.Colours;
+      Colours$1 = PlussCore__namespace.Colours;
 
   var Circle = /*#__PURE__*/function (_Component) {
     _inherits__default['default'](Circle, _Component);
@@ -1767,7 +1772,7 @@
         var _this5 = this;
 
         if (!this.isMember()) {
-          return /*#__PURE__*/React__default['default'].createElement(Components.Text, {
+          return /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
             type: "highlightedHelp",
             className: "chat_noMessage"
           }, "You can't send a message to this ", ___default['default'].capitalize(values.entityName), " as you are not a member.");
@@ -1781,7 +1786,7 @@
           onClick: this.sendMessage
         }), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "chat_inputContainer"
-        }, /*#__PURE__*/React__default['default'].createElement(Components.GenericInput, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$1.GenericInput, {
           id: "messageInput",
           type: "textarea",
           className: "chat_input",
@@ -1808,7 +1813,7 @@
           style: {
             display: this.state.imageInputShowing ? 'block' : 'none'
           }
-        }, /*#__PURE__*/React__default['default'].createElement(Components.ImageInput, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$1.ImageInput, {
           ref: function ref(_ref4) {
             _this5.imageInput = _ref4;
           },
@@ -1823,7 +1828,7 @@
           style: {
             display: this.state.fileInputShowing ? 'block' : 'none'
           }
-        }, /*#__PURE__*/React__default['default'].createElement(Components.FileInput, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$1.FileInput, {
           ref: function ref(_ref5) {
             _this5.fileInput = _ref5;
           },
@@ -1842,7 +1847,7 @@
           return /*#__PURE__*/React__default['default'].createElement("div", {
             key: m._id,
             className: "message"
-          }, /*#__PURE__*/React__default['default'].createElement(Components.Text, {
+          }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
             type: "h5",
             className: "message_system"
           }, m.text));
@@ -1852,23 +1857,23 @@
         return /*#__PURE__*/React__default['default'].createElement("div", {
           key: m._id,
           className: "message".concat(isSelf ? ' message-self' : '').concat(m.uploading ? ' message-uploading' : '')
-        }, /*#__PURE__*/React__default['default'].createElement(Components.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
           type: "h5-noUpper",
           className: "message_time"
         }, moment__default['default'].utc(m.createdAt).local().format('D MMM YYYY • h:mma')), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "message_inner"
-        }, /*#__PURE__*/React__default['default'].createElement(Components.ProfilePic, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$1.ProfilePic, {
           size: 40,
           image: m.user.avatar,
           className: "message_profilePic"
         }), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "message_bubbleContainer"
-        }, /*#__PURE__*/React__default['default'].createElement(Components.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
           type: "body",
           className: "message_name"
         }, m.user.name), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "message_bubble"
-        }, /*#__PURE__*/React__default['default'].createElement(Components.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
           type: "body",
           className: "message_text"
         }, Helper.toParagraphed(m.text)), /*#__PURE__*/React__default['default'].createElement("div", null, (m.image || []).map(function (url, i) {
@@ -1882,7 +1887,7 @@
             alt: Helper.getFileName(url)
           }));
         })), /*#__PURE__*/React__default['default'].createElement("div", null, (m.attachments || []).map(function (url, i) {
-          return /*#__PURE__*/React__default['default'].createElement(Components.Attachment, {
+          return /*#__PURE__*/React__default['default'].createElement(Components$1.Attachment, {
             source: url,
             key: i,
             white: isSelf
@@ -1931,12 +1936,12 @@
           onClick: this.toggleMembers
         }), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "flex-1"
-        }, /*#__PURE__*/React__default['default'].createElement(Components.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
           type: "formTitleMedium"
         }, "Member", Helper.getPluralS(members.length), " (", members.length, ")"))), this.state.membersExpanded && /*#__PURE__*/React__default['default'].createElement("div", {
           className: "paddingTop-8"
         }, members.map(function (user) {
-          return /*#__PURE__*/React__default['default'].createElement(Components.UserListing, {
+          return /*#__PURE__*/React__default['default'].createElement(Components$1.UserListing, {
             user: user
           });
         }))), /*#__PURE__*/React__default['default'].createElement("div", {
@@ -1949,7 +1954,7 @@
           onClick: this.toggleImages
         }), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "flex-1"
-        }, /*#__PURE__*/React__default['default'].createElement(Components.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
           type: "formTitleMedium"
         }, "Image", Helper.getPluralS(this.state.images.length), " (", this.state.images.length, ")"))), this.state.imagesExpanded && /*#__PURE__*/React__default['default'].createElement("div", {
           className: "paddingTop-8"
@@ -1972,12 +1977,12 @@
           onClick: this.toggleFiles
         }), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "flex-1"
-        }, /*#__PURE__*/React__default['default'].createElement(Components.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
           type: "formTitleMedium"
         }, "File", Helper.getPluralS(this.state.files.length), " (", this.state.files.length, ")"))), this.state.filesExpanded && /*#__PURE__*/React__default['default'].createElement("div", {
           className: "paddingTop-8"
         }, this.state.files.map(function (file, i) {
-          return /*#__PURE__*/React__default['default'].createElement(Components.Attachment, {
+          return /*#__PURE__*/React__default['default'].createElement(Components$1.Attachment, {
             source: file.Url,
             key: i
           });
@@ -1988,13 +1993,13 @@
       value: function render() {
         var _this6 = this;
 
-        return /*#__PURE__*/React__default['default'].createElement(Components.OverlayPage, {
+        return /*#__PURE__*/React__default['default'].createElement(Components$1.OverlayPage, {
           fullPage: true,
           fullPageStyle: {
             display: 'flex',
             flexDirection: 'column'
           }
-        }, /*#__PURE__*/React__default['default'].createElement(Components.Header, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Header, {
           rightContent: this.renderHeaderRight()
         }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
           className: "header_back",
@@ -2002,21 +2007,21 @@
           onClick: function onClick() {
             window.history.back();
           }
-        }), /*#__PURE__*/React__default['default'].createElement(Components.Text, {
+        }), /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
           type: "formTitleLarge",
           className: "header_title"
         }, this.getTitle())), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "flex flex-1 flex-reverse overflow-hidden"
         }, this.renderSideBar(), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "flex-1 flex flex-column overflow-hidden"
-        }, /*#__PURE__*/React__default['default'].createElement(Components.Header, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Header, {
           onlyContainer: true
         }, /*#__PURE__*/React__default['default'].createElement("div", {
           className: "flex flex-center flex-1 paddingHorizontal-16"
-        }, /*#__PURE__*/React__default['default'].createElement(Components.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
           type: "h5",
           className: "marginRight-20"
-        }, "Filter by"), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Components.GenericInput, {
+        }, "Filter by"), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Components$1.GenericInput, {
           id: "messageDate",
           label: "Date",
           alwaysShowLabel: true,
@@ -2027,13 +2032,13 @@
               showMessageDate: !_this6.state.showMessageDate
             });
           },
-          rightContent: !___default['default'].isEmpty(this.state.messageDate) && /*#__PURE__*/React__default['default'].createElement(Components.SVGIcon, {
-            colour: Colours.COLOUR_DUSK_LIGHT,
+          rightContent: !___default['default'].isEmpty(this.state.messageDate) && /*#__PURE__*/React__default['default'].createElement(Components$1.SVGIcon, {
+            colour: Colours$1.COLOUR_DUSK_LIGHT,
             icon: "close",
             className: "timepicker_clear",
             onClick: this.onClearDate
           })
-        }), this.state.showMessageDate && /*#__PURE__*/React__default['default'].createElement(Components.DatePicker, {
+        }), this.state.showMessageDate && /*#__PURE__*/React__default['default'].createElement(Components$1.DatePicker, {
           hideTop: true,
           selectedDate: this.state.messageDate,
           selectDate: this.handleMessageDateChange
@@ -2053,7 +2058,7 @@
     }]);
 
     return Circle;
-  }(React.Component);
+  }(React$1.Component);
 
   var mapStateToProps = function mapStateToProps(state) {
     var circles = state[values.reducerKey].circles;
@@ -2134,7 +2139,7 @@
     }]);
 
     return ViewWidget;
-  }(React.Component);
+  }(React$1.Component);
 
   var styles$3 = {
     image: {
@@ -2171,7 +2176,7 @@
     }]);
 
     return ViewFull;
-  }(React.Component);
+  }(React$1.Component);
 
   var styles$2 = {
     image: {
@@ -2225,7 +2230,7 @@
     }]);
 
     return PreviewWidget;
-  }(React.Component);
+  }(React$1.Component);
 
   var styles$1 = {
     container: {
@@ -2279,7 +2284,7 @@
     }]);
 
     return PreviewFull;
-  }(React.Component);
+  }(React$1.Component);
 
   var styles = {
     container: {
@@ -2322,13 +2327,61 @@
     }]);
 
     return PreviewGrid;
-  }(React.Component);
+  }(React$1.Component);
+
+  var Components = PlussCore__namespace.Components,
+      Colours = PlussCore__namespace.Colours;
+  var FeaturePickerContent = (function () {
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "fp2_widget_content fp2_widget_content-circles"
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "fp2_widget_content_vListing"
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "fp2_widget_silhouette fp2_widget_silhouette-circle"
+    }, /*#__PURE__*/React__default['default'].createElement(Components.SVGIcon, {
+      icon: 'groups3',
+      colour: Colours.hexToRGBAstring(Colours.COLOUR_BRANDING_MAIN, 0.5)
+    })), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "flex-1"
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "fp2_widget_silhouette fp2_widget_silhouette-textLine"
+    }), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "fp2_widget_silhouette fp2_widget_silhouette-textLineFull"
+    }))), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "fp2_widget_content_vListing"
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "fp2_widget_silhouette fp2_widget_silhouette-circle"
+    }, /*#__PURE__*/React__default['default'].createElement(Components.SVGIcon, {
+      icon: 'groups3',
+      colour: Colours.hexToRGBAstring(Colours.COLOUR_BRANDING_MAIN, 0.5)
+    })), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "flex-1"
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "fp2_widget_silhouette fp2_widget_silhouette-textLine"
+    }), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "fp2_widget_silhouette fp2_widget_silhouette-textLineFull"
+    }))), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "fp2_widget_content_vListing"
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "fp2_widget_silhouette fp2_widget_silhouette-circle"
+    }, /*#__PURE__*/React__default['default'].createElement(Components.SVGIcon, {
+      icon: 'groups3',
+      colour: Colours.hexToRGBAstring(Colours.COLOUR_BRANDING_MAIN, 0.5)
+    })), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "flex-1"
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "fp2_widget_silhouette fp2_widget_silhouette-textLine"
+    }), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "fp2_widget_silhouette fp2_widget_silhouette-textLineFull"
+    }))));
+  });
 
   var _Screens;
   var Reducers = _defineProperty__default['default']({}, values.reducerKey, CircleReducer);
   var Screens = (_Screens = {}, _defineProperty__default['default'](_Screens, values.componentCircles, Circles$1), _defineProperty__default['default'](_Screens, values.componentAddCircle, AddCircle$1), _defineProperty__default['default'](_Screens, values.componentCircle, Circle$1), _Screens);
 
   exports.Config = FeatureConfig;
+  exports.FeaturePickerContent = FeaturePickerContent;
   exports.PreviewFull = PreviewFull;
   exports.PreviewGrid = PreviewGrid;
   exports.PreviewWidget = PreviewWidget;