@tenancy.nz/ui 1.3.0 → 1.3.2

package/dist/cjs/components/Button.styled.cjs

@@ -8,7 +8,7 @@ var react = require('@emotion/react');
 var styles = require('@mui/material/styles');
 var object = require('../utils/helpers/object.cjs');
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
 var edgesStyles = function edgesStyles(_ref) {
   var edges = _ref.edges,
     theme = _ref.theme;
@@ -32,14 +32,19 @@ var outlinedStyles = function outlinedStyles(_ref4) {
     theme = _ref4.theme;
   return react.css(_templateObject12 || (_templateObject12 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  color: ", ";\n  background-color: transparent;\n  border: 1px solid currentColor;\n\n  .MuiButton-loadingWrapper {\n    color: ", ";\n  }\n\n  &:hover,\n  &:active {\n    background-color: ", ";\n  }\n\n  ", "\n"])), object.getObjectProp(theme, "vars.palette.".concat(color, ".main")), object.getObjectProp(theme, "vars.palette.".concat(color, ".main")), object.getObjectProp(theme, "vars.palette.background.muted"), focusStyles);
 };
-var StyledButton = styles.styled(Button)(_templateObject13 || (_templateObject13 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref5) {
+var textStyles = function textStyles(_ref5) {
   var color = _ref5.color,
-    disabled = _ref5.disabled,
-    edges = _ref5.edges,
-    size = _ref5.size,
-    theme = _ref5.theme,
-    variant = _ref5.variant;
-  return react.css(_templateObject14 || (_templateObject14 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    && {\n      padding: 0px 24px;\n      text-transform: initial;\n      font-weight: 700;\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    }\n  "])), edgesStyles({
+    theme = _ref5.theme;
+  return react.css(_templateObject13 || (_templateObject13 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  && {\n    color: ", ";\n    background-color: transparent;\n    border: none;\n\n    .MuiButton-loadingWrapper {\n      color: ", ";\n    }\n\n    &:hover,\n    &:active {\n      background-color: ", ";\n    }\n\n    ", "\n  }\n"])), object.getObjectProp(theme, "vars.palette.".concat(color, ".main")), object.getObjectProp(theme, "vars.palette.".concat(color, ".main")), object.getObjectProp(theme, "vars.palette.background.muted"), focusStyles);
+};
+var StyledButton = styles.styled(Button)(_templateObject14 || (_templateObject14 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref6) {
+  var color = _ref6.color,
+    disabled = _ref6.disabled,
+    edges = _ref6.edges,
+    size = _ref6.size,
+    theme = _ref6.theme,
+    variant = _ref6.variant;
+  return react.css(_templateObject15 || (_templateObject15 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    && {\n      padding: 0px 24px;\n      text-transform: initial;\n      font-weight: 700;\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    }\n  "])), edgesStyles({
     edges: edges,
     theme: theme
   }), sizeStyles({
@@ -51,6 +56,9 @@ var StyledButton = styles.styled(Button)(_templateObject13 || (_templateObject13
   }), variant === "outlined" && !disabled && outlinedStyles({
     color: color,
     theme: theme
+  }), variant === "text" && !disabled && textStyles({
+    color: color,
+    theme: theme
   }));
 });
 
@@ -61,3 +69,4 @@ exports.edgesStyles = edgesStyles;
 exports.focusStyles = focusStyles;
 exports.outlinedStyles = outlinedStyles;
 exports.sizeStyles = sizeStyles;
+exports.textStyles = textStyles;

package/dist/cjs/components/Checkbox.cjs

@@ -47,8 +47,10 @@ function Checkbox(_ref) {
     disabled: disabled,
     margin: "none",
     sx: {
-      mt: "2px",
-      fontWeight: "500"
+      "&&": {
+        mt: "2px",
+        fontWeight: "500"
+      }
     }
   }, label));
 }

package/dist/cjs/components/InputClearIcon.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var CancelIcon = require('@mui/icons-material/Cancel');
+var IconButton = require('./IconButton.cjs');
+var InputClearIcon_styled = require('./InputClearIcon.styled.cjs');
+
+function InputClearIcon(_ref) {
+  var onClick = _ref.onClick;
+  return /* @__PURE__ */React.createElement(InputClearIcon_styled.default, null, /* @__PURE__ */React.createElement(IconButton.default, {
+    onClick: onClick,
+    size: "small",
+    color: "inherit",
+    edges: "rounded"
+  }, /* @__PURE__ */React.createElement(CancelIcon, null)));
+}
+
+exports.default = InputClearIcon;

package/dist/cjs/components/InputClearIcon.styled.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var styles = require('@mui/material/styles');
+var react = require('@emotion/react');
+var object = require('../utils/helpers/object.cjs');
+
+var _templateObject, _templateObject2;
+var StyledInputClearIcon = styles.styled("div")(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return react.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    color: ", ";\n    margin-left: 5px;\n    transition: color 200ms ease;\n    svg {\n      font-size: 1.15rem;\n    }\n\n    &:hover {\n      color: ", ";\n    }\n  "])), object.getObjectProp(theme, "vars.palette.grey.300", null), object.getObjectProp(theme, "vars.palette.grey.400", null));
+});
+
+exports.default = StyledInputClearIcon;

package/dist/cjs/components/MultiSelect.cjs

@@ -0,0 +1,197 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var React = require('react');
+var MuiMenuItem = require('@mui/material/MenuItem');
+var KeyboardArrowDownIcon = require('@mui/icons-material/KeyboardArrowDown');
+var Box = require('./Box.cjs');
+var Checkbox = require('./Checkbox.cjs');
+var FormControl = require('./FormControl.cjs');
+var Select_styled = require('./Select.styled.cjs');
+var InputClearIcon = require('./InputClearIcon.cjs');
+var MultiSelect_styled = require('./MultiSelect.styled.cjs');
+
+var _excluded = ["fullWidth", "color", "label", "helperText", "edges", "variant", "disabled", "required", "options", "onChange", "showError", "errorMessage", "inputRef", "placeholder", "IconComponent", "size", "value", "name", "inputProps", "hideLabel", "allowEmpty", "weight", "onClear", "keepClearIconSpace", "checkboxProps", "onToggleAll", "toggleAllOptionLabel"];
+function MultiSelect(_ref) {
+  var _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? true : _ref$fullWidth,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "default" : _ref$color,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    _ref$helperText = _ref.helperText,
+    helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
+    _ref$edges = _ref.edges,
+    edges = _ref$edges === void 0 ? "normal" : _ref$edges,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "outlined" : _ref$variant,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    options = _ref.options,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {
+      return null;
+    } : _ref$onChange,
+    _ref$showError = _ref.showError,
+    showError = _ref$showError === void 0 ? false : _ref$showError,
+    _ref$errorMessage = _ref.errorMessage,
+    errorMessage = _ref$errorMessage === void 0 ? "" : _ref$errorMessage,
+    _ref$inputRef = _ref.inputRef,
+    inputRef = _ref$inputRef === void 0 ? null : _ref$inputRef,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
+    _ref$IconComponent = _ref.IconComponent,
+    IconComponent = _ref$IconComponent === void 0 ? void 0 : _ref$IconComponent,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "medium" : _ref$size,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? [] : _ref$value,
+    name = _ref.name,
+    _ref$inputProps = _ref.inputProps,
+    inputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps,
+    _ref$hideLabel = _ref.hideLabel,
+    hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
+    _ref$allowEmpty = _ref.allowEmpty,
+    allowEmpty = _ref$allowEmpty === void 0 ? false : _ref$allowEmpty;
+    _ref.weight;
+    var _ref$onClear = _ref.onClear,
+    onClear = _ref$onClear === void 0 ? void 0 : _ref$onClear,
+    _ref$keepClearIconSpa = _ref.keepClearIconSpace,
+    keepClearIconSpace = _ref$keepClearIconSpa === void 0 ? false : _ref$keepClearIconSpa,
+    _ref$checkboxProps = _ref.checkboxProps,
+    checkboxProps = _ref$checkboxProps === void 0 ? {} : _ref$checkboxProps,
+    _ref$onToggleAll = _ref.onToggleAll,
+    onToggleAll = _ref$onToggleAll === void 0 ? void 0 : _ref$onToggleAll,
+    _ref$toggleAllOptionL = _ref.toggleAllOptionLabel,
+    toggleAllOptionLabel = _ref$toggleAllOptionL === void 0 ? "Select All" : _ref$toggleAllOptionL,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var ref = React.useRef(null);
+  var handleToggleAll = function handleToggleAll(e) {
+    e.stopPropagation();
+    var filtered = value.filter(function (val) {
+      return !isNaN(parseFloat(val)) || !!val;
+    });
+    var checked = filtered.length === options.length;
+    var vals = !checked ? options.map(function (option) {
+      return option.value;
+    }) : [];
+    if (typeof onToggleAll === "function") {
+      onToggleAll(vals);
+    }
+    return false;
+  };
+  return /* @__PURE__ */React.createElement(Box.default, {
+    width: fullWidth ? "100%" : "auto",
+    display: "flex",
+    align: "center"
+  }, /* @__PURE__ */React.createElement(FormControl.default, {
+    color: color,
+    fullWidth: fullWidth,
+    label: label,
+    name: name,
+    helperText: helperText,
+    disabled: disabled,
+    required: required,
+    showError: showError,
+    errorMessage: errorMessage,
+    edges: edges,
+    hideLabel: hideLabel
+  }, /* @__PURE__ */React.createElement(Select_styled.default, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+    name: name,
+    size: size,
+    variant: variant,
+    disabled: disabled,
+    fullWidth: fullWidth,
+    displayEmpty: !!placeholder || allowEmpty,
+    error: !!(errorMessage && showError),
+    inputProps: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, inputProps), {}, {
+      ref: inputRef
+    }),
+    inputRef: ref,
+    MenuProps: _rollupPluginBabelHelpers.objectSpread2({
+      style: {
+        maxHeight: 500,
+        maxWidth: 250
+      },
+      getContentAnchorEl: null,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      }
+    }, !!rest.MenuProps && _rollupPluginBabelHelpers.objectSpread2({}, rest.MenuProps)),
+    renderValue: function renderValue(selected) {
+      var filtered = options.filter(function (option) {
+        return selected.includes(option.value);
+      });
+      if (filtered.length === 0) {
+        return /* @__PURE__ */React.createElement("span", null, placeholder);
+      }
+      return filtered.map(function (option) {
+        return option.label;
+      }).join(", ");
+    },
+    IconComponent: IconComponent === void 0 ? KeyboardArrowDownIcon : IconComponent,
+    value: value,
+    onChange: onChange
+  }, rest), {}, {
+    native: false,
+    multiple: true,
+    color: color
+  }), function () {
+    if (allowEmpty) {
+      return /* @__PURE__ */React.createElement(MuiMenuItem, {
+        selected: value.length === 0
+      }, placeholder);
+    }
+    return null;
+  }(), onToggleAll && /* @__PURE__ */React.createElement(MultiSelect_styled.StyledMultiSelectOption, {
+    as: "li",
+    item: true
+  }, /* @__PURE__ */React.createElement(Box.default, {
+    as: "span",
+    sx: {
+      pointerEvents: "auto"
+    },
+    display: "inline-flex"
+  }, /* @__PURE__ */React.createElement(Checkbox.default, _rollupPluginBabelHelpers.objectSpread2({
+    name: "".concat(name, "[]"),
+    value: "all",
+    label: toggleAllOptionLabel,
+    checked: value.length === options.length,
+    onChange: handleToggleAll,
+    color: "default",
+    size: size
+  }, checkboxProps)))), options && options.map(function (option) {
+    return /* @__PURE__ */React.createElement(MuiMenuItem, {
+      key: option.value,
+      value: option.value,
+      disabled: option.disabled,
+      "aria-selected": option.focused,
+      "data-focus": option.focused,
+      sx: {
+        "&&.Mui-selected": {
+          backgroundColor: "transparent"
+        }
+      },
+      disableRipple: true
+    }, /* @__PURE__ */React.createElement(MultiSelect_styled.StyledMultiSelectOption, null, /* @__PURE__ */React.createElement(Checkbox.default, _rollupPluginBabelHelpers.objectSpread2({
+      name: "".concat(name, "[]"),
+      value: option.value,
+      label: option.label,
+      checked: value.includes(option.value),
+      onChange: function onChange() {},
+      color: "default",
+      size: size
+    }, checkboxProps))));
+  }))), (onClear && value.length > 0 || keepClearIconSpace) && /* @__PURE__ */React.createElement(Box.default, {
+    minWidth: keepClearIconSpace ? "34px" : "initial"
+  }, onClear && value.length > 0 && /* @__PURE__ */React.createElement(InputClearIcon.default, {
+    onClick: onClear
+  })));
+}
+
+exports.default = MultiSelect;

