@tenancy.nz/feature-ui 1.10.7 → 1.10.8

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

@@ -1,130 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
-var React = require('react');
-var reactUid = require('react-uid');
-var Stack = require('@mui/material/Stack');
-var ui = require('@tenancy.nz/ui');
-var chart_js = require('primereact/chart.js');
-var ChartLegend = require('./ChartLegend.cjs');
-
-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(ui.Heading, {
-    as: "h4",
-    color: "primary"
-  }, heading), /* @__PURE__ */React.createElement(Stack, {
-    flexDirection: "row",
-    gap: {
-      xs: 4,
-      md: 12
-    },
-    alignItems: "center"
-  }, /* @__PURE__ */React.createElement(ui.Box, {
-    overflow: "hidden",
-    position: "relative",
-    maxWidth: "100%",
-    sx: {
-      width: size,
-      height: size,
-      "&& > canvas": {
-        width: "100%",
-        height: "100%"
-      }
-    }
-  }, /* @__PURE__ */React.createElement(chart_js.Chart, _rollupPluginBabelHelpers.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.default, {
-      key: reactUid.uid(item),
-      color: color,
-      count: parseInt(String(count), 10),
-      label: logo || title
-    });
-  }))));
-}
-
-exports.default = DoughnutChart;

package/dist/cjs/components/pdf-analytics-section.cjs

@@ -1,173 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var reactUid = require('react-uid');
-var Stack = require('@mui/material/Stack');
-var useMediaQuery = require('@mui/material/useMediaQuery');
-var ui = require('@tenancy.nz/ui');
-var AnalyticsBox = require('./AnalyticsBox.cjs');
-var analyticsDoughnutChart = require('./analytics-doughnut-chart.cjs');
-
-var styles = {
-  chartPaper: {
-    height: "100%",
-    width: "100%",
-    alignItems: "center",
-    justifyContent: "center",
-    display: "flex"
-  }
-};
-function PDFAnalyticsSection(_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,
-    websiteEnquiryCount = _ref.websiteEnquiryCount,
-    allHouseBookingsCount = _ref.allHouseBookingsCount,
-    bookMeBookingsCount = _ref.bookMeBookingsCount,
-    oneRoofBookingsCount = _ref.oneRoofBookingsCount,
-    realestateBookingsCount = _ref.realestateBookingsCount,
-    tradeMeBookingsCount = _ref.tradeMeBookingsCount,
-    manualBookingsCount = _ref.manualBookingsCount,
-    websiteBookingsCount = _ref.websiteBookingsCount;
-  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(ui.Grid, {
-    container: true,
-    spacing: 6
-  }, /* @__PURE__ */React.createElement(ui.Grid, {
-    container: true,
-    item: true,
-    spacing: 6,
-    xs: 12
-  }, /* @__PURE__ */React.createElement(ui.Grid, {
-    item: true,
-    xs: 6
-  }, /* @__PURE__ */React.createElement(ui.Paper, {
-    outlined: true,
-    inset: "medium",
-    overflow: false,
-    sx: styles.chartPaper
-  }, /* @__PURE__ */React.createElement(analyticsDoughnutChart.default, {
-    tradeMeCount: tradeMeEnquiriesCount,
-    bookMeCount: bookMeEnquiriesCount,
-    manualCount: manualEnquiryCount,
-    allhouseCount: allHouseEnquiriesCount,
-    oneRoofCount: oneRoofEnquiriesCount,
-    realEstateCount: realestateEnquiriesCount,
-    websiteCount: websiteEnquiryCount,
-    heading: "Number of enquiries"
-  }))), /* @__PURE__ */React.createElement(ui.Grid, {
-    item: true,
-    xs: 6
-  }, /* @__PURE__ */React.createElement(ui.Paper, {
-    outlined: true,
-    inset: "medium",
-    overflow: false,
-    sx: styles.chartPaper
-  }, /* @__PURE__ */React.createElement(analyticsDoughnutChart.default, {
-    tradeMeCount: tradeMeBookingsCount,
-    bookMeCount: bookMeBookingsCount,
-    manualCount: manualBookingsCount,
-    allhouseCount: allHouseBookingsCount,
-    oneRoofCount: oneRoofBookingsCount,
-    realEstateCount: realestateBookingsCount,
-    websiteCount: websiteBookingsCount,
-    heading: "Number of bookings"
-  })))), /* @__PURE__ */React.createElement(ui.Grid, {
-    item: true,
-    container: true,
-    xs: 12,
-    spacing: 6
-  }, /* @__PURE__ */React.createElement(ui.Grid, {
-    item: true,
-    xs: 6
-  }, /* @__PURE__ */React.createElement(AnalyticsBox.default, {
-    outlined: true,
-    label: /* @__PURE__ */React.createElement("strong", null, "Converted Properties"),
-    amount: agreementsCount,
-    width: "100%",
-    height: isXlUp ? "157px" : "auto",
-    text: /* @__PURE__ */React.createElement(ui.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(ui.Grid, {
-    item: true,
-    xs: 6,
-    sx: {
-      display: "flex",
-      alignItems: "flex-end"
-    }
-  }, /* @__PURE__ */React.createElement(AnalyticsBox.default, {
-    outlined: true,
-    label: /* @__PURE__ */React.createElement("strong", null, "Converted Properties"),
-    amount: agreementsFinalisedCount,
-    width: "100%",
-    height: isXlUp ? "157px" : "auto",
-    text: /* @__PURE__ */React.createElement(ui.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(ui.Grid, {
-    container: true,
-    spacing: {
-      xs: 3,
-      md: 6
-    }
-  }, stats.map(function (stat, i) {
-    return /* @__PURE__ */React.createElement(ui.Grid, {
-      item: true,
-      key: reactUid.uid(stat, i),
-      xs: 3,
-      md: 2
-    }, /* @__PURE__ */React.createElement(AnalyticsBox.default, {
-      outlined: true,
-      label: stat.label,
-      amount: stat.value,
-      width: "100%",
-      height: isXlUp ? "157px" : "124px"
-    }));
-  })));
-}
-
-exports.default = PDFAnalyticsSection;

package/dist/cjs/utils/helpers/general.cjs

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

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 };