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

package/dist/index.esm.js

@@ -7,7 +7,7 @@ import _inherits from '@babel/runtime/helpers/inherits';
 import _possibleConstructorReturn from '@babel/runtime/helpers/possibleConstructorReturn';
 import _getPrototypeOf from '@babel/runtime/helpers/getPrototypeOf';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import React$1, { Component } from 'react';
+import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import _ from 'lodash';
 import moment from 'moment';
@@ -552,29 +552,29 @@ var Circles = /*#__PURE__*/function (_Component) {
     value: function renderRow(circle) {
       var _this5 = this;
 
-      return /*#__PURE__*/React$1.createElement("tr", {
+      return /*#__PURE__*/React.createElement("tr", {
         key: circle.Id
-      }, /*#__PURE__*/React$1.createElement("td", {
+      }, /*#__PURE__*/React.createElement("td", {
         className: "table-TitleColumn"
-      }, /*#__PURE__*/React$1.createElement(Link, {
+      }, /*#__PURE__*/React.createElement(Link, {
         to: "/".concat(values.featureKey, "/").concat(values.entityKey, "/").concat(circle.Id)
-      }, this.getTitle(circle))), /*#__PURE__*/React$1.createElement("td", null, moment(circle.Changed).local().format('D MMM YYYY')), /*#__PURE__*/React$1.createElement("td", null, circle.Audience.map(function (user) {
-        return /*#__PURE__*/React$1.createElement(Components$3.ProfilePic, {
+      }, this.getTitle(circle))), /*#__PURE__*/React.createElement("td", null, moment(circle.Changed).local().format('D MMM YYYY')), /*#__PURE__*/React.createElement("td", null, circle.Audience.map(function (user) {
+        return /*#__PURE__*/React.createElement(Components$3.ProfilePic, {
           size: 30,
           image: user.profilePic,
           hoverText: user.displayName,
           containerClass: "circleTableProfilePic"
         });
-      })), /*#__PURE__*/React$1.createElement("td", {
+      })), /*#__PURE__*/React.createElement("td", {
         className: "table-options"
-      }, /*#__PURE__*/React$1.createElement("div", {
+      }, /*#__PURE__*/React.createElement("div", {
         style: {
           display: 'flex',
           alignItems: 'center'
         }
-      }, this.validateCircleAdmin(circle) && !circle.IsPrivate && /*#__PURE__*/React$1.createElement(Link, {
+      }, this.validateCircleAdmin(circle) && !circle.IsPrivate && /*#__PURE__*/React.createElement(Link, {
         to: "/".concat(values.featureKey, "/edit/").concat(circle.Id)
-      }, /*#__PURE__*/React$1.createElement(FontAwesome, {
+      }, /*#__PURE__*/React.createElement(FontAwesome, {
         style: {
           fontSize: 20,
           padding: 5,
@@ -582,11 +582,11 @@ var Circles = /*#__PURE__*/function (_Component) {
           cursor: 'pointer'
         },
         name: "pencil"
-      })), this.validateCircleAdmin(circle, true) && !circle.IsPrivate && /*#__PURE__*/React$1.createElement("a", {
+      })), this.validateCircleAdmin(circle, true) && !circle.IsPrivate && /*#__PURE__*/React.createElement("a", {
         onClick: function onClick() {
           _this5.removeCircle(circle);
         }
-      }, /*#__PURE__*/React$1.createElement(FontAwesome, {
+      }, /*#__PURE__*/React.createElement(FontAwesome, {
         style: {
           fontSize: 20,
           padding: 5,
@@ -599,24 +599,24 @@ var Circles = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderFilters",
     value: function renderFilters() {
-      var userFilter = /*#__PURE__*/React$1.createElement(Components$3.Tag, {
+      var userFilter = /*#__PURE__*/React.createElement(Components$3.Tag, {
         className: "marginRight-10",
         onClick: this.openUserFilter,
         text: "User"
       });
-      var typeFilter = /*#__PURE__*/React$1.createElement(Components$3.Tag, {
+      var typeFilter = /*#__PURE__*/React.createElement(Components$3.Tag, {
         className: "marginRight-10",
         onClick: this.openTypeFilter,
         text: "Type"
       });
 
       if (this.state.selectedUserFilter) {
-        userFilter = /*#__PURE__*/React$1.createElement(Components$3.Tag, {
+        userFilter = /*#__PURE__*/React.createElement(Components$3.Tag, {
           className: "marginRight-10",
           onClick: this.openUserFilter,
           rightIcon: "close",
           rightClick: this.removeUserFilter
-        }, /*#__PURE__*/React$1.createElement(Components$3.UserListing, {
+        }, /*#__PURE__*/React.createElement(Components$3.UserListing, {
           size: 15,
           user: this.state.selectedUserFilter,
           textClass: "tag_text"
@@ -624,7 +624,7 @@ var Circles = /*#__PURE__*/function (_Component) {
       }
 
       if (this.state.selectedTypeFilter) {
-        typeFilter = /*#__PURE__*/React$1.createElement(Components$3.Tag, {
+        typeFilter = /*#__PURE__*/React.createElement(Components$3.Tag, {
           className: "marginRight-10",
           onClick: this.openTypeFilter,
           rightIcon: "close",
@@ -633,9 +633,9 @@ var Circles = /*#__PURE__*/function (_Component) {
         });
       }
 
-      return /*#__PURE__*/React$1.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         className: "flex flex-center marginTop-20"
-      }, /*#__PURE__*/React$1.createElement(Components$3.Text, {
+      }, /*#__PURE__*/React.createElement(Components$3.Text, {
         type: "h5",
         className: "marginRight-20"
       }, "Filter by"), userFilter, typeFilter);
@@ -649,14 +649,14 @@ var Circles = /*#__PURE__*/function (_Component) {
         return null;
       }
 
-      return /*#__PURE__*/React$1.createElement(Components$3.Popup, {
+      return /*#__PURE__*/React.createElement(Components$3.Popup, {
         title: "Select User",
         maxWidth: 600,
         minWidth: 400,
         minHeight: 400,
         hasPadding: true,
         onClose: this.closeUserFilter
-      }, /*#__PURE__*/React$1.createElement(Components$3.GenericInput, {
+      }, /*#__PURE__*/React.createElement(Components$3.GenericInput, {
         id: "userSearch",
         type: "text",
         label: "Search",
@@ -667,7 +667,7 @@ var Circles = /*#__PURE__*/function (_Component) {
         },
         alwaysShowLabel: true
       }), this.getUsers().map(function (user) {
-        return /*#__PURE__*/React$1.createElement(Components$3.UserListing, {
+        return /*#__PURE__*/React.createElement(Components$3.UserListing, {
           key: user.userId,
           user: user,
           onClick: function onClick() {
@@ -685,19 +685,19 @@ var Circles = /*#__PURE__*/function (_Component) {
         return null;
       }
 
-      return /*#__PURE__*/React$1.createElement(Components$3.Popup, {
+      return /*#__PURE__*/React.createElement(Components$3.Popup, {
         title: "Select Type",
         maxWidth: 600,
         minWidth: 400,
         hasPadding: true,
         onClose: this.closeTypeFilter
-      }, /*#__PURE__*/React$1.createElement(Components$3.Tag, {
+      }, /*#__PURE__*/React.createElement(Components$3.Tag, {
         onClick: function onClick() {
           _this7.selectTypeFilter('circle');
         },
         text: _.capitalize(values.entityName),
         className: "marginRight-10"
-      }), /*#__PURE__*/React$1.createElement(Components$3.Tag, {
+      }), /*#__PURE__*/React.createElement(Components$3.Tag, {
         onClick: function onClick() {
           _this7.selectTypeFilter('private');
         },
@@ -709,15 +709,15 @@ var Circles = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this8 = this;
 
-      return /*#__PURE__*/React$1.createElement("div", null, this.renderTypeFilterPopup(), this.renderUserFilterPopup(), /*#__PURE__*/React$1.createElement(Components$3.Header, null, this.canAddNew() && /*#__PURE__*/React$1.createElement(Components$3.AddButton, {
+      return /*#__PURE__*/React.createElement("div", null, this.renderTypeFilterPopup(), this.renderUserFilterPopup(), /*#__PURE__*/React.createElement(Components$3.Header, null, this.canAddNew() && /*#__PURE__*/React.createElement(Components$3.AddButton, {
         onClick: this.onAddNew,
         text: "NEW ".concat(_.upperCase(values.entityName))
-      })), /*#__PURE__*/React$1.createElement("div", {
+      })), /*#__PURE__*/React.createElement("div", {
         className: "pageContainer paddingVertical-20 paddingHorizontal-40"
-      }, /*#__PURE__*/React$1.createElement(Components$3.Text, {
+      }, /*#__PURE__*/React.createElement(Components$3.Text, {
         type: "h1",
         className: ""
-      }, values.textFeatureTitle), this.renderFilters(), /*#__PURE__*/React$1.createElement(Table, {
+      }, values.textFeatureTitle), this.renderFilters(), /*#__PURE__*/React.createElement(Table, {
         className: "plussTable",
         striped: true,
         bordered: true,
@@ -726,13 +726,13 @@ var Circles = /*#__PURE__*/function (_Component) {
         style: {
           minWidth: '100%'
         }
-      }, /*#__PURE__*/React$1.createElement("thead", null, /*#__PURE__*/React$1.createElement("tr", null, /*#__PURE__*/React$1.createElement("th", null, "Title"), /*#__PURE__*/React$1.createElement("th", null, "Last updated"), /*#__PURE__*/React$1.createElement("th", null, "Members"), /*#__PURE__*/React$1.createElement("th", {
+      }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Title"), /*#__PURE__*/React.createElement("th", null, "Last updated"), /*#__PURE__*/React.createElement("th", null, "Members"), /*#__PURE__*/React.createElement("th", {
         style: {
           width: 50
         }
-      }))), /*#__PURE__*/React$1.createElement("tbody", null, this.getCircles().map(function (circle) {
+      }))), /*#__PURE__*/React.createElement("tbody", null, this.getCircles().map(function (circle) {
         return _this8.renderRow(circle);
-      }))), /*#__PURE__*/React$1.createElement("div", {
+      }))), /*#__PURE__*/React.createElement("div", {
         className: "hub_tidioPadding"
       })));
     }
@@ -1083,7 +1083,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
     key: "renderSuccess",
     value: function renderSuccess() {
       if (!this.state.success) return null;
-      return /*#__PURE__*/React$1.createElement(Components$2.SuccessPopup, {
+      return /*#__PURE__*/React.createElement(Components$2.SuccessPopup, {
         text: "".concat(_.capitalize(values.entityName), " has been ").concat(this.state.circleId == null ? 'added' : 'edited'),
         buttons: [{
           type: 'outlined',
@@ -1100,12 +1100,12 @@ var AddCircle = /*#__PURE__*/function (_Component) {
       var _this4 = this;
 
       if (this.state.updating) {
-        return /*#__PURE__*/React$1.createElement(Components$2.Button, {
+        return /*#__PURE__*/React.createElement(Components$2.Button, {
           buttonType: "secondary"
         }, "Saving...");
       }
 
-      return /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(Components$2.Button, {
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Components$2.Button, {
         inline: true,
         buttonType: "tertiary",
         onClick: function onClick() {
@@ -1115,7 +1115,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         style: {
           marginRight: 16
         }
-      }, "Cancel"), /*#__PURE__*/React$1.createElement(Components$2.Button, {
+      }, "Cancel"), /*#__PURE__*/React.createElement(Components$2.Button, {
         inline: true,
         buttonType: "primary",
         onClick: this.onSave,
@@ -1127,9 +1127,9 @@ var AddCircle = /*#__PURE__*/function (_Component) {
     value: function renderVisibility() {
       var _this5 = this;
 
-      return /*#__PURE__*/React$1.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         className: "optionsContent_bottom"
-      }, /*#__PURE__*/React$1.createElement(Components$2.RadioButton, {
+      }, /*#__PURE__*/React.createElement(Components$2.RadioButton, {
         label: "Do you want to make this ".concat(values.entityName, " a public ").concat(values.entityName, "?"),
         isActive: this.state.isPublic,
         options: [{
@@ -1149,7 +1149,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
             });
           }
         }]
-      }), /*#__PURE__*/React$1.createElement("div", {
+      }), /*#__PURE__*/React.createElement("div", {
         className: "genericInput-help",
         style: {
           marginTop: 4
@@ -1159,7 +1159,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderSelectedOption",
     value: function renderSelectedOption() {
-      return /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         style: {
           display: this.state.selectedOption === 'visibility' ? 'block' : 'none'
         }
@@ -1184,7 +1184,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         return null;
       }
 
-      return /*#__PURE__*/React$1.createElement(Components$2.OptionsSection, {
+      return /*#__PURE__*/React.createElement(Components$2.OptionsSection, {
         options: options,
         selected: this.state.selectedOption,
         selectOption: this.selectOption
@@ -1195,14 +1195,14 @@ var AddCircle = /*#__PURE__*/function (_Component) {
     value: function renderMain() {
       var _this6 = this;
 
-      return /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         className: "padding-60 paddingVertical-40 bottomDivideBorder"
-      }, /*#__PURE__*/React$1.createElement(Components$2.Text, {
+      }, /*#__PURE__*/React.createElement(Components$2.Text, {
         type: "formTitleLarge",
         className: "marginBottom-24"
-      }, this.state.circleId == null ? 'New' : 'Edit', " ", _.capitalize(values.entityName)), /*#__PURE__*/React$1.createElement("div", {
+      }, this.state.circleId == null ? 'New' : 'Edit', " ", _.capitalize(values.entityName)), /*#__PURE__*/React.createElement("div", {
         className: "flex flex-reverse"
-      }, /*#__PURE__*/React$1.createElement(Components$2.ImageInput, {
+      }, /*#__PURE__*/React.createElement(Components$2.ImageInput, {
         ref: function ref(_ref2) {
           _this6.imageInput = _ref2;
         },
@@ -1212,9 +1212,9 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         containerStyle: {
           marginLeft: 40
         }
-      }), /*#__PURE__*/React$1.createElement("div", {
+      }), /*#__PURE__*/React.createElement("div", {
         className: "flex-1"
-      }, /*#__PURE__*/React$1.createElement(Components$2.GenericInput, {
+      }, /*#__PURE__*/React.createElement(Components$2.GenericInput, {
         id: "title",
         type: "text",
         label: "Title",
@@ -1231,18 +1231,18 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         showError: function showError() {
           return _this6.state.showWarnings && _.isEmpty(_this6.state.title);
         }
-      })))), /*#__PURE__*/React$1.createElement("div", {
+      })))), /*#__PURE__*/React.createElement("div", {
         className: "padding-60 paddingVertical-40 bottomDivideBorder"
-      }, /*#__PURE__*/React$1.createElement(Components$2.Text, {
+      }, /*#__PURE__*/React.createElement(Components$2.Text, {
         type: "formTitleMedium"
-      }, "Members"), /*#__PURE__*/React$1.createElement("div", {
+      }, "Members"), /*#__PURE__*/React.createElement("div", {
         className: "flex marginTop-20"
-      }, /*#__PURE__*/React$1.createElement("div", {
+      }, /*#__PURE__*/React.createElement("div", {
         className: "flex-1"
-      }, /*#__PURE__*/React$1.createElement(Components$2.Text, {
+      }, /*#__PURE__*/React.createElement(Components$2.Text, {
         type: "formTitleSmall",
         className: "marginBottom-10"
-      }, "Select Users"), /*#__PURE__*/React$1.createElement(Components$2.GenericInput, {
+      }, "Select Users"), /*#__PURE__*/React.createElement(Components$2.GenericInput, {
         id: "userSearch",
         type: "text",
         label: "Search",
@@ -1253,32 +1253,32 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         },
         alwaysShowLabel: true
       }), this.getShownUsers().map(function (user) {
-        return /*#__PURE__*/React$1.createElement(Components$2.UserListing, {
+        return /*#__PURE__*/React.createElement(Components$2.UserListing, {
           key: user.userId,
           user: user,
           onClick: function onClick() {
             _this6.onSelectUser(user);
           }
         });
-      })), /*#__PURE__*/React$1.createElement("div", {
+      })), /*#__PURE__*/React.createElement("div", {
         className: "flex-1"
-      }, /*#__PURE__*/React$1.createElement(Components$2.Text, {
+      }, /*#__PURE__*/React.createElement(Components$2.Text, {
         type: "formTitleSmall",
         className: "marginBottom-10"
       }, "Selected"), this.state.selectedUsers.map(function (user) {
-        return /*#__PURE__*/React$1.createElement(Components$2.UserListing, {
+        return /*#__PURE__*/React.createElement(Components$2.UserListing, {
           key: user.userId,
           user: user,
-          rightContent: /*#__PURE__*/React$1.createElement("div", {
+          rightContent: /*#__PURE__*/React.createElement("div", {
             className: "flex flex-reverse flex-center"
-          }, /*#__PURE__*/React$1.createElement(Components$2.SVGIcon, {
+          }, /*#__PURE__*/React.createElement(Components$2.SVGIcon, {
             className: "removeIcon marginLeft-8",
             icon: "close",
             colour: Colours$2.COLOUR_DUSK,
             onClick: function onClick() {
               _this6.onSelectUser(user);
             }
-          }), /*#__PURE__*/React$1.createElement(Components$2.StatusButton, {
+          }), /*#__PURE__*/React.createElement(Components$2.StatusButton, {
             isActive: user.isAdmin,
             activate: function activate() {
               _this6.addAdmin(user);
@@ -1298,11 +1298,11 @@ var AddCircle = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var success = this.state.success;
-      return /*#__PURE__*/React$1.createElement(Components$2.OverlayPage, null, /*#__PURE__*/React$1.createElement(Components$2.OverlayPageContents, {
+      return /*#__PURE__*/React.createElement(Components$2.OverlayPage, null, /*#__PURE__*/React.createElement(Components$2.OverlayPageContents, {
         noBottomButtons: success
-      }, /*#__PURE__*/React$1.createElement(Components$2.OverlayPageSection, {
+      }, /*#__PURE__*/React.createElement(Components$2.OverlayPageSection, {
         className: "pageSectionWrapper--newPopup"
-      }, /*#__PURE__*/React$1.createElement("div", null, this.renderSuccess(), !success && this.renderMain()))), /*#__PURE__*/React$1.createElement(Components$2.OverlayPageBottomButtons, null, this.renderSubmit()));
+      }, /*#__PURE__*/React.createElement("div", null, this.renderSuccess(), !success && this.renderMain()))), /*#__PURE__*/React.createElement(Components$2.OverlayPageBottomButtons, null, this.renderSubmit()));
     }
   }]);
 
@@ -1536,6 +1536,17 @@ var Circle = /*#__PURE__*/function (_Component) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "onReply", function (m) {
+      _this.setState({
+        replyingTo: m
+      });
+
+      if (m) {
+        var input = document.getElementById('messageInput');
+        if (input) input.focus();
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "handleMessageDateChange", function (date) {
       _this.setState({
         messageDate: date,
@@ -1607,6 +1618,10 @@ var Circle = /*#__PURE__*/function (_Component) {
         return;
       }
 
+      if (_this.state.replyingTo) {
+        message.replyingTo = _this.state.replyingTo;
+      }
+
       var clonedMessage = _.cloneDeep(message);
 
       clonedMessage.uploading = true;
@@ -1629,6 +1644,8 @@ var Circle = /*#__PURE__*/function (_Component) {
       });
 
       setTimeout(function () {
+        _this.onReply(null);
+
         _this.scrollToBottom();
 
         _this.imageInput && _this.imageInput.getWrappedInstance().setValue(null);
@@ -1646,7 +1663,8 @@ var Circle = /*#__PURE__*/function (_Component) {
       messages: [],
       images: [],
       files: [],
-      membersExpanded: true
+      membersExpanded: true,
+      replyingTo: null
     };
     return _this;
   }
@@ -1748,21 +1766,21 @@ var Circle = /*#__PURE__*/function (_Component) {
       var _this5 = this;
 
       if (!this.isMember()) {
-        return /*#__PURE__*/React$1.createElement(Components$1.Text, {
+        return /*#__PURE__*/React.createElement(Components$1.Text, {
           type: "highlightedHelp",
           className: "chat_noMessage"
         }, "You can't send a message to this ", _.capitalize(values.entityName), " as you are not a member.");
       }
 
-      return /*#__PURE__*/React$1.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         className: "chat_inputFlex"
-      }, /*#__PURE__*/React$1.createElement(FontAwesome, {
+      }, /*#__PURE__*/React.createElement(FontAwesome, {
         className: "chat_send",
         name: "paper-plane",
         onClick: this.sendMessage
-      }), /*#__PURE__*/React$1.createElement("div", {
+      }), /*#__PURE__*/React.createElement("div", {
         className: "chat_inputContainer"
-      }, /*#__PURE__*/React$1.createElement(Components$1.GenericInput, {
+      }, /*#__PURE__*/React.createElement(Components$1.GenericInput, {
         id: "messageInput",
         type: "textarea",
         className: "chat_input",
@@ -1776,20 +1794,20 @@ var Circle = /*#__PURE__*/function (_Component) {
           minHeight: 50
         },
         onKeyDown: this.onKeyDown
-      }), /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(FontAwesome, {
+      }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FontAwesome, {
         className: "chat_imageIcon".concat(this.state.imageInputShowing ? ' chat_imageIcon-selected' : ''),
         name: "camera",
         onClick: this.showImageInput
-      }), /*#__PURE__*/React$1.createElement(FontAwesome, {
+      }), /*#__PURE__*/React.createElement(FontAwesome, {
         className: "chat_imageIcon".concat(this.state.fileInputShowing ? ' chat_imageIcon-selected' : ''),
         name: "paperclip",
         onClick: this.showFileInput
-      })), /*#__PURE__*/React$1.createElement("div", {
+      })), /*#__PURE__*/React.createElement("div", {
         className: "overflow-x",
         style: {
           display: this.state.imageInputShowing ? 'block' : 'none'
         }
-      }, /*#__PURE__*/React$1.createElement(Components$1.ImageInput, {
+      }, /*#__PURE__*/React.createElement(Components$1.ImageInput, {
         ref: function ref(_ref4) {
           _this5.imageInput = _ref4;
         },
@@ -1799,12 +1817,12 @@ var Circle = /*#__PURE__*/function (_Component) {
         noMenu: true,
         noCompress: true,
         noDownload: true
-      })), /*#__PURE__*/React$1.createElement("div", {
+      })), /*#__PURE__*/React.createElement("div", {
         className: "overflow-x",
         style: {
           display: this.state.fileInputShowing ? 'block' : 'none'
         }
-      }, /*#__PURE__*/React$1.createElement(Components$1.FileInput, {
+      }, /*#__PURE__*/React.createElement(Components$1.FileInput, {
         ref: function ref(_ref5) {
           _this5.fileInput = _ref5;
         },
@@ -1819,71 +1837,85 @@ var Circle = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderMessage",
     value: function renderMessage(m) {
+      var _this6 = this;
+
       if (m.system) {
-        return /*#__PURE__*/React$1.createElement("div", {
+        return /*#__PURE__*/React.createElement("div", {
           key: m._id,
           className: "message"
-        }, /*#__PURE__*/React$1.createElement(Components$1.Text, {
+        }, /*#__PURE__*/React.createElement(Components$1.Text, {
           type: "h5",
           className: "message_system"
         }, m.text));
       }
 
       var isSelf = m.user._id === this.props.user.Id;
-      return /*#__PURE__*/React$1.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         key: m._id,
         className: "message".concat(isSelf ? ' message-self' : '').concat(m.uploading ? ' message-uploading' : '')
-      }, /*#__PURE__*/React$1.createElement(Components$1.Text, {
+      }, /*#__PURE__*/React.createElement(Components$1.Text, {
         type: "h5-noUpper",
         className: "message_time"
-      }, moment.utc(m.createdAt).local().format('D MMM YYYY • h:mma')), /*#__PURE__*/React$1.createElement("div", {
+      }, moment.utc(m.createdAt).local().format('D MMM YYYY • h:mma')), /*#__PURE__*/React.createElement("div", {
         className: "message_inner"
-      }, /*#__PURE__*/React$1.createElement(Components$1.ProfilePic, {
+      }, /*#__PURE__*/React.createElement(Components$1.ProfilePic, {
         size: 40,
         image: m.user.avatar,
         className: "message_profilePic"
-      }), /*#__PURE__*/React$1.createElement("div", {
+      }), /*#__PURE__*/React.createElement("div", {
         className: "message_bubbleContainer"
-      }, /*#__PURE__*/React$1.createElement(Components$1.Text, {
+      }, /*#__PURE__*/React.createElement(Components$1.Text, {
         type: "body",
         className: "message_name"
-      }, m.user.name), /*#__PURE__*/React$1.createElement("div", {
+      }, m.user.name, m.replyingTo ? " replied to ".concat(m.replyingTo.user.name) : ''), m.replyingTo && /*#__PURE__*/React.createElement("div", {
+        className: "message_replyBubble"
+      }, /*#__PURE__*/React.createElement(Components$1.Text, {
+        type: "body",
+        className: "message_text"
+      }, Helper.toParagraphed((m.replyingTo.text || '').substr(0, 100)))), /*#__PURE__*/React.createElement("div", {
         className: "message_bubble"
-      }, /*#__PURE__*/React$1.createElement(Components$1.Text, {
+      }, /*#__PURE__*/React.createElement(Components$1.Text, {
         type: "body",
         className: "message_text"
-      }, Helper.toParagraphed(m.text)), /*#__PURE__*/React$1.createElement("div", null, (m.image || []).map(function (url, i) {
-        return /*#__PURE__*/React$1.createElement("a", {
+      }, Helper.toParagraphed(m.text)), /*#__PURE__*/React.createElement("div", null, (m.image || []).map(function (url, i) {
+        return /*#__PURE__*/React.createElement("a", {
           href: url,
           target: "_blank",
           key: i
-        }, /*#__PURE__*/React$1.createElement("img", {
+        }, /*#__PURE__*/React.createElement("img", {
           className: "message_image",
           src: url,
           alt: Helper.getFileName(url)
         }));
-      })), /*#__PURE__*/React$1.createElement("div", null, (m.attachments || []).map(function (url, i) {
-        return /*#__PURE__*/React$1.createElement(Components$1.Attachment, {
+      })), /*#__PURE__*/React.createElement("div", null, (m.attachments || []).map(function (url, i) {
+        return /*#__PURE__*/React.createElement(Components$1.Attachment, {
           source: url,
           key: i,
           white: isSelf
         });
-      }))))));
+      }))), /*#__PURE__*/React.createElement("div", {
+        className: "message_reply"
+      }, /*#__PURE__*/React.createElement(Components$1.Text, {
+        type: "button",
+        onClick: function onClick() {
+          _this6.onReply(m);
+        }
+      }, "Reply")))));
     }
   }, {
     key: "renderHeaderRight",
     value: function renderHeaderRight() {
       if (!this.validateCircleAdmin() || this.getCircle().IsPrivate) {
-        return /*#__PURE__*/React$1.createElement("div", {
+        return /*#__PURE__*/React.createElement("div", {
           className: "flex flex-center"
         });
       }
 
-      return /*#__PURE__*/React$1.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         className: "flex flex-center"
-      }, /*#__PURE__*/React$1.createElement(Link, {
+      }, /*#__PURE__*/React.createElement(Link, {
         to: "/".concat(values.featureKey, "/edit/").concat(this.state.circleId)
-      }, /*#__PURE__*/React$1.createElement(FontAwesome, {
+      }, /*#__PURE__*/React.createElement(FontAwesome, {
         className: "header_back",
         name: "cog"
       })));
@@ -1900,135 +1932,164 @@ var Circle = /*#__PURE__*/function (_Component) {
     key: "renderSideBar",
     value: function renderSideBar() {
       var members = this.getCircle().Audience || [];
-      return /*#__PURE__*/React$1.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         className: "chat_sideBar"
-      }, /*#__PURE__*/React$1.createElement("div", {
+      }, /*#__PURE__*/React.createElement("div", {
         className: "chat_section"
-      }, /*#__PURE__*/React$1.createElement("div", {
+      }, /*#__PURE__*/React.createElement("div", {
         className: "chat_section_titleSection"
-      }, /*#__PURE__*/React$1.createElement(FontAwesome, {
+      }, /*#__PURE__*/React.createElement(FontAwesome, {
         className: "chat_section_titleSection_caret",
         name: "chevron-".concat(this.state.membersExpanded ? 'up' : 'down'),
         onClick: this.toggleMembers
-      }), /*#__PURE__*/React$1.createElement("div", {
+      }), /*#__PURE__*/React.createElement("div", {
         className: "flex-1"
-      }, /*#__PURE__*/React$1.createElement(Components$1.Text, {
+      }, /*#__PURE__*/React.createElement(Components$1.Text, {
         type: "formTitleMedium"
-      }, "Member", Helper.getPluralS(members.length), " (", members.length, ")"))), this.state.membersExpanded && /*#__PURE__*/React$1.createElement("div", {
+      }, "Member", Helper.getPluralS(members.length), " (", members.length, ")"))), this.state.membersExpanded && /*#__PURE__*/React.createElement("div", {
         className: "paddingTop-8"
       }, members.map(function (user) {
-        return /*#__PURE__*/React$1.createElement(Components$1.UserListing, {
+        return /*#__PURE__*/React.createElement(Components$1.UserListing, {
           user: user
         });
-      }))), /*#__PURE__*/React$1.createElement("div", {
+      }))), /*#__PURE__*/React.createElement("div", {
         className: "chat_section"
-      }, /*#__PURE__*/React$1.createElement("div", {
+      }, /*#__PURE__*/React.createElement("div", {
         className: "chat_section_titleSection"
-      }, /*#__PURE__*/React$1.createElement(FontAwesome, {
+      }, /*#__PURE__*/React.createElement(FontAwesome, {
         className: "chat_section_titleSection_caret",
         name: "chevron-".concat(this.state.imagesExpanded ? 'up' : 'down'),
         onClick: this.toggleImages
-      }), /*#__PURE__*/React$1.createElement("div", {
+      }), /*#__PURE__*/React.createElement("div", {
         className: "flex-1"
-      }, /*#__PURE__*/React$1.createElement(Components$1.Text, {
+      }, /*#__PURE__*/React.createElement(Components$1.Text, {
         type: "formTitleMedium"
-      }, "Image", Helper.getPluralS(this.state.images.length), " (", this.state.images.length, ")"))), this.state.imagesExpanded && /*#__PURE__*/React$1.createElement("div", {
+      }, "Image", Helper.getPluralS(this.state.images.length), " (", this.state.images.length, ")"))), this.state.imagesExpanded && /*#__PURE__*/React.createElement("div", {
         className: "paddingTop-8"
       }, this.state.images.map(function (image, i) {
-        return /*#__PURE__*/React$1.createElement("a", {
+        return /*#__PURE__*/React.createElement("a", {
           href: image.Url,
           target: "_blank"
-        }, /*#__PURE__*/React$1.createElement("img", {
+        }, /*#__PURE__*/React.createElement("img", {
           src: image.Url,
           className: "chat_section_image",
           alt: Helper.getFileName(image.Url)
         }));
-      }))), /*#__PURE__*/React$1.createElement("div", {
+      }))), /*#__PURE__*/React.createElement("div", {
         className: "chat_section"
-      }, /*#__PURE__*/React$1.createElement("div", {
+      }, /*#__PURE__*/React.createElement("div", {
         className: "chat_section_titleSection"
-      }, /*#__PURE__*/React$1.createElement(FontAwesome, {
+      }, /*#__PURE__*/React.createElement(FontAwesome, {
         className: "chat_section_titleSection_caret",
         name: "chevron-".concat(this.state.filesExpanded ? 'up' : 'down'),
         onClick: this.toggleFiles
-      }), /*#__PURE__*/React$1.createElement("div", {
+      }), /*#__PURE__*/React.createElement("div", {
         className: "flex-1"
-      }, /*#__PURE__*/React$1.createElement(Components$1.Text, {
+      }, /*#__PURE__*/React.createElement(Components$1.Text, {
         type: "formTitleMedium"
-      }, "File", Helper.getPluralS(this.state.files.length), " (", this.state.files.length, ")"))), this.state.filesExpanded && /*#__PURE__*/React$1.createElement("div", {
+      }, "File", Helper.getPluralS(this.state.files.length), " (", this.state.files.length, ")"))), this.state.filesExpanded && /*#__PURE__*/React.createElement("div", {
         className: "paddingTop-8"
       }, this.state.files.map(function (file, i) {
-        return /*#__PURE__*/React$1.createElement(Components$1.Attachment, {
+        return /*#__PURE__*/React.createElement(Components$1.Attachment, {
           source: file.Url,
           key: i
         });
       }))));
     }
+  }, {
+    key: "renderReplyTo",
+    value: function renderReplyTo() {
+      var _this7 = this;
+
+      if (!this.state.replyingTo) {
+        return null;
+      }
+
+      var m = this.state.replyingTo;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "chat_replyTo"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "chat_replyTo_container"
+      }, /*#__PURE__*/React.createElement(Components$1.Text, {
+        type: "h5"
+      }, "Replying to ", m && m.user && !_.isEmpty(m.user.displayName) ? m.user.displayName : ''), m && !_.isEmpty(m.text) && /*#__PURE__*/React.createElement(Components$1.Text, {
+        type: "body"
+      }, m.text.substr(0, 50))), /*#__PURE__*/React.createElement("div", {
+        className: "chat_replyTo_remove"
+      }, /*#__PURE__*/React.createElement(Components$1.SVGIcon, {
+        className: "removeIcon",
+        icon: "close",
+        onClick: function onClick() {
+          _this7.onReply(null);
+        },
+        colour: Colours$1.COLOUR_DUSK
+      })));
+    }
   }, {
     key: "render",
     value: function render() {
-      var _this6 = this;
+      var _this8 = this;
 
-      return /*#__PURE__*/React$1.createElement(Components$1.OverlayPage, {
+      return /*#__PURE__*/React.createElement(Components$1.OverlayPage, {
         fullPage: true,
         fullPageStyle: {
           display: 'flex',
           flexDirection: 'column'
         }
-      }, /*#__PURE__*/React$1.createElement(Components$1.Header, {
+      }, /*#__PURE__*/React.createElement(Components$1.Header, {
         rightContent: this.renderHeaderRight()
-      }, /*#__PURE__*/React$1.createElement(FontAwesome, {
+      }, /*#__PURE__*/React.createElement(FontAwesome, {
         className: "header_back",
         name: "angle-left",
         onClick: function onClick() {
           window.history.back();
         }
-      }), /*#__PURE__*/React$1.createElement(Components$1.Text, {
+      }), /*#__PURE__*/React.createElement(Components$1.Text, {
         type: "formTitleLarge",
         className: "header_title"
-      }, this.getTitle())), /*#__PURE__*/React$1.createElement("div", {
+      }, this.getTitle())), /*#__PURE__*/React.createElement("div", {
         className: "flex flex-1 flex-reverse overflow-hidden"
-      }, this.renderSideBar(), /*#__PURE__*/React$1.createElement("div", {
+      }, this.renderSideBar(), /*#__PURE__*/React.createElement("div", {
         className: "flex-1 flex flex-column overflow-hidden"
-      }, /*#__PURE__*/React$1.createElement(Components$1.Header, {
+      }, /*#__PURE__*/React.createElement(Components$1.Header, {
         onlyContainer: true
-      }, /*#__PURE__*/React$1.createElement("div", {
+      }, /*#__PURE__*/React.createElement("div", {
         className: "flex flex-center flex-1 paddingHorizontal-16"
-      }, /*#__PURE__*/React$1.createElement(Components$1.Text, {
+      }, /*#__PURE__*/React.createElement(Components$1.Text, {
         type: "h5",
         className: "marginRight-20"
-      }, "Filter by"), /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(Components$1.GenericInput, {
+      }, "Filter by"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Components$1.GenericInput, {
         id: "messageDate",
         label: "Date",
         alwaysShowLabel: true,
         value: this.state.messageDateText,
         readOnly: true,
         onClick: function onClick() {
-          return _this6.setState({
-            showMessageDate: !_this6.state.showMessageDate
+          return _this8.setState({
+            showMessageDate: !_this8.state.showMessageDate
           });
         },
-        rightContent: !_.isEmpty(this.state.messageDate) && /*#__PURE__*/React$1.createElement(Components$1.SVGIcon, {
+        rightContent: !_.isEmpty(this.state.messageDate) && /*#__PURE__*/React.createElement(Components$1.SVGIcon, {
           colour: Colours$1.COLOUR_DUSK_LIGHT,
           icon: "close",
           className: "timepicker_clear",
           onClick: this.onClearDate
         })
-      }), this.state.showMessageDate && /*#__PURE__*/React$1.createElement(Components$1.DatePicker, {
+      }), this.state.showMessageDate && /*#__PURE__*/React.createElement(Components$1.DatePicker, {
         hideTop: true,
         selectedDate: this.state.messageDate,
         selectDate: this.handleMessageDateChange
-      })))), /*#__PURE__*/React$1.createElement("div", {
+      })))), /*#__PURE__*/React.createElement("div", {
         className: "chat"
-      }, /*#__PURE__*/React$1.createElement("div", {
+      }, /*#__PURE__*/React.createElement("div", {
         className: "chat_newMessage"
-      }, this.renderChatInput()), /*#__PURE__*/React$1.createElement("div", {
+      }, this.renderChatInput()), this.renderReplyTo(), /*#__PURE__*/React.createElement("div", {
         ref: function ref(_ref6) {
-          return _this6.chat = _ref6;
+          return _this8.chat = _ref6;
         },
         className: "chat_messages"
       }, _.isEmpty(this.state.messages) && !_.isEmpty(this.state.messageDate) && this.renderEmptyDate(), this.state.messages.map(function (m) {
-        return _this6.renderMessage(m);
+        return _this8.renderMessage(m);
       }))))));
     }
   }]);
@@ -2106,7 +2167,7 @@ var ViewWidget = /*#__PURE__*/function (_Component) {
   _createClass(ViewWidget, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React$1.createElement("img", {
+      return /*#__PURE__*/React.createElement("img", {
         style: styles$3.image,
         src: img$3,
         alt: "widget"
@@ -2143,7 +2204,7 @@ var ViewFull = /*#__PURE__*/function (_Component) {
   _createClass(ViewFull, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React$1.createElement("img", {
+      return /*#__PURE__*/React.createElement("img", {
         style: styles$2.image,
         src: img$2,
         alt: "full"
@@ -2190,15 +2251,15 @@ var PreviewWidget = /*#__PURE__*/function (_Component) {
           backgroundColor = _this$props.backgroundColor,
           widgetTitle = _this$props.widgetTitle,
           titleClassName = _this$props.titleClassName;
-      return /*#__PURE__*/React$1.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         style: styles$1.container
-      }, /*#__PURE__*/React$1.createElement("img", {
+      }, /*#__PURE__*/React.createElement("img", {
         style: _objectSpread$1(_objectSpread$1({}, styles$1.image), {}, {
           backgroundColor: backgroundColor
         }),
         src: img$1,
         alt: "previewWidget"
-      }), /*#__PURE__*/React$1.createElement("p", {
+      }), /*#__PURE__*/React.createElement("p", {
         className: titleClassName,
         style: styles$1.title
       }, widgetTitle));
@@ -2245,11 +2306,11 @@ var PreviewFull = /*#__PURE__*/function (_Component) {
           backgroundColor = _this$props.backgroundColor,
           widgetTitle = _this$props.widgetTitle,
           titleClassName = _this$props.titleClassName;
-      return /*#__PURE__*/React$1.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         style: styles.container
-      }, /*#__PURE__*/React$1.createElement("p", {
+      }, /*#__PURE__*/React.createElement("p", {
         className: titleClassName
-      }, widgetTitle), /*#__PURE__*/React$1.createElement("img", {
+      }, widgetTitle), /*#__PURE__*/React.createElement("img", {
         style: _objectSpread(_objectSpread({}, styles.image), {}, {
           backgroundColor: backgroundColor
         }),
@@ -2291,10 +2352,10 @@ var PreviewGrid = /*#__PURE__*/function (_Component) {
     value: function render() {
       var colour = this.props.colour;
       var path = 'M12.1875 0.9375C11.1548 0.9375 9.67896 1.25977 8.7616 1.87866C7.0166 1.94275 5.82275 3.16772 5.62683 5.11047C5.50781 6.30981 5.61768 7.16858 5.68909 7.73621C5.71472 7.93396 5.74219 8.15735 5.73303 8.22327C5.71838 8.31116 5.70374 8.39905 5.69092 8.48694C5.61401 8.4906 5.54626 8.50159 5.48584 8.51807C4.71313 8.72498 4.38904 9.85474 4.73511 11.1456C4.98596 12.0813 5.51147 12.7844 6.08643 13.0005C6.38306 13.9087 6.81885 14.8114 7.36084 15.6244L3.03955 18.1274C1.16455 19.2114 0 21.2329 0 23.399V26.7188C0 27.4933 0.631714 28.125 1.40625 28.125H19.519C20.6287 29.2786 22.1832 30 23.9062 30C27.2662 30 30 27.2662 30 23.9062C30 21.2402 28.2751 18.9734 25.8856 18.1494L21.8115 15.5127C22.4158 14.7931 22.9193 13.8977 23.2397 12.9419C23.6847 12.7478 24.0765 12.2168 24.267 11.4972C24.3823 11.0669 24.4061 10.6329 24.3311 10.274C24.2377 9.80896 23.9777 9.48669 23.6224 9.39148C23.5986 9.38416 23.573 9.37866 23.5455 9.375C23.4979 9.06738 23.4174 8.76709 23.2892 8.39905C23.3734 8.42102 23.465 8.45032 23.5437 8.48145C23.703 8.54919 23.8898 8.52173 24.0234 8.4082C24.1589 8.29651 24.2194 8.1189 24.1827 7.94861C23.606 5.31006 21.6467 3.73535 18.9441 3.73535H18.5962C18.5248 3.73535 18.446 3.74084 18.371 3.74634C17.1332 1.9519 15.1355 0.9375 12.6562 0.9375H12.1875ZM12.1875 1.875H12.6562C15.5017 1.875 17.5562 3.32886 18.3984 5.89783C18.0743 5.86121 17.7393 5.90149 17.5104 6.12305C17.3309 6.29333 17.1625 6.62109 17.3749 7.19971C17.6642 7.98523 17.7667 8.45032 17.7979 9.1095C17.8052 9.27795 17.9041 9.4281 18.0524 9.505C18.2007 9.58008 18.3801 9.57092 18.5211 9.47937C18.598 9.42993 18.6383 9.42444 18.6475 9.42444C18.761 9.46289 18.9661 10.0342 18.7335 10.9039C18.5028 11.7664 18.0597 12.1307 17.9224 12.1307C17.7136 12.1252 17.5323 12.2681 17.4738 12.4658C16.6827 15.1227 14.6155 17.8125 12.1875 17.8125C9.75952 17.8125 7.69226 15.1227 6.90125 12.4658C6.84265 12.2681 6.66138 12.1307 6.45264 12.1307C6.31531 12.1307 5.87219 11.7664 5.64148 10.9039C5.4071 10.0269 5.61768 9.45374 5.72571 9.42444C5.72754 9.42444 5.76782 9.42444 5.85205 9.47937C5.99487 9.57092 6.17432 9.58008 6.32263 9.505C6.47278 9.4281 6.56799 9.27795 6.57715 9.1095C6.58813 8.86414 6.61377 8.62061 6.65588 8.38623C6.69067 8.18481 6.66321 7.95959 6.61926 7.61719C6.55151 7.09167 6.45081 6.297 6.56067 5.20386C6.70898 3.70789 7.58606 2.8125 8.91357 2.8125C9.01611 2.8125 9.11316 2.77954 9.19556 2.71912C9.83826 2.23755 11.1237 1.875 12.1875 1.875ZM18.913 4.67285H18.9459C20.9491 4.67285 22.4121 5.66528 23.0566 7.42676C22.8461 7.43042 22.6392 7.48352 22.4835 7.63367C22.3224 7.78564 22.1704 8.07312 22.3535 8.56384C22.5641 9.13879 22.6392 9.47571 22.6611 9.95361C22.6685 10.1221 22.7655 10.2722 22.9156 10.3491C23.0621 10.4224 23.2361 10.415 23.3752 10.329C23.4338 10.4608 23.4851 10.7977 23.3624 11.2555C23.2178 11.792 22.9486 12.0612 22.8735 12.0831H22.8717C22.6648 12.0831 22.4817 12.2186 22.4231 12.4182C22.0312 13.7366 21.2512 14.9469 20.3394 15.6537C20.1343 15.813 20.0958 16.1078 20.2551 16.311C20.3467 16.4319 20.4858 16.4941 20.625 16.4941C20.7257 16.4941 20.8264 16.463 20.9125 16.3971C20.9912 16.3348 21.0681 16.2653 21.145 16.1993L23.6591 17.8253C22.9193 17.8546 22.2144 18.0103 21.5643 18.2812C21.4856 18.2318 21.416 18.1732 21.3354 18.1274L17.0142 15.6244C17.5562 14.8114 17.9901 13.9087 18.2886 13.0005C18.8617 12.7844 19.389 12.0831 19.6381 11.1456C19.9841 9.85474 19.6619 8.72498 18.8892 8.51807C18.8306 8.50342 18.761 8.4906 18.6841 8.48694C18.62 7.98523 18.4918 7.51648 18.2538 6.87561C18.2483 6.8573 18.2428 6.84082 18.2373 6.82617C18.4021 6.83899 18.6676 6.90674 18.8837 6.99463C19.0466 7.06238 19.2316 7.03491 19.3652 6.92139C19.4989 6.80969 19.5593 6.63208 19.5209 6.46179C19.3799 5.81543 19.1748 5.21667 18.913 4.67285ZM9.62219 4.74609C9.28711 4.7168 8.9502 4.86877 8.75793 5.16357L8.00537 6.30432C7.86255 6.52039 7.92297 6.81152 8.13904 6.95435C8.2196 7.00745 8.3075 7.03125 8.39539 7.03125C8.54919 7.03125 8.69751 6.95801 8.78906 6.82068L9.53979 5.67993L10.2722 6.03699C11.6071 6.68701 13.0994 7.03125 14.5844 7.03125H15.7819C16.04 7.03125 16.2506 6.82068 16.2506 6.5625C16.2506 6.30432 16.04 6.09375 15.7819 6.09375H14.5844C13.2404 6.09375 11.8909 5.78247 10.6842 5.19287L9.95178 4.83582C9.84558 4.78455 9.73389 4.75525 9.62219 4.74609ZM7.9248 16.3788C9.06555 17.7704 10.5487 18.75 12.1875 18.75C13.8263 18.75 15.3094 17.7722 16.4502 16.3806L20.6104 18.7885C18.9294 19.8761 17.8125 21.7621 17.8125 23.9062C17.8125 25.1147 18.1696 26.239 18.7793 27.1875H1.40625C1.14807 27.1875 0.9375 26.9769 0.9375 26.7188V23.399C0.9375 21.5662 1.92261 19.856 3.51013 18.9368L7.9248 16.3788ZM23.9062 18.75C26.7499 18.75 29.0625 21.0626 29.0625 23.9062C29.0625 26.7499 26.7499 29.0625 23.9062 29.0625C21.0626 29.0625 18.75 26.7499 18.75 23.9062C18.75 21.0626 21.0626 18.75 23.9062 18.75ZM8.4668 18.75C8.28369 18.739 8.10425 18.8361 8.01819 19.0082C7.90283 19.2407 7.99622 19.5227 8.22693 19.6381L11.9769 21.5131C12.0447 21.546 12.1161 21.5625 12.1875 21.5625C12.2589 21.5625 12.3322 21.546 12.3981 21.5131L16.1481 19.6381C16.3788 19.5227 16.4722 19.2407 16.3568 19.0082C16.2415 18.7775 15.9595 18.6841 15.7269 18.7994L12.1875 20.5701L8.64807 18.7994C8.58948 18.7701 8.52722 18.7555 8.4668 18.75ZM23.9062 20.625C23.6481 20.625 23.4375 20.8356 23.4375 21.0938V23.4375H21.0938C20.8356 23.4375 20.625 23.6481 20.625 23.9062C20.625 24.1644 20.8356 24.375 21.0938 24.375H23.4375V26.7188C23.4375 26.9769 23.6481 27.1875 23.9062 27.1875C24.1644 27.1875 24.375 26.9769 24.375 26.7188V24.375H26.7188C26.9769 24.375 27.1875 24.1644 27.1875 23.9062C27.1875 23.6481 26.9769 23.4375 26.7188 23.4375H24.375V21.0938C24.375 20.8356 24.1644 20.625 23.9062 20.625ZM2.8125 24.375C2.55432 24.375 2.34375 24.5856 2.34375 24.8438V25.7812C2.34375 26.0394 2.55432 26.25 2.8125 26.25C3.07068 26.25 3.28125 26.0394 3.28125 25.7812V24.8438C3.28125 24.5856 3.07068 24.375 2.8125 24.375ZM5.15625 24.375C4.89807 24.375 4.6875 24.5856 4.6875 24.8438V25.7812C4.6875 26.0394 4.89807 26.25 5.15625 26.25C5.41443 26.25 5.625 26.0394 5.625 25.7812V24.8438C5.625 24.5856 5.41443 24.375 5.15625 24.375ZM7.5 24.375C7.24182 24.375 7.03125 24.5856 7.03125 24.8438V25.7812C7.03125 26.0394 7.24182 26.25 7.5 26.25C7.75818 26.25 7.96875 26.0394 7.96875 25.7812V24.8438C7.96875 24.5856 7.75818 24.375 7.5 24.375ZM9.84375 24.375C9.58557 24.375 9.375 24.5856 9.375 24.8438V25.7812C9.375 26.0394 9.58557 26.25 9.84375 26.25C10.1019 26.25 10.3125 26.0394 10.3125 25.7812V24.8438C10.3125 24.5856 10.1019 24.375 9.84375 24.375ZM12.1875 24.375C11.9293 24.375 11.7188 24.5856 11.7188 24.8438V25.7812C11.7188 26.0394 11.9293 26.25 12.1875 26.25C12.4457 26.25 12.6562 26.0394 12.6562 25.7812V24.8438C12.6562 24.5856 12.4457 24.375 12.1875 24.375ZM14.5312 24.375C14.2731 24.375 14.0625 24.5856 14.0625 24.8438V25.7812C14.0625 26.0394 14.2731 26.25 14.5312 26.25C14.7894 26.25 15 26.0394 15 25.7812V24.8438C15 24.5856 14.7894 24.375 14.5312 24.375ZM16.875 24.375C16.6168 24.375 16.4062 24.5856 16.4062 24.8438V25.7812C16.4062 26.0394 16.6168 26.25 16.875 26.25C17.1332 26.25 17.3438 26.0394 17.3438 25.7812V24.8438C17.3438 24.5856 17.1332 24.375 16.875 24.375Z';
-      return /*#__PURE__*/React$1.createElement("svg", {
+      return /*#__PURE__*/React.createElement("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: '0 0 30 30'
-      }, /*#__PURE__*/React$1.createElement("path", {
+      }, /*#__PURE__*/React.createElement("path", {
         key: path.substring(0, 20),
         d: path,
         fill: colour
@@ -2308,46 +2369,46 @@ var PreviewGrid = /*#__PURE__*/function (_Component) {
 var Components = PlussCore.Components,
     Colours = PlussCore.Colours;
 var FeaturePickerContent = (function () {
-  return /*#__PURE__*/React$1.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "fp2_widget_content fp2_widget_content-circles"
-  }, /*#__PURE__*/React$1.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "fp2_widget_content_vListing"
-  }, /*#__PURE__*/React$1.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "fp2_widget_silhouette fp2_widget_silhouette-circle"
-  }, /*#__PURE__*/React$1.createElement(Components.SVGIcon, {
+  }, /*#__PURE__*/React.createElement(Components.SVGIcon, {
     icon: 'groups3',
     colour: Colours.hexToRGBAstring(Colours.COLOUR_BRANDING_MAIN, 0.5)
-  })), /*#__PURE__*/React$1.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: "flex-1"
-  }, /*#__PURE__*/React$1.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "fp2_widget_silhouette fp2_widget_silhouette-textLine"
-  }), /*#__PURE__*/React$1.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: "fp2_widget_silhouette fp2_widget_silhouette-textLineFull"
-  }))), /*#__PURE__*/React$1.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", {
     className: "fp2_widget_content_vListing"
-  }, /*#__PURE__*/React$1.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "fp2_widget_silhouette fp2_widget_silhouette-circle"
-  }, /*#__PURE__*/React$1.createElement(Components.SVGIcon, {
+  }, /*#__PURE__*/React.createElement(Components.SVGIcon, {
     icon: 'groups3',
     colour: Colours.hexToRGBAstring(Colours.COLOUR_BRANDING_MAIN, 0.5)
-  })), /*#__PURE__*/React$1.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: "flex-1"
-  }, /*#__PURE__*/React$1.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "fp2_widget_silhouette fp2_widget_silhouette-textLine"
-  }), /*#__PURE__*/React$1.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: "fp2_widget_silhouette fp2_widget_silhouette-textLineFull"
-  }))), /*#__PURE__*/React$1.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", {
     className: "fp2_widget_content_vListing"
-  }, /*#__PURE__*/React$1.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "fp2_widget_silhouette fp2_widget_silhouette-circle"
-  }, /*#__PURE__*/React$1.createElement(Components.SVGIcon, {
+  }, /*#__PURE__*/React.createElement(Components.SVGIcon, {
     icon: 'groups3',
     colour: Colours.hexToRGBAstring(Colours.COLOUR_BRANDING_MAIN, 0.5)
-  })), /*#__PURE__*/React$1.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: "flex-1"
-  }, /*#__PURE__*/React$1.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "fp2_widget_silhouette fp2_widget_silhouette-textLine"
-  }), /*#__PURE__*/React$1.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: "fp2_widget_silhouette fp2_widget_silhouette-textLineFull"
   }))));
 });