@tenancy.nz/feature-ui 1.10.6 → 1.10.8

package/dist/esm/components/AnalyticsSection.js

@@ -1,182 +0,0 @@
-import React from 'react';
-import { uid } from 'react-uid';
-import Stack from '@mui/material/Stack';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import { Paper, Text, Grid } from '@tenancy.nz/ui';
-import AnalyticsBox from './AnalyticsBox.js';
-import AnalyticsDoughnutChart from './analytics-doughnut-chart.js';
-
-function AnalyticsSection(_ref) {
-  var viewingsCount = _ref.viewingsCount,
-    bookingsCount = _ref.bookingsCount,
-    attendeesCount = _ref.attendeesCount,
-    cancellationsCount = _ref.cancellationsCount,
-    applicationsCount = _ref.applicationsCount,
-    averageRent = _ref.averageRent,
-    textUsage = _ref.textUsage,
-    agreementsCount = _ref.agreementsCount,
-    agreementsFinalisedCount = _ref.agreementsFinalisedCount,
-    filterDaysCount = _ref.filterDaysCount,
-    allHouseEnquiriesCount = _ref.allHouseEnquiriesCount,
-    bookMeEnquiriesCount = _ref.bookMeEnquiriesCount,
-    oneRoofEnquiriesCount = _ref.oneRoofEnquiriesCount,
-    realestateEnquiriesCount = _ref.realestateEnquiriesCount,
-    tradeMeEnquiriesCount = _ref.tradeMeEnquiriesCount,
-    manualEnquiryCount = _ref.manualEnquiryCount,
-    websiteEnquiriesCount = _ref.websiteEnquiriesCount,
-    allHouseBookingsCount = _ref.allHouseBookingsCount,
-    bookMeBookingsCount = _ref.bookMeBookingsCount,
-    oneRoofBookingsCount = _ref.oneRoofBookingsCount,
-    realestateBookingsCount = _ref.realestateBookingsCount,
-    tradeMeBookingsCount = _ref.tradeMeBookingsCount,
-    manualBookingsCount = _ref.manualBookingsCount,
-    websiteBookingsCount = _ref.websiteBookingsCount,
-    _ref$outlinedItems = _ref.outlinedItems,
-    outlinedItems = _ref$outlinedItems === void 0 ? false : _ref$outlinedItems;
-  var isXlUp = useMediaQuery(function (theme) {
-    return theme.breakpoints.up("xl");
-  });
-  var stats = [{
-    label: "Viewings",
-    value: viewingsCount
-  }, {
-    label: "Bookings",
-    value: bookingsCount
-  }, {
-    label: "Attendees",
-    value: attendeesCount
-  }, {
-    label: "Cancellations",
-    value: cancellationsCount
-  }, {
-    label: "Applications",
-    value: applicationsCount
-  }, {
-    label: "Average Rent",
-    value: "$".concat(averageRent)
-  }, {
-    label: "Text Usage Total",
-    value: textUsage
-  }];
-  return /* @__PURE__ */React.createElement(Stack, {
-    gap: 6
-  }, /* @__PURE__ */React.createElement(Stack, {
-    flexDirection: "row",
-    gap: 6,
-    flexWrap: "wrap",
-    alignItems: "stretch"
-  }, /* @__PURE__ */React.createElement(Paper, {
-    outlined: outlinedItems,
-    inset: "medium",
-    overflow: false,
-    sx: {
-      width: "100%",
-      minWidth: {
-        lg: "456px"
-      },
-      flex: {
-        xs: "0 0 100%",
-        md: 1
-      },
-      alignItems: "center",
-      justifyContent: "center",
-      display: "flex"
-    }
-  }, /* @__PURE__ */React.createElement(AnalyticsDoughnutChart, {
-    tradeMeCount: tradeMeEnquiriesCount,
-    bookMeCount: bookMeEnquiriesCount,
-    manualCount: manualEnquiryCount,
-    allhouseCount: allHouseEnquiriesCount,
-    oneRoofCount: oneRoofEnquiriesCount,
-    realEstateCount: realestateEnquiriesCount,
-    websiteCount: websiteEnquiriesCount,
-    heading: "Number of enquiries"
-  })), /* @__PURE__ */React.createElement(Paper, {
-    outlined: outlinedItems,
-    inset: "medium",
-    overflow: false,
-    sx: {
-      width: "100%",
-      minWidth: {
-        lg: "456px"
-      },
-      flex: {
-        xs: "0 0 100%",
-        md: 1
-      },
-      alignItems: "center",
-      justifyContent: "center",
-      display: "flex"
-    }
-  }, /* @__PURE__ */React.createElement(AnalyticsDoughnutChart, {
-    tradeMeCount: tradeMeBookingsCount,
-    bookMeCount: bookMeBookingsCount,
-    manualCount: manualBookingsCount,
-    allhouseCount: allHouseBookingsCount,
-    oneRoofCount: oneRoofBookingsCount,
-    realEstateCount: realestateBookingsCount,
-    websiteCount: websiteBookingsCount,
-    heading: "Number of bookings"
-  })), /* @__PURE__ */React.createElement(Stack, {
-    gap: {
-      xs: 3,
-      md: 6
-    },
-    justifyContent: "space-between",
-    sx: {
-      flexDirection: {
-        xs: "row",
-        lg: "column"
-      },
-      flex: {
-        sm: "0 0 100%",
-        lg: "0 0 284px"
-      }
-    }
-  }, /* @__PURE__ */React.createElement(AnalyticsBox, {
-    outlined: outlinedItems,
-    label: /* @__PURE__ */React.createElement("strong", null, "Converted Properties"),
-    amount: agreementsCount,
-    width: "100%",
-    height: isXlUp ? "157px" : "auto",
-    text: /* @__PURE__ */React.createElement(Text, {
-      as: "span",
-      variant: "inherit"
-    }, "Properties that have had a viewing in the last", " ", /* @__PURE__ */React.createElement("strong", null, filterDaysCount), " days where an agreement has been ", /* @__PURE__ */React.createElement("strong", null, "created"))
-  }), /* @__PURE__ */React.createElement(AnalyticsBox, {
-    outlined: outlinedItems,
-    label: /* @__PURE__ */React.createElement("strong", null, "Converted Properties"),
-    amount: agreementsFinalisedCount,
-    width: "100%",
-    height: isXlUp ? "157px" : "auto",
-    text: /* @__PURE__ */React.createElement(Text, {
-      as: "span",
-      variant: "inherit"
-    }, "Properties that have had a viewing in the last", " ", /* @__PURE__ */React.createElement("strong", null, " ", filterDaysCount), " days where an agreement has been ", /* @__PURE__ */React.createElement("strong", null, "finalised"))
-  })), /* @__PURE__ */React.createElement(Grid, {
-    container: true,
-    spacing: {
-      xs: 3,
-      md: 6
-    }
-  }, stats.map(function (stat, i) {
-    return /* @__PURE__ */React.createElement(Grid, {
-      item: true,
-      key: uid(stat, i),
-      flex: {
-        lg: 1
-      },
-      xs: 6,
-      sm: 3,
-      md: 2
-    }, /* @__PURE__ */React.createElement(AnalyticsBox, {
-      outlined: outlinedItems,
-      label: stat.label,
-      amount: stat.value,
-      width: "100%",
-      height: isXlUp ? "157px" : "124px"
-    }));
-  }))));
-}
-
-export { AnalyticsSection as default };

