@tenancy.nz/ui 1.0.1 → 1.0.3

package/dist/esm/components/DropZone.js

@@ -1,4 +1,5 @@
 "use strict";
+import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import 'react';
 import PropTypes from 'prop-types';
@@ -13,99 +14,146 @@ import '../utils/helpers/time.js';
 import Alert from './Alert.js';
 import { StyledWrapper, StyledDraggingIndicator, StyledLoader, StyledIcon } from './DropZone.styled.js';
 
-function DropZone({
-  loading = false,
-  compact = false,
-  disabled = false,
-  onDrop,
-  edges = "normal",
-  dropzoneLabel = "Upload file",
-  dropzoneDescription = "Drag and drop a file here, or click to select a file",
-  dropzoneProps = null,
-  listAcceptedFiles = false
-}) {
-  const {
-    getRootProps,
-    getInputProps,
-    isDragActive,
-    isDragAccept,
-    isDragReject,
-    acceptedFiles,
-    fileRejections
-  } = useDropzone({
-    onDrop,
-    disabled,
-    ...dropzoneProps
-  });
-  const hasErrors = fileRejections.length > 0;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      StyledWrapper,
-      {
-        compact: compact ? "yes" : "no",
-        disabled,
-        edges,
-        errors: hasErrors ? "yes" : "no",
-        ...getRootProps(),
-        sx: {
-          mb: 1
+function DropZone(_ref) {
+  var _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$compact = _ref.compact,
+    compact = _ref$compact === void 0 ? false : _ref$compact,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    onDrop = _ref.onDrop,
+    _ref$edges = _ref.edges,
+    edges = _ref$edges === void 0 ? "normal" : _ref$edges,
+    _ref$dropzoneLabel = _ref.dropzoneLabel,
+    dropzoneLabel = _ref$dropzoneLabel === void 0 ? "Upload file" : _ref$dropzoneLabel,
+    _ref$dropzoneDescript = _ref.dropzoneDescription,
+    dropzoneDescription = _ref$dropzoneDescript === void 0 ? "Drag and drop a file here, or click to select a file" : _ref$dropzoneDescript,
+    _ref$dropzoneProps = _ref.dropzoneProps,
+    dropzoneProps = _ref$dropzoneProps === void 0 ? null : _ref$dropzoneProps,
+    _ref$listAcceptedFile = _ref.listAcceptedFiles,
+    listAcceptedFiles = _ref$listAcceptedFile === void 0 ? false : _ref$listAcceptedFile;
+  var _useDropzone = useDropzone(_objectSpread2({
+      onDrop: onDrop,
+      disabled: disabled
+    }, dropzoneProps)),
+    getRootProps = _useDropzone.getRootProps,
+    getInputProps = _useDropzone.getInputProps,
+    isDragActive = _useDropzone.isDragActive,
+    isDragAccept = _useDropzone.isDragAccept,
+    isDragReject = _useDropzone.isDragReject,
+    acceptedFiles = _useDropzone.acceptedFiles,
+    fileRejections = _useDropzone.fileRejections;
+  var hasErrors = fileRejections.length > 0;
+  return /* @__PURE__ */jsxs(Fragment, {
+    children: [/* @__PURE__ */jsxs(StyledWrapper, _objectSpread2(_objectSpread2({
+      compact: compact ? "yes" : "no",
+      disabled: disabled,
+      edges: edges,
+      errors: hasErrors ? "yes" : "no"
+    }, getRootProps()), {}, {
+      sx: {
+        mb: 1
+      },
+      children: [isDragActive && /* @__PURE__ */jsx(StyledDraggingIndicator, {
+        isDragReject: isDragReject
+      }), loading && !hasErrors && /* @__PURE__ */jsx(StyledLoader, {}), /* @__PURE__ */jsx("input", _objectSpread2({}, getInputProps())), isDragAccept && /* @__PURE__ */jsx(StyledIcon, {
+        compact: compact,
+        children: /* @__PURE__ */jsx(CheckCircleIcon, {
+          color: "inherit",
+          fontSize: "inherit"
+        })
+      }), isDragReject && /* @__PURE__ */jsx(StyledIcon, {
+        compact: compact,
+        children: /* @__PURE__ */jsx(WarningIcon, {
+          color: "inherit",
+          fontSize: "inherit"
+        })
+      }), !isDragAccept && !isDragReject && /* @__PURE__ */jsx(StyledIcon, {
+        compact: compact,
+        children: /* @__PURE__ */jsx(CloudUploadIcon, {
+          color: "inherit",
+          fontSize: "inherit"
+        })
+      }), /* @__PURE__ */jsx(Typography, {
+        variant: "subtitle2",
+        align: "center",
+        children: isDragReject ? "Error" : dropzoneLabel
+      }), /* @__PURE__ */jsx(Typography, {
+        variant: "body2",
+        align: "center",
+        color: "textSecondary",
+        children: isDragReject ? "The selected file(s) will not be accepted" : dropzoneDescription
+      })]
+    })), /* @__PURE__ */jsxs(AnimatePresence, {
+      children: [listAcceptedFiles && acceptedFiles.length > 0 && /* @__PURE__ */jsx(motion.div, {
+        initial: {
+          translateY: -20,
+          opacity: 0
+        },
+        animate: {
+          translateY: 0,
+          opacity: 1
+        },
+        exit: {
+          translateY: -20,
+          opacity: 0
         },
-        children: [
-          isDragActive && /* @__PURE__ */ jsx(StyledDraggingIndicator, { isDragReject }),
-          loading && !hasErrors && /* @__PURE__ */ jsx(StyledLoader, {}),
-          /* @__PURE__ */ jsx("input", { ...getInputProps() }),
-          isDragAccept && /* @__PURE__ */ jsx(StyledIcon, { compact, children: /* @__PURE__ */ jsx(CheckCircleIcon, { color: "inherit", fontSize: "inherit" }) }),
-          isDragReject && /* @__PURE__ */ jsx(StyledIcon, { compact, children: /* @__PURE__ */ jsx(WarningIcon, { color: "inherit", fontSize: "inherit" }) }),
-          !isDragAccept && !isDragReject && /* @__PURE__ */ jsx(StyledIcon, { compact, children: /* @__PURE__ */ jsx(CloudUploadIcon, { color: "inherit", fontSize: "inherit" }) }),
-          /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", align: "center", children: isDragReject ? "Error" : dropzoneLabel }),
-          /* @__PURE__ */ jsx(Typography, { variant: "body2", align: "center", color: "textSecondary", children: isDragReject ? "The selected file(s) will not be accepted" : dropzoneDescription })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-      listAcceptedFiles && acceptedFiles.length > 0 && /* @__PURE__ */ jsx(
-        motion.div,
-        {
-          initial: { translateY: -20, opacity: 0 },
-          animate: { translateY: 0, opacity: 1 },
-          exit: { translateY: -20, opacity: 0 },
-          transition: { duration: 0.25, ease: "easeOut" },
-          children: acceptedFiles.map((file) => /* @__PURE__ */ jsx(
-            Alert,
-            {
-              variant: "standard",
-              severity: "success",
-              style: { marginBottom: 5 },
-              children: file.path
+        transition: {
+          duration: 0.25,
+          ease: "easeOut"
+        },
+        children: acceptedFiles.map(function (file) {
+          return /* @__PURE__ */jsx(Alert, {
+            variant: "standard",
+            severity: "success",
+            style: {
+              marginBottom: 5
             },
-            file.path
-          ))
-        }
-      ),
-      hasErrors && /* @__PURE__ */ jsx(
-        motion.div,
-        {
-          initial: { translateY: -20, opacity: 0 },
-          animate: { translateY: 0, opacity: 1 },
-          exit: { translateY: -20, opacity: 0 },
-          transition: { duration: 0.25, ease: "easeOut" },
-          children: /* @__PURE__ */ jsx(Alert, { severity: "info", variant: "standard", children: fileRejections.map(({ file, errors }) => /* @__PURE__ */ jsxs("div", { children: [
-            file.path,
-            /* @__PURE__ */ jsx("ul", { children: errors.map((e) => {
-              if (e.code === "file-too-large") {
-                return /* @__PURE__ */ jsxs("li", { children: [
-                  "File size is larger than",
-                  " ",
-                  formatBytes(dropzoneProps.maxSize)
-                ] }, e.code);
-              }
-              return /* @__PURE__ */ jsx("li", { children: e.message }, e.code);
-            }) })
-          ] }, file.path)) })
-        }
-      )
-    ] })
-  ] });
+            children: file.path
+          }, file.path);
+        })
+      }), hasErrors && /* @__PURE__ */jsx(motion.div, {
+        initial: {
+          translateY: -20,
+          opacity: 0
+        },
+        animate: {
+          translateY: 0,
+          opacity: 1
+        },
+        exit: {
+          translateY: -20,
+          opacity: 0
+        },
+        transition: {
+          duration: 0.25,
+          ease: "easeOut"
+        },
+        children: /* @__PURE__ */jsx(Alert, {
+          severity: "info",
+          variant: "standard",
+          children: fileRejections.map(function (_ref2) {
+            var file = _ref2.file,
+              errors = _ref2.errors;
+            return /* @__PURE__ */jsxs("div", {
+              children: [file.path, /* @__PURE__ */jsx("ul", {
+                children: errors.map(function (e) {
+                  if (e.code === "file-too-large") {
+                    return /* @__PURE__ */jsxs("li", {
+                      children: ["File size is larger than", " ", formatBytes(dropzoneProps.maxSize)]
+                    }, e.code);
+                  }
+                  return /* @__PURE__ */jsx("li", {
+                    children: e.message
+                  }, e.code);
+                })
+              })]
+            }, file.path);
+          })
+        })
+      })]
+    })]
+  });
 }
 DropZone.propTypes = {
   /**

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

@@ -5,7 +5,7 @@ import CircularProgress from '@mui/material/CircularProgress';
 import LinearProgress from '@mui/material/LinearProgress';
 import { hexToRgba, mixColors } from '../utils/colors.js';
 
-const borderRadius = (edges, theme) => {
+var borderRadius = function borderRadius(edges, theme) {
   switch (edges) {
     case "rounded":
       return 99;
@@ -15,18 +15,23 @@ const borderRadius = (edges, theme) => {
       return theme.shape.borderRadius;
   }
 };
-const StyledWrapper = styled(Box)(
-  ({ compact, disabled, edges, errors, theme }) => ({
+var StyledWrapper = styled(Box)(function (_ref) {
+  var compact = _ref.compact,
+    disabled = _ref.disabled,
+    edges = _ref.edges,
+    errors = _ref.errors,
+    theme = _ref.theme;
+  return {
     position: "relative",
     display: compact === "yes" ? "flex" : "block",
     textAlign: "center",
-    border: `2px dashed ${errors === "yes" ? theme.palette.error.main : theme.palette.primary.main}`,
+    border: "2px dashed ".concat(errors === "yes" ? theme.palette.error.main : theme.palette.primary.main),
     padding: compact === "yes" ? theme.spacing(2, 4) : theme.spacing(6, 4),
     background: disabled ? theme.palette.grey[300] : null,
     opacity: disabled ? 0.5 : 1,
     borderRadius: borderRadius(edges, theme),
     "&:focus": {
-      border: `2px solid ${theme.palette.primary.main}`,
+      border: "2px solid ".concat(theme.palette.primary.main),
       outline: "none",
       background: hexToRgba(theme.palette.primary.main, 0.1)
     },
@@ -34,10 +39,12 @@ const StyledWrapper = styled(Box)(
     "& .MuiTypography-root": {
       marginRight: compact === "yes" ? theme.spacing(2) : 0
     }
-  })
-);
-const StyledDraggingIndicator = styled(LinearProgress)(
-  ({ isDragReject, theme }) => ({
+  };
+});
+var StyledDraggingIndicator = styled(LinearProgress)(function (_ref2) {
+  var isDragReject = _ref2.isDragReject,
+    theme = _ref2.theme;
+  return {
     position: "absolute",
     top: 0,
     left: 0,
@@ -46,26 +53,26 @@ const StyledDraggingIndicator = styled(LinearProgress)(
     opacity: 0.2,
     backgroundColor: isDragReject ? theme.palette.error.main : theme.palette.primary.main,
     "& .MuiLinearProgress-barColorPrimary": {
-      background: mixColors(
-        isDragReject ? theme.palette.error.main : theme.palette.primary.main,
-        "#ffffff",
-        60
-      )
+      background: mixColors(isDragReject ? theme.palette.error.main : theme.palette.primary.main, "#ffffff", 60)
     }
-  })
-);
-const StyledLoader = styled(CircularProgress)({
+  };
+});
+var StyledLoader = styled(CircularProgress)({
   position: "absolute",
   top: "50%",
   left: "50%",
   marginTop: -20,
   marginLeft: -20
 });
-const StyledIcon = styled("div")(({ compact, theme }) => ({
-  display: "inline-flex",
-  color: theme.palette.default.light,
-  margin: compact ? `0 ${theme.spacing(2)} 0 0` : "0 auto",
-  fontSize: compact ? "2rem" : "4rem"
-}));
+var StyledIcon = styled("div")(function (_ref3) {
+  var compact = _ref3.compact,
+    theme = _ref3.theme;
+  return {
+    display: "inline-flex",
+    color: theme.palette.default.light,
+    margin: compact ? "0 ".concat(theme.spacing(2), " 0 0") : "0 auto",
+    fontSize: compact ? "2rem" : "4rem"
+  };
+});
 
 export { StyledDraggingIndicator, StyledIcon, StyledLoader, StyledWrapper };

package/dist/esm/components/Embed.js

@@ -5,19 +5,26 @@ import PropTypes from 'prop-types';
 import CircularProgress from './CircularProgress.js';
 import { StyledEmbed, StyledBox, StyledEmbedFrame } from './Embed.styled.js';
 
-function Embed({ height = "50%", src, width = "100%" }) {
-  return /* @__PURE__ */ jsxs(StyledEmbed, { height, width, children: [
-    /* @__PURE__ */ jsx(StyledBox, { children: /* @__PURE__ */ jsx(CircularProgress, { size: 50 }) }),
-    /* @__PURE__ */ jsx(
-      StyledEmbedFrame,
-      {
-        src,
-        frameborder: "0",
-        allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
-        allowfullscreen: true
-      }
-    )
-  ] });
+function Embed(_ref) {
+  var _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "50%" : _ref$height,
+    src = _ref.src,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "100%" : _ref$width;
+  return /* @__PURE__ */jsxs(StyledEmbed, {
+    height: height,
+    width: width,
+    children: [/* @__PURE__ */jsx(StyledBox, {
+      children: /* @__PURE__ */jsx(CircularProgress, {
+        size: 50
+      })
+    }), /* @__PURE__ */jsx(StyledEmbedFrame, {
+      src: src,
+      frameborder: "0",
+      allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+      allowfullscreen: true
+    })]
+  });
 }
 Embed.propTypes = {
   /**

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

@@ -1,34 +1,15 @@
 "use strict";
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.js';
 import styled, { css } from 'styled-components';
 import Box from './Box.js';
 
-const StyledEmbed = styled.div`
-  ${({ height, width }) => css`
-    position: relative;
-    padding-bottom: ${height};
-    height: 0;
-    overflow: hidden;
-    width: ${width};
-  `}
-`;
-const StyledEmbedFrame = styled.iframe`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border: none;
-  z-index: 3;
-`;
-const StyledBox = styled(Box)`
-  display: flex !important;
-  position: absolute;
-  left: 0;
-  top: 0;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-`;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var StyledEmbed = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var height = _ref.height,
+    width = _ref.width;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n    padding-bottom: ", ";\n    height: 0;\n    overflow: hidden;\n    width: ", ";\n  "])), height, width);
+});
+var StyledEmbedFrame = styled.iframe(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border: none;\n  z-index: 3;\n"])));
+var StyledBox = styled(Box)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex !important;\n  position: absolute;\n  left: 0;\n  top: 0;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  width: 100%;\n"])));
 
 export { StyledBox, StyledEmbed, StyledEmbedFrame };