package/dist/cjs/components/MultiSelect.styled.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var styled = require('styled-components');
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var StyledMultiSelectOption = styled.div(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var allowEvents = _ref.allowEvents,
+    item = _ref.item;
+  return styled.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    ", "\n\n    ", "\n  "])), !allowEvents && styled.css(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      pointer-events: none;\n    "]))), item && styled.css(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n      padding-top: 6px;\n      padding-bottom: 6px;\n      padding-left: 16px;\n      padding-right: 16px;\n      box-sizing: border-box;\n      width: auto;\n      white-space: nowrap;\n    "]))));
+});
+
+exports.StyledMultiSelectOption = StyledMultiSelectOption;

package/dist/cjs/components/Nameplate.cjs

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var React = require('react');
-var PropTypes = require('prop-types');
 var Skeleton = require('@mui/material/Skeleton');
 var MuiContainer = require('@mui/material/Container');
 var Box = require('@mui/material/Box');
@@ -37,8 +36,11 @@ function Nameplate(_ref) {
       justifyContent: "space-between",
       flexWrap: "nowrap",
       alignItems: "center",
-      px: isMobile ? 2 : 0,
-      py: 4
+      py: 4,
+      px: {
+        xs: 2,
+        sm: 0
+      }
     }
   }, skeleton ? /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("div", {
     style: {
@@ -51,44 +53,21 @@ function Nameplate(_ref) {
     width: isMobile ? "60%" : "30%",
     height: isMobile ? 22 : 30
   })), /* @__PURE__ */React.createElement(Skeleton, {
-    variant: "rect",
+    variant: "rectangular",
     height: 100,
     width: 100
   })) : /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("div", null, title && /* @__PURE__ */React.createElement(Text.default, {
-    color: "textSecondary",
-    variant: "body1",
+    color: "violet.main",
     weight: "600"
-  }, isMobile && /* @__PURE__ */React.createElement("small", null, /* @__PURE__ */React.createElement("small", null, title)), !isMobile && title), /* @__PURE__ */React.createElement(Heading.default, {
+  }, title), /* @__PURE__ */React.createElement(Heading.default, {
     as: isMobile ? "h5" : "h3",
-    weight: "400",
-    color: "textPrimary",
+    weight: "600",
+    color: "primary",
     gutterBottom: false
   }, heading, subHeading && /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("br", null), " ", subHeading))), /* @__PURE__ */React.createElement(Nameplate_styled.StyledImgWrapper, null, logo && /* @__PURE__ */React.createElement(Nameplate_styled.StyledImg, {
     src: logo,
-    alt: heading
-  }), !logo && heading && /* @__PURE__ */React.createElement(Nameplate_styled.StyledImgText, null, heading[0].toUpperCase()))))));
+    alt: typeof heading === "string" ? heading : ""
+  }), !logo && typeof heading === "string" && heading && /* @__PURE__ */React.createElement(Nameplate_styled.StyledImgText, null, heading[0].toUpperCase()))))));
 }