package/dist/esm/components/BookingChart.js

@@ -1,124 +0,0 @@
-import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useMemo } from 'react';
-import { Box } from '@tenancy.nz/ui';
-import { Chart } from 'primereact/chart.js';
-import { StyledBookingChartStack, StyledBookingChartLegend, StyledBookingChartButton } from './BookingChart.styled.js';
-
-var defaultOptions = {
-  scaleFontColor: "black",
-  legend: {
-    display: false
-  },
-  plugins: {
-    datalabels: {
-      align: "centre",
-      font: {
-        weight: "700",
-        size: 12,
-        family: "Montserrat, sans-serif"
-      },
-      display: function display(ctx) {
-        return ctx.dataset.data[ctx.dataIndex] > 0;
-      }
-    }
-  },
-  scales: {
-    xAxes: [{
-      gridLines: {
-        labelString: "Date",
-        display: false
-      },
-      ticks: {
-        fontSize: 13,
-        family: "Montserrat, sans-serif",
-        fontWeight: "bold"
-      },
-      stacked: true
-    }],
-    yAxes: [{
-      scaleLabel: {
-        display: true,
-        labelString: "Total bookings",
-        fontFamily: "Montserrat, sans-serif",
-        fontSize: 13,
-        fontStyle: "600"
-      },
-      ticks: {
-        min: 0,
-        stepSize: 5,
-        fontSize: 13,
-        fontWeight: 500
-      },
-      gridLines: {
-        display: false
-      },
-      stacked: true
-    }]
-  }
-};
-function BookingChart(_ref) {
-  var data = _ref.data,
-    labels = _ref.labels,
-    _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? "day" : _ref$mode,
-    _ref$options = _ref.options,
-    options = _ref$options === void 0 ? {} : _ref$options,
-    _ref$onModeChange = _ref.onModeChange,
-    onModeChange = _ref$onModeChange === void 0 ? void 0 : _ref$onModeChange;
-  var legends = useMemo(function () {
-    return data.map(function (_ref2) {
-      var label = _ref2.label,
-        backgroundColor = _ref2.backgroundColor;
-      return [label, backgroundColor];
-    }).filter(function (_ref3, i, items) {
-      var _ref4 = _slicedToArray(_ref3, 1),
-        label = _ref4[0];
-      return items.findIndex(function (_ref5) {
-        var _ref6 = _slicedToArray(_ref5, 1),
-          l = _ref6[0];
-        return l === label;
-      }) === i;
-    });
-  }, [data]);
-  return /* @__PURE__ */React.createElement(Box, {
-    display: "flex",
-    direction: "column",
-    gap: "16px",
-    width: "100%"
-  }, legends.length > 0 && /* @__PURE__ */React.createElement(StyledBookingChartStack, null, legends.map(function (_ref7) {
-    var _ref8 = _slicedToArray(_ref7, 2),
-      label = _ref8[0],
-      backgroundColor = _ref8[1];
-    return /* @__PURE__ */React.createElement(StyledBookingChartLegend, {
-      key: label,
-      color: backgroundColor
-    }, label);
-  })), /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      position: "relative",
-      width: "100%",
-      overflow: "hidden"
-    }
-  }, /* @__PURE__ */React.createElement(Chart, {
-    type: "bar",
-    data: {
-      labels: labels,
-      datasets: data
-    },
-    options: _objectSpread2(_objectSpread2({}, defaultOptions), options)
-  })), onModeChange && /* @__PURE__ */React.createElement(StyledBookingChartStack, null, /* @__PURE__ */React.createElement(StyledBookingChartButton, {
-    onClick: onModeChange,
-    active: mode === "day",
-    value: "day"
-  }, "Day"), /* @__PURE__ */React.createElement(StyledBookingChartButton, {
-    onClick: onModeChange,
-    active: mode === "week",
-    value: "week"
-  }, "Week"), /* @__PURE__ */React.createElement(StyledBookingChartButton, {
-    onClick: onModeChange,
-    active: mode === "month",
-    value: "month"
-  }, "Month")));
-}
-
-export { BookingChart as default };

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

