@tenancy.nz/feature-ui 1.0.0 → 1.0.1

package/dist/cjs/components/BookingTableRow.styled.cjs

@@ -0,0 +1,42 @@
+"use strict";
+'use strict';
+
+var react = require('@emotion/react');
+var styled = require('@emotion/styled');
+
+const StyledBookingTableRowCell = styled("div", {
+  shouldForwardProp: (prop) => prop !== "align"
+})`
+  ${({ align = "left", header, theme }) => react.css`
+    display: flex;
+    flex-direction: column;
+    justify-content: ${header ? "center" : "flex-start"};
+    padding: 6px 12px;
+    font-size: ${header ? "12px" : "14px"};
+    color: #717680;
+    height: 100%;
+
+    ${align === "left" && `
+      align-items: flex-start;
+    `}
+
+    ${align === "center" && `
+      align-items: center;
+      text-align: center;
+    `}
+
+    ${align === "right" && `
+      align-items: flex-end;
+    `}
+
+    ${theme.breakpoints.up("md")} {
+      padding: 12px 24px;
+    }
+
+    @media print {
+      padding: 12px 24px;
+    }
+  `}
+`;
+
+exports.StyledBookingTableRowCell = StyledBookingTableRowCell;

package/dist/cjs/components/BookingTableRowHeader.cjs