-Nameplate.propTypes = {
-  /**
-   * Heading
-   */
-  heading: PropTypes.string,
-  /**
-   * Sub Heading
-   */
-  subHeading: PropTypes.string,
-  /**
-   * Show skeleton layout
-   */
-  skeleton: PropTypes.bool,
-  /**
-   * URL for the property manager logo
-   */
-  logo: PropTypes.string,
-  /**
-   * Text displayed before heading
-   */
-  title: PropTypes.string
-};
 
 exports.default = Nameplate;

package/dist/cjs/components/Radio.cjs

@@ -47,8 +47,10 @@ function Radio(_ref) {
     disabled: disabled,
     margin: "none",
     sx: {
-      mt: "2px",
-      fontWeight: "500"
+      "&&": {
+        mt: "2px",
+        fontWeight: "500"
+      }
     }
   }, label));
 }

package/dist/cjs/components/Select.cjs

@@ -9,9 +9,9 @@ var KeyboardArrowDownIcon = require('@mui/icons-material/KeyboardArrowDown');
 var FormControl = require('./FormControl.cjs');
 var Select_styled = require('./Select.styled.cjs');
 
-var _excluded = ["color", "disabled", "edges", "errorMessage", "fullWidth", "helperText", "id", "inputRef", "inputProps", "label", "IconComponent", "message", "MenuProps", "name", "native", "placeholder", "required", "showError", "size", "readOnly", "options"],
+var _excluded = ["color", "disabled", "edges", "errorMessage", "fullWidth", "helperText", "id", "inputRef", "inputProps", "label", "IconComponent", "message", "MenuProps", "name", "native", "placeholder", "required", "showError", "size", "readOnly", "options", "renderOptions"],
   _excluded2 = ["label"];
