@plusscommunities/pluss-core-web 1.7.6-beta.2 → 1.8.2-beta.0

package/dist/index.js

@@ -8,7 +8,7 @@ import { Component, PureComponent } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import $ from 'jquery';
 import Cookies from 'js-cookie';
-import { Icon } from '@plusscommunities/pluss-icons';
+import { Icon as Icon$1 } from '@plusscommunities/pluss-icons';
 import { connect } from 'react-redux';
 import Textarea from 'react-textarea-autosize';
 import Dropzone from 'react-dropzone';
@@ -20,6 +20,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { ChromePicker } from 'react-color';
 import tinycolor from 'tinycolor2';
 import { Link } from 'react-router-dom';
+import { ResponsiveContainer, BarChart, XAxis, YAxis, Tooltip, Bar, Cell } from 'recharts';
 
 var CoreConfig = {
   env: {
@@ -354,6 +355,61 @@ var session = /*#__PURE__*/Object.freeze({
 	isTVEnabled: isTVEnabled
 });
 
+// Distinct colour palette for multi-site comparison charts.
+// Uses a fixed palette rather than each site's MainBrandingColour because:
+// 1. Site branding colours aren't pre-loaded — only the active site's branding is in Redux state.
+//    Fetching branding for each comparison site would require extra API calls.
+// 2. Two sites could share the same or similar branding colour, making bars indistinguishable.
+// 3. A curated palette guarantees contrast and visual distinctiveness.
+// Future enhancement: use site branding colours with collision fallback to this palette.
+// Wraps around via modulo for 10+ sites (unlikely in practice).
+var SITE_COLOURS = ["#5e9efc",
+// Blue
+"#49bdbb",
+// Teal
+"#ff8c75",
+// Tangerine
+"#6e79c5",
+// Purple
+"#00cc9c",
+// Green
+"#c02743",
+// Red
+"#bdbd27",
+// Citron
+"#191e78",
+// Dark Blue
+"#ff6363",
+// Grapefruit
+"#536280" // Dusk
+];
+var getSiteColour = index => {
+  return SITE_COLOURS[index % SITE_COLOURS.length];
+};
+var fetchMultiSiteData = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(function* (sites, fetchFn) {
+    var results = {};
+    var promises = sites.map(/*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(function* (site) {
+        try {
+          var data = yield fetchFn(site);
+          results[site] = data;
+        } catch (error) {
+          console.log("fetchMultiSiteData failed for site ".concat(site, ":"), error);
+          results[site] = null;
+        }
+      });
+      return function (_x3) {
+        return _ref2.apply(this, arguments);
+      };
+    }());
+    yield Promise.all(promises);
+    return results;
+  });
+  return function fetchMultiSiteData(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();
 var compileStats = stats => {
   var totalStats = {};
   Object.keys(stats).forEach(id => {
@@ -463,7 +519,6 @@ var countActivities = (data, activityKey, countType) => {
   switch (countType) {
     case "unique":
     case "uniquearray":
-      console.log(countType, set);
       return set.size;
     case "total":
       return count;
@@ -514,12 +569,13 @@ var generateDateActivities = function generateDateActivities(data, activityKey,
     };
     result.push(compiledValue);
   });
-  console.log(result);
   return result;
 };
 
 var analytics = /*#__PURE__*/Object.freeze({
 	__proto__: null,
+	getSiteColour: getSiteColour,
+	fetchMultiSiteData: fetchMultiSiteData,
 	compileStats: compileStats,
 	getInsight: getInsight,
 	getAnalyticsFilterOptions: getAnalyticsFilterOptions,
@@ -707,7 +763,7 @@ var toParagraphed = (text, style) => {
   var textSplit = text.split("\n");
   return _.map(textSplit, (t, i) => {
     return /*#__PURE__*/jsx("span", {
-      style: _objectSpread$p({
+      iconStyle: _objectSpread$p({
         display: "block"
       }, style),
       children: t || "\u00A0"
@@ -1179,7 +1235,11 @@ var analyticsActions = {
       })
     });
   },
-  getActivityLog: (entityId, entityType, actionType, minTime, maxTime) => {
+  getActivityLog: function getActivityLog(entityId, entityType, actionType, minTime, maxTime) {
+    var {
+      userType,
+      userCategory
+    } = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
     var query = {
       entityId,
       entityType,
@@ -1191,6 +1251,8 @@ var analyticsActions = {
     if (maxTime) {
       query.maxTime = maxTime;
     }
+    if (userType) query.userType = userType;
+    if (userCategory) query.userCategory = userCategory;
     return authedFunction({
       method: "GET",
       url: getUrl("analytics", "activity", query)
@@ -1204,20 +1266,39 @@ var analyticsActions = {
       })
     });
   },
-  getAggregateEntityStats: (site, type, minTime, maxTime, raw) => {
+  getAggregateEntityStats: function getAggregateEntityStats(site, type, minTime, maxTime, raw) {
+    var {
+      userType,
+      userCategory
+    } = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
     var query = {
       site,
       type,
       minTime,
       maxTime
     };
-    if (raw) {
-      query.raw = raw;
-    }
+    if (raw) query.raw = raw;
+    if (userType) query.userType = userType;
+    if (userCategory) query.userCategory = userCategory;
     return authedFunction({
       method: "GET",
       url: getUrl("analytics", "aggregate", query)
     });
+  },
+  getUserRetention: function getUserRetention(site) {
+    var {
+      userType,
+      userCategory
+    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var query = {
+      site
+    };
+    if (userType) query.userType = userType;
+    if (userCategory) query.userCategory = userCategory;
+    return authedFunction({
+      method: "GET",
+      url: getUrl("analytics", "get/userretention", query)
+    });
   }
 };
 
@@ -2442,9 +2523,9 @@ class AddButton extends Component {
     return classes;
   }
   renderIcon() {
-    return /*#__PURE__*/jsx(Icon, {
+    return /*#__PURE__*/jsx(Icon$1, {
       className: "addButton__icon",
-      icon: this.props.icon || "plus"
+      icon: this.props.icon || "fa-plus"
     });
   }
   render() {
@@ -2471,16 +2552,16 @@ class Attachment extends Component {
         href: this.props.source,
         target: "_blank",
         className: "pdfAttachment_container",
-        children: [/*#__PURE__*/jsx(Icon, {
+        children: [/*#__PURE__*/jsx(Icon$1, {
           className: "pdfAttachment_icon",
           pulse: this.props.uploading,
           fixedWidth: true,
-          icon: "".concat(this.props.uploading ? "spinner" : "paperclip")
+          icon: "".concat(this.props.uploading ? "fa-spinner" : "fa-paperclip")
         }), /*#__PURE__*/jsx("p", {
           className: "pdfAttachment_title",
           children: this.props.title || getFileName(this.props.source)
         })]
-      }), this.props.onRemove && /*#__PURE__*/jsx(Icon, {
+      }), this.props.onRemove && /*#__PURE__*/jsx(Icon$1, {
         colour: COLOUR_DUSK_LIGHT,
         icon: "xmark",
         className: "pdfAttachment_close",
@@ -2529,8 +2610,8 @@ class Button extends Component {
     if (!this.props.leftIcon) {
       return null;
     }
-    return /*#__PURE__*/jsx(Icon, {
-      icon: this.props.leftIcon,
+    return /*#__PURE__*/jsx(Icon$1, {
+      name: this.props.leftIcon,
       className: "buttonTextWithIcon_icon"
     });
   }
@@ -2604,9 +2685,9 @@ class CheckBox extends PureComponent {
           style: this.getBoxStyle(),
           children: /*#__PURE__*/jsx("div", {
             className: "checkBoxTick",
-            children: /*#__PURE__*/jsx(Icon, {
+            children: /*#__PURE__*/jsx(Icon$1, {
               className: "checkBoxTick-font",
-              icon: "check"
+              icon: "fa-check"
             })
           })
         }), !_.isEmpty(this.props.label) && /*#__PURE__*/jsx("div", {
@@ -2633,7 +2714,7 @@ var styles$9 = {
 
 function ownKeys$k(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$k(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$k(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$k(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-class Text extends Component {
+class Text$1 extends Component {
   getClassName() {
     if (this.props.className) {
       return " ".concat(this.props.className);
@@ -2671,7 +2752,7 @@ class ProfilePicComponent extends Component {
     if (this.props.hoverText) {
       return /*#__PURE__*/jsxs("div", {
         className: "profilePicHover ".concat(this.props.containerClass),
-        children: [this.renderPic(), /*#__PURE__*/jsx(Text, {
+        children: [this.renderPic(), /*#__PURE__*/jsx(Text$1, {
           type: "h5",
           className: "profilePicHover_text",
           children: this.props.hoverText
@@ -2777,7 +2858,7 @@ class CommentSection extends Component {
       if (_.isEmpty(threadComments)) {
         return /*#__PURE__*/jsx("div", {
           className: "comment_reply",
-          children: /*#__PURE__*/jsx(Text, {
+          children: /*#__PURE__*/jsx(Text$1, {
             className: "comment_reply_button",
             type: "button",
             onClick: () => {
@@ -2796,7 +2877,7 @@ class CommentSection extends Component {
             size: 20,
             image: c.User.profilePic
           });
-        }), /*#__PURE__*/jsx(Text, {
+        }), /*#__PURE__*/jsx(Text$1, {
           className: "comment_reply_button",
           type: "button",
           onClick: () => {
@@ -2812,7 +2893,7 @@ class CommentSection extends Component {
   }
   render() {
     return /*#__PURE__*/jsxs("div", {
-      children: [this.props.includeTitle && /*#__PURE__*/jsx(Text, {
+      children: [this.props.includeTitle && /*#__PURE__*/jsx(Text$1, {
         type: "formTitleSmall",
         className: "marginBottom-16",
         children: "Comments"
@@ -2827,7 +2908,7 @@ class CommentSection extends Component {
         children: [/*#__PURE__*/jsx("div", {
           className: "commentReply_button".concat(!_.isEmpty(this.state.commentInput) ? " commentReply_button-active" : ""),
           onClick: this.onAddComment,
-          children: /*#__PURE__*/jsx(Icon, {
+          children: /*#__PURE__*/jsx(Icon$1, {
             className: "commentReply_icon",
             icon: "paper-plane"
           })
@@ -3085,14 +3166,14 @@ class DatePicker extends Component {
           className: "datepicker__bottomHeader",
           children: /*#__PURE__*/jsxs("div", {
             className: "datepicker__monthSelector",
-            children: [/*#__PURE__*/jsx(Icon, {
+            children: [/*#__PURE__*/jsx(Icon$1, {
               className: "datepicker__monthChevron",
               icon: "chevron-left",
               onClick: this.changeMonth.bind(this, -1)
             }), /*#__PURE__*/jsx("p", {
               className: "datepicker__selectedMonth",
               children: this.getMonth()
-            }), /*#__PURE__*/jsx(Icon, {
+            }), /*#__PURE__*/jsx(Icon$1, {
               className: "datepicker__monthChevron",
               icon: "chevron-right",
               onClick: this.changeMonth.bind(this, 1)
@@ -3148,7 +3229,7 @@ function DurationInput(_ref) {
   };
   return /*#__PURE__*/jsxs("div", {
     className: "flex flex-center ".concat(className ? className : ""),
-    children: [label && /*#__PURE__*/jsx(Text, {
+    children: [label && /*#__PURE__*/jsx(Text$1, {
       type: "formTitleSmall",
       style: {
         marginRight: "10px",
@@ -3166,9 +3247,9 @@ function DurationInput(_ref) {
         width: 50,
         marginRight: 5
       }
-    }), /*#__PURE__*/jsx(Text, {
+    }), /*#__PURE__*/jsx(Text$1, {
       type: "formTitleSmall",
-      style: {
+      iconStyle: {
         marginRight: 10
       },
       children: "Hour(s)"
@@ -3183,7 +3264,7 @@ function DurationInput(_ref) {
         width: 50,
         marginRight: 5
       }
-    }), /*#__PURE__*/jsx(Text, {
+    }), /*#__PURE__*/jsx(Text$1, {
       type: "formTitleSmall",
       children: "Minute(s)"
     })]
@@ -3408,7 +3489,7 @@ class FileInputComponent extends Component {
                 getInputProps
               } = state;
               return /*#__PURE__*/jsxs("div", _objectSpread$i(_objectSpread$i({
-                style: {
+                iconStyle: {
                   padding: 10
                 }
               }, getRootProps()), {}, {
@@ -3425,11 +3506,11 @@ class FileInputComponent extends Component {
       }
       return /*#__PURE__*/jsx("div", {
         className: "imageInput_image",
-        style: _objectSpread$i({}, this.props.style)
+        iconStyle: _objectSpread$i({}, this.props.style)
       });
     };
     var renderRemove = () => {
-      return !this.props.disableRemove && !this.props.disabled && (this.props.simpleStyle ? /*#__PURE__*/jsx(Icon, {
+      return !this.props.disableRemove && !this.props.disabled && (this.props.simpleStyle ? /*#__PURE__*/jsx(Icon$1, {
         icon: "xmark",
         className: "imageInput_removeIcon",
         onClick: this.removeFile.bind(this, input)
@@ -3488,8 +3569,8 @@ class FileInputComponent extends Component {
         }
       }), /*#__PURE__*/jsx("div", {
         className: "imageInput_uploading",
-        style: _objectSpread$i({}, this.props.style),
-        children: /*#__PURE__*/jsx(Icon, {
+        iconStyle: _objectSpread$i({}, this.props.style),
+        children: /*#__PURE__*/jsx(Icon$1, {
           className: "spinner imageInput_spinner",
           icon: "spinner",
           fixedWidth: true,
@@ -3594,7 +3675,7 @@ class GenericInput extends Component {
   renderInput() {
     if (!_.isUndefined(this.props.inputComponent)) {
       return /*#__PURE__*/jsxs("div", {
-        style: _objectSpread$h(_objectSpread$h({}, styles$8.row), {}, {
+        iconStyle: _objectSpread$h(_objectSpread$h({}, styles$8.row), {}, {
           alignItems: "flex-start"
         }),
         children: [this.props.isRequired && /*#__PURE__*/jsx("div", {
@@ -3605,7 +3686,7 @@ class GenericInput extends Component {
     if (!_.isUndefined(this.props.type) && this.props.type === "textarea") {
       // Render expandable text area
       return /*#__PURE__*/jsxs("div", {
-        style: _objectSpread$h(_objectSpread$h({}, styles$8.row), {}, {
+        iconStyle: _objectSpread$h(_objectSpread$h({}, styles$8.row), {}, {
           alignItems: "flex-start"
         }),
         children: [this.props.isRequired && /*#__PURE__*/jsx("div", {
@@ -3631,7 +3712,7 @@ class GenericInput extends Component {
     }
     // Render default input
     return /*#__PURE__*/jsxs("div", {
-      style: _objectSpread$h(_objectSpread$h({}, styles$8.row), this.props.textWrapperStyle),
+      iconStyle: _objectSpread$h(_objectSpread$h({}, styles$8.row), this.props.textWrapperStyle),
       children: [this.props.isRequired && /*#__PURE__*/jsx("div", {
         className: "inputRequired "
       }), /*#__PURE__*/jsx("input", {
@@ -3659,7 +3740,7 @@ class GenericInput extends Component {
   render() {
     return /*#__PURE__*/jsxs("div", {
       className: this.getClassNames(),
-      style: _objectSpread$h({}, this.props.style),
+      iconStyle: _objectSpread$h({}, this.props.style),
       children: [/*#__PURE__*/jsxs("div", {
         style: _objectSpread$h(_objectSpread$h({}, styles$8.row), {}, {
           marginBottom: 0,
@@ -3721,7 +3802,7 @@ class Header extends Component {
       className: "header",
       children: [/*#__PURE__*/jsx("div", {
         id: "leftContainer",
-        style: {
+        iconStyle: {
           display: "inline-block"
         },
         children: this.props.children && /*#__PURE__*/jsx("div", {
@@ -3818,14 +3899,14 @@ class SideNavItem extends Component {
       return null;
     }
     return /*#__PURE__*/jsx("div", {
-      style: _objectSpread$g(_objectSpread$g({}, styles$7.section), {}, {
+      iconStyle: _objectSpread$g(_objectSpread$g({}, styles$7.section), {}, {
         width: 18,
         marginRight: 16
       }),
-      children: /*#__PURE__*/jsx(Icon, {
+      children: /*#__PURE__*/jsx(Icon$1, {
         className: "sideNav-item-icon",
         icon: this.props.Icon,
-        style: this.props.style
+        style: this.props.iconStyle
       })
     });
   }
@@ -3835,7 +3916,7 @@ class SideNavItem extends Component {
       style: this.props.style,
       onClick: this.goTo,
       children: [!this.props.noSideDot && /*#__PURE__*/jsx("div", {
-        style: _objectSpread$g(_objectSpread$g({}, styles$7.section), {}, {
+        iconStyle: _objectSpread$g(_objectSpread$g({}, styles$7.section), {}, {
           marginRight: 15
         }),
         children: /*#__PURE__*/jsx("div", {
@@ -3938,7 +4019,7 @@ class HubSidebar extends PureComponent {
     }), index);
   }
   renderNavItem(item, index) {
-    return /*#__PURE__*/jsx(exportObj$3, {
+    return /*#__PURE__*/jsx(Icon, {
       Text: item.text,
       Icon: item.icon,
       Link: item.url,
@@ -3951,7 +4032,7 @@ class HubSidebar extends PureComponent {
   renderSection(section, index) {
     return /*#__PURE__*/jsxs("div", {
       className: "hubSidebar_section",
-      children: [/*#__PURE__*/jsx(Text, {
+      children: [/*#__PURE__*/jsx(Text$1, {
         type: "h3",
         className: "hubSidebar_sectionTitle",
         children: section.title
@@ -3999,7 +4080,7 @@ class Popup extends Component {
     if (!this.props.onClose) {
       return null;
     }
-    return /*#__PURE__*/jsx(Icon, {
+    return /*#__PURE__*/jsx(Icon$1, {
       colour: COLOUR_DUSK_LIGHT,
       icon: "xmark",
       className: "popup_closeIcon",
@@ -4041,7 +4122,7 @@ class Popup extends Component {
             className: b.className,
             onClick: b.onClick,
             isActive: b.isActive,
-            children: b.loading ? /*#__PURE__*/jsx(Icon, {
+            children: b.loading ? /*#__PURE__*/jsx(Icon$1, {
               pulse: true,
               fixedWidth: true,
               icon: "spinner"
@@ -4065,7 +4146,7 @@ class Popup extends Component {
           leftIcon: b.leftIcon,
           leftIconType: b.leftIconType,
           leftIconColour: b.leftIconColour,
-          children: b.loading ? /*#__PURE__*/jsx(Icon, {
+          children: b.loading ? /*#__PURE__*/jsx(Icon$1, {
             pulse: true,
             fixedWidth: true,
             icon: "spinner"
@@ -4658,7 +4739,7 @@ class ImageInputComponent extends Component {
       });
     };
     var renderRemove = () => {
-      return !this.props.disableRemove && !this.props.disabled && (this.props.simpleStyle ? /*#__PURE__*/jsx(Icon, {
+      return !this.props.disableRemove && !this.props.disabled && (this.props.simpleStyle ? /*#__PURE__*/jsx(Icon$1, {
         icon: "xmark",
         className: "imageInput_removeIcon",
         onClick: this.removeImage.bind(this, input)
@@ -4720,8 +4801,8 @@ class ImageInputComponent extends Component {
         }
       }), /*#__PURE__*/jsx("div", {
         className: "imageInput_uploading",
-        style: _objectSpread$d({}, this.props.style),
-        children: /*#__PURE__*/jsx(Icon, {
+        iconStyle: _objectSpread$d({}, this.props.style),
+        children: /*#__PURE__*/jsx(Icon$1, {
           pulse: true,
           fixedWidth: true,
           className: "spinner imageInput_spinner",
@@ -4747,18 +4828,18 @@ class ImageInputComponent extends Component {
         onClick: this.toggleLibraryItem.bind(this, image)
       }), /*#__PURE__*/jsx("div", {
         className: "imageInput_selected",
-        children: /*#__PURE__*/jsx(Icon, {
+        children: /*#__PURE__*/jsx(Icon$1, {
           className: "imageInput_selectedIcon",
-          icon: "check"
+          icon: "fa-check"
         })
       }), allowDelete && /*#__PURE__*/jsx("div", {
         className: "imageInput_delete",
-        children: this.state.deletingImage[image.Value] ? /*#__PURE__*/jsx(Icon, {
-          style: styles$6.saveImageSpinner,
+        children: this.state.deletingImage[image.Value] ? /*#__PURE__*/jsx(Icon$1, {
+          iconStyle: styles$6.saveImageSpinner,
           fixedWidth: true,
           pulse: true,
           icon: "spinner"
-        }) : /*#__PURE__*/jsx(Icon, {
+        }) : /*#__PURE__*/jsx(Icon$1, {
           className: "imageInput_deleteIcon",
           icon: "circle-minus",
           onClick: event => this.deleteImage(event, image)
@@ -4801,8 +4882,8 @@ class ImageInputComponent extends Component {
     if (this.state.addFolderOpen) {
       return /*#__PURE__*/jsxs("div", {
         className: "imageFolderContainer",
-        children: [/*#__PURE__*/jsx(Icon, {
-          icon: "folder",
+        children: [/*#__PURE__*/jsx(Icon$1, {
+          name: "folder",
           className: "folderIcon"
         }), /*#__PURE__*/jsx(GenericInput, {
           id: "addFolderInput",
@@ -4817,8 +4898,8 @@ class ImageInputComponent extends Component {
           errorMessage: this.state.saveErrorMessage
         }), isSaving ? /*#__PURE__*/jsx("div", {
           className: "addControlContainer",
-          children: /*#__PURE__*/jsx(Icon, {
-            style: styles$6.saveFolderSpinner,
+          children: /*#__PURE__*/jsx(Icon$1, {
+            iconStyle: styles$6.saveFolderSpinner,
             icon: "spinner",
             pulse: true,
             fixedWidth: true
@@ -4845,8 +4926,8 @@ class ImageInputComponent extends Component {
     return /*#__PURE__*/jsxs("div", {
       className: "imageFolderContainer",
       onClick: this.addFolder,
-      children: [/*#__PURE__*/jsx(Icon, {
-        icon: "plus",
+      children: [/*#__PURE__*/jsx(Icon$1, {
+        name: "plus",
         className: "addIcon"
       }), /*#__PURE__*/jsx("div", {
         className: "addText",
@@ -4860,8 +4941,8 @@ class ImageInputComponent extends Component {
     return /*#__PURE__*/jsxs("div", {
       className: "imageFolderContainer",
       onClick: this.selectFolder.bind(this, folder),
-      children: [/*#__PURE__*/jsx(Icon, {
-        icon: "folder",
+      children: [/*#__PURE__*/jsx(Icon$1, {
+        name: "folder",
         className: "folderIcon"
       }), /*#__PURE__*/jsx("div", {
         className: "folderTitle",
@@ -4873,7 +4954,7 @@ class ImageInputComponent extends Component {
           children: folder.User && folder.User.displayName
         }), /*#__PURE__*/jsx("div", {
           className: "folderAttribute",
-          style: {
+          iconStyle: {
             width: "130px"
           },
           children: timeStamp
@@ -4884,15 +4965,15 @@ class ImageInputComponent extends Component {
             paddingRight: "5px"
           },
           children: countText
-        }), this.state.deletingFolder[folder.RowId] ? /*#__PURE__*/jsx(Icon, {
-          style: styles$6.saveFolderSpinner,
+        }), this.state.deletingFolder[folder.RowId] ? /*#__PURE__*/jsx(Icon$1, {
+          iconStyle: styles$6.saveFolderSpinner,
           icon: "spinner",
           pulse: true,
           fixedWidth: true
         }) : this.canManageLibrary() && /*#__PURE__*/jsx("a", {
           onClick: event => this.deleteFolder(event, folder),
-          children: /*#__PURE__*/jsx(Icon, {
-            style: styles$6.removeFolderButton,
+          children: /*#__PURE__*/jsx(Icon$1, {
+            iconStyle: styles$6.removeFolderButton,
             icon: "circle-minus"
           })
         })]
@@ -4914,8 +4995,8 @@ class ImageInputComponent extends Component {
         className: "root",
         onClick: this.selectRoot,
         children: "Library"
-      }), /*#__PURE__*/jsx(Icon, {
-        icon: "angle-left",
+      }), /*#__PURE__*/jsx(Icon$1, {
+        name: "angle-left",
         className: "separator"
       }), /*#__PURE__*/jsx("div", {
         className: "folder",
@@ -4975,7 +5056,7 @@ class ImageInputComponent extends Component {
             className: this.getClassNames(input),
             children: /*#__PURE__*/jsx("div", {
               className: "imageInput_uploading",
-              children: /*#__PURE__*/jsx(Icon, {
+              children: /*#__PURE__*/jsx(Icon$1, {
                 className: "spinner imageInput_spinner",
                 icon: "spinner",
                 pulse: true,
@@ -5043,7 +5124,7 @@ class ImageInputComponent extends Component {
           } = state;
           return /*#__PURE__*/jsxs("div", _objectSpread$d(_objectSpread$d({}, getRootProps()), {}, {
             className: "imageInputRight_button",
-            children: [/*#__PURE__*/jsx("input", _objectSpread$d({}, getInputProps())), /*#__PURE__*/jsx(Icon, {
+            children: [/*#__PURE__*/jsx("input", _objectSpread$d({}, getInputProps())), /*#__PURE__*/jsx(Icon$1, {
               className: "imageInputRight_button_icon",
               icon: "circle-plus"
             }), /*#__PURE__*/jsx("p", {
@@ -5057,7 +5138,7 @@ class ImageInputComponent extends Component {
         onClick: () => {
           this.selectTab("library");
         },
-        children: [/*#__PURE__*/jsx(Icon, {
+        children: [/*#__PURE__*/jsx(Icon$1, {
           className: "imageInputRight_button_icon",
           icon: "image"
         }), /*#__PURE__*/jsx("p", {
@@ -5175,7 +5256,7 @@ class OverlayPage extends Component {
   }
   render() {
     return /*#__PURE__*/jsxs("div", {
-      style: _objectSpread$c(_objectSpread$c({}, styles$5.pageWrapper), this.props.style),
+      iconStyle: _objectSpread$c(_objectSpread$c({}, styles$5.pageWrapper), this.props.style),
       children: [/*#__PURE__*/jsx("div", {
         style: _objectSpread$c(_objectSpread$c({}, styles$5.backgroundOverlay), this.props.backgroundStyle)
       }), this.renderContent()]
@@ -5396,7 +5477,7 @@ class RadioButton extends Component {
       return null;
     }
     return /*#__PURE__*/jsx("div", {
-      style: _objectSpread$7(_objectSpread$7({}, styles$1.row), this.props.rowStyle),
+      iconStyle: _objectSpread$7(_objectSpread$7({}, styles$1.row), this.props.rowStyle),
       children: this.props.options.map(e => {
         return /*#__PURE__*/jsxs("div", {
           className: this.generateWrapperClassNames(),
@@ -5419,7 +5500,7 @@ class RadioButton extends Component {
     if (!_.isEmpty(this.props.help)) {
       return /*#__PURE__*/jsx("div", {
         className: "genericInput-help",
-        style: {
+        iconStyle: {
           marginTop: 4
         },
         children: this.props.help
@@ -5461,7 +5542,7 @@ class Tag extends Component {
     if (!this.props.leftIcon) {
       return null;
     }
-    return /*#__PURE__*/jsx(Icon, {
+    return /*#__PURE__*/jsx(Icon$1, {
       icon: this.props.leftIcon,
       className: "tag_icon tag_icon-left ".concat(this.props.leftClick ? "tag_icon-clickable" : ""),
       style: this.props.leftIconStyle,
@@ -5472,7 +5553,7 @@ class Tag extends Component {
     if (!this.props.rightIcon) {
       return null;
     }
-    return /*#__PURE__*/jsx(Icon, {
+    return /*#__PURE__*/jsx(Icon$1, {
       icon: this.props.rightIcon,
       className: "tag_icon tag_icon-right ".concat(this.props.rightClick ? "tag_icon-clickable" : ""),
       style: this.props.rightIconStyle,
@@ -5564,7 +5645,7 @@ class SuccessPopup extends Component {
         cursor: "pointer"
       },
       onClick: this.props.closeAction,
-      children: /*#__PURE__*/jsx(Icon, {
+      children: /*#__PURE__*/jsx(Icon$1, {
         icon: "xmark"
       })
     });
@@ -5576,9 +5657,9 @@ class SuccessPopup extends Component {
         className: "successPopup",
         children: [this.props.noIcon || /*#__PURE__*/jsx("div", {
           className: "successPopup_tick",
-          children: /*#__PURE__*/jsx(Icon, {
+          children: /*#__PURE__*/jsx(Icon$1, {
             className: "successPopup_tick_icon",
-            icon: "check"
+            icon: "fa-check"
           })
         }), this.renderClose(), !_.isEmpty(this.props.text) && /*#__PURE__*/jsx("p", {
           className: "successPopup_text",
@@ -5655,7 +5736,7 @@ class Reactions extends Component {
       });
     }
     return /*#__PURE__*/jsxs("div", {
-      children: [/*#__PURE__*/jsx(Text, {
+      children: [/*#__PURE__*/jsx(Text$1, {
         type: "formTitleSmall",
         className: "marginBottom-16",
         children: "Reactions"
@@ -5857,7 +5938,7 @@ class UserListing extends Component {
           style: {
             height: this.getSize()
           },
-          children: [/*#__PURE__*/jsx(Text, {
+          children: [/*#__PURE__*/jsx(Text$1, {
             type: "name",
             style: this.props.whiteText ? {
               color: "#fff"
@@ -6007,7 +6088,7 @@ class TimePicker extends Component {
   }
   renderClear() {
     if (!this.props.hasClear) return null;
-    return /*#__PURE__*/jsx(Icon, {
+    return /*#__PURE__*/jsx(Icon$1, {
       colour: COLOUR_DUSK_LIGHT,
       icon: "xmark",
       className: "timepicker_clear",
@@ -6129,7 +6210,7 @@ class AudienceIncluder extends Component {
   }
   renderSearch() {
     return /*#__PURE__*/jsx("div", {
-      style: {},
+      iconStyle: {},
       children: this.state.returnList.map((user, index) => {
         return /*#__PURE__*/jsxs("div", {
           onClick: () => {
@@ -6162,7 +6243,7 @@ class AudienceIncluder extends Component {
   renderUserAdd() {
     return /*#__PURE__*/jsxs("div", {
       className: "",
-      style: {
+      iconStyle: {
         backgroundColor: "#fff"
       },
       children: [" ", /*#__PURE__*/jsx(GenericInput, {
@@ -6179,10 +6260,10 @@ class AudienceIncluder extends Component {
   renderAttendees() {
     if (this.state.selectionList && !_.isEmpty(this.state.selectionList)) {
       return /*#__PURE__*/jsxs("div", {
-        style: {
+        iconStyle: {
           marginTop: 16
         },
-        children: [/*#__PURE__*/jsx(Text, {
+        children: [/*#__PURE__*/jsx(Text$1, {
           type: "formLabel",
           className: "marginBottom-8",
           children: "Selected Users"
@@ -6197,7 +6278,7 @@ class AudienceIncluder extends Component {
             },
             children: [/*#__PURE__*/jsxs("div", {
               className: "flex",
-              style: {
+              iconStyle: {
                 alignItems: "center"
               },
               children: [/*#__PURE__*/jsx("img", {
@@ -6213,7 +6294,7 @@ class AudienceIncluder extends Component {
                 className: "fontMedium fontSize-16 text-dark'",
                 children: user.displayName
               })]
-            }), /*#__PURE__*/jsx(Icon, {
+            }), /*#__PURE__*/jsx(Icon$1, {
               className: "removeIcon",
               icon: "xmark",
               onClick: () => {
@@ -6385,7 +6466,7 @@ class DropdownInput extends Component {
           autoComplete: "false"
         }), /*#__PURE__*/jsx("div", {
           style: styles.chevronWrapper,
-          children: /*#__PURE__*/jsx(Icon, {
+          children: /*#__PURE__*/jsx(Icon$1, {
             style: _objectSpread$5(_objectSpread$5({}, styles.chevron), {}, {
               color: !_.isUndefined(this.props.disabled) && this.props.disabled ? "transparent" : INACTIVE_TEXT
             }),
@@ -6885,12 +6966,12 @@ class AudienceSelector extends Component {
         },
         children: [/*#__PURE__*/jsx("div", {
           className: "flex",
-          children: /*#__PURE__*/jsxs(Text, {
+          children: /*#__PURE__*/jsxs(Text$1, {
             type: "formTitleSmall",
             className: "marginBottom-16",
             children: ["Exclude Users From Selection", " ", "(".concat(this.state.excludeList.length, ")")]
           })
-        }), /*#__PURE__*/jsx(Icon, {
+        }), /*#__PURE__*/jsx(Icon$1, {
           style: {
             color: COLOUR_DUSK,
             fontSize: 12
@@ -6920,12 +7001,12 @@ class AudienceSelector extends Component {
         },
         children: [/*#__PURE__*/jsx("div", {
           className: "flex",
-          children: /*#__PURE__*/jsxs(Text, {
+          children: /*#__PURE__*/jsxs(Text$1, {
             type: "formTitleSmall",
             className: "marginBottom-16",
             children: [this.state.AudienceType !== "User" ? "Add Other" : "Select", " ", "Users ", "(".concat(this.state.includeList.length, ")")]
           })
-        }), /*#__PURE__*/jsx(Icon, {
+        }), /*#__PURE__*/jsx(Icon$1, {
           style: {
             color: COLOUR_DUSK,
             fontSize: 12
@@ -6949,10 +7030,10 @@ class AudienceSelector extends Component {
     } = this.props;
     return /*#__PURE__*/jsxs("div", {
       className: "selectedAudienceTags",
-      style: {
+      iconStyle: {
         maxWidth
       },
-      children: [_.isEmpty(AudienceTagList) && /*#__PURE__*/jsx(Text, {
+      children: [_.isEmpty(AudienceTagList) && /*#__PURE__*/jsx(Text$1, {
         type: "body",
         className: "text-italic",
         children: "No audiences selected"
@@ -6973,7 +7054,7 @@ class AudienceSelector extends Component {
     var tags = this.getAvailableAudienceTags();
     return /*#__PURE__*/jsx("div", {
       className: "availableAudienceTags",
-      style: {
+      iconStyle: {
         maxWidth
       },
       children: tags.map(t => {
@@ -6989,10 +7070,10 @@ class AudienceSelector extends Component {
     if (this.state.AudienceType !== "Custom") return null;
     return /*#__PURE__*/jsxs("div", {
       className: "optionsContent_bottom",
-      children: [/*#__PURE__*/jsx(Text, {
+      children: [/*#__PURE__*/jsx(Text$1, {
         type: "formLabel",
         children: "Selected Audience"
-      }), this.renderAssignedAudiences(), /*#__PURE__*/jsx(Text, {
+      }), this.renderAssignedAudiences(), /*#__PURE__*/jsx(Text$1, {
         type: "formLabel",
         className: "marginTop-32",
         children: "Select Audience"
@@ -7001,7 +7082,7 @@ class AudienceSelector extends Component {
   }
   render() {
     return /*#__PURE__*/jsxs("div", {
-      children: [/*#__PURE__*/jsx(Text, {
+      children: [/*#__PURE__*/jsx(Text$1, {
         type: "formTitleSmall",
         className: "marginBottom-16",
         children: this.props.title || "Target Audience"
@@ -7098,42 +7179,42 @@ class TextFormatPopup extends Component {
         children: [/*#__PURE__*/jsxs("p", {
           className: "successPopup_text successPopup_text-small",
           children: [/*#__PURE__*/jsx("br", {}), /*#__PURE__*/jsx("span", {
-            style: {
+            iconStyle: {
               fontWeight: 600
             },
             children: "Text formatting:"
           }), /*#__PURE__*/jsx("br", {}), /*#__PURE__*/jsx("br", {}), "Surround text with ", /*#__PURE__*/jsx("span", {
-            style: {
+            iconStyle: {
               fontWeight: 400
             },
             children: "**"
           }), " to create bold text:", /*#__PURE__*/jsx("br", {}), /*#__PURE__*/jsx("span", {
-            style: {
+            iconStyle: {
               fontWeight: 400
             },
             children: "**"
           }), "Some Text", /*#__PURE__*/jsx("span", {
-            style: {
+            iconStyle: {
               fontWeight: 400
             },
             children: "**"
           }), " =", " ", /*#__PURE__*/jsx("span", {
-            style: {
+            iconStyle: {
               fontWeight: 600
             },
             children: "Some Text"
           }), /*#__PURE__*/jsx("br", {}), /*#__PURE__*/jsx("br", {}), "Surround text with ", /*#__PURE__*/jsx("span", {
-            style: {
+            iconStyle: {
               fontWeight: 400
             },
             children: "*t*"
           }), " to create a title:", /*#__PURE__*/jsx("br", {}), /*#__PURE__*/jsx("span", {
-            style: {
+            iconStyle: {
               fontWeight: 400
             },
             children: "*t*"
           }), "Some Text", /*#__PURE__*/jsx("span", {
-            style: {
+            iconStyle: {
               fontWeight: 400
             },
             children: "*t*"
@@ -7145,33 +7226,33 @@ class TextFormatPopup extends Component {
             },
             children: "Some Text"
           }), /*#__PURE__*/jsx("br", {}), /*#__PURE__*/jsx("br", {}), "Surround text with ", /*#__PURE__*/jsx("span", {
-            style: {
+            iconStyle: {
               fontWeight: 400
             },
             children: "*s*"
           }), " to create a smaller title:", /*#__PURE__*/jsx("br", {}), /*#__PURE__*/jsx("span", {
-            style: {
+            iconStyle: {
               fontWeight: 400
             },
             children: "*s*"
           }), "Some Text", /*#__PURE__*/jsx("span", {
-            style: {
+            iconStyle: {
               fontWeight: 400
             },
             children: "*s*"
           }), " =", " ", /*#__PURE__*/jsx("span", {
-            style: {
+            iconStyle: {
               fontWeight: 600,
               fontSize: 16
             },
             children: "Some Text"
           }), /*#__PURE__*/jsx("br", {}), /*#__PURE__*/jsx("br", {}), "Create links with", " ", /*#__PURE__*/jsx("span", {
-            style: {
+            iconStyle: {
               fontWeight: 400
             },
             children: "[website|text]"
           }), ":", /*#__PURE__*/jsx("br", {}), /*#__PURE__*/jsx("span", {
-            style: {
+            iconStyle: {
               fontWeight: 400
             },
             children: "[https://example.com|Click here]"
@@ -7220,7 +7301,7 @@ class OptionsSection extends Component {
       },
       children: [/*#__PURE__*/jsx("div", {
         className: "optionsButton_iconContainer",
-        children: /*#__PURE__*/jsx(Icon, {
+        children: /*#__PURE__*/jsx(Icon$1, {
           className: "optionsButton_icon",
           icon: o.icon
         })
@@ -7448,10 +7529,10 @@ class MakerPopup extends Component {
     if (input.type === "array") {
       return /*#__PURE__*/jsxs("div", {
         className: "marginTop-16",
-        children: [/*#__PURE__*/jsx(Text, {
+        children: [/*#__PURE__*/jsx(Text$1, {
           type: "formLabel",
           children: input.title
-        }), /*#__PURE__*/jsxs(Text, {
+        }), /*#__PURE__*/jsxs(Text$1, {
           type: "body",
           children: [this.state[input.key].length, " ", getPluralOptions(this.state[input.key].length, "entry", "entries")]
         })]
@@ -7479,7 +7560,7 @@ class MakerPopup extends Component {
           width: 260,
           options: this.state.lottieConfig,
           isClickToPauseDisabled: true
-        }, "lottie-layout"), /*#__PURE__*/jsx(Text, {
+        }, "lottie-layout"), /*#__PURE__*/jsx(Text$1, {
           type: "h3",
           className: "marginTop-16",
           children: "Generating"
@@ -7488,7 +7569,7 @@ class MakerPopup extends Component {
     }
     if (this.state.asset) {
       return /*#__PURE__*/jsxs("div", {
-        children: [/*#__PURE__*/jsx(Text, {
+        children: [/*#__PURE__*/jsx(Text$1, {
           type: "h4",
           children: "Your file is ready"
         }), /*#__PURE__*/jsx(Button, {
@@ -7692,8 +7773,8 @@ class ExportCsvPopup extends Component {
             maxWidth: 500,
             textAlign: "center"
           },
-          children: /*#__PURE__*/jsx(Icon, {
-            style: {
+          children: /*#__PURE__*/jsx(Icon$1, {
+            iconStyle: {
               fontSize: 30
             },
             icon: "spinner",
@@ -7767,7 +7848,7 @@ class ExportCsvPopup extends Component {
       hasPadding: true,
       onClose: this.onClose,
       buttons: buttons,
-      children: [this.renderTimestampFilter(), /*#__PURE__*/jsx(Text, {
+      children: [this.renderTimestampFilter(), /*#__PURE__*/jsx(Text$1, {
         type: "bodyLarge",
         children: "Select which columns to include in the export"
       }), this.renderContent()]
@@ -7928,7 +8009,7 @@ class ColourOptions extends Component {
         backgroundColor: colour
       },
       onClick: () => this.onColourChange(colour),
-      children: /*#__PURE__*/jsx(Icon, {
+      children: /*#__PURE__*/jsx(Icon$1, {
         icon: "check",
         className: "colourQuickChoices_circle_tick"
       })
@@ -8135,7 +8216,7 @@ class ColourPicker extends Component {
         backgroundColor: colour
       },
       onClick: () => this.onColourChange(colour),
-      children: /*#__PURE__*/jsx(Icon, {
+      children: /*#__PURE__*/jsx(Icon$1, {
         icon: "check",
         className: "colourQuickChoices_circle_tick"
       })
@@ -8300,6 +8381,148 @@ class ColourPicker extends Component {
   }
 }
 
+var BAR_HEIGHT = 48;
+var CHART_PADDING = 10;
+var BarLabel = _ref => {
+  var {
+    x,
+    y,
+    width,
+    height,
+    value
+  } = _ref;
+  if (!width || width < 30) return null;
+  return /*#__PURE__*/jsx("text", {
+    x: x + 10,
+    y: y + height / 2,
+    fill: "#fff",
+    fontSize: 13,
+    fontWeight: "bold",
+    dominantBaseline: "middle",
+    children: value
+  });
+};
+var ComparisonStatBox = _ref2 => {
+  var {
+    title,
+    data,
+    prevText,
+    viewGraphLink,
+    isLoading,
+    borderless,
+    hideTotal
+  } = _ref2;
+  var total = data.reduce((sum, d) => sum + (d.value || 0), 0);
+  var chartHeight = data.length * BAR_HEIGHT + CHART_PADDING;
+  var maxLabelLength = data.reduce((max, d) => Math.max(max, d.name.length), 0);
+  var yAxisWidth = Math.min(Math.max(maxLabelLength * 7, 80), 160);
+  var opacity = isLoading ? 0.3 : 1;
+  var wrapperStyle = borderless ? {
+    opacity,
+    padding: "12px 0"
+  } : {
+    opacity,
+    padding: 20
+  };
+  var wrapperClass = borderless ? "" : "dashboardBox";
+  return /*#__PURE__*/jsxs("div", {
+    className: wrapperClass,
+    style: wrapperStyle,
+    children: [/*#__PURE__*/jsxs("div", {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: 8
+      },
+      children: [/*#__PURE__*/jsx(Text$1, {
+        type: "h6",
+        children: title
+      }), !hideTotal && /*#__PURE__*/jsxs("div", {
+        style: {
+          border: "1px solid #e0e0e0",
+          borderRadius: 4,
+          padding: "4px 10px",
+          fontSize: 13
+        },
+        children: ["Total: ", /*#__PURE__*/jsx("strong", {
+          children: total.toLocaleString()
+        })]
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      style: {
+        marginLeft: -8
+      },
+      children: /*#__PURE__*/jsx(ResponsiveContainer, {
+        width: "100%",
+        height: chartHeight,
+        children: /*#__PURE__*/jsxs(BarChart, {
+          data: data,
+          layout: "vertical",
+          margin: {
+            top: 4,
+            right: 4,
+            bottom: 0,
+            left: 0
+          },
+          barCategoryGap: "20%",
+          children: [/*#__PURE__*/jsx(XAxis, {
+            type: "number",
+            hide: true
+          }), /*#__PURE__*/jsx(YAxis, {
+            type: "category",
+            dataKey: "name",
+            width: yAxisWidth,
+            tick: {
+              fontSize: 13
+            },
+            axisLine: false,
+            tickLine: false
+          }), /*#__PURE__*/jsx(Tooltip, {
+            formatter: value => [value.toLocaleString(), title]
+          }), /*#__PURE__*/jsx(Bar, {
+            dataKey: "value",
+            radius: [4, 4, 4, 4],
+            background: {
+              fill: "#f0f0f4",
+              radius: 4
+            },
+            label: BarLabel,
+            children: data.map((entry, index) => /*#__PURE__*/jsx(Cell, {
+              fill: getSiteColour(index)
+            }, entry.name))
+          })]
+        })
+      })
+    }), !borderless && /*#__PURE__*/jsxs("div", {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginTop: 8,
+        borderTop: "1px solid #f0f0f0",
+        paddingTop: 12
+      },
+      children: [/*#__PURE__*/jsx(Text$1, {
+        type: "help",
+        children: prevText ? "Compared to " + prevText : ""
+      }), viewGraphLink ? /*#__PURE__*/jsx(Link, {
+        to: viewGraphLink + "&title=" + title,
+        children: /*#__PURE__*/jsxs(Text$1, {
+          type: "h5-noUpper",
+          className: "text-link",
+          children: [/*#__PURE__*/jsx(Icon$1, {
+            icon: "chart-line",
+            iconStyle: {
+              marginRight: 4
+            }
+          }), "View Graph"]
+        })
+      }) : /*#__PURE__*/jsx("div", {})]
+    })]
+  });
+};
+
 var StatBox = _ref => {
   var {
     title,
@@ -8323,19 +8546,19 @@ var StatBox = _ref => {
     className: "dashboardBox dashboardBox-stats dashboardBox-inline".concat(change > 0 ? " dashboardBox-stats-positive" : "").concat(change < 0 ? " dashboardBox-stats-negative" : ""),
     children: [/*#__PURE__*/jsx("div", {
       className: "dashboardBox-stats_title",
-      children: /*#__PURE__*/jsx(Text, {
+      children: /*#__PURE__*/jsx(Text$1, {
         type: "h6",
         children: title
       })
     }), /*#__PURE__*/jsxs("div", {
       className: "dashboardBox-stats_mid",
-      style: {
+      iconStyle: {
         opacity
       },
-      children: [/*#__PURE__*/jsx(Icon, {
+      children: [/*#__PURE__*/jsx(Icon$1, {
         className: "dashboardBox-stats_icon",
         icon: icon
-      }), /*#__PURE__*/jsx(Text, {
+      }), /*#__PURE__*/jsx(Text$1, {
         type: "h2",
         className: "dashboardBox-stats_count",
         children: value
@@ -8343,20 +8566,20 @@ var StatBox = _ref => {
         className: "dashboardBox-stats_change",
         children: change === 0 ? "No change" : "".concat(change, "% ").concat(change < 0 ? "↓" : "↑")
       })]
-    }), /*#__PURE__*/jsxs(Text, {
+    }), /*#__PURE__*/jsxs(Text$1, {
       type: "help",
-      style: {
+      iconStyle: {
         opacity
       },
       children: ["Compared to ", prevText]
     }), viewGraphLink && /*#__PURE__*/jsx(Link, {
       to: "".concat(viewGraphLink, "&title=").concat(title),
-      children: /*#__PURE__*/jsxs(Text, {
+      children: /*#__PURE__*/jsxs(Text$1, {
         type: "h5-noUpper",
         className: "text-link marginTop-10",
-        children: [/*#__PURE__*/jsx(Icon, {
+        children: [/*#__PURE__*/jsx(Icon$1, {
           icon: "chart-line",
-          style: {
+          iconStyle: {
             marginRight: 4
           }
         }), "View Graph"]
@@ -8389,8 +8612,9 @@ var index = /*#__PURE__*/Object.freeze({
 	Popup: Popup,
 	ProfilePic: ProfilePic,
 	RadioButton: RadioButton,
+	Icon: Icon$1,
 	Tag: Tag,
-	Text: Text,
+	Text: Text$1,
 	SideNavItem: exportObj$3,
 	StatusButton: StatusButton,
 	SuccessPopup: SuccessPopup,
@@ -8407,6 +8631,7 @@ var index = /*#__PURE__*/Object.freeze({
 	InputGroup: InputGroup,
 	ColourOptions: ColourOptions,
 	ColourPicker: ColourPicker,
+	ComparisonStatBox: ComparisonStatBox,
 	StatBox: StatBox,
 	Tabs: Tabs
 });
@@ -8488,26 +8713,5 @@ var Reducers = {
   scheduledActions: ScheduledActionsReducer
 };
 
-// Categories for organising permissions
-var PERMISSION_CATEGORIES = {
-  USER_MANAGEMENT: "User Management",
-  EVENTS: "Events",
-  COMMUNICATION: "Communication",
-  FACILITIES_BOOKINGS: "Facilities & Bookings",
-  SITE_ADMINISTRATION: "Site Administration",
-  PAYMENTS: "Payments",
-  CONTENT: "Content Management",
-  EXTRAS: "Extras",
-  PROFILE_SETTINGS: "Profile Settings",
-  USER_FEATURES: "User Features"
-};
-
-// NOTE: important and optional are currently hidden
-var IMPORTANCE_LEVELS = {
-  CRITICAL: "critical",
-  IMPORTANT: "important",
-  OPTIONAL: "optional"
-};
-
-export { index$1 as Actions, AddButton, analytics as Analytics, AnalyticsFilter, index$2 as Apis, Attachment, toExport as AudienceSelector, Button, CheckBox, ColourOptions, ColourPicker, colours as Colours, Comment, CommentSection, index as Components, CoreConfig as Config, DatePicker, DropdownInput, DurationInput, ExportCsvPopup, FileInput, GenericInput, exportObj$4 as Header, index$3 as Helper, exportObj$2 as HubSidebar, IMPORTANCE_LEVELS, ImageInput, InputGroup, exportObj as MakerPopup, MoreMenu, OptionsSection, OverlayPage, OverlayPageBottomButtons, OverlayPageContents, OverlayPageSection, PERMISSION_CATEGORIES, PageTitle, Popup, ProfilePic, RadioButton, Reactions, Reducers, session as Session, exportObj$3 as SideNavItem, StatBox, StatusButton, SuccessPopup, Tabs, Tag, Text, TextFormatPopup, TimePicker, Urls, UserListing, analyticsActions, authActions, fileActions, profileActions, scheduledActionsActions, stringActions, templateActions, typeActions, userActions, utilityActions };
+export { index$1 as Actions, analytics as Analytics, index$2 as Apis, colours as Colours, index as Components, CoreConfig as Config, index$3 as Helper, Reducers, session as Session, Urls };
 //# sourceMappingURL=index.js.map