@tenancy.nz/tenant-ui 1.10.5 → 1.10.7

package/dist/cjs/components/{property-attributes.cjs → PropertyAttributes.cjs}

@@ -10,7 +10,7 @@ var BedIcon = require('@tenancy.nz/icons/Bed');
 var BathIcon = require('@tenancy.nz/icons/Bath');
 var CarParkedIcon = require('@tenancy.nz/icons/CarParked');
 var HomeIcon = require('@tenancy.nz/icons/Home');
-var iconLabel = require('./icon-label.cjs');
+var IconLabel = require('./IconLabel.cjs');
 
 function PropertyAttributes(_ref) {
   var _ref$address = _ref.address,
@@ -65,7 +65,7 @@ function PropertyAttributes(_ref) {
     alignItems: "center"
   }, !!type && /* @__PURE__ */React.createElement(ui.Grid, {
     item: true
-  }, /* @__PURE__ */React.createElement(iconLabel.default, _rollupPluginBabelHelpers.objectSpread2({
+  }, /* @__PURE__ */React.createElement(IconLabel.default, _rollupPluginBabelHelpers.objectSpread2({
     color: "tertiary",
     icon: /* @__PURE__ */React.createElement(ui.Box, {
       sx: iconBoxStyles
@@ -75,7 +75,7 @@ function PropertyAttributes(_ref) {
     text: type
   }, labelProps))), !!noOfBedrooms && /* @__PURE__ */React.createElement(ui.Grid, {
     item: true
-  }, /* @__PURE__ */React.createElement(iconLabel.default, _rollupPluginBabelHelpers.objectSpread2({
+  }, /* @__PURE__ */React.createElement(IconLabel.default, _rollupPluginBabelHelpers.objectSpread2({
     icon: /* @__PURE__ */React.createElement(ui.Box, {
       sx: iconBoxStyles
     }, /* @__PURE__ */React.createElement(BedIcon, {
@@ -84,7 +84,7 @@ function PropertyAttributes(_ref) {
     text: noOfBedrooms
   }, labelProps))), !!noOfBathrooms && /* @__PURE__ */React.createElement(ui.Grid, {
     item: true
-  }, /* @__PURE__ */React.createElement(iconLabel.default, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+  }, /* @__PURE__ */React.createElement(IconLabel.default, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
     icon: /* @__PURE__ */React.createElement(ui.Box, {
       sx: iconBoxStyles
     }, /* @__PURE__ */React.createElement(BathIcon, {
@@ -94,7 +94,7 @@ function PropertyAttributes(_ref) {
     text: noOfBathrooms
   }))), (!!noOfCarparks || noOfCarparks === 0) && /* @__PURE__ */React.createElement(ui.Grid, {
     item: true
-  }, /* @__PURE__ */React.createElement(iconLabel.default, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+  }, /* @__PURE__ */React.createElement(IconLabel.default, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
     icon: /* @__PURE__ */React.createElement(ui.Box, {
       sx: iconBoxStyles
     }, /* @__PURE__ */React.createElement(CarParkedIcon, {

package/dist/cjs/components/PropertyCard.cjs

@@ -0,0 +1,93 @@
+'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 PropertyAttributes = require('./PropertyAttributes.cjs');
+var PropertyCardHeader = require('./PropertyCardHeader.cjs');
+var PropertyCardImage = require('./PropertyCardImage.cjs');
+var RentIconLabel = require('./RentIconLabel.cjs');
+var PropertyCardImage_styled = require('./PropertyCardImage.styled.cjs');
+
+function PropertyCard(_ref) {
+  var _slots$image, _footerProps$sx;
+  var _ref$action = _ref.action,
+    action = _ref$action === void 0 ? void 0 : _ref$action,
+    _ref$addressPart = _ref.addressPart1,
+    addressPart1 = _ref$addressPart === void 0 ? "" : _ref$addressPart,
+    _ref$addressPart2 = _ref.addressPart2,
+    addressPart2 = _ref$addressPart2 === void 0 ? "" : _ref$addressPart2,
+    _ref$bedrooms = _ref.bedrooms,
+    bedrooms = _ref$bedrooms === void 0 ? void 0 : _ref$bedrooms,
+    _ref$bathrooms = _ref.bathrooms,
+    bathrooms = _ref$bathrooms === void 0 ? void 0 : _ref$bathrooms,
+    _ref$content = _ref.content,
+    content = _ref$content === void 0 ? void 0 : _ref$content,
+    _ref$fullHeight = _ref.fullHeight,
+    fullHeight = _ref$fullHeight === void 0 ? true : _ref$fullHeight,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? void 0 : _ref$onClick,
+    _ref$parkingSpaces = _ref.parkingSpaces,
+    parkingSpaces = _ref$parkingSpaces === void 0 ? void 0 : _ref$parkingSpaces,
+    _ref$rent = _ref.rent,
+    rent = _ref$rent === void 0 ? "" : _ref$rent,
+    _ref$slots = _ref.slots,
+    slots = _ref$slots === void 0 ? {} : _ref$slots,
+    _ref$slotProps = _ref.slotProps,
+    slotProps = _ref$slotProps === void 0 ? {} : _ref$slotProps;
+  var Image = (_slots$image = slots.image) !== null && _slots$image !== void 0 ? _slots$image : PropertyCardImage.default;
+  var imageProps = slotProps.image;
+  var hasImage = Boolean(slots.image || (imageProps === null || imageProps === void 0 ? void 0 : imageProps.src));
+  var HeaderBanner = slots.headerBanner;
+  var headerBannerProps = slotProps.headerBanner;
+  var FooterBanner = slots.footerBanner;
+  var footerBannerProps = slotProps.footerBanner;
+  var Footer = slots.footer;
+  var footerProps = slotProps.footer;
+  var footerSx = (_footerProps$sx = footerProps === null || footerProps === void 0 ? void 0 : footerProps.sx) !== null && _footerProps$sx !== void 0 ? _footerProps$sx : {};
+  return /* @__PURE__ */React.createElement(ui.ClickBox, {
+    onClick: onClick,
+    sx: _rollupPluginBabelHelpers.objectSpread2({}, fullHeight && {
+      height: "100%"
+    })
+  }, /* @__PURE__ */React.createElement(ui.Paper, {
+    overflow: false,
+    fill: fullHeight,
+    outlined: true,
+    stack: true
+  }, HeaderBanner && /* @__PURE__ */React.createElement(HeaderBanner, _rollupPluginBabelHelpers.objectSpread2({}, headerBannerProps)), /* @__PURE__ */React.createElement(PropertyCardImage_styled.StyledPropertyItemImgWrapper, {
+    orientation: "vertical"
+  }, hasImage && /* @__PURE__ */React.createElement(Image, _rollupPluginBabelHelpers.objectSpread2({}, imageProps))), /* @__PURE__ */React.createElement(Stack, {
+    p: 4,
+    position: "relative",
+    gap: 4,
+    flex: 1
+  }, /* @__PURE__ */React.createElement(PropertyCardHeader.default, {
+    title: addressPart1,
+    subtitle: addressPart2,
+    action: action
+  }), rent && /* @__PURE__ */React.createElement(RentIconLabel.default, {
+    text: rent
+  }), /* @__PURE__ */React.createElement(PropertyAttributes.default, {
+    noOfBedrooms: bedrooms,
+    noOfBathrooms: bathrooms,
+    noOfCarparks: parkingSpaces
+  }), content && /* @__PURE__ */React.createElement(Stack, {
+    direction: "row",
+    gap: 2,
+    alignItems: "center"
+  }, content), Footer && /* @__PURE__ */React.createElement(Footer, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, footerProps), {}, {
+    sx: _rollupPluginBabelHelpers.objectSpread2({
+      mt: "auto"
+    }, footerSx)
+  }))), FooterBanner && /* @__PURE__ */React.createElement(FooterBanner, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, footerBannerProps), {}, {
+    sx: {
+      borderTop: "1px solid ".concat(ui.token("palette.semantic.border.subtleColor"))
+    }
+  }))));
+}
+
+exports.default = PropertyCard;

package/dist/cjs/components/PropertyCardBanner.cjs

@@ -0,0 +1,49 @@
+'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 = ["label", "emphasis", "sx"];
+var base = {
+  display: "flex",
+  justifyContent: "center",
+  px: 2,
+  py: 1
+};
+var styles = {
+  subtle: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, base), {}, {
+    bgcolor: ui.token("palette.component.tag.backgroundGrey")
+  }),
+  primary: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, base), {}, {
+    bgcolor: ui.token("palette.component.tag.backgroundPrimary"),
+    color: ui.token("palette.component.tag.textWhite")
+  })
+};
+var tagColors = {
+  subtle: "gray",
+  primary: "inherit"
+};
+function PropertyCardBanner(_ref) {
+  var label = _ref.label,
+    _ref$emphasis = _ref.emphasis,
+    emphasis = _ref$emphasis === void 0 ? "subtle" : _ref$emphasis,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  if (!label) {
+    return null;
+  }
+  return /* @__PURE__ */React.createElement(ui.Box, {
+    sx: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, sx), styles[emphasis])
+  }, /* @__PURE__ */React.createElement(ui.Tag, _rollupPluginBabelHelpers.objectSpread2({
+    color: tagColors[emphasis],
+    label: label,
+    variant: "text",
+    size: "large"
+  }, rest)));
+}
+
+exports.default = PropertyCardBanner;

package/dist/cjs/components/PropertyCardFooter.cjs

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var Stack = require('@mui/material/Stack');
+var ui = require('@tenancy.nz/ui');
+
+function PropertyCardFooter(_ref) {
+  var _ref$action = _ref.action,
+    action = _ref$action === void 0 ? void 0 : _ref$action,
+    src = _ref.src,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? void 0 : _ref$title,
+    _ref$subtitle = _ref.subtitle,
+    subtitle = _ref$subtitle === void 0 ? void 0 : _ref$subtitle,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "32px" : _ref$size,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx;
+  return /* @__PURE__ */React.createElement(Stack, {
+    flexDirection: "row",
+    gap: 3,
+    alignItems: "center",
+    sx: sx
+  }, /* @__PURE__ */React.createElement(Stack, {
+    alignItems: "center",
+    justifyContent: "center",
+    sx: {
+      width: size,
+      height: size,
+      ">img": {
+        maxWidth: "100%",
+        maxHeight: "100%"
+      }
+    }
+  }, /* @__PURE__ */React.createElement("img", {
+    src: src,
+    alt: "Logo"
+  })), /* @__PURE__ */React.createElement(Stack, {
+    flex: 1,
+    minWidth: 0
+  }, title && /* @__PURE__ */React.createElement(ui.Text, {
+    weight: "500",
+    variant: "body2",
+    color: "textPrimary"
+  }, title), subtitle && /* @__PURE__ */React.createElement(ui.Text, {
+    weight: "500",
+    color: "textSecondary",
+    variant: "inherit",
+    sx: {
+      fontSize: "12px"
+    }
+  }, subtitle)), action && /* @__PURE__ */React.createElement(Stack, {
+    flexShrink: 0,
+    ml: "auto",
+    alignItems: "flex-end"
+  }, action));
+}
+
+exports.default = PropertyCardFooter;

package/dist/cjs/components/PropertyCardHeader.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var Stack = require('@mui/material/Stack');
+var ui = require('@tenancy.nz/ui');
+
+function PropertyCardHeader(_ref) {
+  var _ref$action = _ref.action,
+    action = _ref$action === void 0 ? void 0 : _ref$action,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "" : _ref$title,
+    _ref$subtitle = _ref.subtitle,
+    subtitle = _ref$subtitle === void 0 ? "" : _ref$subtitle;
+  return /* @__PURE__ */React.createElement(Stack, {
+    direction: "row",
+    gap: 4,
+    alignItems: "center"
+  }, /* @__PURE__ */React.createElement(Stack, {
+    gap: 2,
+    flex: 1,
+    minWidth: 0
+  }, /* @__PURE__ */React.createElement(ui.Heading, {
+    as: "h4",
+    color: "primary"
+  }, title), /* @__PURE__ */React.createElement(ui.Text, {
+    sx: {
+      fontSize: "12px"
+    },
+    weight: "500",
+    color: "secondary"
+  }, subtitle)), action && /* @__PURE__ */React.createElement(Stack, {
+    flexShrink: 0,
+    ml: "auto",
+    alignItems: "flex-end"
+  }, action));
+}
+
+exports.default = PropertyCardHeader;

package/dist/cjs/components/PropertyCardImage.cjs

@@ -0,0 +1,21 @@
+'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 = ["src"];
+function PropertyCardImage(_ref) {
+  var _ref$src = _ref.src,
+    src = _ref$src === void 0 ? "" : _ref$src,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  return /* @__PURE__ */React.createElement(ui.Media, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+    as: "img"
+  }, rest), {}, {
+    src: src
+  }));
+}
+
+exports.default = PropertyCardImage;

package/dist/cjs/components/{property-card.styled.cjs → PropertyCardImage.styled.cjs}

@@ -1,8 +1,8 @@
 'use strict';
 
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
-var styled = require('@emotion/styled');
 var react = require('@emotion/react');
+var styles = require('@mui/material/styles');
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 var verticalStyles = function verticalStyles() {
@@ -10,9 +10,13 @@ var verticalStyles = function verticalStyles() {
 };
 var horizontalStyles = function horizontalStyles(_ref) {
   var theme = _ref.theme;
-  return react.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", " {\n    ", "\n  }\n\n  ", " {\n    flex: 1;\n    min-height: 220px;\n    width: 100%;\n    max-width: 308px;\n  }\n"])), theme.breakpoints.down("md"), verticalStyles(), theme.breakpoints.up("md"));
+  return react.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", " {\n    ", "\n  }\n\n  ", " {\n    flex: 1;\n    min-height: 118px;\n    width: 100%;\n    max-width: 180px;\n\n    > * {\n      position: absolute;\n      inset: 0;\n    }\n  }\n"])), theme.breakpoints.down("md"), verticalStyles(), theme.breakpoints.up("md"));
 };
-var StyledPropertyItemImgWrapper = styled.figure(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref2) {
+var StyledPropertyItemImgWrapper = styles.styled("figure", {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== "orientation";
+  }
+})(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref2) {
   var orientation = _ref2.orientation,
     theme = _ref2.theme;
   return react.css(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    background-color: #ebebeb;\n    background-image:\n      linear-gradient(45deg, #fff 25%, transparent 25%),\n      linear-gradient(-45deg, #fff 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, #fff 75%),\n      linear-gradient(-45deg, transparent 75%, #fff 75%);\n    background-size: 40px 40px;\n    background-position:\n      0 0,\n      0 20px,\n      20px -20px,\n      -20px 0px;\n    margin: 0;\n    padding: 0;\n    overflow: hidden;\n    position: relative;\n\n    ", "\n    ", "\n  "])), orientation === "horizontal" && horizontalStyles({

package/dist/cjs/components/{property-card-skeleton.cjs → PropertyCardSkeleton.cjs}

@@ -22,6 +22,7 @@ function PropertyCardSkeleton(_ref) {
     })
   }, /* @__PURE__ */React.createElement(ui.Paper, {
     overflow: false,
+    outlined: true,
     sx: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
       display: "flex"
     }, orientation === "vertical" && {

package/dist/cjs/components/PropertyOverviewCard.cjs

@@ -0,0 +1,88 @@
+'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 PropertyCardHeader = require('./PropertyCardHeader.cjs');
+var PropertyCardImage = require('./PropertyCardImage.cjs');
+var PropertyCardImage_styled = require('./PropertyCardImage.styled.cjs');
+
+function PropertyOverviewCard(_ref) {
+  var _slots$image, _footerProps$sx;
+  var _ref$action = _ref.action,
+    action = _ref$action === void 0 ? void 0 : _ref$action,
+    _ref$addressPart = _ref.addressPart1,
+    addressPart1 = _ref$addressPart === void 0 ? "" : _ref$addressPart,
+    _ref$addressPart2 = _ref.addressPart2,
+    addressPart2 = _ref$addressPart2 === void 0 ? "" : _ref$addressPart2,
+    _ref$content = _ref.content,
+    content = _ref$content === void 0 ? void 0 : _ref$content,
+    _ref$fullHeight = _ref.fullHeight,
+    fullHeight = _ref$fullHeight === void 0 ? true : _ref$fullHeight,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? void 0 : _ref$onClick,
+    _ref$slots = _ref.slots,
+    slots = _ref$slots === void 0 ? {} : _ref$slots,
+    _ref$slotProps = _ref.slotProps,
+    slotProps = _ref$slotProps === void 0 ? {} : _ref$slotProps;
+  var Image = (_slots$image = slots.image) !== null && _slots$image !== void 0 ? _slots$image : PropertyCardImage.default;
+  var imageProps = slotProps.image;
+  var hasImage = Boolean(slots.image || (imageProps === null || imageProps === void 0 ? void 0 : imageProps.src));
+  var HeaderBanner = slots.headerBanner;
+  var headerBannerProps = slotProps.headerBanner;
+  var FooterBanner = slots.footerBanner;
+  var footerBannerProps = slotProps.footerBanner;
+  var Footer = slots.footer;
+  var footerProps = slotProps.footer;
+  var footerSx = (_footerProps$sx = footerProps === null || footerProps === void 0 ? void 0 : footerProps.sx) !== null && _footerProps$sx !== void 0 ? _footerProps$sx : {};
+  return /* @__PURE__ */React.createElement(ui.ClickBox, {
+    onClick: onClick,
+    sx: _rollupPluginBabelHelpers.objectSpread2({}, fullHeight && {
+      height: "100%"
+    })
+  }, /* @__PURE__ */React.createElement(ui.Paper, {
+    overflow: false,
+    fill: fullHeight,
+    outlined: true,
+    stack: true,
+    sx: {
+      flexDirection: {
+        xs: "column",
+        md: "row"
+      }
+    }
+  }, /* @__PURE__ */React.createElement(Stack, {
+    sx: {
+      width: "100%",
+      maxWidth: {
+        md: "180px"
+      }
+    }
+  }, HeaderBanner && /* @__PURE__ */React.createElement(HeaderBanner, _rollupPluginBabelHelpers.objectSpread2({}, headerBannerProps)), /* @__PURE__ */React.createElement(PropertyCardImage_styled.StyledPropertyItemImgWrapper, {
+    orientation: "horizontal"
+  }, hasImage && /* @__PURE__ */React.createElement(Image, _rollupPluginBabelHelpers.objectSpread2({}, imageProps))), FooterBanner && /* @__PURE__ */React.createElement(FooterBanner, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, footerBannerProps), {}, {
+    sx: {
+      borderTop: "1px solid ".concat(ui.token("palette.semantic.border.subtleColor"))
+    }
+  }))), /* @__PURE__ */React.createElement(Stack, {
+    p: 4,
+    position: "relative",
+    gap: 4,
+    flex: 1
+  }, /* @__PURE__ */React.createElement(PropertyCardHeader.default, {
+    title: addressPart1,
+    subtitle: addressPart2,
+    action: action
+  }), content && /* @__PURE__ */React.createElement(Stack, {
+    alignItems: "flex-start"
+  }, content), Footer && /* @__PURE__ */React.createElement(Footer, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, footerProps), {}, {
+    sx: _rollupPluginBabelHelpers.objectSpread2({
+      mt: "auto"
+    }, footerSx)
+  })))));
+}
+
+exports.default = PropertyOverviewCard;

package/dist/cjs/components/PropertyOverviewCardSkeleton.cjs

@@ -0,0 +1,75 @@
+'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');
+
+function PropertyHorizontalCardSkeleton(_ref) {
+  var _ref$fullHeight = _ref.fullHeight,
+    fullHeight = _ref$fullHeight === void 0 ? true : _ref$fullHeight;
+  return /* @__PURE__ */React.createElement(Stack, {
+    sx: _rollupPluginBabelHelpers.objectSpread2({}, fullHeight && {
+      height: "100%"
+    })
+  }, /* @__PURE__ */React.createElement(ui.Paper, {
+    overflow: false,
+    fill: fullHeight,
+    outlined: true,
+    stack: true,
+    sx: {
+      flexDirection: {
+        xs: "column",
+        md: "row"
+      }
+    }
+  }, /* @__PURE__ */React.createElement(Stack, {
+    sx: {
+      width: "100%",
+      maxWidth: {
+        md: "180px"
+      }
+    }
+  }, /* @__PURE__ */React.createElement(ui.Skeleton, {
+    variant: "rectangular",
+    sx: {
+      width: "100%",
+      height: {
+        xs: "220px",
+        md: "118px"
+      },
+      minHeight: {
+        md: "118px"
+      },
+      flex: {
+        md: 1
+      }
+    }
+  })), /* @__PURE__ */React.createElement(Stack, {
+    p: 4,
+    position: "relative",
+    gap: 4,
+    flex: 1
+  }, /* @__PURE__ */React.createElement(Stack, {
+    gap: 2
+  }, /* @__PURE__ */React.createElement(ui.Skeleton, {
+    variant: "text",
+    width: "60%",
+    height: 24
+  }), /* @__PURE__ */React.createElement(ui.Skeleton, {
+    variant: "text",
+    width: "50%",
+    height: 16
+  })), /* @__PURE__ */React.createElement(Stack, {
+    mt: "auto",
+    pt: 4
+  }, /* @__PURE__ */React.createElement(ui.Skeleton, {
+    variant: "text",
+    width: "118px",
+    height: 40
+  })))));
+}
+
+exports.default = PropertyHorizontalCardSkeleton;

package/dist/cjs/components/{rent-icon-label.cjs → RentIconLabel.cjs}

@@ -6,13 +6,13 @@ var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.c
 var React = require('react');
 var DollarCircleIcon = require('@tenancy.nz/icons/DollarCircle');
 var ui = require('@tenancy.nz/ui');
-var iconLabel = require('./icon-label.cjs');
+var IconLabel = require('./IconLabel.cjs');
 
 var _excluded = ["text"];
 function RentIconLabel(_ref) {
   var text = _ref.text,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  return /* @__PURE__ */React.createElement(iconLabel.default, _rollupPluginBabelHelpers.objectSpread2({
+  return /* @__PURE__ */React.createElement(IconLabel.default, _rollupPluginBabelHelpers.objectSpread2({
     icon: /* @__PURE__ */React.createElement(DollarCircleIcon, {
       color: ui.token("palette.semantic.icons.accentColor")
     }),

package/dist/cjs/index.cjs

@@ -1,17 +1,27 @@
 'use strict';
 
-var agencyLogo = require('./components/agency-logo.cjs');
-var iconLabel = require('./components/icon-label.cjs');
-var propertyAttributes = require('./components/property-attributes.cjs');
-var propertyCard = require('./components/property-card.cjs');
-var propertyCardSkeleton = require('./components/property-card-skeleton.cjs');
-var rentIconLabel = require('./components/rent-icon-label.cjs');
+var IconLabel = require('./components/IconLabel.cjs');
+var PropertyAttributes = require('./components/PropertyAttributes.cjs');
+var PropertyCard = require('./components/PropertyCard.cjs');
+var PropertyCardBanner = require('./components/PropertyCardBanner.cjs');
+var PropertyCardFooter = require('./components/PropertyCardFooter.cjs');
+var PropertyCardHeader = require('./components/PropertyCardHeader.cjs');
+var PropertyCardImage = require('./components/PropertyCardImage.cjs');
+var PropertyCardSkeleton = require('./components/PropertyCardSkeleton.cjs');
+var PropertyOverviewCard = require('./components/PropertyOverviewCard.cjs');
+var PropertyOverviewCardSkeleton = require('./components/PropertyOverviewCardSkeleton.cjs');
+var RentIconLabel = require('./components/RentIconLabel.cjs');
 
 
 
-exports.AgencyLogo = agencyLogo.default;
-exports.IconLabel = iconLabel.default;
-exports.PropertyAttributes = propertyAttributes.default;
-exports.PropertyCard = propertyCard.default;
-exports.PropertyCardSkeleton = propertyCardSkeleton.default;
-exports.RentIconLabel = rentIconLabel.default;
+exports.IconLabel = IconLabel.default;
+exports.PropertyAttributes = PropertyAttributes.default;
+exports.PropertyCard = PropertyCard.default;
+exports.PropertyCardBanner = PropertyCardBanner.default;
+exports.PropertyCardFooter = PropertyCardFooter.default;
+exports.PropertyCardHeader = PropertyCardHeader.default;
+exports.PropertyCardImage = PropertyCardImage.default;
+exports.PropertyCardSkeleton = PropertyCardSkeleton.default;
+exports.PropertyHorizontalCard = PropertyOverviewCard.default;
+exports.PropertyHorizontalCardSkeleton = PropertyOverviewCardSkeleton.default;
+exports.RentIconLabel = RentIconLabel.default;

package/dist/esm/components/{property-attributes.js → PropertyAttributes.js}

@@ -6,7 +6,7 @@ import BedIcon from '@tenancy.nz/icons/Bed';
 import BathIcon from '@tenancy.nz/icons/Bath';
 import CarParkedIcon from '@tenancy.nz/icons/CarParked';
 import HomeIcon from '@tenancy.nz/icons/Home';
-import IconLabel from './icon-label.js';
+import IconLabel from './IconLabel.js';
 
 function PropertyAttributes(_ref) {
   var _ref$address = _ref.address,