@tenancy.nz/feature-ui 1.0.0 → 1.0.2

package/dist/cjs/components/BookingTableRow.cjs

@@ -0,0 +1,107 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ui = require('@tenancy.nz/ui');
+var CheckedIcon = require('./CheckedIcon.cjs');
+var BookingTableRow_styled = require('./BookingTableRow.styled.cjs');
+
+var tagMap = function tagMap(status) {
+  if (status === "confirmed") {
+    return /* @__PURE__ */React.createElement(ui.Tag, {
+      color: "success",
+      label: "Confirmed"
+    });
+  }
+  if (status === "cancelled") {
+    return /* @__PURE__ */React.createElement(ui.Tag, {
+      color: "error",
+      label: "Cancelled"
+    });
+  }
+  return /* @__PURE__ */React.createElement(ui.Tag, {
+    color: "info",
+    label: "Registered"
+  });
+};
+function BookingTableRow(_ref) {
+  var _ref$applicationRecei = _ref.applicationReceived,
+    applicationReceived = _ref$applicationRecei === void 0 ? false : _ref$applicationRecei,
+    _ref$applicationSent = _ref.applicationSent,
+    applicationSent = _ref$applicationSent === void 0 ? false : _ref$applicationSent,
+    _ref$attended = _ref.attended,
+    attended = _ref$attended === void 0 ? false : _ref$attended,
+    firstName = _ref.firstName,
+    lastName = _ref.lastName,
+    _ref$notes = _ref.notes,
+    notes = _ref$notes === void 0 ? void 0 : _ref$notes,
+    status = _ref.status,
+    _ref$suitable = _ref.suitable,
+    suitable = _ref$suitable === void 0 ? false : _ref$suitable,
+    _ref$tenantNotes = _ref.tenantNotes,
+    tenantNotes = _ref$tenantNotes === void 0 ? void 0 : _ref$tenantNotes;
+  return /* @__PURE__ */React.createElement(ui.Grid, {
+    container: true,
+    spacing: 0
+  }, /* @__PURE__ */React.createElement(ui.Grid, {
+    item: true,
+    container: true,
+    xs: 6
+  }, /* @__PURE__ */React.createElement(ui.Grid, {
+    item: true,
+    xs: 3,
+    md: 3
+  }, /* @__PURE__ */React.createElement(BookingTableRow_styled.StyledBookingTableRowCell, null, firstName, " ", lastName)), /* @__PURE__ */React.createElement(ui.Grid, {
+    item: true,
+    xs: 6,
+    md: 7
+  }, /* @__PURE__ */React.createElement(BookingTableRow_styled.StyledBookingTableRowCell, null, /* @__PURE__ */React.createElement(ui.Text, {
+    as: "div",
+    variant: "body2"
+  }, notes && /* @__PURE__ */React.createElement(ui.Text, {
+    variant: "inherit",
+    paragraph: !!tenantNotes
+  }, /* @__PURE__ */React.createElement("strong", null, "Property Manager Note"), " ", /* @__PURE__ */React.createElement("br", null), notes), tenantNotes && /* @__PURE__ */React.createElement(ui.Text, {
+    variant: "inherit"
+  }, /* @__PURE__ */React.createElement("strong", null, "Tenant Feedback"), /* @__PURE__ */React.createElement("br", null), tenantNotes)))), /* @__PURE__ */React.createElement(ui.Grid, {
+    item: true,
+    xs: 3,
+    md: 2
+  }, /* @__PURE__ */React.createElement(BookingTableRow_styled.StyledBookingTableRowCell, null, /* @__PURE__ */React.createElement("span", null, tagMap(status))))), /* @__PURE__ */React.createElement(ui.Grid, {
+    item: true,
+    container: true,
+    xs: 6
+  }, /* @__PURE__ */React.createElement(ui.Grid, {
+    item: true,
+    xs: 3
+  }, /* @__PURE__ */React.createElement(BookingTableRow_styled.StyledBookingTableRowCell, {
+    align: "center"
+  }, /* @__PURE__ */React.createElement(CheckedIcon.default, {
+    value: attended
+  }))), /* @__PURE__ */React.createElement(ui.Grid, {
+    item: true,
+    xs: 3
+  }, /* @__PURE__ */React.createElement(BookingTableRow_styled.StyledBookingTableRowCell, {
+    align: "center"
+  }, /* @__PURE__ */React.createElement(CheckedIcon.default, {
+    value: suitable
+  }))), /* @__PURE__ */React.createElement(ui.Grid, {
+    item: true,
+    xs: 3
+  }, /* @__PURE__ */React.createElement(BookingTableRow_styled.StyledBookingTableRowCell, {
+    align: "center"
+  }, /* @__PURE__ */React.createElement(CheckedIcon.default, {
+    value: applicationSent
+  }))), /* @__PURE__ */React.createElement(ui.Grid, {
+    item: true,
+    xs: 3
+  }, /* @__PURE__ */React.createElement(BookingTableRow_styled.StyledBookingTableRowCell, {
+    align: "center"
+  }, /* @__PURE__ */React.createElement(CheckedIcon.default, {
+    value: applicationReceived
+  })))));
+}
+
+exports.default = BookingTableRow;

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

