@tenancy.nz/feature-ui 1.8.6 → 1.9.3

package/dist/cjs/_virtual/_rollupPluginBabelHelpers.cjs

@@ -8,6 +8,9 @@ function _arrayLikeToArray(r, a) {
 function _arrayWithHoles(r) {
   if (Array.isArray(r)) return r;
 }
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
     value: t,
@@ -16,6 +19,9 @@ function _defineProperty(e, r, t) {
     writable: true
   }) : e[r] = t, e;
 }
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
 function _iterableToArrayLimit(r, l) {
   var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
   if (null != t) {
@@ -46,6 +52,9 @@ function _iterableToArrayLimit(r, l) {
 function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function ownKeys(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
@@ -97,6 +106,9 @@ function _taggedTemplateLiteral(e, t) {
     }
   }));
 }
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
@@ -121,14 +133,18 @@ function _unsupportedIterableToArray(r, a) {
 
 exports.arrayLikeToArray = _arrayLikeToArray;
 exports.arrayWithHoles = _arrayWithHoles;
+exports.arrayWithoutHoles = _arrayWithoutHoles;
 exports.defineProperty = _defineProperty;
+exports.iterableToArray = _iterableToArray;
 exports.iterableToArrayLimit = _iterableToArrayLimit;
 exports.nonIterableRest = _nonIterableRest;
+exports.nonIterableSpread = _nonIterableSpread;
 exports.objectSpread2 = _objectSpread2;
 exports.objectWithoutProperties = _objectWithoutProperties;
 exports.objectWithoutPropertiesLoose = _objectWithoutPropertiesLoose;
 exports.slicedToArray = _slicedToArray;
 exports.taggedTemplateLiteral = _taggedTemplateLiteral;
+exports.toConsumableArray = _toConsumableArray;
 exports.toPrimitive = _toPrimitive;
 exports.toPropertyKey = _toPropertyKey;
 exports.unsupportedIterableToArray = _unsupportedIterableToArray;

package/dist/cjs/components/AgentDetailsCard.cjs

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var ui = require('@tenancy.nz/ui');
-var EmailRoundedIcon = require('@mui/icons-material/EmailRounded');
-var CallIcon = require('@mui/icons-material/Call');
-var PersonRoundedIcon = require('@mui/icons-material/PersonRounded');
+var EmailIcon = require('@tenancy.nz/icons/Email');
+var PhoneIcon = require('@tenancy.nz/icons/Phone');
+var ProfileIcon = require('@tenancy.nz/icons/Profile');
 var IconLabel = require('./IconLabel.cjs');
 
 function AgentDetailsCard(_ref) {
@@ -35,8 +35,8 @@ function AgentDetailsCard(_ref) {
     variant: "text"
   }) : /* @__PURE__ */React.createElement(IconLabel.default, {
     color: "tertiary.main",
-    startIcon: /* @__PURE__ */React.createElement(PersonRoundedIcon, {
-      fontSize: "small"
+    startIcon: /* @__PURE__ */React.createElement(ProfileIcon, {
+      size: 22
     })
   }, /* @__PURE__ */React.createElement(ui.Heading, {
     as: "h5",
@@ -47,8 +47,8 @@ function AgentDetailsCard(_ref) {
     variant: "text"
   }) : /* @__PURE__ */React.createElement(IconLabel.default, {
     color: "tertiary.main",
-    startIcon: /* @__PURE__ */React.createElement(CallIcon, {
-      fontSize: "small"
+    startIcon: /* @__PURE__ */React.createElement(PhoneIcon, {
+      size: 22
     })
   }, /* @__PURE__ */React.createElement(ui.Text, {
     as: "span",
@@ -61,8 +61,8 @@ function AgentDetailsCard(_ref) {
     variant: "text"
   }) : /* @__PURE__ */React.createElement(IconLabel.default, {
     color: "tertiary.main",
-    startIcon: /* @__PURE__ */React.createElement(EmailRoundedIcon, {
-      fontSize: "small"
+    startIcon: /* @__PURE__ */React.createElement(EmailIcon, {
+      size: 22
     })
   }, /* @__PURE__ */React.createElement(ui.Text, {
     as: "span",

package/dist/cjs/components/CheckedIcon.cjs

@@ -3,26 +3,22 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var CheckCircleOutlineRoundedIcon = require('@mui/icons-material/CheckCircleOutlineRounded');
-var HighlightOffRoundedIcon = require('@mui/icons-material/HighlightOffRounded');
+var CircleCheckOutlinedIcon = require('@tenancy.nz/icons/CircleCheckOutlined');
+var CloseCircleOutlinedIcon = require('@tenancy.nz/icons/CloseCircleOutlined');
 var ui = require('@tenancy.nz/ui');
 
 function CheckedIcon(_ref) {
   var value = _ref.value;
   if (value === true) {
-    return /* @__PURE__ */React.createElement(CheckCircleOutlineRoundedIcon, {
-      sx: {
-        color: "success.main"
-      },
-      fontSize: "small"
+    return /* @__PURE__ */React.createElement(CircleCheckOutlinedIcon, {
+      size: 22,
+      color: ui.token("palette.semantic.icons.successColor")
     });
   }
   if (value === false) {
-    return /* @__PURE__ */React.createElement(HighlightOffRoundedIcon, {
-      sx: {
-        color: "error.main"
-      },
-      fontSize: "small"
+    return /* @__PURE__ */React.createElement(CloseCircleOutlinedIcon, {
+      size: 22,
+      color: ui.token("palette.semantic.icons.errorColor")
     });
   }
   return /* @__PURE__ */React.createElement(ui.Text, {

package/dist/cjs/components/CreditRatingTag.cjs

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var React = require('react');
+var styled = require('@emotion/styled');
+var ui = require('@tenancy.nz/ui');
+
+var _excluded = ["name", "label"];
+var _templateObject;
+var borders = {
+  average: ui.token("palette.component.creditscore.tagBorderAverage"),
+  excellent: ui.token("palette.component.creditscore.tagBorderExcellent"),
+  fair: ui.token("palette.component.creditscore.tagBorderFair"),
+  good: ui.token("palette.component.creditscore.tagBorderGood"),
+  poor: ui.token("palette.component.creditscore.tagBorderPoor")
+};
+var icons = {
+  average: ui.token("palette.component.creditscore.tagIconAverage"),
+  excellent: ui.token("palette.component.creditscore.tagIconExcellent"),
+  fair: ui.token("palette.component.creditscore.tagIconFair"),
+  good: ui.token("palette.component.creditscore.tagIconGood"),
+  poor: ui.token("palette.component.creditscore.tagIconPoor")
+};
+var names = {
+  average: "Average",
+  excellent: "Excellent",
+  fair: "Fair",
+  good: "Good",
+  poor: "Poor"
+};
+var StyledCreditRatingTag = styled(ui.Tag, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== "overrideColor";
+  }
+})(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  && {\n    border-color: ", ";\n  }\n"])), function (_ref) {
+  var overrideColor = _ref.overrideColor;
+  return overrideColor;
+});
+function CreditRatingTag(_ref2) {
+  var name = _ref2.name,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? void 0 : _ref2$label,
+    others = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded);
+  return /* @__PURE__ */React.createElement(StyledCreditRatingTag, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, others), {}, {
+    overrideColor: borders[name],
+    color: "primary",
+    variant: "outlined",
+    label: label !== null && label !== void 0 ? label : names[name],
+    startIcon: /* @__PURE__ */React.createElement(ui.Dot, {
+      color: icons[name],
+      size: "3px",
+      edges: "2px"
+    })
+  }));
+}
+
+exports.default = CreditRatingTag;

package/dist/cjs/components/IntegrationTag.cjs

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var React = require('react');
+var styled = require('@emotion/styled');
+var ui = require('@tenancy.nz/ui');
+
+var _excluded = ["name", "label"];
+var _templateObject;
+var borders = {
+  allhouse: ui.token("palette.component.partnerTag.borderAllhouse"),
+  officeWebsite: ui.token("palette.component.partnerTag.borderOfficeWebsite"),
+  oneroof: ui.token("palette.component.partnerTag.borderOneroof"),
+  realestate: ui.token("palette.component.partnerTag.borderRealestate"),
+  tenantPortal: ui.token("palette.component.partnerTag.borderTenantPortal"),
+  trademe: ui.token("palette.component.partnerTag.borderTrademe")
+};
+var names = {
+  allhouse: "AllHouse",
+  officeWebsite: "Office website",
+  oneroof: "OneRoof",
+  realestate: "realestate.co.nz",
+  tenantPortal: "Tenant portal",
+  trademe: "Trade Me"
+};
+var StyledIntegrationTag = styled(ui.Tag, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== "overrideColor";
+  }
+})(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  && {\n    border-color: ", ";\n  }\n"])), function (_ref) {
+  var overrideColor = _ref.overrideColor;
+  return overrideColor;
+});
+function IntegrationTag(_ref2) {
+  var name = _ref2.name,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? void 0 : _ref2$label,
+    others = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded);
+  return /* @__PURE__ */React.createElement(StyledIntegrationTag, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, others), {}, {
+    overrideColor: borders[name],
+    color: "primary",
+    variant: "outlined",
+    label: label !== null && label !== void 0 ? label : names[name],
+    startIcon: /* @__PURE__ */React.createElement(ui.Dot, {
+      color: borders[name],
+      size: "3px",
+      edges: "2px"
+    })
+  }));
+}
+
+exports.default = IntegrationTag;

package/dist/cjs/components/PersonCard.cjs

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var React = require('react');
+var ui = require('@tenancy.nz/ui');
+
+var _excluded = ["children", "disabled", "selected", "slots", "slotProps", "tagColor", "tagLabel", "sx"];
+function PersonCard(_ref) {
+  var _ref$children = _ref.children,
+    children = _ref$children === void 0 ? void 0 : _ref$children,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$selected = _ref.selected,
+    selected = _ref$selected === void 0 ? false : _ref$selected,
+    _ref$slots = _ref.slots,
+    slots = _ref$slots === void 0 ? {} : _ref$slots,
+    _ref$slotProps = _ref.slotProps,
+    slotProps = _ref$slotProps === void 0 ? {} : _ref$slotProps,
+    _ref$tagColor = _ref.tagColor,
+    tagColor = _ref$tagColor === void 0 ? "tertiary" : _ref$tagColor,
+    _ref$tagLabel = _ref.tagLabel,
+    tagLabel = _ref$tagLabel === void 0 ? void 0 : _ref$tagLabel,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var Footer = slots.footer;
+  var Header = slots.header;
+  var tag = {
+    color: tagColor,
+    label: selected && !tagLabel ? "Selected" : tagLabel
+  };
+  return /* @__PURE__ */React.createElement(ui.BaseSelectableCard, _rollupPluginBabelHelpers.objectSpread2({
+    color: tagColor,
+    disabled: disabled,
+    orientation: "vertical",
+    gap: 4,
+    selected: selected,
+    sx: sx
+  }, rest), tag.color && tag.label && /* @__PURE__ */React.createElement(ui.AbsBox, {
+    top: "-11px",
+    right: "-9px"
+  }, /* @__PURE__ */React.createElement(ui.Tag, {
+    label: tag.label,
+    color: tag.color,
+    variant: "contained",
+    disableIcon: true
+  })), Header && /* @__PURE__ */React.createElement(Header, _rollupPluginBabelHelpers.objectSpread2({
+    disabled: disabled
+  }, slotProps.header)), children, Footer && /* @__PURE__ */React.createElement(Footer, _rollupPluginBabelHelpers.objectSpread2({}, slotProps.footer)));
+}
+
+exports.default = PersonCard;

package/dist/cjs/components/PersonDetailHeader.cjs

@@ -0,0 +1,96 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var React = require('react');
+var Stack = require('@mui/material/Stack');
+var ui = require('@tenancy.nz/ui');
+
+var _excluded = ["avatarColor", "avatarUrl", "badgeCount", "disabled", "email", "firstName", "lastName", "mobile", "sx"];
+var Badge = ui.Badge;
+var badgeSlotProps = {
+  badge: {
+    sx: {
+      "&&": {
+        position: "relative",
+        top: "auto",
+        right: "auto",
+        transform: "none",
+        fontSize: "10px",
+        border: "none",
+        width: "16px",
+        height: "16px"
+      }
+    }
+  }
+};
+var CONTACT_TEXT = {
+  default: ui.token("palette.semantic.text.secondaryColor"),
+  disabled: ui.token("palette.semantic.text.disabledColor")
+};
+function isMultiple(badgeCount) {
+  var count = Number(badgeCount);
+  return Number.isFinite(count) && count > 1;
+}
+function PersonDetailHeader(_ref) {
+  var _ref$avatarColor = _ref.avatarColor,
+    avatarColor = _ref$avatarColor === void 0 ? "grey" : _ref$avatarColor,
+    _ref$avatarUrl = _ref.avatarUrl,
+    avatarUrl = _ref$avatarUrl === void 0 ? void 0 : _ref$avatarUrl,
+    _ref$badgeCount = _ref.badgeCount,
+    badgeCount = _ref$badgeCount === void 0 ? void 0 : _ref$badgeCount,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$email = _ref.email,
+    email = _ref$email === void 0 ? void 0 : _ref$email,
+    _ref$firstName = _ref.firstName,
+    firstName = _ref$firstName === void 0 ? void 0 : _ref$firstName,
+    _ref$lastName = _ref.lastName,
+    lastName = _ref$lastName === void 0 ? void 0 : _ref$lastName,
+    _ref$mobile = _ref.mobile,
+    mobile = _ref$mobile === void 0 ? void 0 : _ref$mobile,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var name = [firstName, lastName].filter(Boolean).join(" ");
+  var showBadge = isMultiple(badgeCount);
+  return /* @__PURE__ */React.createElement(Stack, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+    direction: "row",
+    alignItems: "center",
+    gap: 4
+  }, rest), {}, {
+    sx: sx
+  }), /* @__PURE__ */React.createElement(ui.Avatar, {
+    color: avatarColor,
+    src: avatarUrl,
+    alt: name,
+    size: 64
+  }), /* @__PURE__ */React.createElement(Stack, {
+    gap: 2
+  }, (name || showBadge) && /* @__PURE__ */React.createElement(Stack, {
+    direction: "row",
+    gap: 2,
+    alignItems: "center"
+  }, name && /* @__PURE__ */React.createElement(ui.Heading, {
+    as: "h5",
+    color: "inherit"
+  }, name), showBadge && /* @__PURE__ */React.createElement(Badge, {
+    badgeContent: badgeCount,
+    color: "primary",
+    slotProps: badgeSlotProps
+  })), (email || mobile) && /* @__PURE__ */React.createElement(Stack, {
+    sx: {
+      color: disabled ? CONTACT_TEXT.disabled : CONTACT_TEXT.default,
+      fontSize: "12px"
+    }
+  }, email && /* @__PURE__ */React.createElement(ui.Text, {
+    variant: "inherit",
+    weight: "500"
+  }, email), mobile && /* @__PURE__ */React.createElement(ui.Text, {
+    variant: "inherit",
+    weight: "500"
+  }, mobile))));
+}
+
+exports.default = PersonDetailHeader;

package/dist/cjs/components/PropertyCard.cjs

@@ -6,9 +6,9 @@ var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.c
 var React = require('react');
 var ui = require('@tenancy.nz/ui');
 var Stack = require('@mui/material/Stack');
-var BedRoundedIcon = require('@mui/icons-material/BedRounded');
-var BathtubRoundedIcon = require('@mui/icons-material/BathtubRounded');
-var DirectionsCarRoundedIcon = require('@mui/icons-material/DirectionsCarRounded');
+var BathIcon = require('@tenancy.nz/icons/Bath');
+var BedIcon = require('@tenancy.nz/icons/Bed');
+var CarParkedIcon = require('@tenancy.nz/icons/CarParked');
 var IconLabel = require('./IconLabel.cjs');
 var PropertyCard_styled = require('./PropertyCard.styled.cjs');
 
@@ -76,33 +76,27 @@ function PropertyCard(_ref) {
     alignItems: "center"
   }, (noOfBedrooms || String(noOfBedrooms) === "0") && /* @__PURE__ */React.createElement(IconLabel.default, {
     color: "text.primary",
-    startIcon: /* @__PURE__ */React.createElement(BedRoundedIcon, {
-      sx: {
-        color: "tertiary.main"
-      },
-      fontSize: "small"
+    startIcon: /* @__PURE__ */React.createElement(BedIcon, {
+      color: ui.token("palette.semantic.icons.accentColor"),
+      size: 22
     })
   }, /* @__PURE__ */React.createElement(ui.Text, {
     as: "span",
     variant: "inherit"
   }, noOfBedrooms)), (noOfBathrooms || String(noOfBathrooms) === "0") && /* @__PURE__ */React.createElement(IconLabel.default, {
     color: "text.primary",
-    startIcon: /* @__PURE__ */React.createElement(BathtubRoundedIcon, {
-      sx: {
-        color: "tertiary.main"
-      },
-      fontSize: "small"
+    startIcon: /* @__PURE__ */React.createElement(BathIcon, {
+      color: ui.token("palette.semantic.icons.accentColor"),
+      size: 22
     })
   }, /* @__PURE__ */React.createElement(ui.Text, {
     as: "span",
     variant: "inherit"
   }, noOfBathrooms)), (noOfCarparks || String(noOfCarparks) === "0") && /* @__PURE__ */React.createElement(IconLabel.default, {
     color: "text.primary",
-    startIcon: /* @__PURE__ */React.createElement(DirectionsCarRoundedIcon, {
-      sx: {
-        color: "tertiary.main"
-      },
-      fontSize: "small"
+    startIcon: /* @__PURE__ */React.createElement(CarParkedIcon, {
+      color: ui.token("palette.semantic.icons.accentColor"),
+      size: 22
     })
   }, /* @__PURE__ */React.createElement(ui.Text, {
     as: "span",

package/dist/cjs/components/SelectableCard.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var React = require('react');
+var ui = require('@tenancy.nz/ui');
+
+var _excluded = ["children", "selected", "sx", "tagColor", "tagLabel"];
+function SelectableCard(_ref) {
+  var children = _ref.children,
+    _ref$selected = _ref.selected,
+    selected = _ref$selected === void 0 ? false : _ref$selected,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx,
+    _ref$tagColor = _ref.tagColor,
+    tagColor = _ref$tagColor === void 0 ? void 0 : _ref$tagColor,
+    _ref$tagLabel = _ref.tagLabel,
+    tagLabel = _ref$tagLabel === void 0 ? void 0 : _ref$tagLabel,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var styles = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, sx), selected && tagColor && {
+    outlineColor: tagColor
+  });
+  return /* @__PURE__ */React.createElement(ui.BaseSelectableCard, _rollupPluginBabelHelpers.objectSpread2({
+    sx: styles
+  }, rest), (tagLabel || selected) && /* @__PURE__ */React.createElement(ui.AbsBox, {
+    top: -12,
+    right: -6
+  }, selected && !tagLabel ? /* @__PURE__ */React.createElement(ui.Tag, {
+    color: "green",
+    label: "Selected"
+  }) : /* @__PURE__ */React.createElement(ui.Tag, {
+    color: tagColor,
+    label: tagLabel
+  })), children);
+}
+
+exports.default = SelectableCard;

package/dist/cjs/components/StatusButton.cjs

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var React = require('react');
+var ButtonBase = require('@mui/material/ButtonBase');
+var Stack = require('@mui/material/Stack');
+var ui = require('@tenancy.nz/ui');
+
+var _excluded = ["disabled", "label", "sx", "tagColor", "tagLabel"];
+var DEFAULT_TAG_COLOR = "default";
+var styles = function styles(_ref) {
+  var disabled = _ref.disabled;
+  return {
+    fontFamily: function fontFamily(_ref2) {
+      var typography = _ref2.typography;
+      return typography.fontFamily;
+    },
+    fontSize: "12px",
+    p: 2,
+    "&&,&&:hover": {
+      color: disabled ? "grey.600" : "primary.main"
+    },
+    "&:hover": {
+      backgroundColor: ui.token("palette.component.interactiveSurface.primary.backgroundHover")
+    },
+    "&:active": {
+      backgroundColor: "transparent",
+      borderRadius: "8px",
+      outline: "2px solid",
+      outlineColor: "primary.main"
+    },
+    "&:focus": {
+      backgroundColor: ui.token("palette.component.interactiveSurface.primary.backgroundPressed")
+    }
+  };
+};
+function StatusButton(_ref3) {
+  var _ref3$disabled = _ref3.disabled,
+    disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
+    label = _ref3.label,
+    _ref3$sx = _ref3.sx,
+    sx = _ref3$sx === void 0 ? {} : _ref3$sx,
+    _ref3$tagColor = _ref3.tagColor,
+    tagColor = _ref3$tagColor === void 0 ? DEFAULT_TAG_COLOR : _ref3$tagColor,
+    _ref3$tagLabel = _ref3.tagLabel,
+    tagLabel = _ref3$tagLabel === void 0 ? void 0 : _ref3$tagLabel,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref3, _excluded);
+  return /* @__PURE__ */React.createElement(Stack, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+    component: ButtonBase,
+    disabled: disabled,
+    direction: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexWrap: "wrap",
+    gap: 2
+  }, rest), {}, {
+    sx: [].concat(_rollupPluginBabelHelpers.toConsumableArray(Array.isArray(sx) ? sx : [sx]), [styles({
+      disabled: disabled
+    })])
+  }), /* @__PURE__ */React.createElement(ui.Text, {
+    as: "span",
+    weight: "600",
+    variant: "inherit"
+  }, label), tagLabel && /* @__PURE__ */React.createElement(ui.Tag, {
+    color: tagColor || DEFAULT_TAG_COLOR,
+    label: tagLabel
+  }));
+}
+
+exports.default = StatusButton;

package/dist/cjs/components/analytics-doughnut-chart.cjs

@@ -8,10 +8,9 @@ var doughnutChart = require('./doughnut-chart.cjs');
 var partnerLogo = require('./partner-logo.cjs');
 var general = require('../utils/helpers/general.cjs');
 
-var _excluded = ["allhouseCount", "bookMeCount", "oneRoofCount", "realEstateCount", "tradeMeCount", "manualCount", "websiteCount", "heading"];
+var _excluded = ["bookMeCount", "oneRoofCount", "realEstateCount", "tradeMeCount", "manualCount", "websiteCount", "heading"];
 function AnalyticsDoughnutChart(_ref) {
-  _ref.allhouseCount;
-    var _ref$bookMeCount = _ref.bookMeCount,
+  var _ref$bookMeCount = _ref.bookMeCount,
     bookMeCount = _ref$bookMeCount === void 0 ? 0 : _ref$bookMeCount,
     _ref$oneRoofCount = _ref.oneRoofCount,
     oneRoofCount = _ref$oneRoofCount === void 0 ? 0 : _ref$oneRoofCount,

package/dist/cjs/index.cjs

@@ -8,6 +8,7 @@ var BookingTable = require('./components/BookingTable.cjs');
 var BookingTableRow = require('./components/BookingTableRow.cjs');
 var BookingTableRowHeader = require('./components/BookingTableRowHeader.cjs');
 var BookingTableRowSkeleton = require('./components/BookingTableRowSkeleton.cjs');
+var IntegrationTag = require('./components/IntegrationTag.cjs');
 var CheckedIcon = require('./components/CheckedIcon.cjs');
 var doughnutChart = require('./components/doughnut-chart.cjs');
 var analyticsDoughnutChart = require('./components/analytics-doughnut-chart.cjs');
@@ -17,7 +18,10 @@ var GridList = require('./components/GridList.cjs');
 var Hidden = require('./components/Hidden.cjs');
 var IconLabel = require('./components/IconLabel.cjs');
 var NotesCard = require('./components/NotesCard.cjs');
+var PersonCard = require('./components/PersonCard.cjs');
+var PersonDetailHeader = require('./components/PersonDetailHeader.cjs');
 var PropertyCard = require('./components/PropertyCard.cjs');
+var StatusButton = require('./components/StatusButton.cjs');
 
 
 
@@ -29,6 +33,7 @@ exports.BookingTable = BookingTable.default;
 exports.BookingTableRow = BookingTableRow.default;
 exports.BookingTableRowHeader = BookingTableRowHeader.default;
 exports.BookingTableRowSkeleton = BookingTableRowSkeleton.default;
+exports.IntegrationTag = IntegrationTag.default;
 exports.CheckedIcon = CheckedIcon.default;
 exports.DoughnutChart = doughnutChart.default;
 exports.AnalyticsDoughnutChart = analyticsDoughnutChart.default;
@@ -38,4 +43,7 @@ exports.GridList = GridList.default;
 exports.Hidden = Hidden.default;
 exports.IconLabel = IconLabel.default;
 exports.NotesCard = NotesCard.default;
+exports.PersonCard = PersonCard.default;
+exports.PersonDetailHeader = PersonDetailHeader.default;
 exports.PropertyCard = PropertyCard.default;
+exports.StatusButton = StatusButton.default;

package/dist/esm/_virtual/_rollupPluginBabelHelpers.js

@@ -6,6 +6,9 @@ function _arrayLikeToArray(r, a) {
 function _arrayWithHoles(r) {
   if (Array.isArray(r)) return r;
 }
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
     value: t,
@@ -14,6 +17,9 @@ function _defineProperty(e, r, t) {
     writable: true
   }) : e[r] = t, e;
 }
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
 function _iterableToArrayLimit(r, l) {
   var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
   if (null != t) {
@@ -44,6 +50,9 @@ function _iterableToArrayLimit(r, l) {
 function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function ownKeys(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
@@ -95,6 +104,9 @@ function _taggedTemplateLiteral(e, t) {
     }
   }));
 }
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
@@ -117,4 +129,4 @@ function _unsupportedIterableToArray(r, a) {
   }
 }
 
-export { _arrayLikeToArray as arrayLikeToArray, _arrayWithHoles as arrayWithHoles, _defineProperty as defineProperty, _iterableToArrayLimit as iterableToArrayLimit, _nonIterableRest as nonIterableRest, _objectSpread2 as objectSpread2, _objectWithoutProperties as objectWithoutProperties, _objectWithoutPropertiesLoose as objectWithoutPropertiesLoose, _slicedToArray as slicedToArray, _taggedTemplateLiteral as taggedTemplateLiteral, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey, _unsupportedIterableToArray as unsupportedIterableToArray };
+export { _arrayLikeToArray as arrayLikeToArray, _arrayWithHoles as arrayWithHoles, _arrayWithoutHoles as arrayWithoutHoles, _defineProperty as defineProperty, _iterableToArray as iterableToArray, _iterableToArrayLimit as iterableToArrayLimit, _nonIterableRest as nonIterableRest, _nonIterableSpread as nonIterableSpread, _objectSpread2 as objectSpread2, _objectWithoutProperties as objectWithoutProperties, _objectWithoutPropertiesLoose as objectWithoutPropertiesLoose, _slicedToArray as slicedToArray, _taggedTemplateLiteral as taggedTemplateLiteral, _toConsumableArray as toConsumableArray, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey, _unsupportedIterableToArray as unsupportedIterableToArray };

package/dist/esm/components/AgentDetailsCard.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Box, Skeleton, Heading, Text } from '@tenancy.nz/ui';
-import EmailRoundedIcon from '@mui/icons-material/EmailRounded';
-import CallIcon from '@mui/icons-material/Call';
-import PersonRoundedIcon from '@mui/icons-material/PersonRounded';
+import EmailIcon from '@tenancy.nz/icons/Email';
+import PhoneIcon from '@tenancy.nz/icons/Phone';
+import ProfileIcon from '@tenancy.nz/icons/Profile';
 import IconLabel from './IconLabel.js';
 
 function AgentDetailsCard(_ref) {
@@ -31,8 +31,8 @@ function AgentDetailsCard(_ref) {
     variant: "text"
   }) : /* @__PURE__ */React.createElement(IconLabel, {
     color: "tertiary.main",
-    startIcon: /* @__PURE__ */React.createElement(PersonRoundedIcon, {
-      fontSize: "small"
+    startIcon: /* @__PURE__ */React.createElement(ProfileIcon, {
+      size: 22
     })
   }, /* @__PURE__ */React.createElement(Heading, {
     as: "h5",
@@ -43,8 +43,8 @@ function AgentDetailsCard(_ref) {
     variant: "text"
   }) : /* @__PURE__ */React.createElement(IconLabel, {
     color: "tertiary.main",
-    startIcon: /* @__PURE__ */React.createElement(CallIcon, {
-      fontSize: "small"
+    startIcon: /* @__PURE__ */React.createElement(PhoneIcon, {
+      size: 22
     })
   }, /* @__PURE__ */React.createElement(Text, {
     as: "span",
@@ -57,8 +57,8 @@ function AgentDetailsCard(_ref) {
     variant: "text"
   }) : /* @__PURE__ */React.createElement(IconLabel, {
     color: "tertiary.main",
-    startIcon: /* @__PURE__ */React.createElement(EmailRoundedIcon, {
-      fontSize: "small"
+    startIcon: /* @__PURE__ */React.createElement(EmailIcon, {
+      size: 22
     })
   }, /* @__PURE__ */React.createElement(Text, {
     as: "span",

package/dist/esm/components/CheckedIcon.js

@@ -1,24 +1,20 @@
 import React from 'react';
-import CheckCircleOutlineRoundedIcon from '@mui/icons-material/CheckCircleOutlineRounded';
-import HighlightOffRoundedIcon from '@mui/icons-material/HighlightOffRounded';
-import { Text } from '@tenancy.nz/ui';
+import CircleCheckOutlinedIcon from '@tenancy.nz/icons/CircleCheckOutlined';
+import CloseCircleOutlinedIcon from '@tenancy.nz/icons/CloseCircleOutlined';
+import { token, Text } from '@tenancy.nz/ui';
 
 function CheckedIcon(_ref) {
   var value = _ref.value;
   if (value === true) {
-    return /* @__PURE__ */React.createElement(CheckCircleOutlineRoundedIcon, {
-      sx: {
-        color: "success.main"
-      },
-      fontSize: "small"
+    return /* @__PURE__ */React.createElement(CircleCheckOutlinedIcon, {
+      size: 22,
+      color: token("palette.semantic.icons.successColor")
     });
   }
   if (value === false) {
-    return /* @__PURE__ */React.createElement(HighlightOffRoundedIcon, {
-      sx: {
-        color: "error.main"
-      },
-      fontSize: "small"
+    return /* @__PURE__ */React.createElement(CloseCircleOutlinedIcon, {
+      size: 22,
+      color: token("palette.semantic.icons.errorColor")
     });
   }
   return /* @__PURE__ */React.createElement(Text, {

package/dist/esm/components/CreditRatingTag.js

@@ -0,0 +1,55 @@
+import { taggedTemplateLiteral as _taggedTemplateLiteral, objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import styled from '@emotion/styled';
+import { token, Tag, Dot } from '@tenancy.nz/ui';
+
+var _excluded = ["name", "label"];
+var _templateObject;
+var borders = {
+  average: token("palette.component.creditscore.tagBorderAverage"),
+  excellent: token("palette.component.creditscore.tagBorderExcellent"),
+  fair: token("palette.component.creditscore.tagBorderFair"),
+  good: token("palette.component.creditscore.tagBorderGood"),
+  poor: token("palette.component.creditscore.tagBorderPoor")
+};
+var icons = {
+  average: token("palette.component.creditscore.tagIconAverage"),
+  excellent: token("palette.component.creditscore.tagIconExcellent"),
+  fair: token("palette.component.creditscore.tagIconFair"),
+  good: token("palette.component.creditscore.tagIconGood"),
+  poor: token("palette.component.creditscore.tagIconPoor")
+};
+var names = {
+  average: "Average",
+  excellent: "Excellent",
+  fair: "Fair",
+  good: "Good",
+  poor: "Poor"
+};
+var StyledCreditRatingTag = styled(Tag, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== "overrideColor";
+  }
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && {\n    border-color: ", ";\n  }\n"])), function (_ref) {
+  var overrideColor = _ref.overrideColor;
+  return overrideColor;
+});
+function CreditRatingTag(_ref2) {
+  var name = _ref2.name,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? void 0 : _ref2$label,
+    others = _objectWithoutProperties(_ref2, _excluded);
+  return /* @__PURE__ */React.createElement(StyledCreditRatingTag, _objectSpread2(_objectSpread2({}, others), {}, {
+    overrideColor: borders[name],
+    color: "primary",
+    variant: "outlined",
+    label: label !== null && label !== void 0 ? label : names[name],
+    startIcon: /* @__PURE__ */React.createElement(Dot, {
+      color: icons[name],
+      size: "3px",
+      edges: "2px"
+    })
+  }));
+}
+
+export { CreditRatingTag as default };

package/dist/esm/components/IntegrationTag.js

@@ -0,0 +1,50 @@
+import { taggedTemplateLiteral as _taggedTemplateLiteral, objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import styled from '@emotion/styled';
+import { token, Tag, Dot } from '@tenancy.nz/ui';
+
+var _excluded = ["name", "label"];
+var _templateObject;
+var borders = {
+  allhouse: token("palette.component.partnerTag.borderAllhouse"),
+  officeWebsite: token("palette.component.partnerTag.borderOfficeWebsite"),
+  oneroof: token("palette.component.partnerTag.borderOneroof"),
+  realestate: token("palette.component.partnerTag.borderRealestate"),
+  tenantPortal: token("palette.component.partnerTag.borderTenantPortal"),
+  trademe: token("palette.component.partnerTag.borderTrademe")
+};
+var names = {
+  allhouse: "AllHouse",
+  officeWebsite: "Office website",
+  oneroof: "OneRoof",
+  realestate: "realestate.co.nz",
+  tenantPortal: "Tenant portal",
+  trademe: "Trade Me"
+};
+var StyledIntegrationTag = styled(Tag, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== "overrideColor";
+  }
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && {\n    border-color: ", ";\n  }\n"])), function (_ref) {
+  var overrideColor = _ref.overrideColor;
+  return overrideColor;
+});
+function IntegrationTag(_ref2) {
+  var name = _ref2.name,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? void 0 : _ref2$label,
+    others = _objectWithoutProperties(_ref2, _excluded);
+  return /* @__PURE__ */React.createElement(StyledIntegrationTag, _objectSpread2(_objectSpread2({}, others), {}, {
+    overrideColor: borders[name],
+    color: "primary",
+    variant: "outlined",
+    label: label !== null && label !== void 0 ? label : names[name],
+    startIcon: /* @__PURE__ */React.createElement(Dot, {
+      color: borders[name],
+      size: "3px",
+      edges: "2px"
+    })
+  }));
+}
+
+export { IntegrationTag as default };

package/dist/esm/components/PersonCard.js

@@ -0,0 +1,50 @@
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import { BaseSelectableCard, AbsBox, Tag } from '@tenancy.nz/ui';
+
+var _excluded = ["children", "disabled", "selected", "slots", "slotProps", "tagColor", "tagLabel", "sx"];
+function PersonCard(_ref) {
+  var _ref$children = _ref.children,
+    children = _ref$children === void 0 ? void 0 : _ref$children,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$selected = _ref.selected,
+    selected = _ref$selected === void 0 ? false : _ref$selected,
+    _ref$slots = _ref.slots,
+    slots = _ref$slots === void 0 ? {} : _ref$slots,
+    _ref$slotProps = _ref.slotProps,
+    slotProps = _ref$slotProps === void 0 ? {} : _ref$slotProps,
+    _ref$tagColor = _ref.tagColor,
+    tagColor = _ref$tagColor === void 0 ? "tertiary" : _ref$tagColor,
+    _ref$tagLabel = _ref.tagLabel,
+    tagLabel = _ref$tagLabel === void 0 ? void 0 : _ref$tagLabel,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var Footer = slots.footer;
+  var Header = slots.header;
+  var tag = {
+    color: tagColor,
+    label: selected && !tagLabel ? "Selected" : tagLabel
+  };
+  return /* @__PURE__ */React.createElement(BaseSelectableCard, _objectSpread2({
+    color: tagColor,
+    disabled: disabled,
+    orientation: "vertical",
+    gap: 4,
+    selected: selected,
+    sx: sx
+  }, rest), tag.color && tag.label && /* @__PURE__ */React.createElement(AbsBox, {
+    top: "-11px",
+    right: "-9px"
+  }, /* @__PURE__ */React.createElement(Tag, {
+    label: tag.label,
+    color: tag.color,
+    variant: "contained",
+    disableIcon: true
+  })), Header && /* @__PURE__ */React.createElement(Header, _objectSpread2({
+    disabled: disabled
+  }, slotProps.header)), children, Footer && /* @__PURE__ */React.createElement(Footer, _objectSpread2({}, slotProps.footer)));
+}
+
+export { PersonCard as default };

package/dist/esm/components/PersonDetailHeader.js

@@ -0,0 +1,92 @@
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import Stack from '@mui/material/Stack';
+import { token, Avatar, Heading, Badge as Badge$1, Text } from '@tenancy.nz/ui';
+
+var _excluded = ["avatarColor", "avatarUrl", "badgeCount", "disabled", "email", "firstName", "lastName", "mobile", "sx"];
+var Badge = Badge$1;
+var badgeSlotProps = {
+  badge: {
+    sx: {
+      "&&": {
+        position: "relative",
+        top: "auto",
+        right: "auto",
+        transform: "none",
+        fontSize: "10px",
+        border: "none",
+        width: "16px",
+        height: "16px"
+      }
+    }
+  }
+};
+var CONTACT_TEXT = {
+  default: token("palette.semantic.text.secondaryColor"),
+  disabled: token("palette.semantic.text.disabledColor")
+};
+function isMultiple(badgeCount) {
+  var count = Number(badgeCount);
+  return Number.isFinite(count) && count > 1;
+}
+function PersonDetailHeader(_ref) {
+  var _ref$avatarColor = _ref.avatarColor,
+    avatarColor = _ref$avatarColor === void 0 ? "grey" : _ref$avatarColor,
+    _ref$avatarUrl = _ref.avatarUrl,
+    avatarUrl = _ref$avatarUrl === void 0 ? void 0 : _ref$avatarUrl,
+    _ref$badgeCount = _ref.badgeCount,
+    badgeCount = _ref$badgeCount === void 0 ? void 0 : _ref$badgeCount,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$email = _ref.email,
+    email = _ref$email === void 0 ? void 0 : _ref$email,
+    _ref$firstName = _ref.firstName,
+    firstName = _ref$firstName === void 0 ? void 0 : _ref$firstName,
+    _ref$lastName = _ref.lastName,
+    lastName = _ref$lastName === void 0 ? void 0 : _ref$lastName,
+    _ref$mobile = _ref.mobile,
+    mobile = _ref$mobile === void 0 ? void 0 : _ref$mobile,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var name = [firstName, lastName].filter(Boolean).join(" ");
+  var showBadge = isMultiple(badgeCount);
+  return /* @__PURE__ */React.createElement(Stack, _objectSpread2(_objectSpread2({
+    direction: "row",
+    alignItems: "center",
+    gap: 4
+  }, rest), {}, {
+    sx: sx
+  }), /* @__PURE__ */React.createElement(Avatar, {
+    color: avatarColor,
+    src: avatarUrl,
+    alt: name,
+    size: 64
+  }), /* @__PURE__ */React.createElement(Stack, {
+    gap: 2
+  }, (name || showBadge) && /* @__PURE__ */React.createElement(Stack, {
+    direction: "row",
+    gap: 2,
+    alignItems: "center"
+  }, name && /* @__PURE__ */React.createElement(Heading, {
+    as: "h5",
+    color: "inherit"
+  }, name), showBadge && /* @__PURE__ */React.createElement(Badge, {
+    badgeContent: badgeCount,
+    color: "primary",
+    slotProps: badgeSlotProps
+  })), (email || mobile) && /* @__PURE__ */React.createElement(Stack, {
+    sx: {
+      color: disabled ? CONTACT_TEXT.disabled : CONTACT_TEXT.default,
+      fontSize: "12px"
+    }
+  }, email && /* @__PURE__ */React.createElement(Text, {
+    variant: "inherit",
+    weight: "500"
+  }, email), mobile && /* @__PURE__ */React.createElement(Text, {
+    variant: "inherit",
+    weight: "500"
+  }, mobile))));
+}
+
+export { PersonDetailHeader as default };

package/dist/esm/components/PropertyCard.js

@@ -1,10 +1,10 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
-import { Paper, Media, Box, Heading, Text } from '@tenancy.nz/ui';
+import { Paper, Media, Box, Heading, token, Text } from '@tenancy.nz/ui';
 import Stack from '@mui/material/Stack';
-import BedRoundedIcon from '@mui/icons-material/BedRounded';
-import BathtubRoundedIcon from '@mui/icons-material/BathtubRounded';
-import DirectionsCarRoundedIcon from '@mui/icons-material/DirectionsCarRounded';
+import BathIcon from '@tenancy.nz/icons/Bath';
+import BedIcon from '@tenancy.nz/icons/Bed';
+import CarParkedIcon from '@tenancy.nz/icons/CarParked';
 import IconLabel from './IconLabel.js';
 import { StyledPropertyImage, StyledPropertyDetailsBox, StyledPropertyAmenitiesBox } from './PropertyCard.styled.js';
 
@@ -72,33 +72,27 @@ function PropertyCard(_ref) {
     alignItems: "center"
   }, (noOfBedrooms || String(noOfBedrooms) === "0") && /* @__PURE__ */React.createElement(IconLabel, {
     color: "text.primary",
-    startIcon: /* @__PURE__ */React.createElement(BedRoundedIcon, {
-      sx: {
-        color: "tertiary.main"
-      },
-      fontSize: "small"
+    startIcon: /* @__PURE__ */React.createElement(BedIcon, {
+      color: token("palette.semantic.icons.accentColor"),
+      size: 22
     })
   }, /* @__PURE__ */React.createElement(Text, {
     as: "span",
     variant: "inherit"
   }, noOfBedrooms)), (noOfBathrooms || String(noOfBathrooms) === "0") && /* @__PURE__ */React.createElement(IconLabel, {
     color: "text.primary",
-    startIcon: /* @__PURE__ */React.createElement(BathtubRoundedIcon, {
-      sx: {
-        color: "tertiary.main"
-      },
-      fontSize: "small"
+    startIcon: /* @__PURE__ */React.createElement(BathIcon, {
+      color: token("palette.semantic.icons.accentColor"),
+      size: 22
     })
   }, /* @__PURE__ */React.createElement(Text, {
     as: "span",
     variant: "inherit"
   }, noOfBathrooms)), (noOfCarparks || String(noOfCarparks) === "0") && /* @__PURE__ */React.createElement(IconLabel, {
     color: "text.primary",
-    startIcon: /* @__PURE__ */React.createElement(DirectionsCarRoundedIcon, {
-      sx: {
-        color: "tertiary.main"
-      },
-      fontSize: "small"
+    startIcon: /* @__PURE__ */React.createElement(CarParkedIcon, {
+      color: token("palette.semantic.icons.accentColor"),
+      size: 22
     })
   }, /* @__PURE__ */React.createElement(Text, {
     as: "span",

package/dist/esm/components/SelectableCard.js

@@ -0,0 +1,34 @@
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import { BaseSelectableCard, AbsBox, Tag } from '@tenancy.nz/ui';
+
+var _excluded = ["children", "selected", "sx", "tagColor", "tagLabel"];
+function SelectableCard(_ref) {
+  var children = _ref.children,
+    _ref$selected = _ref.selected,
+    selected = _ref$selected === void 0 ? false : _ref$selected,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx,
+    _ref$tagColor = _ref.tagColor,
+    tagColor = _ref$tagColor === void 0 ? void 0 : _ref$tagColor,
+    _ref$tagLabel = _ref.tagLabel,
+    tagLabel = _ref$tagLabel === void 0 ? void 0 : _ref$tagLabel,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var styles = _objectSpread2(_objectSpread2({}, sx), selected && tagColor && {
+    outlineColor: tagColor
+  });
+  return /* @__PURE__ */React.createElement(BaseSelectableCard, _objectSpread2({
+    sx: styles
+  }, rest), (tagLabel || selected) && /* @__PURE__ */React.createElement(AbsBox, {
+    top: -12,
+    right: -6
+  }, selected && !tagLabel ? /* @__PURE__ */React.createElement(Tag, {
+    color: "green",
+    label: "Selected"
+  }) : /* @__PURE__ */React.createElement(Tag, {
+    color: tagColor,
+    label: tagLabel
+  })), children);
+}
+
+export { SelectableCard as default };

package/dist/esm/components/StatusButton.js

@@ -0,0 +1,68 @@
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import ButtonBase from '@mui/material/ButtonBase';
+import Stack from '@mui/material/Stack';
+import { Text, Tag, token } from '@tenancy.nz/ui';
+
+var _excluded = ["disabled", "label", "sx", "tagColor", "tagLabel"];
+var DEFAULT_TAG_COLOR = "default";
+var styles = function styles(_ref) {
+  var disabled = _ref.disabled;
+  return {
+    fontFamily: function fontFamily(_ref2) {
+      var typography = _ref2.typography;
+      return typography.fontFamily;
+    },
+    fontSize: "12px",
+    p: 2,
+    "&&,&&:hover": {
+      color: disabled ? "grey.600" : "primary.main"
+    },
+    "&:hover": {
+      backgroundColor: token("palette.component.interactiveSurface.primary.backgroundHover")
+    },
+    "&:active": {
+      backgroundColor: "transparent",
+      borderRadius: "8px",
+      outline: "2px solid",
+      outlineColor: "primary.main"
+    },
+    "&:focus": {
+      backgroundColor: token("palette.component.interactiveSurface.primary.backgroundPressed")
+    }
+  };
+};
+function StatusButton(_ref3) {
+  var _ref3$disabled = _ref3.disabled,
+    disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
+    label = _ref3.label,
+    _ref3$sx = _ref3.sx,
+    sx = _ref3$sx === void 0 ? {} : _ref3$sx,
+    _ref3$tagColor = _ref3.tagColor,
+    tagColor = _ref3$tagColor === void 0 ? DEFAULT_TAG_COLOR : _ref3$tagColor,
+    _ref3$tagLabel = _ref3.tagLabel,
+    tagLabel = _ref3$tagLabel === void 0 ? void 0 : _ref3$tagLabel,
+    rest = _objectWithoutProperties(_ref3, _excluded);
+  return /* @__PURE__ */React.createElement(Stack, _objectSpread2(_objectSpread2({
+    component: ButtonBase,
+    disabled: disabled,
+    direction: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexWrap: "wrap",
+    gap: 2
+  }, rest), {}, {
+    sx: [].concat(_toConsumableArray(Array.isArray(sx) ? sx : [sx]), [styles({
+      disabled: disabled
+    })])
+  }), /* @__PURE__ */React.createElement(Text, {
+    as: "span",
+    weight: "600",
+    variant: "inherit"
+  }, label), tagLabel && /* @__PURE__ */React.createElement(Tag, {
+    color: tagColor || DEFAULT_TAG_COLOR,
+    label: tagLabel
+  }));
+}
+
+export { StatusButton as default };

package/dist/esm/components/analytics-doughnut-chart.js

@@ -4,10 +4,9 @@ import DoughnutChart from './doughnut-chart.js';
 import PartnerLogo from './partner-logo.js';
 import { parseChartCount } from '../utils/helpers/general.js';
 
-var _excluded = ["allhouseCount", "bookMeCount", "oneRoofCount", "realEstateCount", "tradeMeCount", "manualCount", "websiteCount", "heading"];
+var _excluded = ["bookMeCount", "oneRoofCount", "realEstateCount", "tradeMeCount", "manualCount", "websiteCount", "heading"];
 function AnalyticsDoughnutChart(_ref) {
-  _ref.allhouseCount;
-    var _ref$bookMeCount = _ref.bookMeCount,
+  var _ref$bookMeCount = _ref.bookMeCount,
     bookMeCount = _ref$bookMeCount === void 0 ? 0 : _ref$bookMeCount,
     _ref$oneRoofCount = _ref.oneRoofCount,
     oneRoofCount = _ref$oneRoofCount === void 0 ? 0 : _ref$oneRoofCount,

package/dist/esm/index.js

@@ -6,6 +6,7 @@ export { default as BookingTable } from './components/BookingTable.js';
 export { default as BookingTableRow } from './components/BookingTableRow.js';
 export { default as BookingTableRowHeader } from './components/BookingTableRowHeader.js';
 export { default as BookingTableRowSkeleton } from './components/BookingTableRowSkeleton.js';
+export { default as IntegrationTag } from './components/IntegrationTag.js';
 export { default as CheckedIcon } from './components/CheckedIcon.js';
 export { default as DoughnutChart } from './components/doughnut-chart.js';
 export { default as AnalyticsDoughnutChart } from './components/analytics-doughnut-chart.js';
@@ -15,4 +16,7 @@ export { default as GridList } from './components/GridList.js';
 export { default as Hidden } from './components/Hidden.js';
 export { default as IconLabel } from './components/IconLabel.js';
 export { default as NotesCard } from './components/NotesCard.js';
+export { default as PersonCard } from './components/PersonCard.js';
+export { default as PersonDetailHeader } from './components/PersonDetailHeader.js';
 export { default as PropertyCard } from './components/PropertyCard.js';
+export { default as StatusButton } from './components/StatusButton.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tenancy.nz/feature-ui",
   "description": "React UI feature components.",
-  "version": "1.8.6",
+  "version": "1.9.3",
   "author": "TPS <https://www.tenancy.co.nz>",
   "type": "module",
   "main": "dist/cjs/index.cjs",
@@ -13,21 +13,21 @@
   "peerDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^7.2.0",
     "@mui/material": "^7.3.1",
     "chart.js": "2.7.3",
     "classnames": "^2.2.6",
     "primereact": "3.1.3",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@tenancy.nz/ui": "1.8.6"
+    "@tenancy.nz/icons": "1.9.3",
+    "@tenancy.nz/ui": "1.9.3"
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^7.2.0",
     "@mui/material": "^7.3.1",
-    "@tenancy.nz/ui": "1.8.6"
+    "@tenancy.nz/icons": "1.9.3",
+    "@tenancy.nz/ui": "1.9.3"
   },
   "dependencies": {
     "react-uid": "^2.4.0"