@plusscommunities/pluss-core-web 1.7.6-beta.1 → 1.8.1-beta.0

package/dist/components.js

@@ -1,5 +1,6 @@
 import { Component, PureComponent } from 'react';
-import { Icon } from '@plusscommunities/pluss-icons';
+import { Icon as Icon$1 } from '@plusscommunities/pluss-icons';
+export { Icon } from '@plusscommunities/pluss-icons';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _ from 'lodash';
@@ -20,6 +21,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';
 
 class AddButton extends Component {
   getClasses() {
@@ -30,9 +32,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() {
@@ -103,16 +105,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",
@@ -161,8 +163,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"
     });
   }
@@ -236,9 +238,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", {
@@ -417,7 +419,7 @@ var toParagraphed = (text, style) => {
   var textSplit = text.split("\n");
   return _.map(textSplit, (t, i) => {
     return /*#__PURE__*/jsx("span", {
-      style: _objectSpread$k({
+      iconStyle: _objectSpread$k({
         display: "block"
       }, style),
       children: t || "\u00A0"
@@ -434,7 +436,7 @@ var getPluralOptions = (count, singular, plural) => {
 
 function ownKeys$j(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$j(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$j(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$j(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);
@@ -472,7 +474,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
@@ -578,7 +580,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: () => {
@@ -597,7 +599,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: () => {
@@ -613,7 +615,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"
@@ -628,7 +630,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"
           })
@@ -886,14 +888,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)
@@ -949,7 +951,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",
@@ -967,9 +969,9 @@ function DurationInput(_ref) {
         width: 50,
         marginRight: 5
       }
-    }), /*#__PURE__*/jsx(Text, {
+    }), /*#__PURE__*/jsx(Text$1, {
       type: "formTitleSmall",
-      style: {
+      iconStyle: {
         marginRight: 10
       },
       children: "Hour(s)"
@@ -984,7 +986,7 @@ function DurationInput(_ref) {
         width: 50,
         marginRight: 5
       }
-    }), /*#__PURE__*/jsx(Text, {
+    }), /*#__PURE__*/jsx(Text$1, {
       type: "formTitleSmall",
       children: "Minute(s)"
     })]
@@ -2309,7 +2311,7 @@ class FileInputComponent extends Component {
                 getInputProps
               } = state;
               return /*#__PURE__*/jsxs("div", _objectSpread$g(_objectSpread$g({
-                style: {
+                iconStyle: {
                   padding: 10
                 }
               }, getRootProps()), {}, {
@@ -2326,11 +2328,11 @@ class FileInputComponent extends Component {
       }
       return /*#__PURE__*/jsx("div", {
         className: "imageInput_image",
-        style: _objectSpread$g({}, this.props.style)
+        iconStyle: _objectSpread$g({}, 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)
@@ -2389,8 +2391,8 @@ class FileInputComponent extends Component {
         }
       }), /*#__PURE__*/jsx("div", {
         className: "imageInput_uploading",
-        style: _objectSpread$g({}, this.props.style),
-        children: /*#__PURE__*/jsx(Icon, {
+        iconStyle: _objectSpread$g({}, this.props.style),
+        children: /*#__PURE__*/jsx(Icon$1, {
           className: "spinner imageInput_spinner",
           icon: "spinner",
           fixedWidth: true,
@@ -2495,7 +2497,7 @@ class GenericInput extends Component {
   renderInput() {
     if (!_.isUndefined(this.props.inputComponent)) {
       return /*#__PURE__*/jsxs("div", {
-        style: _objectSpread$f(_objectSpread$f({}, styles$8.row), {}, {
+        iconStyle: _objectSpread$f(_objectSpread$f({}, styles$8.row), {}, {
           alignItems: "flex-start"
         }),
         children: [this.props.isRequired && /*#__PURE__*/jsx("div", {
@@ -2506,7 +2508,7 @@ class GenericInput extends Component {
     if (!_.isUndefined(this.props.type) && this.props.type === "textarea") {
       // Render expandable text area
       return /*#__PURE__*/jsxs("div", {
-        style: _objectSpread$f(_objectSpread$f({}, styles$8.row), {}, {
+        iconStyle: _objectSpread$f(_objectSpread$f({}, styles$8.row), {}, {
           alignItems: "flex-start"
         }),
         children: [this.props.isRequired && /*#__PURE__*/jsx("div", {
@@ -2532,7 +2534,7 @@ class GenericInput extends Component {
     }
     // Render default input
     return /*#__PURE__*/jsxs("div", {
-      style: _objectSpread$f(_objectSpread$f({}, styles$8.row), this.props.textWrapperStyle),
+      iconStyle: _objectSpread$f(_objectSpread$f({}, styles$8.row), this.props.textWrapperStyle),
       children: [this.props.isRequired && /*#__PURE__*/jsx("div", {
         className: "inputRequired "
       }), /*#__PURE__*/jsx("input", {
@@ -2560,7 +2562,7 @@ class GenericInput extends Component {
   render() {
     return /*#__PURE__*/jsxs("div", {
       className: this.getClassNames(),
-      style: _objectSpread$f({}, this.props.style),
+      iconStyle: _objectSpread$f({}, this.props.style),
       children: [/*#__PURE__*/jsxs("div", {
         style: _objectSpread$f(_objectSpread$f({}, styles$8.row), {}, {
           marginBottom: 0,
@@ -2668,7 +2670,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", {
@@ -2765,14 +2767,14 @@ class SideNavItem extends Component {
       return null;
     }
     return /*#__PURE__*/jsx("div", {
-      style: _objectSpread$e(_objectSpread$e({}, styles$7.section), {}, {
+      iconStyle: _objectSpread$e(_objectSpread$e({}, 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
       })
     });
   }
@@ -2782,7 +2784,7 @@ class SideNavItem extends Component {
       style: this.props.style,
       onClick: this.goTo,
       children: [!this.props.noSideDot && /*#__PURE__*/jsx("div", {
-        style: _objectSpread$e(_objectSpread$e({}, styles$7.section), {}, {
+        iconStyle: _objectSpread$e(_objectSpread$e({}, styles$7.section), {}, {
           marginRight: 15
         }),
         children: /*#__PURE__*/jsx("div", {
@@ -2806,6 +2808,7 @@ class SideNavItem extends Component {
 var styles$7 = {
   section: {
     display: "flex",
+    alignItems: "center",
     minHeight: 22
   },
   sideNavDot: {
@@ -2884,7 +2887,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,
@@ -2897,7 +2900,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
@@ -2945,7 +2948,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",
@@ -2987,7 +2990,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"
@@ -3011,7 +3014,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"
@@ -3604,7 +3607,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)
@@ -3666,8 +3669,8 @@ class ImageInputComponent extends Component {
         }
       }), /*#__PURE__*/jsx("div", {
         className: "imageInput_uploading",
-        style: _objectSpread$b({}, this.props.style),
-        children: /*#__PURE__*/jsx(Icon, {
+        iconStyle: _objectSpread$b({}, this.props.style),
+        children: /*#__PURE__*/jsx(Icon$1, {
           pulse: true,
           fixedWidth: true,
           className: "spinner imageInput_spinner",
@@ -3693,18 +3696,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)
@@ -3747,8 +3750,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",
@@ -3763,8 +3766,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
@@ -3791,8 +3794,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",
@@ -3806,8 +3809,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",
@@ -3819,7 +3822,7 @@ class ImageInputComponent extends Component {
           children: folder.User && folder.User.displayName
         }), /*#__PURE__*/jsx("div", {
           className: "folderAttribute",
-          style: {
+          iconStyle: {
             width: "130px"
           },
           children: timeStamp
@@ -3830,15 +3833,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"
           })
         })]
@@ -3860,8 +3863,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",
@@ -3921,7 +3924,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,
@@ -3989,7 +3992,7 @@ class ImageInputComponent extends Component {
           } = state;
           return /*#__PURE__*/jsxs("div", _objectSpread$b(_objectSpread$b({}, getRootProps()), {}, {
             className: "imageInputRight_button",
-            children: [/*#__PURE__*/jsx("input", _objectSpread$b({}, getInputProps())), /*#__PURE__*/jsx(Icon, {
+            children: [/*#__PURE__*/jsx("input", _objectSpread$b({}, getInputProps())), /*#__PURE__*/jsx(Icon$1, {
               className: "imageInputRight_button_icon",
               icon: "circle-plus"
             }), /*#__PURE__*/jsx("p", {
@@ -4003,7 +4006,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", {
@@ -4121,7 +4124,7 @@ class OverlayPage extends Component {
   }
   render() {
     return /*#__PURE__*/jsxs("div", {
-      style: _objectSpread$a(_objectSpread$a({}, styles$5.pageWrapper), this.props.style),
+      iconStyle: _objectSpread$a(_objectSpread$a({}, styles$5.pageWrapper), this.props.style),
       children: [/*#__PURE__*/jsx("div", {
         style: _objectSpread$a(_objectSpread$a({}, styles$5.backgroundOverlay), this.props.backgroundStyle)
       }), this.renderContent()]
@@ -4342,7 +4345,7 @@ class RadioButton extends Component {
       return null;
     }
     return /*#__PURE__*/jsx("div", {
-      style: _objectSpread$5(_objectSpread$5({}, styles$1.row), this.props.rowStyle),
+      iconStyle: _objectSpread$5(_objectSpread$5({}, styles$1.row), this.props.rowStyle),
       children: this.props.options.map(e => {
         return /*#__PURE__*/jsxs("div", {
           className: this.generateWrapperClassNames(),
@@ -4365,7 +4368,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
@@ -4407,7 +4410,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,
@@ -4418,7 +4421,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,
@@ -4510,7 +4513,7 @@ class SuccessPopup extends Component {
         cursor: "pointer"
       },
       onClick: this.props.closeAction,
-      children: /*#__PURE__*/jsx(Icon, {
+      children: /*#__PURE__*/jsx(Icon$1, {
         icon: "xmark"
       })
     });
@@ -4522,9 +4525,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",
@@ -4601,7 +4604,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"
@@ -4613,6 +4616,37 @@ class Reactions extends Component {
   }
 }
 
+// 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 getAnalyticsFilterOptions = () => {
   return [{
     text: "Yesterday",
@@ -4835,7 +4869,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"
@@ -4985,7 +5019,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",
@@ -5107,7 +5141,7 @@ class AudienceIncluder extends Component {
   }
   renderSearch() {
     return /*#__PURE__*/jsx("div", {
-      style: {},
+      iconStyle: {},
       children: this.state.returnList.map((user, index) => {
         return /*#__PURE__*/jsxs("div", {
           onClick: () => {
@@ -5140,7 +5174,7 @@ class AudienceIncluder extends Component {
   renderUserAdd() {
     return /*#__PURE__*/jsxs("div", {
       className: "",
-      style: {
+      iconStyle: {
         backgroundColor: "#fff"
       },
       children: [" ", /*#__PURE__*/jsx(GenericInput, {
@@ -5157,10 +5191,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"
@@ -5175,7 +5209,7 @@ class AudienceIncluder extends Component {
             },
             children: [/*#__PURE__*/jsxs("div", {
               className: "flex",
-              style: {
+              iconStyle: {
                 alignItems: "center"
               },
               children: [/*#__PURE__*/jsx("img", {
@@ -5191,7 +5225,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: () => {
@@ -5363,7 +5397,7 @@ class DropdownInput extends Component {
           autoComplete: "false"
         }), /*#__PURE__*/jsx("div", {
           style: styles.chevronWrapper,
-          children: /*#__PURE__*/jsx(Icon, {
+          children: /*#__PURE__*/jsx(Icon$1, {
             style: _objectSpread$3(_objectSpread$3({}, styles.chevron), {}, {
               color: !_.isUndefined(this.props.disabled) && this.props.disabled ? "transparent" : INACTIVE_TEXT
             }),
@@ -5863,12 +5897,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
@@ -5898,12 +5932,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
@@ -5927,10 +5961,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"
@@ -5951,7 +5985,7 @@ class AudienceSelector extends Component {
     var tags = this.getAvailableAudienceTags();
     return /*#__PURE__*/jsx("div", {
       className: "availableAudienceTags",
-      style: {
+      iconStyle: {
         maxWidth
       },
       children: tags.map(t => {
@@ -5967,10 +6001,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"
@@ -5979,7 +6013,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"
@@ -6076,42 +6110,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*"
@@ -6123,33 +6157,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]"
@@ -6198,7 +6232,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
         })
@@ -6426,10 +6460,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")]
         })]
@@ -6457,7 +6491,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"
@@ -6466,7 +6500,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, {
@@ -6670,8 +6704,8 @@ class ExportCsvPopup extends Component {
             maxWidth: 500,
             textAlign: "center"
           },
-          children: /*#__PURE__*/jsx(Icon, {
-            style: {
+          children: /*#__PURE__*/jsx(Icon$1, {
+            iconStyle: {
               fontSize: 30
             },
             icon: "spinner",
@@ -6745,7 +6779,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()]
@@ -6906,7 +6940,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"
       })
@@ -7113,7 +7147,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"
       })
@@ -7278,6 +7312,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,
@@ -7301,19 +7477,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
@@ -7321,20 +7497,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"]
@@ -7343,5 +7519,5 @@ var StatBox = _ref => {
   });
 };
 
-export { AddButton, AnalyticsFilter, Attachment, toExport as AudienceSelector, Button, CheckBox, ColourOptions, ColourPicker, Comment, CommentSection, DatePicker, DropdownInput, DurationInput, ExportCsvPopup, FileInput, GenericInput, exportObj$4 as Header, exportObj$2 as HubSidebar, ImageInput, InputGroup, exportObj as MakerPopup, MoreMenu, OptionsSection, OverlayPage, OverlayPageBottomButtons, OverlayPageContents, OverlayPageSection, PageTitle, Popup, ProfilePic, RadioButton, Reactions, exportObj$3 as SideNavItem, StatBox, StatusButton, SuccessPopup, Tabs, Tag, Text, TextFormatPopup, TimePicker, UserListing };
+export { AddButton, AnalyticsFilter, Attachment, toExport as AudienceSelector, Button, CheckBox, ColourOptions, ColourPicker, Comment, CommentSection, ComparisonStatBox, DatePicker, DropdownInput, DurationInput, ExportCsvPopup, FileInput, GenericInput, exportObj$4 as Header, exportObj$2 as HubSidebar, ImageInput, InputGroup, exportObj as MakerPopup, MoreMenu, OptionsSection, OverlayPage, OverlayPageBottomButtons, OverlayPageContents, OverlayPageSection, PageTitle, Popup, ProfilePic, RadioButton, Reactions, exportObj$3 as SideNavItem, StatBox, StatusButton, SuccessPopup, Tabs, Tag, Text$1 as Text, TextFormatPopup, TimePicker, UserListing };
 //# sourceMappingURL=components.js.map