-function Select(_ref) {
+var Select = /*#__PURE__*/React.forwardRef(function Select2(_ref, ref) {
   var _ref$color = _ref.color,
     color = _ref$color === void 0 ? "default" : _ref$color,
     _ref$disabled = _ref.disabled,
@@ -53,6 +53,7 @@ function Select(_ref) {
     readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
     _ref$options = _ref.options,
     options = _ref$options === void 0 ? [] : _ref$options,
+    renderOptions = _ref.renderOptions,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var allowEmpty = !!placeholder;
   var inputAttrs = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, readOnly && {
@@ -103,6 +104,20 @@ function Select(_ref) {
     });
     return /* @__PURE__ */React.createElement(Select_styled.StyledSelectValue, null, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label);
   };
+  var render = function render(opt, i) {
+    if (!native && typeof renderOptions === "function") {
+      return renderOptions(opt, i);
+    }
+    var optionLabel = opt.label,
+      others = _rollupPluginBabelHelpers.objectWithoutProperties(opt, _excluded2);
+    return /* @__PURE__ */React.createElement(Select_styled.StyledSelectOption, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+      key: reactUid.uid(_rollupPluginBabelHelpers.objectSpread2({
+        label: optionLabel
+      }, others), i)
+    }, others), native && {
+      as: "option"
+    }), optionLabel);
+  };
   return /* @__PURE__ */React.createElement(FormControl.default, {
     color: color,
     id: props.id,
@@ -115,20 +130,11 @@ function Select(_ref) {
     required: required,
     size: size
   }, /* @__PURE__ */React.createElement(Select_styled.default, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+    ref: ref,
     renderValue: renderValue
   }, props), {}, {
     variant: "outlined"
-  }), options.map(function (_ref2, i) {
-    var optionLabel = _ref2.label,
-      others = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
-    return /* @__PURE__ */React.createElement(Select_styled.StyledSelectOption, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
-      key: reactUid.uid(_rollupPluginBabelHelpers.objectSpread2({
-        label: optionLabel
-      }, others), i)
-    }, others), native && {
-      as: "option"
-    }), optionLabel);
-  })));
-}
+  }), options.map(render)));
+});
 
 exports.default = Select;

package/dist/cjs/theme/index.cjs