@@ -1,42 +0,0 @@
-import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-var StyledBookingChartStack = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  font-size: 12px;\n  justify-content: center;\n  color: #000;\n  width: 100%;\n"])));
-var StyledBookingChartLegend = styled("span", {
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return !["color"].includes(prop);
-  }
-})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n\n  &::before {\n    content: '';\n    display: inline-flex;\n    width: 32px;\n    height: 18px;\n    background-color: ", ";\n    border-radius: 4px;\n  }\n"])), function (props) {
-  return props.color;
-});
-var StyledBookingChartButton = styled("button", {
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return !["color"].includes(prop);
-  }
-})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  && {\n    font-weight: 500;\n    display: flex;\n    align-items: center;\n    padding: 6px 10px;\n    font-size: 14px;\n    border-radius: 4px;\n    font-family: inherit;\n    color: ", ";\n    border: 1px solid ", ";\n    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);\n    background-color: ", ";\n    cursor: pointer;\n\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.palette.primary.main;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.palette.primary.main;
-}, function (_ref3) {
-  var active = _ref3.active,
-    theme = _ref3.theme;
-  return active ? "#CEF3ED" : theme.palette.background.paper;
-}, function (_ref4) {
-  var active = _ref4.active,
-    theme = _ref4.theme;
-  return !active ? theme.palette.grey[100] : null;
-});
-var StyledPropertyDetailsBox = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  align-items: flex-start;\n  padding: 16px 24px 16px 20px;\n  flex-direction: column;\n\n  ", "\n\n  @media print {\n    flex-direction: row;\n    align-items: center;\n  }\n"])), function (_ref5) {
-  var theme = _ref5.theme;
-  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    ", " {\n      flex-direction: row;\n      align-items: center;\n    }\n  "])), theme.breakpoints.up("sm"));
-});
-var StyledPropertyAmenitiesBox = styled.div(_templateObject6 || (_templateObject6 = _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\n  @media print {\n    align-items: flex-end;\n  }\n"])), function (_ref6) {
-  var theme = _ref6.theme;
-  return "\n    @media (min-width: ".concat(theme.breakpoints.values.md, "px) {\n      align-items: flex-end;\n    }\n  ");
-});
-
-export { StyledBookingChartButton, StyledBookingChartLegend, StyledBookingChartStack, StyledPropertyAmenitiesBox, StyledPropertyDetailsBox };

package/dist/esm/components/ChartLegend.js