@@ -0,0 +1,27 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var ui = require('@tenancy.nz/ui');
+var BookingTableRow_styled = require('./BookingTableRow.styled.cjs');
+
+function BookingTableRowHeader() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { container: true, spacing: 0, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { item: true, container: true, xs: 6, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxRuntime.jsx(BookingTableRow_styled.StyledBookingTableRowCell, { header: true, children: "Name" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { item: true, xs: 6, md: 7, children: /* @__PURE__ */ jsxRuntime.jsx(BookingTableRow_styled.StyledBookingTableRowCell, { header: true, children: "Comments" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { item: true, xs: 3, md: 2, children: /* @__PURE__ */ jsxRuntime.jsx(BookingTableRow_styled.StyledBookingTableRowCell, { header: true, children: "Status" }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { item: true, container: true, xs: 6, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxRuntime.jsx(BookingTableRow_styled.StyledBookingTableRowCell, { align: "center", header: true, children: "Attendend" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxRuntime.jsx(BookingTableRow_styled.StyledBookingTableRowCell, { align: "center", header: true, children: "Suitable" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxRuntime.jsx(BookingTableRow_styled.StyledBookingTableRowCell, { align: "center", header: true, children: "Application Sent" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxRuntime.jsx(BookingTableRow_styled.StyledBookingTableRowCell, { align: "center", header: true, children: "Application Received" }) })
+    ] })
+  ] });
+}
+
+exports.default = BookingTableRowHeader;

package/dist/cjs/components/BookingTableRowSkeleton.cjs

@@ -0,0 +1,30 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var ui = require('@tenancy.nz/ui');
+var BookingTableRow_styled = require('./BookingTableRow.styled.cjs');
+
+function BookingTableRowSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { container: true, spacing: 0, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { item: true, container: true, xs: 12, sm: 6, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { item: true, xs: 12, sm: 3, children: /* @__PURE__ */ jsxRuntime.jsx(BookingTableRow_styled.StyledBookingTableRowCell, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { width: "85%", height: "20px", variant: "text" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { item: true, xs: 12, sm: 6, md: 7, children: /* @__PURE__ */ jsxRuntime.jsxs(BookingTableRow_styled.StyledBookingTableRowCell, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { width: "95%", height: "20px", variant: "text" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { width: "80%", height: "20px", variant: "text" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { item: true, xs: 12, sm: 3, md: 2, children: /* @__PURE__ */ jsxRuntime.jsx(BookingTableRow_styled.StyledBookingTableRowCell, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { width: "90px", height: "30px", variant: "text" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { item: true, container: true, xs: 12, sm: 6, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { item: true, xs: 12, sm: 3, children: /* @__PURE__ */ jsxRuntime.jsx(BookingTableRow_styled.StyledBookingTableRowCell, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { width: "40px", height: "20px", variant: "text" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { item: true, xs: 12, sm: 3, children: /* @__PURE__ */ jsxRuntime.jsx(BookingTableRow_styled.StyledBookingTableRowCell, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { width: "40px", height: "20px", variant: "text" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { item: true, xs: 12, sm: 3, children: /* @__PURE__ */ jsxRuntime.jsx(BookingTableRow_styled.StyledBookingTableRowCell, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { width: "40px", height: "20px", variant: "text" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { item: true, xs: 12, sm: 3, children: /* @__PURE__ */ jsxRuntime.jsx(BookingTableRow_styled.StyledBookingTableRowCell, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { width: "40px", height: "20px", variant: "text" }) }) })
+    ] })
+  ] });
+}
+
+exports.default = BookingTableRowSkeleton;

package/dist/cjs/components/CheckedIcon.cjs

@@ -0,0 +1,17 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var icons = require('@tenancy.nz/icons');
+
+function CheckedIcon({ value }) {
+  if (value === true) {
+    return /* @__PURE__ */ jsxRuntime.jsx(icons.CircleCheckIcon, { color: "success.main", size: "20px" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(icons.CircleTimesIcon, { color: "error.main", size: "20px" });
+}
+
+exports.default = CheckedIcon;

package/dist/cjs/components/EnquiriesDoughnutChart.cjs

@@ -0,0 +1,167 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var ui = require('@tenancy.nz/ui');
+var chart = require('primereact/chart');
+
+function EnquiriesDoughnutChart({
+  tradeMeEnquiriesCount = 0,
+  bookMeEnquiriesCount = 0,
+  manualEnquiryCount = 0
+}) {
+  const colors = {
+    tradeMe: "#6FD3C0",
+    bookMe: "#00C0F3",
+    manual: "#394869"
+  };
+  const chartColors = [colors.tradeMe, colors.bookMe, colors.manual];
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { position: "relative", display: "flex", height: "100%", align: "center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Text,
+      {
+        transform: "uppercase",
+        sx: { position: "absolute", left: 20, top: -10 },
+        fontSize: 13,
+        color: "textPrimary",
+        weight: "700",
+        children: "Number of enquiries"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { width: "100%", overflow: "hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+      chart.Chart,
+      {
+        type: "doughnut",
+        data: {
+          labels: ["TradeMe", "BookMe", "Manual"],
+          datasets: [
+            {
+              data: [
+                Math.max(tradeMeEnquiriesCount, 1e-3),
+                Math.max(bookMeEnquiriesCount, 1e-3),
+                Math.max(manualEnquiryCount, 1e-3)
+              ],
+              backgroundColor: chartColors,
+              hoverBackgroundColor: chartColors
+            }
+          ]
+        },
+        options: {
+          legend: {
+            display: false
+          },
+          animation: {
+            duration: 0
+          }
+        },
+        style: {
+          width: "100%",
+          position: "absolute",
+          top: "18%",
+          left: "-75px"
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.Box,
+      {
+        maxWidth: { xs: "160px", xl: "180px" },
+        width: "100%",
+        padding: "10px 20px",
+        mt: -4,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { width: "100%", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { height: "10px", backgroundColor: colors.tradeMe, width: "100%" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              ui.Box,
+              {
+                display: "flex",
+                justify: "space-between",
+                width: "100%",
+                align: "flex-start",
+                mt: 2,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { transform: "uppercase", fontSize: 12, weight: "600", children: "TradeMe" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.Text,
+                    {
+                      transform: "uppercase",
+                      fontSize: 32,
+                      weight: "700",
+                      mt: -3,
+                      color: "textPrimary",
+                      children: tradeMeEnquiriesCount
+                    }
+                  )
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { width: "100%", mt: "30px", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { height: "10px", backgroundColor: colors.bookMe, width: "100%" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              ui.Box,
+              {
+                display: "flex",
+                justify: "space-between",
+                width: "100%",
+                align: "flex-start",
+                mt: 2,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { transform: "uppercase", fontSize: 12, weight: "600", children: "Bookme" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.Text,
+                    {
+                      transform: "uppercase",
+                      fontSize: 32,
+                      weight: "700",
+                      mt: -3,
+                      color: "textPrimary",
+                      children: bookMeEnquiriesCount
+                    }
+                  )
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { width: "100%", mt: "30px", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { height: "10px", backgroundColor: colors.manual, width: "100%" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              ui.Box,
+              {
+                display: "flex",
+                justify: "space-between",
+                width: "100%",
+                align: "flex-start",
+                mt: 2,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { transform: "uppercase", fontSize: 12, weight: "600", children: [
+                    "Manually",
+                    /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+                    "Generated"
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.Text,
+                    {
+                      transform: "uppercase",
+                      fontSize: 32,
+                      weight: "700",
+                      color: "textPrimary",
+                      mt: -3,
+                      children: manualEnquiryCount
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+exports.default = EnquiriesDoughnutChart;

package/dist/cjs/components/GridList.cjs

@@ -0,0 +1,87 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var ui = require('@tenancy.nz/ui');
+var Hidden = require('./Hidden.cjs');
+
+function GridList({
+  items,
+  children,
+  renderItem,
+  headerComponent,
+  footerComponent,
+  spacing,
+  loading,
+  loadingComponent,
+  emptyComponent,
+  currentPage,
+  totalPages,
+  onChangePage,
+  showHeaderComponent,
+  resultsPerPage,
+  onChangeResultsPerPage,
+  perPage,
+  scrollTopOnChangePage,
+  ...rest
+}) {
+  const gridContainerRef = React.useRef(null);
+  const childLen = React.Children.count(children);
+  const isChildren = childLen > 0;
+  let listLength = 0;
+  if (!isChildren) {
+    listLength = Array.isArray(items) ? items.length : 0;
+  } else {
+    listLength = childLen;
+  }
+  const isEmpty = listLength === 0;
+  React.useEffect(() => {
+    if (scrollTopOnChangePage && currentPage > 1 && !loading && gridContainerRef && gridContainerRef.current) {
+      gridContainerRef.current.scrollIntoView();
+    }
+  }, [currentPage, loading, gridContainerRef, scrollTopOnChangePage]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    showHeaderComponent && headerComponent,
+    loading && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: loadingComponent }),
+    !loading && isEmpty && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: emptyComponent }),
+    !loading && !isEmpty && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: gridContainerRef, style: { width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { container: true, ...rest, spacing, children: isChildren ? children : items.map(renderItem) }) }),
+    typeof onChangePage === "function" && /* @__PURE__ */ jsxRuntime.jsx(Hidden.default, { hide: isEmpty, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.Box,
+      {
+        display: "flex",
+        justify: "center",
+        align: "center",
+        direction: "column",
+        marginTop: 12,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Pagination,
+            {
+              page: currentPage,
+              count: totalPages,
+              color: "textPrimary",
+              shape: "round",
+              size: "large",
+              onChange: onChangePage
+            }
+          ),
+          typeof onChangeResultsPerPage === "function" && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { mt: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Select,
+            {
+              name: "gridListSelect",
+              value: perPage,
+              options: resultsPerPage,
+              onChange: onChangeResultsPerPage
+            }
+          ) })
+        ]
+      }
+    ) }),
+    footerComponent
+  ] });
+}
+
+exports.default = GridList;

package/dist/cjs/components/Hidden.cjs

@@ -0,0 +1,15 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+
+function Hidden({ hide = false, children }) {
+  if (hide) {
+    return null;
+  }
+  return children;
+}
+
+exports.default = Hidden;

package/dist/cjs/components/IconLabel.cjs

@@ -0,0 +1,36 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var ui = require('@tenancy.nz/ui');
+
+function IconLabel({
+  children,
+  endIcon = void 0,
+  startIcon = void 0,
+  onClick = void 0,
+  ...rest
+}) {
+  const iconLabel = /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { align: "center", display: "inline-flex", ...rest, children: [
+    startIcon && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { display: "inline-flex", color: "inherit", fontSize: "inherit", children: startIcon }),
+    children && /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Box,
+      {
+        display: "inline-flex",
+        color: "inherit",
+        fontSize: "inherit",
+        marginLeft: startIcon ? 1 : 0,
+        marginRight: endIcon ? 1 : 0,
+        fontWeight: "inherit",
+        children
+      }
+    ),
+    endIcon && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { display: "inline-flex", color: "text.muted", marginLeft: 1, children: endIcon })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: typeof onClick === "function" ? /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { onClick, children: iconLabel }) : iconLabel });
+}
+
+exports.default = IconLabel;

package/dist/cjs/components/NotesCard.cjs

@@ -0,0 +1,39 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var ui = require('@tenancy.nz/ui');
+
+const tagMap = (name) => {
+  if (typeof name !== "string") {
+    return name;
+  }
+  if (name === "feedback") {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Tag, { color: "info", label: "Feedback" });
+  }
+  if (name === "maintenance") {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Tag, { color: "orange", label: "Maintenance" });
+  }
+  return name;
+};
+function NotesCard({
+  loading = false,
+  tag = void 0,
+  text = void 0,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Paper, { inset: "medium", sx: { minHeight: "100%" }, ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { mb: "8px", mt: loading ? "-5px" : "0px", children: loading ? /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { width: "114px", height: "30px", variant: "text" }) : tagMap(tag) }),
+    loading && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { width: "90%", height: "20px", variant: "text" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { width: "80%", height: "20px", variant: "text" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { width: "70%", height: "20px", variant: "text" })
+    ] }),
+    !loading && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { variant: "body2", weight: "400", children: text })
+  ] });
+}
+
+exports.default = NotesCard;

package/dist/cjs/components/PropertyCard.cjs

@@ -0,0 +1,137 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var ui = require('@tenancy.nz/ui');
+var icons = require('@tenancy.nz/icons');
+var IconLabel = require('./IconLabel.cjs');
+var PropertyCard_styled = require('./PropertyCard.styled.cjs');
+
+function PropertyCard({
+  address = void 0,
+  compact = false,
+  enquiriesCount = void 0,
+  imgSrc,
+  noOfBedrooms = void 0,
+  noOfBathrooms = void 0,
+  noOfCarparks = void 0,
+  rent = void 0,
+  viewingsCount = void 0,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Paper,
+    {
+      overflow: false,
+      sx: {
+        display: "flex",
+        alignItems: "center"
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PropertyCard_styled.StyledPropertyImage, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Media, { as: "img", title: address, src: imgSrc }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(PropertyCard_styled.StyledPropertyDetailsBox, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { as: "h4", weight: "700", children: address }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.Box,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                ml: { sm: "auto" },
+                mt: { xs: "10px", sm: 0 },
+                "@media print": {
+                  ml: "auto"
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(PropertyCard_styled.StyledPropertyAmenitiesBox, { children: [
+                  rent && /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { as: "h4", weight: "700", children: rent }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { fontSize: "16px", children: [
+                    noOfBedrooms && /* @__PURE__ */ jsxRuntime.jsx(
+                      IconLabel.default,
+                      {
+                        color: "text.primary",
+                        startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, { size: 21, color: "inherit", name: "bed" }),
+                        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "span", variant: "inherit", children: noOfBedrooms })
+                      }
+                    ),
+                    noOfBathrooms && /* @__PURE__ */ jsxRuntime.jsx(
+                      IconLabel.default,
+                      {
+                        color: "text.primary",
+                        startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, { size: 21, color: "inherit", name: "bath" }),
+                        marginLeft: 3,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "span", variant: "inherit", children: noOfBathrooms })
+                      }
+                    ),
+                    noOfCarparks && /* @__PURE__ */ jsxRuntime.jsx(
+                      IconLabel.default,
+                      {
+                        color: "text.primary",
+                        startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, { size: 21, color: "inherit", name: "car" }),
+                        marginLeft: 3,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "span", variant: "inherit", children: noOfCarparks })
+                      }
+                    )
+                  ] })
+                ] }),
+                !compact && /* @__PURE__ */ jsxRuntime.jsxs(
+                  ui.Box,
+                  {
+                    paddingLeft: "25px",
+                    borderLeft: "1px solid #00000040",
+                    display: "flex",
+                    direction: "column",
+                    sx: {
+                      gap: { xs: "18px", lg: "10px", xl: 0 },
+                      justifyContent: "space-between"
+                    },
+                    children: [
+                      viewingsCount && /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { display: "flex", align: "center", gap: "12px", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { minWidth: "87px", children: /* @__PURE__ */ jsxRuntime.jsx(
+                          ui.Text,
+                          {
+                            transform: "uppercase",
+                            color: "textPrimary",
+                            as: "span",
+                            weight: "600",
+                            align: "right",
+                            lineHeight: "15px",
+                            children: "Viewings"
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { as: "h2", children: viewingsCount })
+                      ] }),
+                      enquiriesCount && /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { display: "flex", align: "center", gap: "12px", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { minWidth: "87px", children: /* @__PURE__ */ jsxRuntime.jsx(
+                          ui.Text,
+                          {
+                            transform: "uppercase",
+                            color: "textPrimary",
+                            as: "span",
+                            weight: "600",
+                            minWidth: "87px",
+                            align: "right",
+                            lineHeight: "15px",
+                            children: "Enquiries"
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { as: "h2", children: enquiriesCount })
+                      ] })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+exports.default = PropertyCard;

package/dist/cjs/components/PropertyCard.styled.cjs

@@ -0,0 +1,76 @@
+"use strict";
+'use strict';
+
+var react = require('@emotion/react');
+var styled = require('@emotion/styled');
+
+const StyledPropertyImage = styled.figure`
+  padding: 0;
+  margin: 0;
+  width: 120px;
+  height: 95px;
+  flex: 0 0 95px;
+  overflow: hidden;
+
+  ${({ theme }) => react.css`
+    ${theme.breakpoints.down("sm")} {
+      display: none;
+    }
+
+    ${theme.breakpoints.up("sm")} {
+      width: 150px;
+      height: 135px;
+      flex: 0 0 150px;
+    }
+
+    @media print {
+      width: 150px;
+      height: 135px;
+      flex: 0 0 150px;
+      display: block;
+    }
+  `}
+`;
+const StyledPropertyDetailsBox = styled.div`
+  display: flex;
+  width: 100%;
+  align-items: flex-start;
+  padding: 16px 24px 16px 20px;
+  flex-direction: column;
+
+  ${({ theme }) => react.css`
+    ${theme.breakpoints.up("sm")} {
+      flex-direction: row;
+      align-items: center;
+    }
+  `}
+
+  @media print {
+    flex-direction: row;
+    align-items: center;
+  }
+`;
+const StyledPropertyAmenitiesBox = styled.div`
+  padding-right: 25px;
+  display: flex;
+  flex-direction: column;
+  margin-top: 5px;
+
+  gap: 18px;
+  min-width: 170px;
+  height: 100%;
+  justify-content: space-between;
+
+  ${({ theme }) => `
+    @media (min-width: ${theme.breakpoints.values.md}px) {
+      align-items: flex-end;
+    }
+  `}
+  @media print {
+    align-items: flex-end;
+  }
+`;
+
+exports.StyledPropertyAmenitiesBox = StyledPropertyAmenitiesBox;
+exports.StyledPropertyDetailsBox = StyledPropertyDetailsBox;
+exports.StyledPropertyImage = StyledPropertyImage;