@@ -27,10 +27,6 @@ var palette = {
     contrastText: "#fff"
   },
   secondary: {
-    // main: '#394869',
-    // light: '#526897',
-    // dark: '#2E3B57',
-    // contrastText: '#fff',
     main: "#274A9A",
     light: "#2F5BC0",
     dark: "#254794",
@@ -96,6 +92,12 @@ var palette = {
     dark: "#884900",
     contrastText: "#fff"
   },
+  violet: {
+    main: "#6E668F",
+    light: "#8b84a5",
+    dark: "#4d4764",
+    contrastText: "#fff"
+  },
   text: {
     primary: "#0e0044",
     secondary: "#274A9A",
@@ -185,7 +187,7 @@ var typography = {
     fontWeight: 400
   },
   body1: {
-    fontSize: 15,
+    fontSize: 16,
     fontWeight: 500
   },
   body2: {

package/dist/esm/components/Button.styled.js

@@ -4,7 +4,7 @@ import { css } from '@emotion/react';
 import { styled } from '@mui/material/styles';
 import { getObjectProp } from '../utils/helpers/object.js';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
 var edgesStyles = function edgesStyles(_ref) {
   var edges = _ref.edges,
     theme = _ref.theme;
@@ -28,14 +28,19 @@ var outlinedStyles = function outlinedStyles(_ref4) {
     theme = _ref4.theme;
   return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  color: ", ";\n  background-color: transparent;\n  border: 1px solid currentColor;\n\n  .MuiButton-loadingWrapper {\n    color: ", ";\n  }\n\n  &:hover,\n  &:active {\n    background-color: ", ";\n  }\n\n  ", "\n"])), getObjectProp(theme, "vars.palette.".concat(color, ".main")), getObjectProp(theme, "vars.palette.".concat(color, ".main")), getObjectProp(theme, "vars.palette.background.muted"), focusStyles);
 };
-var StyledButton = styled(Button)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref5) {
+var textStyles = function textStyles(_ref5) {
   var color = _ref5.color,
-    disabled = _ref5.disabled,
-    edges = _ref5.edges,
-    size = _ref5.size,
-    theme = _ref5.theme,
-    variant = _ref5.variant;
-  return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    && {\n      padding: 0px 24px;\n      text-transform: initial;\n      font-weight: 700;\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    }\n  "])), edgesStyles({
+    theme = _ref5.theme;
+  return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  && {\n    color: ", ";\n    background-color: transparent;\n    border: none;\n\n    .MuiButton-loadingWrapper {\n      color: ", ";\n    }\n\n    &:hover,\n    &:active {\n      background-color: ", ";\n    }\n\n    ", "\n  }\n"])), getObjectProp(theme, "vars.palette.".concat(color, ".main")), getObjectProp(theme, "vars.palette.".concat(color, ".main")), getObjectProp(theme, "vars.palette.background.muted"), focusStyles);
+};
+var StyledButton = styled(Button)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref6) {
+  var color = _ref6.color,
+    disabled = _ref6.disabled,
+    edges = _ref6.edges,
+    size = _ref6.size,
+    theme = _ref6.theme,
+    variant = _ref6.variant;
+  return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    && {\n      padding: 0px 24px;\n      text-transform: initial;\n      font-weight: 700;\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    }\n  "])), edgesStyles({
     edges: edges,
     theme: theme
   }), sizeStyles({
@@ -47,7 +52,10 @@ var StyledButton = styled(Button)(_templateObject13 || (_templateObject13 = _tag
   }), variant === "outlined" && !disabled && outlinedStyles({
     color: color,
     theme: theme
+  }), variant === "text" && !disabled && textStyles({
+    color: color,
+    theme: theme
   }));
 });
 
-export { containedStyles, StyledButton as default, disabledStyles, edgesStyles, focusStyles, outlinedStyles, sizeStyles };
+export { containedStyles, StyledButton as default, disabledStyles, edgesStyles, focusStyles, outlinedStyles, sizeStyles, textStyles };

package/dist/esm/components/Checkbox.js

@@ -43,8 +43,10 @@ function Checkbox(_ref) {
     disabled: disabled,
     margin: "none",
     sx: {
-      mt: "2px",
-      fontWeight: "500"
+      "&&": {
+        mt: "2px",
+        fontWeight: "500"
+      }
     }
   }, label));
 }

package/dist/esm/components/InputClearIcon.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import CancelIcon from '@mui/icons-material/Cancel';
+import IconButton from './IconButton.js';
+import StyledInputClearIcon from './InputClearIcon.styled.js';
+
+function InputClearIcon(_ref) {
+  var onClick = _ref.onClick;
+  return /* @__PURE__ */React.createElement(StyledInputClearIcon, null, /* @__PURE__ */React.createElement(IconButton, {
+    onClick: onClick,
+    size: "small",
+    color: "inherit",
+    edges: "rounded"
+  }, /* @__PURE__ */React.createElement(CancelIcon, null)));
+}
+
+export { InputClearIcon as default };

package/dist/esm/components/InputClearIcon.styled.js

@@ -0,0 +1,12 @@
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { styled } from '@mui/material/styles';
+import { css } from '@emotion/react';
+import { getObjectProp } from '../utils/helpers/object.js';
+
+var _templateObject, _templateObject2;
+var StyledInputClearIcon = styled("div")(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    color: ", ";\n    margin-left: 5px;\n    transition: color 200ms ease;\n    svg {\n      font-size: 1.15rem;\n    }\n\n    &:hover {\n      color: ", ";\n    }\n  "])), getObjectProp(theme, "vars.palette.grey.300", null), getObjectProp(theme, "vars.palette.grey.400", null));
+});
+
+export { StyledInputClearIcon as default };

package/dist/esm/components/MultiSelect.js

