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

package/dist/index.cjs.js

@@ -11,7 +11,7 @@ var _inherits = require('@babel/runtime/helpers/inherits');
 var _possibleConstructorReturn = require('@babel/runtime/helpers/possibleConstructorReturn');
 var _getPrototypeOf = require('@babel/runtime/helpers/getPrototypeOf');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
-var React = require('react');
+var React$1 = require('react');
 var reactRedux = require('react-redux');
 var _ = require('lodash');
 var moment = require('moment');
@@ -53,7 +53,7 @@ var _inherits__default = /*#__PURE__*/_interopDefaultLegacy(_inherits);
 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);
@@ -106,6 +106,11 @@ var FeatureConfig = {
     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,
@@ -345,7 +350,7 @@ var circleActions = {
 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;
 
@@ -596,7 +601,7 @@ var Circles = /*#__PURE__*/function (_Component) {
       }, /*#__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,
@@ -636,24 +641,24 @@ var Circles = /*#__PURE__*/function (_Component) {
   }, {
     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"
@@ -661,7 +666,7 @@ var Circles = /*#__PURE__*/function (_Component) {
       }
 
       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",
@@ -672,7 +677,7 @@ var Circles = /*#__PURE__*/function (_Component) {
 
       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);
@@ -686,14 +691,14 @@ var Circles = /*#__PURE__*/function (_Component) {
         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",
@@ -704,7 +709,7 @@ var Circles = /*#__PURE__*/function (_Component) {
         },
         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() {
@@ -722,19 +727,19 @@ var Circles = /*#__PURE__*/function (_Component) {
         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');
         },
@@ -746,12 +751,12 @@ var Circles = /*#__PURE__*/function (_Component) {
     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, {
@@ -776,7 +781,7 @@ var Circles = /*#__PURE__*/function (_Component) {
   }]);
 
   return Circles;
-}(React.Component);
+}(React$1.Component);
 
 var mapStateToProps$2 = function mapStateToProps(state) {
   var circles = state[values.reducerKey].circles;
@@ -797,10 +802,10 @@ function _createSuper$6(Derived) { var hasNativeReflectConstruct = _isNativeRefl
 
 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) {
@@ -1120,7 +1125,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
     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',
@@ -1137,12 +1142,12 @@ var AddCircle = /*#__PURE__*/function (_Component) {
       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() {
@@ -1152,7 +1157,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         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,
@@ -1166,7 +1171,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
 
       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: [{
@@ -1221,7 +1226,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         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
@@ -1234,12 +1239,12 @@ var AddCircle = /*#__PURE__*/function (_Component) {
 
       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;
         },
@@ -1251,7 +1256,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         }
       }), /*#__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",
@@ -1270,16 +1275,16 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         }
       })))), /*#__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",
@@ -1290,7 +1295,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         },
         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() {
@@ -1299,23 +1304,23 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         });
       })), /*#__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);
@@ -1335,16 +1340,16 @@ var AddCircle = /*#__PURE__*/function (_Component) {
     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;
@@ -1365,11 +1370,11 @@ var AddCircle$1 = reactRedux.connect(mapStateToProps$1, {
 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);
@@ -1785,7 +1790,7 @@ var Circle = /*#__PURE__*/function (_Component) {
       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.");
@@ -1799,7 +1804,7 @@ var Circle = /*#__PURE__*/function (_Component) {
         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",
@@ -1826,7 +1831,7 @@ var Circle = /*#__PURE__*/function (_Component) {
         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;
         },
@@ -1841,7 +1846,7 @@ var Circle = /*#__PURE__*/function (_Component) {
         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;
         },
@@ -1860,7 +1865,7 @@ var Circle = /*#__PURE__*/function (_Component) {
         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));
@@ -1870,23 +1875,23 @@ var Circle = /*#__PURE__*/function (_Component) {
       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) {
@@ -1900,7 +1905,7 @@ var Circle = /*#__PURE__*/function (_Component) {
           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
@@ -1949,12 +1954,12 @@ var Circle = /*#__PURE__*/function (_Component) {
         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", {
@@ -1967,7 +1972,7 @@ var Circle = /*#__PURE__*/function (_Component) {
         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"
@@ -1990,12 +1995,12 @@ var Circle = /*#__PURE__*/function (_Component) {
         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
         });
@@ -2006,13 +2011,13 @@ var Circle = /*#__PURE__*/function (_Component) {
     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",
@@ -2020,21 +2025,21 @@ var Circle = /*#__PURE__*/function (_Component) {
         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,
@@ -2045,13 +2050,13 @@ var Circle = /*#__PURE__*/function (_Component) {
             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
@@ -2071,7 +2076,7 @@ var Circle = /*#__PURE__*/function (_Component) {
   }]);
 
   return Circle;
-}(React.Component);
+}(React$1.Component);
 
 var mapStateToProps = function mapStateToProps(state) {
   var circles = state[values.reducerKey].circles;
@@ -2152,7 +2157,7 @@ var ViewWidget = /*#__PURE__*/function (_Component) {
   }]);
 
   return ViewWidget;
-}(React.Component);
+}(React$1.Component);
 
 var styles$3 = {
   image: {
@@ -2189,7 +2194,7 @@ var ViewFull = /*#__PURE__*/function (_Component) {
   }]);
 
   return ViewFull;
-}(React.Component);
+}(React$1.Component);
 
 var styles$2 = {
   image: {
@@ -2243,7 +2248,7 @@ var PreviewWidget = /*#__PURE__*/function (_Component) {
   }]);
 
   return PreviewWidget;
-}(React.Component);
+}(React$1.Component);
 
 var styles$1 = {
   container: {
@@ -2297,7 +2302,7 @@ var PreviewFull = /*#__PURE__*/function (_Component) {
   }]);
 
   return PreviewFull;
-}(React.Component);
+}(React$1.Component);
 
 var styles = {
   container: {
@@ -2340,13 +2345,61 @@ var PreviewGrid = /*#__PURE__*/function (_Component) {
   }]);
 
   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;