@tenancy.nz/ui 1.0.2 → 1.0.3

package/dist/esm/components/Icons.js

@@ -1,4 +1,5 @@
 "use strict";
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import 'react';
 import styled from 'styled-components';
@@ -7,52 +8,48 @@ import Heading from './Heading.js';
 import Link from './Link.js';
 import Text from './Text.js';
 
-const Code = styled.code`
-  line-height: 1;
-  margin: 0 2px;
-  padding: 3px 5px;
-  white-space: nowrap;
-  border-radius: 3px;
-  font-size: 13px;
-  border: 1px solid #eeeeee;
-  color: rgba(51, 51, 51, 0.9);
-  background-color: #f8f8f8;
-`;
+var _templateObject;
+var Code = styled.code(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  line-height: 1;\n  margin: 0 2px;\n  padding: 3px 5px;\n  white-space: nowrap;\n  border-radius: 3px;\n  font-size: 13px;\n  border: 1px solid #eeeeee;\n  color: rgba(51, 51, 51, 0.9);\n  background-color: #f8f8f8;\n"])));
 function Icons() {
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(Heading, { as: "h3", children: "Icons" }),
-    /* @__PURE__ */ jsxs(Text, { color: "inherit", children: [
-      "This design system uses ",
-      /* @__PURE__ */ jsx(Code, { children: "@mui/icons-material" }),
-      ", which includes the 1,100+ official Material icons converted to ",
-      /* @__PURE__ */ jsx(Code, { children: "SvgIcon" }),
-      " ",
-      "components."
-    ] }),
-    /* @__PURE__ */ jsxs(Text, { color: "inherit", children: [
-      "Visit",
-      " ",
-      /* @__PURE__ */ jsx(
-        Link,
-        {
-          href: "https://material-ui.com/components/material-icons/",
-          target: "_blank",
-          rel: "noreferrer",
-          children: "Material UI Documentation"
-        }
-      ),
-      " ",
-      "for full list and examples."
-    ] }),
-    /* @__PURE__ */ jsx("br", {}),
-    /* @__PURE__ */ jsx(Heading, { as: "h5", children: "Basic usage" }),
-    /* @__PURE__ */ jsx(Text, { as: "div", children: /* @__PURE__ */ jsx(Code, { children: "import AddCircleIcon from '@mui/icons-material/AddCircle';" }) }),
-    /* @__PURE__ */ jsx(Text, { as: "div", paragraph: false, children: /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(AddCircleIcon, {}),
-      " ",
-      /* @__PURE__ */ jsx(Text, { as: "span", paragraph: false, children: "Add Circle Icon" })
-    ] }) })
-  ] });
+  return /* @__PURE__ */jsxs("div", {
+    children: [/* @__PURE__ */jsx(Heading, {
+      as: "h3",
+      children: "Icons"
+    }), /* @__PURE__ */jsxs(Text, {
+      color: "inherit",
+      children: ["This design system uses ", /* @__PURE__ */jsx(Code, {
+        children: "@mui/icons-material"
+      }), ", which includes the 1,100+ official Material icons converted to ", /* @__PURE__ */jsx(Code, {
+        children: "SvgIcon"
+      }), " ", "components."]
+    }), /* @__PURE__ */jsxs(Text, {
+      color: "inherit",
+      children: ["Visit", " ", /* @__PURE__ */jsx(Link, {
+        href: "https://material-ui.com/components/material-icons/",
+        target: "_blank",
+        rel: "noreferrer",
+        children: "Material UI Documentation"
+      }), " ", "for full list and examples."]
+    }), /* @__PURE__ */jsx("br", {}), /* @__PURE__ */jsx(Heading, {
+      as: "h5",
+      children: "Basic usage"
+    }), /* @__PURE__ */jsx(Text, {
+      as: "div",
+      children: /* @__PURE__ */jsx(Code, {
+        children: "import AddCircleIcon from '@mui/icons-material/AddCircle';"
+      })
+    }), /* @__PURE__ */jsx(Text, {
+      as: "div",
+      paragraph: false,
+      children: /* @__PURE__ */jsxs(Fragment, {
+        children: [/* @__PURE__ */jsx(AddCircleIcon, {}), " ", /* @__PURE__ */jsx(Text, {
+          as: "span",
+          paragraph: false,
+          children: "Add Circle Icon"
+        })]
+      })
+    })]
+  });
 }
 
 export { Icons as default };