@@ -1,59 +0,0 @@
-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: {
-        xs: "8px",
-        md: "12px"
-      }
-    })
-  }, /* @__PURE__ */React.createElement(Box, {
-    bgcolor: color || "#D9D9D9",
-    sx: {
-      width: {
-        xs: "20px",
-        md: "32px"
-      },
-      height: {
-        xs: "12px",
-        md: "18px"
-      },
-      borderRadius: {
-        xs: "2px",
-        md: "4px"
-      }
-    }
-  }), /* @__PURE__ */React.createElement(Box, {
-    xs: {
-      minWidth: {
-        xs: "20px",
-        md: "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",
-    color: "primary"
-  }, label));
-}
-
-export { ChartLegend as default };

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

@@ -1,112 +0,0 @@
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import React from 'react';
-import DoughnutChart from './doughnut-chart.js';
-import PartnerLogo from './partner-logo.js';
-import { parseChartCount } from '../utils/helpers/general.js';
-
-var _excluded = ["bookMeCount", "oneRoofCount", "realEstateCount", "tradeMeCount", "manualCount", "websiteCount", "heading"];
-function AnalyticsDoughnutChart(_ref) {
-  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,
-    _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$websiteCount = _ref.websiteCount,
-    websiteCount = _ref$websiteCount === void 0 ? 0 : _ref$websiteCount,
-    _ref$heading = _ref.heading,
-    heading = _ref$heading === void 0 ? void 0 : _ref$heading,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var data = [{
-    color: "#0CC1A3",
-    count: parseChartCount(bookMeCount),
-    slug: "bookme",
-    title: "Tenant Portal"
-  },
-  // {
-  //   color: '#000000',
-  //   count: parseChartCount(allhouseCount),
-  //   slug: 'allhouse',
-  //   title: 'Allhouse',
-  //   logo: (
-  //     <PartnerLogo
-  //       name="allhouse"
-  //       width={{xs: '48px', md: '59px'}}
-  //       height={{xs: '12px', md: '14px'}}
-  //     />
-  //   ),
-  // },
-  {
-    color: "#FF8500",
-    count: parseChartCount(oneRoofCount),
-    slug: "oneroof",
-    title: "OneRoof",
-    logo: /* @__PURE__ */React.createElement(PartnerLogo, {
-      name: "oneroof",
-      width: {
-        xs: "52px",
-        md: "66px"
-      },
-      height: {
-        xs: "",
-        md: "12px"
-      }
-    })
-  }, {
-    color: "#0098FF",
-    count: parseChartCount(realEstateCount),
-    slug: "realestate",
-    title: "realestate.co.nz",
-    logo: /* @__PURE__ */React.createElement(PartnerLogo, {
-      name: "realestate",
-      width: {
-        xs: "72px",
-        md: "92px"
-      },
-      height: {
-        xs: "12px",
-        md: "14px"
-      }
-    })
-  }, {
-    color: "#4854D3",
-    count: parseChartCount(tradeMeCount),
-    slug: "trademe",
-    title: "Trade Me",
-    logo: /* @__PURE__ */React.createElement(PartnerLogo, {
-      name: "trademe",
-      width: {
-        xs: "64px",
-        md: "90px"
-      },
-      height: {
-        xs: "12px",
-        md: "12px"
-      }
-    })
-  }, {
-    color: "#6D6D6D",
-    count: parseChartCount(websiteCount),
-    slug: "website",
-    title: "Office Website"
-  }, {
-    color: "#D9D9D9",
-    count: parseChartCount(manualCount),
-    slug: "manual",
-    title: "Manually Generated"
-  }];
-  return /* @__PURE__ */React.createElement(DoughnutChart, _objectSpread2({
-    data: data,
-    heading: heading,
-    size: {
-      xs: "100px",
-      md: "165px"
-    }
-  }, rest));
-}
-
-export { AnalyticsDoughnutChart as default };

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

@@ -1,126 +0,0 @@
-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: "row",
-    gap: {
-      xs: 4,
-      md: 12
-    },
-    alignItems: "center"
-  }, /* @__PURE__ */React.createElement(Box, {
-    overflow: "hidden",
-    position: "relative",
-    maxWidth: "100%",
-    sx: {
-      width: size,
-      height: size,
-      "&& > 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
-            };
-          },
-          label: function label(_ref2) {
-            var index = _ref2.index;
-            return "  ".concat(chartLabels[index], ": ").concat(parseInt(String(chartValues[index]), 10));
-          }
-        }
-      }
-    },
-    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,
-      logo = item.logo;
-    return /* @__PURE__ */React.createElement(ChartLegend, {
-      key: uid(item),
-      color: color,
-      count: parseInt(String(count), 10),
-      label: logo || title
-    });
-  }))));
-}
-
-export { DoughnutChart as default };