@@ -0,0 +1,193 @@
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React, { useRef } from 'react';
+import MuiMenuItem from '@mui/material/MenuItem';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import Box from './Box.js';
+import Checkbox from './Checkbox.js';
+import FormControl from './FormControl.js';
+import StyledSelect from './Select.styled.js';
+import InputClearIcon from './InputClearIcon.js';
+import { StyledMultiSelectOption } from './MultiSelect.styled.js';
+
+var _excluded = ["fullWidth", "color", "label", "helperText", "edges", "variant", "disabled", "required", "options", "onChange", "showError", "errorMessage", "inputRef", "placeholder", "IconComponent", "size", "value", "name", "inputProps", "hideLabel", "allowEmpty", "weight", "onClear", "keepClearIconSpace", "checkboxProps", "onToggleAll", "toggleAllOptionLabel"];
+function MultiSelect(_ref) {
+  var _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? true : _ref$fullWidth,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "default" : _ref$color,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    _ref$helperText = _ref.helperText,
+    helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
+    _ref$edges = _ref.edges,
+    edges = _ref$edges === void 0 ? "normal" : _ref$edges,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "outlined" : _ref$variant,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    options = _ref.options,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {
+      return null;
+    } : _ref$onChange,
+    _ref$showError = _ref.showError,
+    showError = _ref$showError === void 0 ? false : _ref$showError,
+    _ref$errorMessage = _ref.errorMessage,
+    errorMessage = _ref$errorMessage === void 0 ? "" : _ref$errorMessage,
+    _ref$inputRef = _ref.inputRef,
+    inputRef = _ref$inputRef === void 0 ? null : _ref$inputRef,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
+    _ref$IconComponent = _ref.IconComponent,
+    IconComponent = _ref$IconComponent === void 0 ? void 0 : _ref$IconComponent,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "medium" : _ref$size,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? [] : _ref$value,
+    name = _ref.name,
+    _ref$inputProps = _ref.inputProps,
+    inputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps,
+    _ref$hideLabel = _ref.hideLabel,
+    hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
+    _ref$allowEmpty = _ref.allowEmpty,
+    allowEmpty = _ref$allowEmpty === void 0 ? false : _ref$allowEmpty;
+    _ref.weight;
+    var _ref$onClear = _ref.onClear,
+    onClear = _ref$onClear === void 0 ? void 0 : _ref$onClear,
+    _ref$keepClearIconSpa = _ref.keepClearIconSpace,
+    keepClearIconSpace = _ref$keepClearIconSpa === void 0 ? false : _ref$keepClearIconSpa,
+    _ref$checkboxProps = _ref.checkboxProps,
+    checkboxProps = _ref$checkboxProps === void 0 ? {} : _ref$checkboxProps,
+    _ref$onToggleAll = _ref.onToggleAll,
+    onToggleAll = _ref$onToggleAll === void 0 ? void 0 : _ref$onToggleAll,
+    _ref$toggleAllOptionL = _ref.toggleAllOptionLabel,
+    toggleAllOptionLabel = _ref$toggleAllOptionL === void 0 ? "Select All" : _ref$toggleAllOptionL,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var ref = useRef(null);
+  var handleToggleAll = function handleToggleAll(e) {
+    e.stopPropagation();
+    var filtered = value.filter(function (val) {
+      return !isNaN(parseFloat(val)) || !!val;
+    });
+    var checked = filtered.length === options.length;
+    var vals = !checked ? options.map(function (option) {
+      return option.value;
+    }) : [];
+    if (typeof onToggleAll === "function") {
+      onToggleAll(vals);
+    }
+    return false;
+  };
+  return /* @__PURE__ */React.createElement(Box, {
+    width: fullWidth ? "100%" : "auto",
+    display: "flex",
+    align: "center"
+  }, /* @__PURE__ */React.createElement(FormControl, {
+    color: color,
+    fullWidth: fullWidth,
+    label: label,
+    name: name,
+    helperText: helperText,
+    disabled: disabled,
+    required: required,
+    showError: showError,
+    errorMessage: errorMessage,
+    edges: edges,
+    hideLabel: hideLabel
+  }, /* @__PURE__ */React.createElement(StyledSelect, _objectSpread2(_objectSpread2({
+    name: name,
+    size: size,
+    variant: variant,
+    disabled: disabled,
+    fullWidth: fullWidth,
+    displayEmpty: !!placeholder || allowEmpty,
+    error: !!(errorMessage && showError),
+    inputProps: _objectSpread2(_objectSpread2({}, inputProps), {}, {
+      ref: inputRef
+    }),
+    inputRef: ref,
+    MenuProps: _objectSpread2({
+      style: {
+        maxHeight: 500,
+        maxWidth: 250
+      },
+      getContentAnchorEl: null,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      }
+    }, !!rest.MenuProps && _objectSpread2({}, rest.MenuProps)),
+    renderValue: function renderValue(selected) {
+      var filtered = options.filter(function (option) {
+        return selected.includes(option.value);
+      });
+      if (filtered.length === 0) {
+        return /* @__PURE__ */React.createElement("span", null, placeholder);
+      }
+      return filtered.map(function (option) {
+        return option.label;
+      }).join(", ");
+    },
+    IconComponent: IconComponent === void 0 ? KeyboardArrowDownIcon : IconComponent,
+    value: value,
+    onChange: onChange
+  }, rest), {}, {
+    native: false,
+    multiple: true,
+    color: color
+  }), function () {
+    if (allowEmpty) {
+      return /* @__PURE__ */React.createElement(MuiMenuItem, {
+        selected: value.length === 0
+      }, placeholder);
+    }
+    return null;
+  }(), onToggleAll && /* @__PURE__ */React.createElement(StyledMultiSelectOption, {
+    as: "li",
+    item: true
+  }, /* @__PURE__ */React.createElement(Box, {
+    as: "span",
+    sx: {
+      pointerEvents: "auto"
+    },
+    display: "inline-flex"
+  }, /* @__PURE__ */React.createElement(Checkbox, _objectSpread2({
+    name: "".concat(name, "[]"),
+    value: "all",
+    label: toggleAllOptionLabel,
+    checked: value.length === options.length,
+    onChange: handleToggleAll,
+    color: "default",
+    size: size
+  }, checkboxProps)))), options && options.map(function (option) {
+    return /* @__PURE__ */React.createElement(MuiMenuItem, {
+      key: option.value,
+      value: option.value,
+      disabled: option.disabled,
+      "aria-selected": option.focused,
+      "data-focus": option.focused,
+      sx: {
+        "&&.Mui-selected": {
+          backgroundColor: "transparent"
+        }
+      },
+      disableRipple: true
+    }, /* @__PURE__ */React.createElement(StyledMultiSelectOption, null, /* @__PURE__ */React.createElement(Checkbox, _objectSpread2({
+      name: "".concat(name, "[]"),
+      value: option.value,
+      label: option.label,
+      checked: value.includes(option.value),
+      onChange: function onChange() {},
+      color: "default",
+      size: size
+    }, checkboxProps))));
+  }))), (onClear && value.length > 0 || keepClearIconSpace) && /* @__PURE__ */React.createElement(Box, {
+    minWidth: keepClearIconSpace ? "34px" : "initial"
+  }, onClear && value.length > 0 && /* @__PURE__ */React.createElement(InputClearIcon, {
+    onClick: onClear
+  })));
+}
+
+export { MultiSelect as default };

