@tenancy.nz/feature-ui 1.4.11 → 1.5.0

package/dist/esm/components/ChartLegend.js

@@ -0,0 +1,39 @@
+import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import Stack from '@mui/material/Stack';
+import { Box, Text } from '@tenancy.nz/ui';
+
+function ChartLegend(_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? void 0 : _ref$color,
+    _ref$count = _ref.count,
+    count = _ref$count === void 0 ? void 0 : _ref$count,
+    label = _ref.label,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx;
+  return /* @__PURE__ */React.createElement(Stack, {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 1.5,
+    sx: _objectSpread2(_objectSpread2({}, sx), {}, {
+      userSelect: "none",
+      fontSize: "12px"
+    })
+  }, /* @__PURE__ */React.createElement(Box, {
+    borderRadius: "4px",
+    width: "32px",
+    height: "18px",
+    bgcolor: color || "#D9D9D9"
+  }), /* @__PURE__ */React.createElement(Box, {
+    minWidth: "24px"
+  }, count !== void 0 && count >= 0 && /* @__PURE__ */React.createElement(Text, {
+    align: "center",
+    weight: "700",
+    variant: "inherit"
+  }, count)), typeof label !== "string" ? label : /* @__PURE__ */React.createElement(Text, {
+    weight: "500",
+    variant: "inherit"
+  }, label));
+}
+
+export { ChartLegend as default };

package/dist/esm/components/CheckedIcon.js

@@ -1,19 +1,24 @@
 import React from 'react';
