@tenancy.nz/feature-ui 1.0.1 → 1.0.7

package/dist/cjs/components/BookingChart.styled.cjs

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

package/dist/cjs/components/BookingTable.cjs

@@ -3,42 +3,51 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
-require('react');
+var React = require('react');
 var reactUid = require('react-uid');
 var ui = require('@tenancy.nz/ui');
 var BookingTableRowHeader = require('./BookingTableRowHeader.cjs');
 var BookingTableRow = require('./BookingTableRow.cjs');
 var BookingTableRowSkeleton = require('./BookingTableRowSkeleton.cjs');
 
-function BookingTable({ data, loading = false }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { sx: { overflowX: "auto", scrollBehavior: "smooth" }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { sx: { minWidth: "1024px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Paper, { outlined: true, overflow: false, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { bgcolor: "grey.50", children: /* @__PURE__ */ jsxRuntime.jsx(BookingTableRowHeader.default, {}) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { children: [
-      !loading && data.map((booking, index) => /* @__PURE__ */ jsxRuntime.jsx(
-        BookingTableRow.default,
-        {
-          firstName: booking.firstName,
-          lastName: booking.lastName,
-          notes: booking.notes,
-          tenantNotes: booking.tenantNotes,
-          status: booking.status,
-          attended: booking.attended,
-          suitable: booking.suitable,
-          applicationSent: booking.applicationSent,
-          applicationReceived: booking.applicationReceived
-        },
-        reactUid.uid(booking, index)
-      )),
-      loading && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(BookingTableRowSkeleton.default, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(BookingTableRowSkeleton.default, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(BookingTableRowSkeleton.default, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(BookingTableRowSkeleton.default, {})
-      ] }),
-      !loading && data.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { as: "h4", align: "center", sx: { margin: "16px 0" }, children: "No bookings" })
-    ] })
-  ] }) }) });
+function BookingTable(_ref) {
+  var data = _ref.data,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading;
+  return /* @__PURE__ */React.createElement(ui.Box, {
+    sx: {
+      overflowX: "auto",
+      scrollBehavior: "smooth"
+    }
+  }, /* @__PURE__ */React.createElement(ui.Box, {
+    sx: {
+      minWidth: "1024px"
+    }
+  }, /* @__PURE__ */React.createElement(ui.Paper, {
+    outlined: true,
+    overflow: false
+  }, /* @__PURE__ */React.createElement(ui.Box, {
+    bgcolor: "grey.50"
+  }, /* @__PURE__ */React.createElement(BookingTableRowHeader.default, null)), /* @__PURE__ */React.createElement(ui.Box, null, !loading && data.map(function (booking, index) {
+    return /* @__PURE__ */React.createElement(BookingTableRow.default, {
+      key: reactUid.uid(booking, index),
+      firstName: booking.firstName,
+      lastName: booking.lastName,
+      notes: booking.notes,
+      tenantNotes: booking.tenantNotes,
+      status: booking.status,
+      attended: booking.attended,
+      suitable: booking.suitable,
+      applicationSent: booking.applicationSent,
+      applicationReceived: booking.applicationReceived
+    });
+  }), loading && /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(BookingTableRowSkeleton.default, null), /* @__PURE__ */React.createElement(BookingTableRowSkeleton.default, null), /* @__PURE__ */React.createElement(BookingTableRowSkeleton.default, null), /* @__PURE__ */React.createElement(BookingTableRowSkeleton.default, null)), !loading && data.length === 0 && /* @__PURE__ */React.createElement(ui.Heading, {
+    as: "h4",
+    align: "center",
+    sx: {
+      margin: "16px 0"
+    }
+  }, "No bookings")))));
 }
 
 exports.default = BookingTable;

package/dist/cjs/components/BookingTableRow.cjs

@@ -3,61 +3,105 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
-require('react');
+var React = require('react');
 var ui = require('@tenancy.nz/ui');
 var CheckedIcon = require('./CheckedIcon.cjs');
 var BookingTableRow_styled = require('./BookingTableRow.styled.cjs');
 
-const tagMap = (status) => {
+var tagMap = function tagMap(status) {
   if (status === "confirmed") {
-    return /* @__PURE__ */ jsxRuntime.jsx(ui.Tag, { color: "success", label: "Confirmed" });
+    return /* @__PURE__ */React.createElement(ui.Tag, {
+      color: "success",
+      label: "Confirmed"
+    });
   }
   if (status === "cancelled") {
-    return /* @__PURE__ */ jsxRuntime.jsx(ui.Tag, { color: "error", label: "Cancelled" });
+    return /* @__PURE__ */React.createElement(ui.Tag, {
+      color: "error",
+      label: "Cancelled"
+    });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Tag, { color: "info", label: "Registered" });
+  return /* @__PURE__ */React.createElement(ui.Tag, {
+    color: "info",
+    label: "Registered"
+  });
 };
-function BookingTableRow({
-  applicationReceived = false,
-  applicationSent = false,
-  attended = false,
-  firstName,
-  lastName,
-  notes = void 0,
-  status,
-  suitable = false,
-  tenantNotes = void 0
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { container: true, spacing: 0, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { item: true, container: true, xs: 6, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { item: true, xs: 3, md: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(BookingTableRow_styled.StyledBookingTableRowCell, { children: [
-        firstName,
-        " ",
-        lastName
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { item: true, xs: 6, md: 7, children: /* @__PURE__ */ jsxRuntime.jsx(BookingTableRow_styled.StyledBookingTableRowCell, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { as: "div", variant: "body2", children: [
-        notes && /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { variant: "inherit", paragraph: !!tenantNotes, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Property Manager Note" }),
-          " ",
-          /* @__PURE__ */ jsxRuntime.jsx("br", {}),
-          notes
-        ] }),
-        tenantNotes && /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { variant: "inherit", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Tenant Feedback" }),
-          /* @__PURE__ */ jsxRuntime.jsx("br", {}),
-          tenantNotes
-        ] })
-      ] }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { item: true, xs: 3, md: 2, children: /* @__PURE__ */ jsxRuntime.jsx(BookingTableRow_styled.StyledBookingTableRowCell, { children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: tagMap(status) }) }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { item: true, container: true, xs: 6, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxRuntime.jsx(BookingTableRow_styled.StyledBookingTableRowCell, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(CheckedIcon.default, { value: attended }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxRuntime.jsx(BookingTableRow_styled.StyledBookingTableRowCell, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(CheckedIcon.default, { value: suitable }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxRuntime.jsx(BookingTableRow_styled.StyledBookingTableRowCell, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(CheckedIcon.default, { value: applicationSent }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxRuntime.jsx(BookingTableRow_styled.StyledBookingTableRowCell, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(CheckedIcon.default, { value: applicationReceived }) }) })
-    ] })
-  ] });
+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

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

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

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