@tenancy.nz/ui 1.0.1 → 1.0.3

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

@@ -1,11 +1,13 @@
 "use strict";
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.js';
 import styled$1, { css } from 'styled-components';
 import { motion } from 'framer-motion';
 import { styled } from '@mui/material/styles';
 import CircularProgress from '@mui/material/CircularProgress';
 import DescriptionIcon from '@mui/icons-material/Description';
 
-const borderRadius = (edges, theme) => {
+var _templateObject, _templateObject2;
+var borderRadius = function borderRadius(edges, theme) {
   switch (edges) {
     case "rounded":
       return 99;
@@ -15,39 +17,52 @@ const borderRadius = (edges, theme) => {
       return theme.shape.borderRadius;
   }
 };
-const StyledFileIcon = styled(DescriptionIcon)(({ compact, theme }) => ({
-  color: theme.palette.default.light,
-  margin: compact ? `0 ${theme.spacing(2)} 0 0` : "0 auto",
-  fontSize: compact ? "2rem" : "4rem"
-}));
-const StyledSavedImage = styled(motion.div)(({ edges, theme }) => ({
-  borderRadius: borderRadius(edges, theme),
-  border: `1px solid ${theme.palette.text.secondary}`,
-  padding: theme.spacing(6, 4),
-  "& img": {
-    maxWidth: "100%",
-    width: "auto",
-    hieght: "auto",
-    margin: "0 auto",
-    boxShadow: theme.shadows[10],
-    display: "block"
-  }
-}));
-const StyledEditor = styled("div")(({ edges, showError, theme }) => ({
-  width: "100%",
-  padding: theme.spacing(6, 4),
-  backgroundImage: `linear-gradient(45deg, ${theme.palette.grey[700]} 25%, transparent 25%), linear-gradient(-45deg, ${theme.palette.grey[700]} 25%, transparent 25%), linear-gradient(45deg, transparent 75%, ${theme.palette.grey[700]} 75%), linear-gradient(-45deg, transparent 75%, ${theme.palette.grey[700]} 75%)`,
-  backgroundSize: "20px 20px",
-  backgroundColor: "rgba(0, 0, 0, 0.5)",
-  backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
-  border: `1px solid ${showError ? theme.palette.error.main : theme.palette.primary.main}`,
-  borderRadius: borderRadius(edges, theme),
-  "& .ReactCrop": {
-    margin: "0 auto",
-    display: "block"
-  }
-}));
-const StyledCircularProgress = styled(CircularProgress)({
+var StyledFileIcon = styled(DescriptionIcon)(function (_ref) {
+  var compact = _ref.compact,
+    theme = _ref.theme;
+  return {
+    color: theme.palette.default.light,
+    margin: compact ? "0 ".concat(theme.spacing(2), " 0 0") : "0 auto",
+    fontSize: compact ? "2rem" : "4rem"
+  };
+});
+var StyledSavedImage = styled(motion.div)(function (_ref2) {
+  var edges = _ref2.edges,
+    theme = _ref2.theme;
+  return {
+    borderRadius: borderRadius(edges, theme),
+    border: "1px solid ".concat(theme.palette.text.secondary),
+    padding: theme.spacing(6, 4),
+    "& img": {
+      maxWidth: "100%",
+      width: "auto",
+      hieght: "auto",
+      margin: "0 auto",
+      boxShadow: theme.shadows[10],
+      display: "block"
+    }
+  };
+});
+var StyledEditor = styled("div")(function (_ref3) {
+  var edges = _ref3.edges,
+    showError = _ref3.showError,
+    theme = _ref3.theme;
+  return {
+    width: "100%",
+    padding: theme.spacing(6, 4),
+    backgroundImage: "linear-gradient(45deg, ".concat(theme.palette.grey[700], " 25%, transparent 25%), linear-gradient(-45deg, ").concat(theme.palette.grey[700], " 25%, transparent 25%), linear-gradient(45deg, transparent 75%, ").concat(theme.palette.grey[700], " 75%), linear-gradient(-45deg, transparent 75%, ").concat(theme.palette.grey[700], " 75%)"),
+    backgroundSize: "20px 20px",
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
+    border: "1px solid ".concat(showError ? theme.palette.error.main : theme.palette.primary.main),
+    borderRadius: borderRadius(edges, theme),
+    "& .ReactCrop": {
+      margin: "0 auto",
+      display: "block"
+    }
+  };
+});
+var StyledCircularProgress = styled(CircularProgress)({
   position: "absolute",
   top: "50%",
   left: "50%",
@@ -55,31 +70,9 @@ const StyledCircularProgress = styled(CircularProgress)({
   marginLeft: -20,
   zIndex: 1
 });
-const StyledDeleteIcon = styled$1.span`
-  ${({ theme }) => css`
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    top: 50%;
-    right: 25px;
-    z-index: 9;
-    background: transparent;
-    color: ${theme.palette.grey.main};
-    width: 48px;
-    height: 48px;
-    font-size: 20px;
-    transition: all 0.25s ease-in-out;
-    transform: translateY(-50%) scale(0.9);
-    box-shadow: ${theme.shadows[2]};
-    border-radius: 50%;
-    &:hover {
-      background: rgba(0, 0, 0, 0.04);
-      transform: translateY(-50%) scale(1.05);
-      color: ${theme.palette.secondary.main};
-      box-shadow: ${theme.shadows[4]};
-    }
-  `}
-`;
+var StyledDeleteIcon = styled$1.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref4) {
+  var theme = _ref4.theme;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    top: 50%;\n    right: 25px;\n    z-index: 9;\n    background: transparent;\n    color: ", ";\n    width: 48px;\n    height: 48px;\n    font-size: 20px;\n    transition: all 0.25s ease-in-out;\n    transform: translateY(-50%) scale(0.9);\n    box-shadow: ", ";\n    border-radius: 50%;\n    &:hover {\n      background: rgba(0, 0, 0, 0.04);\n      transform: translateY(-50%) scale(1.05);\n      color: ", ";\n      box-shadow: ", ";\n    }\n  "])), theme.palette.grey.main, theme.shadows[2], theme.palette.secondary.main, theme.shadows[4]);
+});
 
 export { StyledCircularProgress, StyledDeleteIcon, StyledEditor, StyledFileIcon, StyledSavedImage };

package/dist/esm/components/CroppedImageInputActions.js

@@ -1,4 +1,5 @@
 "use strict";
+import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import 'react';
 import PropTypes from 'prop-types';
@@ -7,58 +8,60 @@ import Box from './Box.js';
 import Button from './Button.js';
 import Grid from './Grid.js';
 
-function CroppedImageInputActions({
-  handleCancel,
-  cancelling = false,
-  cancelButtonProps,
-  handleImageSave,
-  saving = false,
-  saveButtonProps,
-  disabled = false
-}) {
-  const isNotMobile = useMediaQuery((theme) => theme.breakpoints.up("md"));
+function CroppedImageInputActions(_ref) {
+  var handleCancel = _ref.handleCancel,
+    _ref$cancelling = _ref.cancelling,
+    cancelling = _ref$cancelling === void 0 ? false : _ref$cancelling,
+    cancelButtonProps = _ref.cancelButtonProps,
+    handleImageSave = _ref.handleImageSave,
+    _ref$saving = _ref.saving,
+    saving = _ref$saving === void 0 ? false : _ref$saving,
+    saveButtonProps = _ref.saveButtonProps,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  var isNotMobile = useMediaQuery(function (theme) {
+    return theme.breakpoints.up("md");
+  });
   return (
     // <Animate key="edit-controls">
-    /* @__PURE__ */ jsx(Box, { paddingTop: "1.25rem", children: /* @__PURE__ */ jsxs(
-      Grid,
-      {
+    /* @__PURE__ */
+    jsx(Box, {
+      paddingTop: "1.25rem",
+      children: /* @__PURE__ */jsxs(Grid, {
         container: true,
         justifyContent: "flex-end",
         direction: isNotMobile ? "row" : "column-reverse",
         spacing: 5,
-        children: [
-          /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              loading: true,
-              color: "primaryAlt",
-              variant: "outlined",
-              size: "large",
-              onClick: handleCancel,
-              pending: cancelling,
-              disabled,
-              fullWidth: !isNotMobile,
-              ...cancelButtonProps,
-              children: cancelButtonProps.text || "Cancel"
-            }
-          ) }),
-          /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              loading: true,
-              color: "primary",
-              size: "large",
-              onClick: handleImageSave,
-              pending: saving,
-              disabled,
-              fullWidth: !isNotMobile,
-              ...saveButtonProps,
-              children: saveButtonProps.text || "Save"
-            }
-          ) })
-        ]
-      }
-    ) })
+        children: [/* @__PURE__ */jsx(Grid, {
+          item: true,
+          children: /* @__PURE__ */jsx(Button, _objectSpread2(_objectSpread2({
+            loading: true,
+            color: "primaryAlt",
+            variant: "outlined",
+            size: "large",
+            onClick: handleCancel,
+            pending: cancelling,
+            disabled: disabled,
+            fullWidth: !isNotMobile
+          }, cancelButtonProps), {}, {
+            children: cancelButtonProps.text || "Cancel"
+          }))
+        }), /* @__PURE__ */jsx(Grid, {
+          item: true,
+          children: /* @__PURE__ */jsx(Button, _objectSpread2(_objectSpread2({
+            loading: true,
+            color: "primary",
+            size: "large",
+            onClick: handleImageSave,
+            pending: saving,
+            disabled: disabled,
+            fullWidth: !isNotMobile
+          }, saveButtonProps), {}, {
+            children: saveButtonProps.text || "Save"
+          }))
+        })]
+      })
+    })
   );
 }
 CroppedImageInputActions.propTypes = {

package/dist/esm/components/DateInput.js

@@ -1,4 +1,5 @@
 "use strict";
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
@@ -7,39 +8,63 @@ import FormControl from './FormControl.js';
 import DateNumberInput from './DateNumberInput.js';
 import { StyledDay, StyledSlash, StyledMonth, StyledYear } from './DateInput.styled.js';
 
-const isLeapYear = (year) => year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
-function DateInput({
-  disabled = false,
-  fullWidth = false,
-  helperText = "",
-  helperTextPlacement = "below",
-  label = "",
-  required = false,
-  showError = false,
-  errorMessage = "",
-  edges = "normal",
-  name,
-  minYear = 1900,
-  maxYear = 2100,
-  onChange,
-  value = {}
-}) {
-  const [maxDays, setMaxDays] = useState(31);
-  const dayInput = useRef(null);
-  const monthInput = useRef(null);
-  const yearInput = useRef(null);
-  const handleDayChange = (day2) => {
-    onChange({ ...value, day: day2 });
+var isLeapYear = function isLeapYear(year) {
+  return year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
+};
+function DateInput(_ref) {
+  var _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    _ref$helperText = _ref.helperText,
+    helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
+    _ref$helperTextPlacem = _ref.helperTextPlacement,
+    helperTextPlacement = _ref$helperTextPlacem === void 0 ? "below" : _ref$helperTextPlacem,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$showError = _ref.showError,
+    showError = _ref$showError === void 0 ? false : _ref$showError,
+    _ref$errorMessage = _ref.errorMessage,
+    errorMessage = _ref$errorMessage === void 0 ? "" : _ref$errorMessage,
+    _ref$edges = _ref.edges,
+    edges = _ref$edges === void 0 ? "normal" : _ref$edges,
+    name = _ref.name,
+    _ref$minYear = _ref.minYear,
+    minYear = _ref$minYear === void 0 ? 1900 : _ref$minYear,
+    _ref$maxYear = _ref.maxYear,
+    maxYear = _ref$maxYear === void 0 ? 2100 : _ref$maxYear,
+    onChange = _ref.onChange,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? {} : _ref$value;
+  var _useState = useState(31),
+    _useState2 = _slicedToArray(_useState, 2),
+    maxDays = _useState2[0],
+    setMaxDays = _useState2[1];
+  var dayInput = useRef(null);
+  var monthInput = useRef(null);
+  var yearInput = useRef(null);
+  var handleDayChange = function handleDayChange(day2) {
+    onChange(_objectSpread2(_objectSpread2({}, value), {}, {
+      day: day2
+    }));
   };
-  const handleMonthChange = (month2) => {
-    onChange({ ...value, month: month2 });
+  var handleMonthChange = function handleMonthChange(month2) {
+    onChange(_objectSpread2(_objectSpread2({}, value), {}, {
+      month: month2
+    }));
   };
-  const handleYearChange = (year2) => {
-    onChange({ ...value, year: year2 });
+  var handleYearChange = function handleYearChange(year2) {
+    onChange(_objectSpread2(_objectSpread2({}, value), {}, {
+      year: year2
+    }));
   };
-  const { day, month, year } = value;
-  useEffect(() => {
-    const hasThirtyDays = [4, 6, 9, 11];
+  var day = value.day,
+    month = value.month,
+    year = value.year;
+  useEffect(function () {
+    var hasThirtyDays = [4, 6, 9, 11];
     if (parseInt(month, 10) === 2) {
       setMaxDays(isLeapYear(year) ? 29 : 28);
     } else if (hasThirtyDays.includes(parseInt(month, 10))) {
@@ -48,105 +73,93 @@ function DateInput({
       setMaxDays(31);
     }
   }, [month, year]);
-  return /* @__PURE__ */ jsxs(
-    FormControl,
-    {
-      fullWidth,
-      name,
-      label,
-      helperText,
-      helperTextPlacement,
-      disabled,
-      required,
-      showError,
-      errorMessage,
-      edges,
-      children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            name,
-            style: {
-              height: 0,
-              width: 0,
-              appearance: "none",
-              border: "none",
-              outline: "none",
-              margin: 0,
-              padding: 0
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          Grid,
-          {
-            container: true,
-            spacing: 2,
-            style: {
-              flexWrap: "nowrap"
-            },
-            alignItems: "center",
-            children: [
-              /* @__PURE__ */ jsx(StyledDay, { item: true, children: /* @__PURE__ */ jsx(
-                DateNumberInput,
-                {
-                  disabled,
-                  min: 1,
-                  max: maxDays,
-                  placeholder: "DD",
-                  leadingZero: true,
-                  onChange: handleDayChange,
-                  value: day,
-                  name: `${name}_day`,
-                  inputRef: dayInput,
-                  required,
-                  label: "Day",
-                  hideLabel: true
-                }
-              ) }),
-              /* @__PURE__ */ jsx(StyledSlash, { item: true, children: "/" }),
-              /* @__PURE__ */ jsx(StyledMonth, { item: true, children: /* @__PURE__ */ jsx(
-                DateNumberInput,
-                {
-                  disabled,
-                  min: 1,
-                  max: 12,
-                  placeholder: "MM",
-                  leadingZero: true,
-                  onChange: handleMonthChange,
-                  value: month,
-                  name: `${name}_month`,
-                  inputRef: monthInput,
-                  required,
-                  label: "Month",
-                  hideLabel: true
-                }
-              ) }),
-              /* @__PURE__ */ jsx(StyledSlash, { item: true, children: "/" }),
-              /* @__PURE__ */ jsx(StyledYear, { item: true, children: /* @__PURE__ */ jsx(
-                DateNumberInput,
-                {
-                  disabled,
-                  min: parseInt(minYear, 10),
-                  max: parseInt(maxYear, 10),
-                  placeholder: "YYYY",
-                  leadingZero: false,
-                  onChange: handleYearChange,
-                  value: value.year,
-                  name: `${name}_year`,
-                  inputRef: yearInput,
-                  required,
-                  label: "Year",
-                  reverse: true,
-                  hideLabel: true
-                }
-              ) })
-            ]
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */jsxs(FormControl, {
+    fullWidth: fullWidth,
+    name: name,
+    label: label,
+    helperText: helperText,
+    helperTextPlacement: helperTextPlacement,
+    disabled: disabled,
+    required: required,
+    showError: showError,
+    errorMessage: errorMessage,
+    edges: edges,
+    children: [/* @__PURE__ */jsx("input", {
+      name: name,
+      style: {
+        height: 0,
+        width: 0,
+        appearance: "none",
+        border: "none",
+        outline: "none",
+        margin: 0,
+        padding: 0
+      }
+    }), /* @__PURE__ */jsxs(Grid, {
+      container: true,
+      spacing: 2,
+      style: {
+        flexWrap: "nowrap"
+      },
+      alignItems: "center",
+      children: [/* @__PURE__ */jsx(StyledDay, {
+        item: true,
+        children: /* @__PURE__ */jsx(DateNumberInput, {
+          disabled: disabled,
+          min: 1,
+          max: maxDays,
+          placeholder: "DD",
+          leadingZero: true,
+          onChange: handleDayChange,
+          value: day,
+          name: "".concat(name, "_day"),
+          inputRef: dayInput,
+          required: required,
+          label: "Day",
+          hideLabel: true
+        })
+      }), /* @__PURE__ */jsx(StyledSlash, {
+        item: true,
+        children: "/"
+      }), /* @__PURE__ */jsx(StyledMonth, {
+        item: true,
+        children: /* @__PURE__ */jsx(DateNumberInput, {
+          disabled: disabled,
+          min: 1,
+          max: 12,
+          placeholder: "MM",
+          leadingZero: true,
+          onChange: handleMonthChange,
+          value: month,
+          name: "".concat(name, "_month"),
+          inputRef: monthInput,
+          required: required,
+          label: "Month",
+          hideLabel: true
+        })
+      }), /* @__PURE__ */jsx(StyledSlash, {
+        item: true,
+        children: "/"
+      }), /* @__PURE__ */jsx(StyledYear, {
+        item: true,
+        children: /* @__PURE__ */jsx(DateNumberInput, {
+          disabled: disabled,
+          min: parseInt(minYear, 10),
+          max: parseInt(maxYear, 10),
+          placeholder: "YYYY",
+          leadingZero: false,
+          onChange: handleYearChange,
+          value: value.year,
+          name: "".concat(name, "_year"),
+          inputRef: yearInput,
+          required: required,
+          label: "Year",
+          reverse: true,
+          hideLabel: true
+        })
+      })]
+    })]
+  });
 }
 DateInput.propTypes = {
   /**

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

@@ -2,20 +2,23 @@
 import { styled } from '@mui/material/styles';
 import Grid from '@mui/material/Grid';
 
-const StyledDay = styled(Grid)({
+var StyledDay = styled(Grid)({
   flexGrow: 0.5,
   minWidth: 80
 });
-const StyledMonth = styled(Grid)({
+var StyledMonth = styled(Grid)({
   flexGrow: 0.5,
   minWidth: 80
 });
-const StyledYear = styled(Grid)({
+var StyledYear = styled(Grid)({
   flexGrow: 2,
   minWidth: 110
 });
-const StyledSlash = styled(Grid)(({ theme }) => ({
-  color: theme.palette.default.light
-}));
+var StyledSlash = styled(Grid)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    color: theme.palette.default.light
+  };
+});
 
 export { StyledDay, StyledMonth, StyledSlash, StyledYear };