-import { CircleCheckIcon, CircleTimesIcon } from '@tenancy.nz/icons';
+import CheckCircleOutlineRoundedIcon from '@mui/icons-material/CheckCircleOutlineRounded';
+import HighlightOffRoundedIcon from '@mui/icons-material/HighlightOffRounded';
 import { Text } from '@tenancy.nz/ui';
 
 function CheckedIcon(_ref) {
   var value = _ref.value;
   if (value === true) {
-    return /* @__PURE__ */React.createElement(CircleCheckIcon, {
-      color: "success.main",
-      size: "20px"
+    return /* @__PURE__ */React.createElement(CheckCircleOutlineRoundedIcon, {
+      sx: {
+        color: "success.main"
+      },
+      fontSize: "small"
     });
   }
   if (value === false) {
-    return /* @__PURE__ */React.createElement(CircleTimesIcon, {
-      color: "error.main",
-      size: "20px"
+    return /* @__PURE__ */React.createElement(HighlightOffRoundedIcon, {
+      sx: {
+        color: "error.main"
+      },
+      fontSize: "small"
     });
   }
   return /* @__PURE__ */React.createElement(Text, {

package/dist/esm/components/PropertyCard.js

@@ -1,7 +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 { Icon } from '@tenancy.nz/icons';
+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 IconLabel from './IconLabel.js';
 import { StyledPropertyImage, StyledPropertyDetailsBox, StyledPropertyAmenitiesBox } from './PropertyCard.styled.js';
 
@@ -32,7 +35,6 @@ function PropertyCard(_ref) {
       alignItems: "center"
     }
   }, rest), /* @__PURE__ */React.createElement(StyledPropertyImage, null, /* @__PURE__ */React.createElement(Media, {
-    as: "img",
     title: address,
     src: imgSrc
   })), /* @__PURE__ */React.createElement(StyledPropertyDetailsBox, null, /* @__PURE__ */React.createElement(Box, null, /* @__PURE__ */React.createElement(Heading, {
@@ -56,49 +58,57 @@ function PropertyCard(_ref) {
   }, /* @__PURE__ */React.createElement(StyledPropertyAmenitiesBox, null, rent && /* @__PURE__ */React.createElement(Heading, {
     as: "h4",
     weight: "700"
-  }, rent), /* @__PURE__ */React.createElement(Box, {
-    fontSize: "16px"
+  }, rent), /* @__PURE__ */React.createElement(Stack, {
+    sx: {
+      fontSize: "16px",
+      fontWeight: "600"
+    },
+    flexDirection: "row",
+    gap: 3,
+    alignItems: "center"
   }, (noOfBedrooms || String(noOfBedrooms) === "0") && /* @__PURE__ */React.createElement(IconLabel, {
     color: "text.primary",
-    startIcon: /* @__PURE__ */React.createElement(Icon, {
-      size: 21,
-      color: "inherit",
-      name: "bed"
+    startIcon: /* @__PURE__ */React.createElement(BedRoundedIcon, {
+      sx: {
+        color: "tertiary.main"
+      },
+      fontSize: "small"
     })
   }, /* @__PURE__ */React.createElement(Text, {
     as: "span",
     variant: "inherit"
   }, noOfBedrooms)), (noOfBathrooms || String(noOfBathrooms) === "0") && /* @__PURE__ */React.createElement(IconLabel, {
     color: "text.primary",
-    startIcon: /* @__PURE__ */React.createElement(Icon, {
-      size: 21,
-      color: "inherit",
-      name: "bath"
-    }),
-    marginLeft: 3
+    startIcon: /* @__PURE__ */React.createElement(BathtubRoundedIcon, {
+      sx: {
+        color: "tertiary.main"
+      },
+      fontSize: "small"
+    })
   }, /* @__PURE__ */React.createElement(Text, {
     as: "span",
     variant: "inherit"
   }, noOfBathrooms)), (noOfCarparks || String(noOfCarparks) === "0") && /* @__PURE__ */React.createElement(IconLabel, {
     color: "text.primary",
-    startIcon: /* @__PURE__ */React.createElement(Icon, {
-      size: 21,
-      color: "inherit",
-      name: "car"
-    }),
-    marginLeft: 3
+    startIcon: /* @__PURE__ */React.createElement(DirectionsCarRoundedIcon, {
+      sx: {
+        color: "tertiary.main"
+      },
+      fontSize: "small"
+    })
   }, /* @__PURE__ */React.createElement(Text, {
     as: "span",
     variant: "inherit"
   }, noOfCarparks)))), !compact && /* @__PURE__ */React.createElement(Box, {
-    paddingLeft: "25px",
-    borderLeft: "1px solid #00000040",
+    paddingLeft: "24px",
+    borderLeft: "1px solid",
+    borderLeftColor: "grey.300",
     display: "flex",
     direction: "column",
     sx: {
       gap: {
-        xs: "18px",
-        lg: "10px",
+        xs: 4,
+        lg: 2,
         xl: 0
       },
       justifyContent: "space-between"
@@ -106,34 +116,31 @@ function PropertyCard(_ref) {
   }, viewingsCount && /* @__PURE__ */React.createElement(Box, {
     display: "flex",
     align: "center",
-    gap: "12px"
+    gap: 2
   }, /* @__PURE__ */React.createElement(Box, {
-    minWidth: "87px"
+    minWidth: "67px"
   }, /* @__PURE__ */React.createElement(Text, {
-    transform: "uppercase",
     color: "textPrimary",
     as: "span",
-    weight: "600",
+    weight: "500",
     align: "right",
-    lineHeight: "15px"
+    variant: "body2"
   }, "Viewings")), /* @__PURE__ */React.createElement(Heading, {
-    as: "h2"
+    as: "h4"
   }, viewingsCount)), enquiriesCount && /* @__PURE__ */React.createElement(Box, {
     display: "flex",
     align: "center",
-    gap: "12px"
+    gap: 2
   }, /* @__PURE__ */React.createElement(Box, {
-    minWidth: "87px"
+    minWidth: "67px"
   }, /* @__PURE__ */React.createElement(Text, {
-    transform: "uppercase",
+    variant: "body2",
     color: "textPrimary",
     as: "span",
-    weight: "600",
-    minWidth: "87px",
-    align: "right",
-    lineHeight: "15px"
+    weight: "500",
+    align: "right"
   }, "Enquiries")), /* @__PURE__ */React.createElement(Heading, {
-    as: "h2"
+    as: "h4"
   }, enquiriesCount))))));
 }
 

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

@@ -3,7 +3,7 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var StyledPropertyImage = styled.figure(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0;\n  margin: 0;\n  width: 120px;\n  height: 95px;\n  flex: 0 0 95px;\n  overflow: hidden;\n\n  ", "\n"])), function (_ref) {
+var StyledPropertyImage = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0;\n  margin: 0;\n  width: 120px;\n  height: 95px;\n  flex: 0 0 95px;\n  overflow: hidden;\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
   return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", " {\n      display: none;\n    }\n\n    ", " {\n      width: 150px;\n      height: 135px;\n      flex: 0 0 150px;\n    }\n\n    @media print {\n      width: 150px;\n      height: 135px;\n      flex: 0 0 150px;\n      display: block;\n    }\n  "])), theme.breakpoints.down("sm"), theme.breakpoints.up("sm"));
 });
@@ -11,7 +11,7 @@ var StyledPropertyDetailsBox = styled.div(_templateObject3 || (_templateObject3
   var theme = _ref2.theme;
   return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    ", " {\n      flex-direction: row;\n      align-items: center;\n    }\n  "])), theme.breakpoints.up("sm"));
 });
-var StyledPropertyAmenitiesBox = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding-right: 25px;\n  display: flex;\n  flex-direction: column;\n  margin-top: 5px;\n\n  gap: 18px;\n  min-width: 170px;\n  height: 100%;\n  justify-content: space-between;\n\n  ", "\n  @media print {\n    align-items: flex-end;\n  }\n"])), function (_ref3) {
+var StyledPropertyAmenitiesBox = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding-right: 25px;\n  display: flex;\n  flex-direction: column;\n  margin-top: 5px;\n  gap: 8px;\n  min-width: 170px;\n  height: 100%;\n  justify-content: space-between;\n\n  ", "\n  @media print {\n    align-items: flex-end;\n  }\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return "\n    @media (min-width: ".concat(theme.breakpoints.values.md, "px) {\n      align-items: flex-end;\n    }\n  ");
 });

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import DoughnutChart from './doughnut-chart.js';
+import { parseChartCount } from '../utils/helpers/general.js';
+
+function AnalyticsDoughnutChart(_ref) {
+  var _ref$allhouseCount = _ref.allhouseCount,
+    allhouseCount = _ref$allhouseCount === void 0 ? 0 : _ref$allhouseCount,
+    _ref$bookMeCount = _ref.bookMeCount,
+    bookMeCount = _ref$bookMeCount === void 0 ? 0 : _ref$bookMeCount,
+    _ref$oneRoofCount = _ref.oneRoofCount,
+    oneRoofCount = _ref$oneRoofCount === void 0 ? 0 : _ref$oneRoofCount,
+    _ref$realEstateCount = _ref.realEstateCount,
+    realEstateCount = _ref$realEstateCount === void 0 ? 0 : _ref$realEstateCount,
+    _ref$tradeMeCount = _ref.tradeMeCount,
+    tradeMeCount = _ref$tradeMeCount === void 0 ? 0 : _ref$tradeMeCount,
+    _ref$manualCount = _ref.manualCount,
+    manualCount = _ref$manualCount === void 0 ? 0 : _ref$manualCount,
+    _ref$heading = _ref.heading,
+    heading = _ref$heading === void 0 ? void 0 : _ref$heading;
+  var data = [{
+    color: "#0CC1A3",
+    count: parseChartCount(bookMeCount),
+    slug: "bookme",
+    title: "Tenant Portal"
+  }, {
+    color: "#000000",
+    count: parseChartCount(allhouseCount),
+    slug: "allhouse",
+    title: "Allhouse"
+  }, {
+    color: "#FF8500",
+    count: parseChartCount(oneRoofCount),
+    slug: "oneroof",
+    title: "OneRoof"
+  }, {
+    color: "#0098FF",
+    count: parseChartCount(realEstateCount),
+    slug: "realestate",
+    title: "realestate.co.nz"
+  }, {
+    color: "#4854D3",
+    count: parseChartCount(tradeMeCount),
+    slug: "trademe",
+    title: "Trade Me"
+  }, {
+    color: "#D9D9D9",
+    count: parseChartCount(manualCount),
+    slug: "manual",
+    title: "Manually Generated"
+  }];
+  return /* @__PURE__ */React.createElement(DoughnutChart, {
+    data: data,
+    heading: heading
+  });
+}
+
+export { AnalyticsDoughnutChart as default };

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

@@ -0,0 +1,120 @@
+import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import { uid } from 'react-uid';
+import Stack from '@mui/material/Stack';
+import { Heading, Box } from '@tenancy.nz/ui';
+import { Chart } from 'primereact/chart.js';
+import ChartLegend from './ChartLegend.js';
+
+function DoughnutChart(_ref) {
+  var data = _ref.data,
+    _ref$heading = _ref.heading,
+    heading = _ref$heading === void 0 ? void 0 : _ref$heading,
+    _ref$chartProps = _ref.chartProps,
+    chartProps = _ref$chartProps === void 0 ? {} : _ref$chartProps,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "164px" : _ref$size;
+  if (!Array.isArray(data) || data.length === 0) {
+    return null;
+  }
+  var chartLabels = data.map(function (d) {
+    return d.title;
+  });
+  var chartValues = data.map(function (d) {
+    return d.count;
+  });
+  var chartColors = data.map(function (d) {
+    return d.color;
+  });
+  return /* @__PURE__ */React.createElement(Stack, {
+    sx: {
+      position: "relative"
+    },
+    alignItems: "center",
+    gap: 4
+  }, heading && /* @__PURE__ */React.createElement(Heading, {
+    as: "h4",
+    color: "primary"
+  }, heading), /* @__PURE__ */React.createElement(Stack, {
+    flexDirection: {
+      sm: "row"
+    },
+    gap: 12,
+    alignItems: "center"
+  }, /* @__PURE__ */React.createElement(Box, {
+    width: size,
+    height: size,
+    overflow: "hidden",
+    position: "relative",
+    maxWidth: "100%",
+    sx: {
+      "&& > canvas": {
+        width: "100%",
+        height: "100%"
+      }
+    }
+  }, /* @__PURE__ */React.createElement(Chart, _objectSpread2({
+    type: "doughnut",
+    data: {
+      labels: chartLabels,
+      datasets: [{
+        data: chartValues,
+        backgroundColor: chartColors,
+        hoverBackgroundColor: chartColors,
+        borderWidth: 0
+      }]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      cutoutPercentage: 64,
+      legend: {
+        display: false
+      },
+      animation: {
+        duration: 0
+      },
+      tooltips: {
+        backgroundColor: "#0E0044",
+        titleFontColor: "#fff",
+        bodyFontColor: "#fff",
+        xPadding: 8,
+        yPadding: 8,
+        bodyFontFamily: "Montserrat, sans-serif",
+        bodyFontStyle: "semibold",
+        bodyFontSize: 14,
+        borderColor: "transparent",
+        callbacks: {
+          labelColor: function labelColor(tooltipItem, chart) {
+            var dataset = chart.config.data.datasets[tooltipItem.datasetIndex];
+            var color = dataset.backgroundColor[tooltipItem.index];
+            return {
+              borderColor: color,
+              backgroundColor: color,
+              borderWidth: 0,
+              borderRadius: 5
+            };
+          }
+        }
+      }
+    },
+    style: {
+      width: "100%",
+      height: "100%"
+    }
+  }, chartProps))), /* @__PURE__ */React.createElement(Stack, {
+    gap: 2
+  }, data.map(function (item) {
+    var color = item.color,
+      count = item.count,
+      title = item.title;
+    return /* @__PURE__ */React.createElement(ChartLegend, {
+      key: uid(item),
+      color: color,
+      count: count,
+      label: title
+    });
+  }))));
+}
+
+export { DoughnutChart as default };

package/dist/esm/index.js

@@ -7,7 +7,8 @@ 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 CheckedIcon } from './components/CheckedIcon.js';
-export { default as EnquiriesDoughnutChart } from './components/EnquiriesDoughnutChart.js';
+export { default as DoughnutChart } from './components/doughnut-chart.js';
+export { default as AnalyticsDoughnutChart } from './components/analytics-doughnut-chart.js';
 export { default as GridList } from './components/GridList.js';
 export { default as Hidden } from './components/Hidden.js';
 export { default as IconLabel } from './components/IconLabel.js';

package/dist/esm/utils/helpers/general.js

@@ -0,0 +1,11 @@
+var parseChartCount = function parseChartCount(value) {
+  if (Number.isNaN(Number.parseInt(String(value), 10))) {
+    return 0;
+  }
+  if (value === 0) {
+    return 0;
+  }
+  return Math.max(Number(value), 1e-3);
+};
+
+export { parseChartCount };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tenancy.nz/feature-ui",
   "description": "React UI feature components.",
-  "version": "1.4.11",
+  "version": "1.5.0",
   "author": "TPS <https://www.tenancy.co.nz>",
   "type": "module",
   "main": "dist/cjs/index.cjs",
@@ -13,17 +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/icons": "1.4.11",
-    "@tenancy.nz/ui": "1.4.11"
+    "@tenancy.nz/ui": "1.5.0"
   },
   "devDependencies": {
-    "@tenancy.nz/icons": "1.4.11",
-    "@tenancy.nz/ui": "1.4.11"
+    "@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.5.0"
   },
   "dependencies": {
     "react-uid": "^2.4.0"

package/dist/cjs/components/EnquiriesDoughnutChart.cjs

@@ -1,143 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var ui = require('@tenancy.nz/ui');
-var chart_js = require('primereact/chart.js');
-
-function EnquiriesDoughnutChart(_ref) {
-  var _ref$tradeMeEnquiries = _ref.tradeMeEnquiriesCount,
-    tradeMeEnquiriesCount = _ref$tradeMeEnquiries === void 0 ? 0 : _ref$tradeMeEnquiries,
-    _ref$bookMeEnquiriesC = _ref.bookMeEnquiriesCount,
-    bookMeEnquiriesCount = _ref$bookMeEnquiriesC === void 0 ? 0 : _ref$bookMeEnquiriesC,
-    _ref$manualEnquiryCou = _ref.manualEnquiryCount,
-    manualEnquiryCount = _ref$manualEnquiryCou === void 0 ? 0 : _ref$manualEnquiryCou;
-  var colors = {
-    tradeMe: "#6FD3C0",
-    bookMe: "#00C0F3",
-    manual: "#394869"
-  };
-  var chartColors = [colors.tradeMe, colors.bookMe, colors.manual];
-  return /* @__PURE__ */React.createElement(ui.Box, {
-    position: "relative",
-    display: "flex",
-    height: "100%",
-    align: "center"
-  }, /* @__PURE__ */React.createElement(ui.Text, {
-    transform: "uppercase",
-    sx: {
-      position: "absolute",
-      left: 20,
-      top: -10
-    },
-    fontSize: 13,
-    color: "textPrimary",
-    weight: "700"
-  }, "Number of enquiries"), /* @__PURE__ */React.createElement(ui.Box, {
-    width: "100%",
-    overflow: "hidden"
-  }, /* @__PURE__ */React.createElement(chart_js.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__ */React.createElement(ui.Box, {
-    maxWidth: {
-      xs: "160px",
-      xl: "180px"
-    },
-    width: "100%",
-    padding: "10px 20px",
-    mt: -4
-  }, /* @__PURE__ */React.createElement(ui.Box, {
-    width: "100%"
-  }, /* @__PURE__ */React.createElement(ui.Box, {
-    height: "10px",
-    backgroundColor: colors.tradeMe,
-    width: "100%"
-  }), /* @__PURE__ */React.createElement(ui.Box, {
-    display: "flex",
-    justify: "space-between",
-    width: "100%",
-    align: "flex-start",
-    mt: 2
-  }, /* @__PURE__ */React.createElement(ui.Text, {
-    transform: "uppercase",
-    fontSize: 12,
-    weight: "600"
-  }, "TradeMe"), /* @__PURE__ */React.createElement(ui.Text, {
-    transform: "uppercase",
-    fontSize: 32,
-    weight: "700",
-    mt: -3,
-    color: "textPrimary"
-  }, tradeMeEnquiriesCount))), /* @__PURE__ */React.createElement(ui.Box, {
-    width: "100%",
-    mt: "30px"
-  }, /* @__PURE__ */React.createElement(ui.Box, {
-    height: "10px",
-    backgroundColor: colors.bookMe,
-    width: "100%"
-  }), /* @__PURE__ */React.createElement(ui.Box, {
-    display: "flex",
-    justify: "space-between",
-    width: "100%",
-    align: "flex-start",
-    mt: 2
-  }, /* @__PURE__ */React.createElement(ui.Text, {
-    transform: "uppercase",
-    fontSize: 12,
-    weight: "600"
-  }, "Bookme"), /* @__PURE__ */React.createElement(ui.Text, {
-    transform: "uppercase",
-    fontSize: 32,
-    weight: "700",
-    mt: -3,
-    color: "textPrimary"
-  }, bookMeEnquiriesCount))), /* @__PURE__ */React.createElement(ui.Box, {
-    width: "100%",
-    mt: "30px"
-  }, /* @__PURE__ */React.createElement(ui.Box, {
-    height: "10px",
-    backgroundColor: colors.manual,
-    width: "100%"
-  }), /* @__PURE__ */React.createElement(ui.Box, {
-    display: "flex",
-    justify: "space-between",
-    width: "100%",
-    align: "flex-start",
-    mt: 2
-  }, /* @__PURE__ */React.createElement(ui.Text, {
-    transform: "uppercase",
-    fontSize: 12,
-    weight: "600"
-  }, "Manually", /* @__PURE__ */React.createElement("br", null), "Generated"), /* @__PURE__ */React.createElement(ui.Text, {
-    transform: "uppercase",
-    fontSize: 32,
-    weight: "700",
-    color: "textPrimary",
-    mt: -3
-  }, manualEnquiryCount)))));
-}
-
-exports.default = EnquiriesDoughnutChart;