@tenancy.nz/feature-ui 1.0.1 → 1.0.7

package/dist/cjs/components/CheckedIcon.cjs

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

package/dist/cjs/components/EnquiriesDoughnutChart.cjs

@@ -3,165 +3,142 @@
 
 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 chart = require('primereact/chart');
 
-function EnquiriesDoughnutChart({
-  tradeMeEnquiriesCount = 0,
-  bookMeEnquiriesCount = 0,
-  manualEnquiryCount = 0
-}) {
-  const colors = {
+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"
   };
-  const chartColors = [colors.tradeMe, colors.bookMe, colors.manual];
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { position: "relative", display: "flex", height: "100%", align: "center", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Text,
-      {
-        transform: "uppercase",
-        sx: { position: "absolute", left: 20, top: -10 },
-        fontSize: 13,
-        color: "textPrimary",
-        weight: "700",
-        children: "Number of enquiries"
+  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
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { width: "100%", overflow: "hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-      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__ */ jsxRuntime.jsxs(
-      ui.Box,
-      {
-        maxWidth: { xs: "160px", xl: "180px" },
-        width: "100%",
-        padding: "10px 20px",
-        mt: -4,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { width: "100%", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { height: "10px", backgroundColor: colors.tradeMe, width: "100%" }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              ui.Box,
-              {
-                display: "flex",
-                justify: "space-between",
-                width: "100%",
-                align: "flex-start",
-                mt: 2,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { transform: "uppercase", fontSize: 12, weight: "600", children: "TradeMe" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    ui.Text,
-                    {
-                      transform: "uppercase",
-                      fontSize: 32,
-                      weight: "700",
-                      mt: -3,
-                      color: "textPrimary",
-                      children: tradeMeEnquiriesCount
-                    }
-                  )
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { width: "100%", mt: "30px", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { height: "10px", backgroundColor: colors.bookMe, width: "100%" }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              ui.Box,
-              {
-                display: "flex",
-                justify: "space-between",
-                width: "100%",
-                align: "flex-start",
-                mt: 2,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { transform: "uppercase", fontSize: 12, weight: "600", children: "Bookme" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    ui.Text,
-                    {
-                      transform: "uppercase",
-                      fontSize: 32,
-                      weight: "700",
-                      mt: -3,
-                      color: "textPrimary",
-                      children: bookMeEnquiriesCount
-                    }
-                  )
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { width: "100%", mt: "30px", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { height: "10px", backgroundColor: colors.manual, width: "100%" }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              ui.Box,
-              {
-                display: "flex",
-                justify: "space-between",
-                width: "100%",
-                align: "flex-start",
-                mt: 2,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { transform: "uppercase", fontSize: 12, weight: "600", children: [
-                    "Manually",
-                    /* @__PURE__ */ jsxRuntime.jsx("br", {}),
-                    "Generated"
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    ui.Text,
-                    {
-                      transform: "uppercase",
-                      fontSize: 32,
-                      weight: "700",
-                      color: "textPrimary",
-                      mt: -3,
-                      children: manualEnquiryCount
-                    }
-                  )
-                ]
-              }
-            )
-          ] })
-        ]
-      }
-    )
-  ] });
+    },
+    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

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

@@ -5,7 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 require('react');
 
-function Hidden({ hide = false, children }) {
+function Hidden(_ref) {
+  var _ref$hide = _ref.hide,
+    hide = _ref$hide === void 0 ? false : _ref$hide,
+    children = _ref.children;
   if (hide) {
     return null;
   }

package/dist/cjs/components/IconLabel.cjs

@@ -3,34 +3,42 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
-require('react');
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var React = require('react');
 var ui = require('@tenancy.nz/ui');
 
-function IconLabel({
-  children,
-  endIcon = void 0,
-  startIcon = void 0,
-  onClick = void 0,
-  ...rest
-}) {
-  const iconLabel = /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { align: "center", display: "inline-flex", ...rest, children: [
-    startIcon && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { display: "inline-flex", color: "inherit", fontSize: "inherit", children: startIcon }),
-    children && /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Box,
-      {
-        display: "inline-flex",
-        color: "inherit",
-        fontSize: "inherit",
-        marginLeft: startIcon ? 1 : 0,
-        marginRight: endIcon ? 1 : 0,
-        fontWeight: "inherit",
-        children
-      }
-    ),
-    endIcon && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { display: "inline-flex", color: "text.muted", marginLeft: 1, children: endIcon })
-  ] });
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: typeof onClick === "function" ? /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { onClick, children: iconLabel }) : iconLabel });
+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

@@ -3,37 +3,65 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
-require('react');
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var React = require('react');
 var ui = require('@tenancy.nz/ui');
 
-const tagMap = (name) => {
+var _excluded = ["loading", "tag", "text"];
+var tagMap = function tagMap(name) {
   if (typeof name !== "string") {
     return name;
   }
   if (name === "feedback") {
-    return /* @__PURE__ */ jsxRuntime.jsx(ui.Tag, { color: "info", label: "Feedback" });
+    return /* @__PURE__ */React.createElement(ui.Tag, {
+      color: "info",
+      label: "Feedback"
+    });
   }
   if (name === "maintenance") {
-    return /* @__PURE__ */ jsxRuntime.jsx(ui.Tag, { color: "orange", label: "Maintenance" });
+    return /* @__PURE__ */React.createElement(ui.Tag, {
+      color: "orange",
+      label: "Maintenance"
+    });
   }
   return name;
 };
-function NotesCard({
-  loading = false,
-  tag = void 0,
-  text = void 0,
-  ...rest
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Paper, { inset: "medium", sx: { minHeight: "100%" }, ...rest, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { mb: "8px", mt: loading ? "-5px" : "0px", children: loading ? /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { width: "114px", height: "30px", variant: "text" }) : tagMap(tag) }),
-    loading && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { width: "90%", height: "20px", variant: "text" }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { width: "80%", height: "20px", variant: "text" }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { width: "70%", height: "20px", variant: "text" })
-    ] }),
-    !loading && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { variant: "body2", weight: "400", children: text })
-  ] });
+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;