@@ -0,0 +1,21 @@
+"use strict";
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var react = require('@emotion/react');
+var styled = require('@emotion/styled');
+
+var _templateObject, _templateObject2;
+var StyledBookingTableRowCell = styled("div", {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== "align";
+  }
+})(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var _ref$align = _ref.align,
+    align = _ref$align === void 0 ? "left" : _ref$align,
+    header = _ref.header,
+    theme = _ref.theme;
+  return react.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    justify-content: ", ";\n    padding: 6px 12px;\n    font-size: ", ";\n    color: #717680;\n    height: 100%;\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", " {\n      padding: 12px 24px;\n    }\n\n    @media print {\n      padding: 12px 24px;\n    }\n  "])), header ? "center" : "flex-start", header ? "12px" : "14px", align === "left" && "\n      align-items: flex-start;\n    ", align === "center" && "\n      align-items: center;\n      text-align: center;\n    ", align === "right" && "\n      align-items: flex-end;\n    ", theme.breakpoints.up("md"));
+});
+
+exports.StyledBookingTableRowCell = StyledBookingTableRowCell;

package/dist/cjs/components/BookingTableRowHeader.cjs

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

package/dist/cjs/components/BookingTableRowSkeleton.cjs

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

package/dist/cjs/components/CheckedIcon.cjs

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

package/dist/cjs/components/EnquiriesDoughnutChart.cjs

@@ -0,0 +1,144 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ui = require('@tenancy.nz/ui');
+var chart = require('primereact/chart');
+
+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.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;

package/dist/cjs/components/GridList.cjs

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

package/dist/cjs/components/Hidden.cjs

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

package/dist/cjs/components/IconLabel.cjs

@@ -0,0 +1,44 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var React = require('react');
+var ui = require('@tenancy.nz/ui');
+
+var _excluded = ["children", "endIcon", "startIcon", "onClick"];
+function IconLabel(_ref) {
+  var children = _ref.children,
+    _ref$endIcon = _ref.endIcon,
+    endIcon = _ref$endIcon === void 0 ? void 0 : _ref$endIcon,
+    _ref$startIcon = _ref.startIcon,
+    startIcon = _ref$startIcon === void 0 ? void 0 : _ref$startIcon,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? void 0 : _ref$onClick,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var iconLabel = /* @__PURE__ */React.createElement(ui.Box, _rollupPluginBabelHelpers.objectSpread2({
+    align: "center",
+    display: "inline-flex"
+  }, rest), startIcon && /* @__PURE__ */React.createElement(ui.Box, {
+    display: "inline-flex",
+    color: "inherit",
+    fontSize: "inherit"
+  }, startIcon), children && /* @__PURE__ */React.createElement(ui.Box, {
+    display: "inline-flex",
+    color: "inherit",
+    fontSize: "inherit",
+    marginLeft: startIcon ? 1 : 0,
+    marginRight: endIcon ? 1 : 0,
+    fontWeight: "inherit"
+  }, children), endIcon && /* @__PURE__ */React.createElement(ui.Box, {
+    display: "inline-flex",
+    color: "text.muted",
+    marginLeft: 1
+  }, endIcon));
+  return /* @__PURE__ */React.createElement(React.Fragment, null, typeof onClick === "function" ? /* @__PURE__ */React.createElement(ui.Box, {
+    onClick: onClick
+  }, iconLabel) : iconLabel);
+}
+
+exports.default = IconLabel;

package/dist/cjs/components/NotesCard.cjs

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