package/dist/esm/components/LinearProgress.js

@@ -1,10 +1,12 @@
 "use strict";
+import { extends as _extends, objectDestructuringEmpty as _objectDestructuringEmpty, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import LinearProgress$1 from '@mui/material/LinearProgress';
 
-function LinearProgress({ ...rest }) {
-  return /* @__PURE__ */ jsx(LinearProgress$1, { ...rest });
+function LinearProgress(_ref) {
+  var rest = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /* @__PURE__ */jsx(LinearProgress$1, _objectSpread2({}, rest));
 }
 
 export { LinearProgress as default };

package/dist/esm/components/Link.js

@@ -1,12 +1,25 @@
 "use strict";
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import PropTypes from 'prop-types';
 import { StyledLink } from './Link.styled.js';
 
-function Link({ children, color = "primary", underline = "none", ...others }) {
-  const rest = { color, underline, ...others };
-  return /* @__PURE__ */ jsx(StyledLink, { ...rest, children });
+var _excluded = ["children", "color", "underline"];
+function Link(_ref) {
+  var children = _ref.children,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "primary" : _ref$color,
+    _ref$underline = _ref.underline,
+    underline = _ref$underline === void 0 ? "none" : _ref$underline,
+    others = _objectWithoutProperties(_ref, _excluded);
+  var rest = _objectSpread2({
+    color: color,
+    underline: underline
+  }, others);
+  return /* @__PURE__ */jsx(StyledLink, _objectSpread2(_objectSpread2({}, rest), {}, {
+    children: children
+  }));
 }
 Link.propTypes = {
   /**
@@ -16,14 +29,7 @@ Link.propTypes = {
   /**
    * The color of the link.
    */
-  color: PropTypes.oneOf([
-    "error",
-    "inherit",
-    "primary",
-    "secondary",
-    "textPrimary",
-    "textSecondary"
-  ]),
+  color: PropTypes.oneOf(["error", "inherit", "primary", "secondary", "textPrimary", "textSecondary"]),
   /**
    * When the link should have an underline.
    */

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

@@ -1,8 +1,10 @@
 "use strict";
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.js';
 import styled, { css } from 'styled-components';
 
-const colour = (color, theme) => {
-  const colors = {
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var colour = function colour(color, theme) {
+  var colors = {
     error: theme.palette.error.main,
     inherit: "inherit",
     primary: theme.palette.primary.main,
@@ -15,23 +17,11 @@ const colour = (color, theme) => {
   }
   return colors.inherit;
 };
-const StyledLink = styled.a`
-  ${({ color, underline, theme }) => css`
-    font-family: ${theme.typography.fontFamily};
-    font-weight: 500;
-    text-decoration: none;
-    ${underline === "hover" && css`
-      &:hover {
-        text-decoration: underline;
-      }
-    `}
-    ${underline === "always" && css`
-      text-decoration: underline;
-    `}
-    ${color && css`
-      color: ${colour(color, theme)};
-    `}
-  `}
-`;
+var StyledLink = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var color = _ref.color,
+    underline = _ref.underline,
+    theme = _ref.theme;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    font-family: ", ";\n    font-weight: 500;\n    text-decoration: none;\n    ", "\n    ", "\n    ", "\n  "])), theme.typography.fontFamily, underline === "hover" && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      &:hover {\n        text-decoration: underline;\n      }\n    "]))), underline === "always" && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      text-decoration: underline;\n    "]))), color && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), colour(color, theme)));
+});
 
 export { StyledLink };

package/dist/esm/components/Media.js

@@ -4,19 +4,22 @@ import 'react';
 import PropTypes from 'prop-types';
 import { StyledMediaEl, StyledMediaSkeleton, StyledMedia } from './Media.styled.js';
 
-function Media({ as = "div", skeleton = false, src, title = "" }) {
-  return /* @__PURE__ */ jsxs(StyledMediaEl, { children: [
-    skeleton && /* @__PURE__ */ jsx(StyledMediaSkeleton, {}),
-    /* @__PURE__ */ jsx(
-      StyledMedia,
-      {
-        as,
-        src: !skeleton ? src : "",
-        title,
-        alt: as === "img" ? title : ""
-      }
-    )
-  ] });
+function Media(_ref) {
+  var _ref$as = _ref.as,
+    as = _ref$as === void 0 ? "div" : _ref$as,
+    _ref$skeleton = _ref.skeleton,
+    skeleton = _ref$skeleton === void 0 ? false : _ref$skeleton,
+    src = _ref.src,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "" : _ref$title;
+  return /* @__PURE__ */jsxs(StyledMediaEl, {
+    children: [skeleton && /* @__PURE__ */jsx(StyledMediaSkeleton, {}), /* @__PURE__ */jsx(StyledMedia, {
+      as: as,
+      src: !skeleton ? src : "",
+      title: title,
+      alt: as === "img" ? title : ""
+    })]
+  });
 }
 Media.propTypes = {
   /**

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

@@ -1,42 +1,18 @@
 "use strict";
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.js';
 import styled, { css } from 'styled-components';
 import { inlineGlow } from '../utils/animations.js';
 
-const StyledMediaEl = styled.div`
-  ${({ theme }) => css`
-    position: relative;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    background: ${theme.palette.grey[200]};
-  `}
-`;
-const StyledMediaSkeleton = styled.div`
-  width: 100%;
-  height: 100%;
-  position: absolute;
-
-  z-index: 1;
-  ${inlineGlow}
-`;
-const StyledMedia = styled.div`
-  position: relative;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-  ${({ as, src }) => css`
-    ${as !== "img" && css`
-      display: block;
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-position: center;
-      background-image: url(${src});
-    `}
-
-    ${as === "img" && css`
-      object-fit: cover;
-    `}
-  `}
-`;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var StyledMediaEl = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    background: ", ";\n  "])), theme.palette.grey[200]);
+});
+var StyledMediaSkeleton = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n\n  z-index: 1;\n  ", "\n"])), inlineGlow);
+var StyledMedia = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n  ", "\n"])), function (_ref2) {
+  var as = _ref2.as,
+    src = _ref2.src;
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    ", "\n\n    ", "\n  "])), as !== "img" && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      display: block;\n      background-size: cover;\n      background-repeat: no-repeat;\n      background-position: center;\n      background-image: url(", ");\n    "])), src), as === "img" && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      object-fit: cover;\n    "]))));
+});
 
 export { StyledMedia, StyledMediaEl, StyledMediaSkeleton };

package/dist/esm/components/Modal.js

@@ -1,4 +1,5 @@
 "use strict";
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import BaseModal from './BaseModal.js';
 import Heading from './Heading.js';
@@ -9,16 +10,22 @@ import ModalHeader from './ModalHeader.js';
 import Skeleton from './Skeleton.js';
 import { isString } from '../utils/helpers/boolean.js';
 
-function Modal({
-  actions = void 0,
-  content = void 0,
-  children = void 0,
-  heading = void 0,
-  loading = false,
-  onClose = void 0,
-  ...rest
-}) {
-  const handleClose = (e, action) => {
+var _excluded = ["actions", "content", "children", "heading", "loading", "onClose"];
+function Modal(_ref) {
+  var _ref$actions = _ref.actions,
+    actions = _ref$actions === void 0 ? void 0 : _ref$actions,
+    _ref$content = _ref.content,
+    content = _ref$content === void 0 ? void 0 : _ref$content,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? void 0 : _ref$children,
+    _ref$heading = _ref.heading,
+    heading = _ref$heading === void 0 ? void 0 : _ref$heading,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? void 0 : _ref$onClose,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var handleClose = function handleClose(e, action) {
     if (action === "backdropClick") {
       return;
     }
@@ -26,27 +33,46 @@ function Modal({
       onClose(e);
     }
   };
-  const header = isString(heading) ? /* @__PURE__ */ jsx(Heading, { as: "h3", gutterBottom: false, children: heading }) : heading;
-  return /* @__PURE__ */ jsxs(
-    BaseModal,
-    {
-      ...rest,
+  var header = isString(heading) ? /* @__PURE__ */jsx(Heading, {
+    as: "h3",
+    gutterBottom: false,
+    children: heading
+  }) : heading;
+  return /* @__PURE__ */jsxs(BaseModal, _objectSpread2(_objectSpread2({}, rest), {}, {
+    onClose: handleClose,
+    slotProps: {
+      paper: {
+        sx: {
+          padding: {
+            xs: "16px",
+            md: "32px"
+          }
+        }
+      }
+    },
+    children: [heading && /* @__PURE__ */jsxs(ModalHeader, {
       onClose: handleClose,
-      slotProps: { paper: { sx: { padding: { xs: "16px", md: "32px" } } } },
-      children: [
-        heading && /* @__PURE__ */ jsxs(ModalHeader, { onClose: handleClose, children: [
-          loading && /* @__PURE__ */ jsx(Skeleton, { variant: "text", height: 20, width: 250 }),
-          !loading && header
-        ] }),
-        !loading && /* @__PURE__ */ jsxs(ModalContent, { disableGutter: true, children: [
-          children,
-          content
-        ] }),
-        actions && /* @__PURE__ */ jsx(ModalActions, { sx: { marginTop: { xs: "20px", md: "40px" } }, children: actions }),
-        loading && /* @__PURE__ */ jsx(ModalContent, { disableGutter: true, children: /* @__PURE__ */ jsx(LinearProgress, {}) })
-      ]
-    }
-  );
+      children: [loading && /* @__PURE__ */jsx(Skeleton, {
+        variant: "text",
+        height: 20,
+        width: 250
+      }), !loading && header]
+    }), !loading && /* @__PURE__ */jsxs(ModalContent, {
+      disableGutter: true,
+      children: [children, content]
+    }), actions && /* @__PURE__ */jsx(ModalActions, {
+      sx: {
+        marginTop: {
+          xs: "20px",
+          md: "40px"
+        }
+      },
+      children: actions
+    }), loading && /* @__PURE__ */jsx(ModalContent, {
+      disableGutter: true,
+      children: /* @__PURE__ */jsx(LinearProgress, {})
+    })]
+  }));
 }
 
 export { Modal as default };

package/dist/esm/components/ModalActions.js

@@ -1,19 +1,26 @@
 "use strict";
+import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx } from 'react/jsx-runtime';
 import DialogActions from '@mui/material/DialogActions';
 
-function ModalActions({
-  align = "flex-end",
-  children,
-  gutter = true,
-  sx = {}
-}) {
-  const styles = {
-    justifyContent: align,
-    ...gutter && { gap: "8px" },
-    ...sx
-  };
-  return /* @__PURE__ */ jsx(DialogActions, { disableSpacing: !gutter, sx: styles, children });
+function ModalActions(_ref) {
+  var _ref$align = _ref.align,
+    align = _ref$align === void 0 ? "flex-end" : _ref$align,
+    children = _ref.children,
+    _ref$gutter = _ref.gutter,
+    gutter = _ref$gutter === void 0 ? true : _ref$gutter,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx;
+  var styles = _objectSpread2(_objectSpread2({
+    justifyContent: align
+  }, gutter && {
+    gap: "8px"
+  }), sx);
+  return /* @__PURE__ */jsx(DialogActions, {
+    disableSpacing: !gutter,
+    sx: styles,
+    children: children
+  });
 }
 
 export { ModalActions as default };

package/dist/esm/components/ModalContent.js

@@ -1,18 +1,23 @@
 "use strict";
+import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx } from 'react/jsx-runtime';
 import PropTypes from 'prop-types';
 import DialogContent from '@mui/material/DialogContent';
 
-function ModalContent({
-  children,
-  disableGutter = false,
-  sx = {}
-}) {
-  const styles = {
-    ...disableGutter && { padding: 0 },
-    ...sx
-  };
-  return /* @__PURE__ */ jsx(DialogContent, { dividers: false, sx: styles, children });
+function ModalContent(_ref) {
+  var children = _ref.children,
+    _ref$disableGutter = _ref.disableGutter,
+    disableGutter = _ref$disableGutter === void 0 ? false : _ref$disableGutter,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx;
+  var styles = _objectSpread2(_objectSpread2({}, disableGutter && {
+    padding: 0
+  }), sx);
+  return /* @__PURE__ */jsx(DialogContent, {
+    dividers: false,
+    sx: styles,
+    children: children
+  });
 }
 ModalContent.propTypes = {
   /**

package/dist/esm/components/ModalHeader.js

@@ -1,20 +1,35 @@
 "use strict";
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Close } from '@mui/icons-material';
 import Box from './Box.js';
 import IconButton from './IconButton.js';
 import StyledModalHeader from './ModalHeader.styled.js';
 
-function ModalHeader({
-  children,
-  closeIcon = void 0,
-  onClose = void 0,
-  ...rest
-}) {
-  return /* @__PURE__ */ jsxs(StyledModalHeader, { ...rest, children: [
-    /* @__PURE__ */ jsx(Box, { overflow: "hidden", width: "100%", marginRight: "8px", marginLeft: "0px", children }),
-    onClose && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(IconButton, { color: "inherit", size: "small", onClick: onClose, children: !closeIcon ? /* @__PURE__ */ jsx(Close, {}) : closeIcon }) })
-  ] });
+var _excluded = ["children", "closeIcon", "onClose"];
+function ModalHeader(_ref) {
+  var children = _ref.children,
+    _ref$closeIcon = _ref.closeIcon,
+    closeIcon = _ref$closeIcon === void 0 ? void 0 : _ref$closeIcon,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? void 0 : _ref$onClose,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /* @__PURE__ */jsxs(StyledModalHeader, _objectSpread2(_objectSpread2({}, rest), {}, {
+    children: [/* @__PURE__ */jsx(Box, {
+      overflow: "hidden",
+      width: "100%",
+      marginRight: "8px",
+      marginLeft: "0px",
+      children: children
+    }), onClose && /* @__PURE__ */jsx(Box, {
+      children: /* @__PURE__ */jsx(IconButton, {
+        color: "inherit",
+        size: "small",
+        onClick: onClose,
+        children: !closeIcon ? /* @__PURE__ */jsx(Close, {}) : closeIcon
+      })
+    })]
+  }));
 }
 
 export { ModalHeader as default };

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

@@ -1,25 +1,15 @@
 "use strict";
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { css } from '@emotion/react';
 import { styled } from '@mui/material/styles';
 import { getObjectProp } from '../utils/helpers/object.js';
 
-const StyledModalHeader = styled(
-  "div"
-)`
-  ${({ disableGap, theme, transparent }) => css`
-    display: flex;
-    align-items: center;
-    position: sticky;
-    top: 0;
-    left: 0;
-    z-index: 9;
-    background: ${transparent ? "transparent" : getObjectProp(theme, "vars.palette.background.paper")};
-    color: ${getObjectProp(theme, "vars.palette.text.secondary")};
-
-    ${!disableGap && css`
-      margin-bottom: 8px;
-    `};
-  `}
-`;
+var _templateObject, _templateObject2, _templateObject3;
+var StyledModalHeader = styled("div")(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var disableGap = _ref.disableGap,
+    theme = _ref.theme,
+    transparent = _ref.transparent;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    position: sticky;\n    top: 0;\n    left: 0;\n    z-index: 9;\n    background: ", ";\n    color: ", ";\n\n    ", ";\n  "])), transparent ? "transparent" : getObjectProp(theme, "vars.palette.background.paper"), getObjectProp(theme, "vars.palette.text.secondary"), !disableGap && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      margin-bottom: 8px;\n    "]))));
+});
 
 export { StyledModalHeader as default };