package/dist/esm/components/MultiSelect.styled.js

@@ -0,0 +1,11 @@
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.js';
+import styled, { css } from 'styled-components';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var StyledMultiSelectOption = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var allowEvents = _ref.allowEvents,
+    item = _ref.item;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", "\n\n    ", "\n  "])), !allowEvents && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      pointer-events: none;\n    "]))), item && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      padding-top: 6px;\n      padding-bottom: 6px;\n      padding-left: 16px;\n      padding-right: 16px;\n      box-sizing: border-box;\n      width: auto;\n      white-space: nowrap;\n    "]))));
+});
+
+export { StyledMultiSelectOption };

package/dist/esm/components/Nameplate.js

@@ -1,6 +1,5 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
-import PropTypes from 'prop-types';
 import Skeleton from '@mui/material/Skeleton';
 import MuiContainer from '@mui/material/Container';
 import Box from '@mui/material/Box';
@@ -33,8 +32,11 @@ function Nameplate(_ref) {
       justifyContent: "space-between",
       flexWrap: "nowrap",
       alignItems: "center",
-      px: isMobile ? 2 : 0,
-      py: 4
+      py: 4,
+      px: {
+        xs: 2,
+        sm: 0
+      }
     }
   }, skeleton ? /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("div", {
     style: {
@@ -47,44 +49,21 @@ function Nameplate(_ref) {
     width: isMobile ? "60%" : "30%",
     height: isMobile ? 22 : 30
   })), /* @__PURE__ */React.createElement(Skeleton, {
-    variant: "rect",
+    variant: "rectangular",
     height: 100,
     width: 100
   })) : /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("div", null, title && /* @__PURE__ */React.createElement(Text, {
-    color: "textSecondary",
-    variant: "body1",
+    color: "violet.main",
     weight: "600"
-  }, isMobile && /* @__PURE__ */React.createElement("small", null, /* @__PURE__ */React.createElement("small", null, title)), !isMobile && title), /* @__PURE__ */React.createElement(Heading, {
+  }, title), /* @__PURE__ */React.createElement(Heading, {
     as: isMobile ? "h5" : "h3",
-    weight: "400",
-    color: "textPrimary",
+    weight: "600",
+    color: "primary",
     gutterBottom: false
   }, heading, subHeading && /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("br", null), " ", subHeading))), /* @__PURE__ */React.createElement(StyledImgWrapper, null, logo && /* @__PURE__ */React.createElement(StyledImg, {
     src: logo,
-    alt: heading
-  }), !logo && heading && /* @__PURE__ */React.createElement(StyledImgText, null, heading[0].toUpperCase()))))));
+    alt: typeof heading === "string" ? heading : ""
+  }), !logo && typeof heading === "string" && heading && /* @__PURE__ */React.createElement(StyledImgText, null, heading[0].toUpperCase()))))));
 }
-Nameplate.propTypes = {
-  /**
-   * Heading
-   */
-  heading: PropTypes.string,
-  /**
-   * Sub Heading
-   */
-  subHeading: PropTypes.string,
-  /**
-   * Show skeleton layout
-   */
-  skeleton: PropTypes.bool,
-  /**
-   * URL for the property manager logo
-   */
-  logo: PropTypes.string,
-  /**
-   * Text displayed before heading
-   */
-  title: PropTypes.string
-};
 
 export { Nameplate as default };

package/dist/esm/components/Radio.js

@@ -43,8 +43,10 @@ function Radio(_ref) {
     disabled: disabled,
     margin: "none",
     sx: {
-      mt: "2px",
-      fontWeight: "500"
+      "&&": {
+        mt: "2px",
+        fontWeight: "500"
+      }
     }
   }, label));
 }

package/dist/esm/components/Select.js

@@ -1,13 +1,13 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { uid } from 'react-uid';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import FormControl from './FormControl.js';
-import StyledSelect, { StyledSelectOption, StyledPlaceholder, StyledSelectValue } from './Select.styled.js';
+import StyledSelect, { StyledPlaceholder, StyledSelectValue, StyledSelectOption } from './Select.styled.js';
 
-var _excluded = ["color", "disabled", "edges", "errorMessage", "fullWidth", "helperText", "id", "inputRef", "inputProps", "label", "IconComponent", "message", "MenuProps", "name", "native", "placeholder", "required", "showError", "size", "readOnly", "options"],
+var _excluded = ["color", "disabled", "edges", "errorMessage", "fullWidth", "helperText", "id", "inputRef", "inputProps", "label", "IconComponent", "message", "MenuProps", "name", "native", "placeholder", "required", "showError", "size", "readOnly", "options", "renderOptions"],
   _excluded2 = ["label"];
-function Select(_ref) {
+var Select = /*#__PURE__*/forwardRef(function Select2(_ref, ref) {
   var _ref$color = _ref.color,
     color = _ref$color === void 0 ? "default" : _ref$color,
     _ref$disabled = _ref.disabled,
@@ -49,6 +49,7 @@ function Select(_ref) {
     readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
     _ref$options = _ref.options,
     options = _ref$options === void 0 ? [] : _ref$options,
+    renderOptions = _ref.renderOptions,
     rest = _objectWithoutProperties(_ref, _excluded);
   var allowEmpty = !!placeholder;
   var inputAttrs = _objectSpread2(_objectSpread2({}, readOnly && {
@@ -99,6 +100,20 @@ function Select(_ref) {
     });
     return /* @__PURE__ */React.createElement(StyledSelectValue, null, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label);
   };
+  var render = function render(opt, i) {
+    if (!native && typeof renderOptions === "function") {
+      return renderOptions(opt, i);
+    }
+    var optionLabel = opt.label,
+      others = _objectWithoutProperties(opt, _excluded2);
+    return /* @__PURE__ */React.createElement(StyledSelectOption, _objectSpread2(_objectSpread2({
+      key: uid(_objectSpread2({
+        label: optionLabel
+      }, others), i)
+    }, others), native && {
+      as: "option"
+    }), optionLabel);
+  };
   return /* @__PURE__ */React.createElement(FormControl, {
     color: color,
     id: props.id,
@@ -111,20 +126,11 @@ function Select(_ref) {
     required: required,
     size: size
   }, /* @__PURE__ */React.createElement(StyledSelect, _objectSpread2(_objectSpread2({
+    ref: ref,
     renderValue: renderValue
   }, props), {}, {
     variant: "outlined"
-  }), options.map(function (_ref2, i) {
-    var optionLabel = _ref2.label,
-      others = _objectWithoutProperties(_ref2, _excluded2);
-    return /* @__PURE__ */React.createElement(StyledSelectOption, _objectSpread2(_objectSpread2({
-      key: uid(_objectSpread2({
-        label: optionLabel
-      }, others), i)
-    }, others), native && {
-      as: "option"
-    }), optionLabel);
-  })));
-}
+  }), options.map(render)));
+});
 
 export { Select as default };

package/dist/esm/theme/index.js

@@ -23,10 +23,6 @@ var palette = {
     contrastText: "#fff"
   },
   secondary: {
-    // main: '#394869',
-    // light: '#526897',
-    // dark: '#2E3B57',
-    // contrastText: '#fff',
     main: "#274A9A",
     light: "#2F5BC0",
     dark: "#254794",
@@ -92,6 +88,12 @@ var palette = {
     dark: "#884900",
     contrastText: "#fff"
   },
+  violet: {
+    main: "#6E668F",
+    light: "#8b84a5",
+    dark: "#4d4764",
+    contrastText: "#fff"
+  },
   text: {
     primary: "#0e0044",
     secondary: "#274A9A",
@@ -181,7 +183,7 @@ var typography = {
     fontWeight: 400
   },
   body1: {
-    fontSize: 15,
+    fontSize: 16,
     fontWeight: 500
   },
   body2: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenancy.nz/ui",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "Library of React UI components for tenancy.co.nz apps.",
   "author": "Tenancy.co.nz <monty@tenancy.co.nz>",
   "keywords": [