@tenancy.nz/ui 1.2.3 → 1.2.5

package/dist/cjs/components/Alert.cjs

@@ -36,7 +36,7 @@ var icons = {
     }
   })
 };
-function Alert(_ref) {
+var Alert = /*#__PURE__*/React.forwardRef(function Alert2(_ref, ref) {
   var children = _ref.children,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "info" : _ref$color,
@@ -52,10 +52,11 @@ function Alert(_ref) {
     variant: variantMap[variant] || variant,
     severity: color,
     iconMapping: icons,
-    closeText: "undo"
+    closeText: "undo",
+    ref: ref
   }, rest), (!icon || !color || !icons[color]) && {
     icon: false
   }), title && /* @__PURE__ */React.createElement(Alert_styled.StyledAlertTitle, null, title), children);
-}
+});
 
 exports.default = Alert;

package/dist/cjs/components/AvatarCropDialog.cjs

@@ -32,13 +32,16 @@ function AvatarCropDialog(_ref) {
     } : _ref$onDelete,
     _ref$droppedFile = _ref.droppedFile,
     droppedFile = _ref$droppedFile === void 0 ? null : _ref$droppedFile;
-  var isNotMobile = useMediaQuery(function (theme) {
-    return theme.breakpoints.up("md");
+  var isMobile = useMediaQuery(function (theme) {
+    return theme.breakpoints.down("md");
   });
   var _useState = React.useState({
       aspect: 1,
       unit: "%",
-      width: 100
+      width: 50,
+      height: 50,
+      x: 25,
+      y: 25
     }),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     crop = _useState2[0],
@@ -72,9 +75,13 @@ function AvatarCropDialog(_ref) {
     });
   };
   var handleCropChange = function handleCropChange(newCrop) {
-    return setCrop(newCrop);
+    setCrop(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, newCrop), {}, {
+      height: newCrop.width,
+      aspect: 1
+    }));
   };
-  var handleImageLoaded = function handleImageLoaded(image) {
+  var handleImageLoaded = function handleImageLoaded(e) {
+    var image = e.target;
     var width = image.width;
     if (window.innerHeight * 0.7 < image.height) {
       width = image.width * (window.innerHeight * 0.7 / image.height);
@@ -137,7 +144,6 @@ function AvatarCropDialog(_ref) {
   }, /* @__PURE__ */React.createElement(AvatarCropDialog_styled.StyledEditor, {
     showError: showError
   }, /* @__PURE__ */React.createElement(ReactCrop, {
-    src: droppedFile,
     crop: crop,
     style: {
       width: editorWidth,
@@ -145,19 +151,29 @@ function AvatarCropDialog(_ref) {
     },
     circularCrop: true,
     onChange: handleCropChange,
-    onImageLoaded: handleImageLoaded,
     keepSelection: true
-  }))), /* @__PURE__ */React.createElement(ModalActions.default, null, /* @__PURE__ */React.createElement(Button.default, {
+  }, /* @__PURE__ */React.createElement("img", {
+    src: droppedFile,
+    onLoad: handleImageLoaded
+  })))), /* @__PURE__ */React.createElement(ModalActions.default, {
+    sx: {
+      flexDirection: {
+        xs: "column",
+        md: "row",
+        gap: "16px"
+      }
+    }
+  }, /* @__PURE__ */React.createElement(Button.default, {
     onClick: handleCancel,
     variant: "outlined",
     loading: cancelling,
     color: "primaryAlt",
-    fullWidth: !isNotMobile
+    fill: isMobile
   }, "Cancel"), /* @__PURE__ */React.createElement(Button.default, {
     onClick: handleImageSave,
     loading: saving,
     color: "primaryAlt",
-    fullWidth: !isNotMobile
+    fill: isMobile
   }, "Save")), /* @__PURE__ */React.createElement(Confirmation.default, {
     open: confirmDelete,
     onCancel: function onCancel() {

package/dist/cjs/components/AvatarInput.cjs

@@ -14,10 +14,9 @@ var DeleteIcon = require('@mui/icons-material/Delete');
 var PersonIcon = require('@mui/icons-material/Person');
 var WarningIcon = require('@mui/icons-material/Warning');
 var reactDropzone = require('react-dropzone');
+var IconButton = require('./IconButton.cjs');
 var Confirmation = require('./Confirmation.cjs');
 var Modal = require('./Modal.cjs');
-var ModalContent = require('./ModalContent.cjs');
-var ModalHeader = require('./ModalHeader.cjs');
 var Text = require('./Text.cjs');
 var AvatarCropDialog = require('./AvatarCropDialog.cjs');
 var AvatarInput_styled = require('./AvatarInput.styled.cjs');
@@ -170,26 +169,34 @@ function AvatarInput(_ref) {
     align: isNotMobile ? "left" : "center",
     weight: "500",
     color: "textPrimary"
-  }, isDragReject ? "The selected file(s) will not be accepted" : dropzoneDescription))))), (savedImage || value) &&
-  // <ActionArea onClick={() => setConfirmDelete(true)}>
-  /* @__PURE__ */
-  React.createElement(AvatarInput_styled.StyledDeleteIcon, null, /* @__PURE__ */React.createElement(DeleteIcon, null))), droppedFile && /* @__PURE__ */React.createElement(Modal.default, {
+  }, isDragReject ? "The selected file(s) will not be accepted" : dropzoneDescription))))), (savedImage || value) && /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      position: "absolute",
+      top: "50%",
+      right: "25px",
+      zIndex: 9,
+      transform: "translateY(-50%)"
+    }
+  }, /* @__PURE__ */React.createElement(IconButton.default, {
+    color: "error",
+    size: "large",
+    onClick: function onClick() {
+      return setConfirmDelete(true);
+    }
+  }, /* @__PURE__ */React.createElement(DeleteIcon, null)))), droppedFile && /* @__PURE__ */React.createElement(Modal.default, {
     open: open,
     onClose: function onClose() {
       return setOpen(false);
     },
     fullWidth: true,
-    maxWidth: "lg"
-  }, /* @__PURE__ */React.createElement(ModalHeader.default, {
-    onClose: function onClose() {
-      return setOpen(false);
-    }
-  }, /* @__PURE__ */React.createElement("span", null, "\xA0")), /* @__PURE__ */React.createElement(ModalContent.default, null, /* @__PURE__ */React.createElement(AvatarCropDialog.default, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
-    droppedFile: droppedFile
-  }, rest), {}, {
-    onSave: handleSave,
-    onDelete: handleDelete
-  })))), /* @__PURE__ */React.createElement(Confirmation.default, {
+    maxWidth: "md",
+    content: /* @__PURE__ */React.createElement(AvatarCropDialog.default, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+      droppedFile: droppedFile
+    }, rest), {}, {
+      onSave: handleSave,
+      onDelete: handleDelete
+    }))
+  }), /* @__PURE__ */React.createElement(Confirmation.default, {
     open: confirmDelete,
     onCancel: function onCancel() {
       return setConfirmDelete(false);

package/dist/cjs/components/BaseModal.cjs

@@ -21,7 +21,7 @@ function BaseModal(_ref) {
     _ref$maxWidth = _ref.maxWidth,
     maxWidth = _ref$maxWidth === void 0 ? "sm" : _ref$maxWidth,
     _ref$onClose = _ref.onClose,
-    onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
+    onClose = _ref$onClose === void 0 ? void 0 : _ref$onClose,
     _ref$open = _ref.open,
     open = _ref$open === void 0 ? false : _ref$open,
     _ref$slotProps = _ref.slotProps,

package/dist/cjs/components/BooleanInput.styled.cjs

@@ -7,24 +7,24 @@ var ButtonGroup = require('@mui/material/ButtonGroup');
 
 var selectedStyles = function selectedStyles(hasError, theme) {
   return {
-    borderColor: hasError === "yes" ? theme.palette.secondary.main : theme.palette.primaryAlt.main,
+    borderColor: hasError === "yes" ? theme.palette.secondary.main : theme.palette.primary.main,
     color: "#fff",
-    background: hasError === "yes" ? theme.palette.secondary.main : theme.palette.primaryAlt.main,
+    background: hasError === "yes" ? theme.palette.secondary.main : theme.palette.primary.main,
     "&:hover": {
-      background: hasError === "yes" ? theme.palette.secondary.dark : theme.palette.primaryAlt.dark
+      background: hasError === "yes" ? theme.palette.secondary.dark : theme.palette.primary.dark
     }
   };
 };
 var unselectedStyles = function unselectedStyles(error, theme) {
   return {
-    borderColor: error === "yes" ? theme.palette.secondary.main : theme.palette.primaryAlt.main,
-    color: error === "yes" ? theme.palette.secondary.main : theme.palette.primaryAlt.main
+    borderColor: error === "yes" ? theme.palette.secondary.main : theme.palette.primary.main,
+    color: error === "yes" ? theme.palette.secondary.main : theme.palette.primary.main
   };
 };
 var requiredUnselectedStyles = function requiredUnselectedStyles(selected, theme) {
   return {
-    borderColor: !selected ? theme.palette.secondary.main : theme.palette.primaryAlt.main,
-    color: !selected ? theme.palette.secondary.main : theme.palette.primaryAlt.main
+    borderColor: !selected ? theme.palette.secondary.main : theme.palette.primary.main,
+    color: !selected ? theme.palette.secondary.main : theme.palette.primary.main
   };
 };
 var borderRadiusStyles = function borderRadiusStyles(edges, theme) {

package/dist/cjs/components/CroppedImageInput.cjs

@@ -338,7 +338,12 @@ function CroppedImageInput(_ref) {
     item: true,
     xs: 12,
     md: 1
-  }, /* @__PURE__ */React.createElement(CroppedImageInput_styled.StyledDeleteIcon, null, /* @__PURE__ */React.createElement(DeleteIcon, null))))), !src && !documentFile && !croppedImage && (openInDialog ? /* @__PURE__ */React.createElement(framerMotion.motion.div, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, fade), {}, {
+  }, /* @__PURE__ */React.createElement(IconButton.default, {
+    onClick: function onClick() {
+      return setConfirmDelete(true);
+    },
+    color: "error"
+  }, /* @__PURE__ */React.createElement(DeleteIcon, null))))), !src && !documentFile && !croppedImage && (openInDialog ? /* @__PURE__ */React.createElement(framerMotion.motion.div, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, fade), {}, {
     key: "upload-button"
   }), /* @__PURE__ */React.createElement(FileUploadButton.default, {
     onUpload: onDrop,

package/dist/cjs/components/CroppedImageInput.styled.cjs

@@ -1,13 +1,10 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
-var styled = require('styled-components');
 var framerMotion = require('framer-motion');
 var styles = require('@mui/material/styles');
 var CircularProgress = require('@mui/material/CircularProgress');
 var DescriptionIcon = require('@mui/icons-material/Description');
 
-var _templateObject, _templateObject2;
 var borderRadius = function borderRadius(edges, theme) {
   switch (edges) {
     case "rounded":
@@ -71,13 +68,8 @@ var StyledCircularProgress = styles.styled(CircularProgress)({
   marginLeft: -20,
   zIndex: 1
 });
-var StyledDeleteIcon = styled.span(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref4) {
-  var theme = _ref4.theme;
-  return styled.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.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]);
-});
 
 exports.StyledCircularProgress = StyledCircularProgress;
-exports.StyledDeleteIcon = StyledDeleteIcon;
 exports.StyledEditor = StyledEditor;
 exports.StyledFileIcon = StyledFileIcon;
 exports.StyledSavedImage = StyledSavedImage;

package/dist/cjs/components/CroppedImageInputActions.cjs

@@ -37,22 +37,20 @@ function CroppedImageInputActions(_ref) {
     }, /* @__PURE__ */React.createElement(Grid.default, {
       item: true
     }, /* @__PURE__ */React.createElement(Button.default, _rollupPluginBabelHelpers.objectSpread2({
-      loading: true,
       color: "primaryAlt",
       variant: "outlined",
       size: "large",
       onClick: handleCancel,
-      pending: cancelling,
+      loading: cancelling,
       disabled: disabled,
       fullWidth: !isNotMobile
     }, cancelButtonProps), cancelButtonProps.text || "Cancel")), /* @__PURE__ */React.createElement(Grid.default, {
       item: true
     }, /* @__PURE__ */React.createElement(Button.default, _rollupPluginBabelHelpers.objectSpread2({
-      loading: true,
       color: "primary",
       size: "large",
       onClick: handleImageSave,
-      pending: saving,
+      loading: saving,
       disabled: disabled,
       fullWidth: !isNotMobile
     }, saveButtonProps), saveButtonProps.text || "Save"))))

package/dist/cjs/components/DropZone.cjs

@@ -69,15 +69,15 @@ function DropZone(_ref) {
   })), !isDragAccept && !isDragReject && /* @__PURE__ */React.createElement(DropZone_styled.StyledIcon, {
     compact: compact
   }, /* @__PURE__ */React.createElement(CloudUploadIcon, {
-    color: "inherit",
+    color: "primary",
     fontSize: "inherit"
   })), /* @__PURE__ */React.createElement(Typography, {
-    variant: "subtitle2",
+    variant: "body1",
     align: "center"
   }, isDragReject ? "Error" : dropzoneLabel), /* @__PURE__ */React.createElement(Typography, {
     variant: "body2",
     align: "center",
-    color: "textSecondary"
+    color: "text.blue"
   }, isDragReject ? "The selected file(s) will not be accepted" : dropzoneDescription)), /* @__PURE__ */React.createElement(framerMotion.AnimatePresence, null, listAcceptedFiles && acceptedFiles.length > 0 && /* @__PURE__ */React.createElement(framerMotion.motion.div, {
     initial: {
       translateY: -20,

package/dist/cjs/components/FileUpload.cjs

@@ -5,11 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
 var React = require('react');
 var PropTypes = require('prop-types');
-var Alert = require('@mui/material/Alert');
 var framerMotion = require('framer-motion');
 var DeleteIcon = require('@mui/icons-material/Delete');
 var DropZone = require('./DropZone.cjs');
 var FormControl = require('./FormControl.cjs');
+var Alert = require('./Alert.cjs');
 var Button = require('./Button.cjs');
 var Confirmation = require('./Confirmation.cjs');
 var IconButton = require('./IconButton.cjs');
@@ -158,7 +158,7 @@ function FileUpload(_ref) {
     edges: edges
   }, /* @__PURE__ */React.createElement(FormFocus.default, {
     name: name
-  }), files && files.length > 0 && /* @__PURE__ */React.createElement(FileUpload_styled.StyledSavedWrapper, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, fade), {}, {
+  }), files && files.length > 0 && /* @__PURE__ */React.createElement(framerMotion.AnimatePresence, null, /* @__PURE__ */React.createElement(FileUpload_styled.StyledSavedWrapper, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, fade), {}, {
     edges: edges
   }), (saving || loading) && /* @__PURE__ */React.createElement(FileUpload_styled.StyledLoader, {
     disableShrink: true
@@ -169,10 +169,9 @@ function FileUpload(_ref) {
   }, /* @__PURE__ */React.createElement(Grid.default, {
     item: true,
     xs: 12
-  }, /* @__PURE__ */React.createElement(framerMotion.AnimateSharedLayout, null, files.map(function (file$1, index) {
-    return /* @__PURE__ */React.createElement(framerMotion.AnimatePresence, {
-      key: file.getFileName(file$1)
-    }, /* @__PURE__ */React.createElement(framerMotion.motion.div, {
+  }, files.map(function (file$1, index) {
+    return /* @__PURE__ */React.createElement(framerMotion.motion.div, {
+      key: file.getFileName(file$1),
       positionTransition: true,
       initial: {
         opacity: 0,
@@ -191,8 +190,8 @@ function FileUpload(_ref) {
           duration: 0.2
         }
       }
-    }, /* @__PURE__ */React.createElement(Alert, {
-      severity: showError || fileErrors(file$1, index) !== null ? "error" : "success",
+    }, /* @__PURE__ */React.createElement(Alert.default, {
+      color: showError || fileErrors(file$1, index) !== null ? "error" : "success",
       style: {
         marginBottom: 5
       },
@@ -200,24 +199,19 @@ function FileUpload(_ref) {
         onClick: function onClick() {
           return setViewedFile(file$1);
         },
-        color: "inherit",
+        color: "success",
         size: "small",
         variant: "text"
       }, "View"), /* @__PURE__ */React.createElement(Tooltip.default, {
-        title: "Delete",
-        enterDelay: 0
-      }, /* @__PURE__ */React.createElement("div", null, /* @__PURE__ */React.createElement(IconButton.default, {
+        title: "Delete"
+      }, /* @__PURE__ */React.createElement(IconButton.default, {
         disabled: saving,
         size: "small",
-        "aria-label": "delete",
-        style: {
-          padding: 0
-        },
         onClick: function onClick() {
           return !showError ? handleDeleteConfirmation(index) : handleDeleteWithoutConfirmation(index);
         }
-      }, /* @__PURE__ */React.createElement(DeleteIcon, null)))))
-    }, /* @__PURE__ */React.createElement(FileUpload_styled.StyledAlertTitle, null, file.getFileName(file$1)), fileErrors(file$1, index))));
+      }, /* @__PURE__ */React.createElement(DeleteIcon, null))))
+    }, /* @__PURE__ */React.createElement(FileUpload_styled.StyledAlertTitle, null, file.getFileName(file$1)), fileErrors(file$1, index)));
   }))))), (!files || files.length === 0 || !dropzoneProps || dropzoneProps.maxFiles === void 0 || dropzoneProps.maxFiles > 1) && /* @__PURE__ */React.createElement(framerMotion.motion.div, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, fade), {}, {
     style: files && files.length > 0 ? {
       marginTop: 8

package/dist/cjs/components/FileUploadButton.cjs

@@ -90,9 +90,8 @@ function FileUploadButton(_ref) {
     getRootProps = _useDropzone.getRootProps,
     getInputProps = _useDropzone.getInputProps;
   return /* @__PURE__ */React.createElement("span", _rollupPluginBabelHelpers.objectSpread2({}, getRootProps()), /* @__PURE__ */React.createElement(Button.default, _rollupPluginBabelHelpers.objectSpread2({
-    loading: true,
     disabled: disabled,
-    pending: pending,
+    loading: pending,
     pendingIndicator: /* @__PURE__ */React.createElement(FileUploadButtonLoader.default, {
       accepted: accepted,
       rejected: rejected

package/dist/cjs/components/FlashMessage.cjs

@@ -16,12 +16,12 @@ function FlashMessage(_ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "success" : _ref$color,
     _ref$horizontal = _ref.horizontal,
-    horizontal = _ref$horizontal === void 0 ? "center" : _ref$horizontal,
+    horizontal = _ref$horizontal === void 0 ? "right" : _ref$horizontal,
     _ref$open = _ref.open,
     open = _ref$open === void 0 ? false : _ref$open,
     onClose = _ref.onClose,
     _ref$vertical = _ref.vertical,
-    vertical = _ref$vertical === void 0 ? "top" : _ref$vertical,
+    vertical = _ref$vertical === void 0 ? "bottom" : _ref$vertical,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var handleClose = function handleClose() {
     onClose();
@@ -34,11 +34,10 @@ function FlashMessage(_ref) {
     autoHideDuration: autoHideDuration,
     open: open,
     onClose: handleClose,
-    message: "This is a text snack message"
+    message: "snack"
   }, rest), /* @__PURE__ */React.createElement(Alert.default, {
     color: color,
-    onClose: handleClose,
-    elevation: 7
+    onClose: handleClose
   }, children));
 }
 FlashMessage.propTypes = {

package/dist/cjs/components/FormControl.cjs

@@ -73,16 +73,11 @@ var FormControl = /*#__PURE__*/React.forwardRef(function FormControl2(_ref, ref)
     color: props.color === "default" ? "info" : props.color
   }, statusMessage))), !!helperText && /* @__PURE__ */React.createElement(FormHelperText, {
     sx: {
-      color: "text.primary",
-      fontSize: function fontSize(theme) {
-        if (size === "medium") {
-          return "".concat(theme.typography.fontSize, "px");
-        }
-        return null;
-      },
-      padding: 0,
+      color: "text.blue",
+      fontSize: "13px",
+      padding: "0 0 0 8px",
       margin: 0,
-      mt: statusMessage ? 0 : "8px"
+      mt: statusMessage ? 0 : "6px"
     }
   }, helperText));
 });

package/dist/cjs/components/Heading.cjs

@@ -17,7 +17,7 @@ function Heading(_ref) {
     _ref$transform = _ref.transform,
     transform = _ref$transform === void 0 ? void 0 : _ref$transform,
     _ref$weight = _ref.weight,
-    weight = _ref$weight === void 0 ? "600" : _ref$weight,
+    weight = _ref$weight === void 0 ? "700" : _ref$weight,
     _ref$sx = _ref.sx,
     sx = _ref$sx === void 0 ? {} : _ref$sx,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);

package/dist/cjs/components/Modal.cjs

@@ -52,9 +52,9 @@ function Modal(_ref) {
         }
       }
     }
-  }), heading && /* @__PURE__ */React.createElement(ModalHeader.default, {
+  }), heading && /* @__PURE__ */React.createElement(ModalHeader.default, _rollupPluginBabelHelpers.objectSpread2({}, onClose && {
     onClose: handleClose
-  }, loading && /* @__PURE__ */React.createElement(Skeleton.default, {
+  }), loading && /* @__PURE__ */React.createElement(Skeleton.default, {
     variant: "text",
     height: 20,
     width: 250

package/dist/cjs/components/PropertyCard.styled.cjs

@@ -6,7 +6,7 @@ var styled = require('styled-components');
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 var StyledContainer = styled.div(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "}\n"])), function (_ref) {
   var theme = _ref.theme;
-  return styled.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    display: flex;\n    @media screen and (max-width: 767px) {\n      flex-direction: column;\n      padding: ", ";\n    }\n    @media screen and (min-width: 768px) {\n      height: 100%;\n    }\n  "])), theme.spacing(3));
+  return styled.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    display: flex;\n    cusor: pointer;\n    @media screen and (max-width: 767px) {\n      flex-direction: column;\n      padding: ", ";\n    }\n    @media screen and (min-width: 768px) {\n      height: 100%;\n    }\n  "])), theme.spacing(3));
 });
 var StyledImg = styled.div(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n ", "}\n\n"])), function (_ref2) {
   var theme = _ref2.theme;

package/dist/cjs/components/SuccessModal.cjs

@@ -9,7 +9,6 @@ var CheckCircleOutlineIcon = require('@mui/icons-material/CheckCircleOutline');
 var SuccessModal_styled = require('./SuccessModal.styled.cjs');
 var Heading = require('./Heading.cjs');
 var Modal = require('./Modal.cjs');
-var ModalContent = require('./ModalContent.cjs');
 
 function SuccessModal(_ref) {
   var _ref$duration = _ref.duration,
@@ -23,23 +22,25 @@ function SuccessModal(_ref) {
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
   React.useEffect(function () {
-    if (show) {
-      setIsOpen(true);
-      setTimeout(function () {
-        return setIsOpen(false);
-      }, duration);
-    }
+    setIsOpen(show);
+    var timeout = setTimeout(function () {
+      return setIsOpen(false);
+    }, duration);
+    return function () {
+      return clearTimeout(timeout);
+    };
   }, [duration, show]);
   return /* @__PURE__ */React.createElement(Modal.default, {
     open: isOpen,
     fullWidth: true,
     maxWidth: "sm",
-    hideBackdrop: true
-  }, /* @__PURE__ */React.createElement(ModalContent.default, null, /* @__PURE__ */React.createElement(SuccessModal_styled.StyledContent, null, /* @__PURE__ */React.createElement(SuccessModal_styled.StyledIcon, null, /* @__PURE__ */React.createElement(CheckCircleOutlineIcon, null)), /* @__PURE__ */React.createElement(Heading.default, {
-    align: "center",
-    as: "h4",
-    gutterBottom: false
-  }, message))));
+    hideBackdrop: true,
+    content: /* @__PURE__ */React.createElement(SuccessModal_styled.StyledContent, null, /* @__PURE__ */React.createElement(SuccessModal_styled.StyledIcon, null, /* @__PURE__ */React.createElement(CheckCircleOutlineIcon, null)), /* @__PURE__ */React.createElement(Heading.default, {
+      align: "center",
+      as: "h4",
+      gutterBottom: false
+    }, message))
+  });
 }
 SuccessModal.propTypes = {
   /**

package/dist/cjs/components/ThemeProvider.cjs

@@ -10,6 +10,7 @@ var styled = require('styled-components');
 var styles = require('@mui/material/styles');
 var CssBaseline = require('@mui/material/CssBaseline');
 var index = require('../theme/index.cjs');
+var allGlobalStyles = require('../utils/allGlobalStyles.cjs');
 
 var _excluded = ["theme", "children"];
 function ThemeProvider(_ref) {
@@ -28,7 +29,9 @@ function ThemeProvider(_ref) {
     theme: mergedTheme
   }, /* @__PURE__ */React.createElement(styles.ThemeProvider, _rollupPluginBabelHelpers.objectSpread2({
     theme: mergedTheme
-  }, rest), /* @__PURE__ */React.createElement(CssBaseline, null), children))));
+  }, rest), /* @__PURE__ */React.createElement(CssBaseline, null), /* @__PURE__ */React.createElement(react.Global, {
+    styles: allGlobalStyles.default
+  }), children))));
 }
 ThemeProvider.propTypes = {
   theme: PropTypes.shape({

package/dist/cjs/index.cjs

@@ -52,6 +52,7 @@ var Skeleton = require('./components/Skeleton.cjs');
 var Stepper = require('./components/Stepper.cjs');
 var SuccessModal = require('./components/SuccessModal.cjs');
 var Switch = require('./components/Switch.cjs');
+var StatusMessage = require('./components/StatusMessage.cjs');
 var Tab = require('./components/Tab.cjs');
 var TabPanel = require('./components/TabPanel.cjs');
 var Tabs = require('./components/Tabs.cjs');
@@ -139,6 +140,7 @@ exports.Skeleton = Skeleton.default;
 exports.Stepper = Stepper.default;
 exports.SuccessModal = SuccessModal.default;
 exports.Switch = Switch.default;
+exports.StatusMessage = StatusMessage.default;
 exports.Tab = Tab.default;
 exports.TabPanel = TabPanel.default;
 exports.Tabs = Tabs.default;

package/dist/cjs/utils/allGlobalStyles.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var react = require('@emotion/react');
+
+var _templateObject;
+var globalStyles = react.css(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  @keyframes marching-ants {\n    0% {\n      background-position:\n        0 0,\n        0 100%,\n        0 0,\n        100% 0;\n    }\n\n    to {\n      background-position:\n        20px 0,\n        -20px 100%,\n        0 -20px,\n        100% 20px;\n    }\n  }\n\n  :root {\n    --rc-drag-handle-size: 12px;\n    --rc-drag-handle-mobile-size: 24px;\n    --rc-drag-handle-bg-colour: rgba(0, 0, 0, 0.2);\n    --rc-drag-bar-size: 6px;\n    --rc-border-color: rgba(255, 255, 255, 0.7);\n    --rc-focus-color: #0088ff;\n  }\n\n  .ReactCrop {\n    position: relative;\n    display: inline-block;\n    cursor: crosshair;\n    max-width: 100%;\n  }\n\n  .ReactCrop *,\n  .ReactCrop *:before,\n  .ReactCrop *:after {\n    box-sizing: border-box;\n  }\n\n  .ReactCrop--disabled,\n  .ReactCrop--locked {\n    cursor: inherit;\n  }\n\n  .ReactCrop__child-wrapper {\n    overflow: hidden;\n    max-height: inherit;\n  }\n\n  .ReactCrop__child-wrapper > img,\n  .ReactCrop__child-wrapper > video {\n    display: block;\n    max-width: 100%;\n    max-height: inherit;\n  }\n\n  .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > img,\n  .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > video {\n    touch-action: none;\n  }\n\n  .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection {\n    touch-action: none;\n  }\n\n  .ReactCrop__crop-mask {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    pointer-events: none;\n    width: calc(100% + 0.5px);\n    height: calc(100% + 0.5px);\n  }\n\n  .ReactCrop__crop-selection {\n    position: absolute;\n    top: 0;\n    left: 0;\n    transform: translateZ(0);\n    cursor: move;\n  }\n\n  .ReactCrop--disabled .ReactCrop__crop-selection {\n    cursor: inherit;\n  }\n\n  .ReactCrop--circular-crop .ReactCrop__crop-selection {\n    border-radius: 50%;\n  }\n\n  .ReactCrop--circular-crop .ReactCrop__crop-selection:after {\n    pointer-events: none;\n    content: '';\n    position: absolute;\n    top: -1px;\n    right: -1px;\n    bottom: -1px;\n    left: -1px;\n    border: 1px solid var(--rc-border-color);\n    opacity: 0.3;\n  }\n\n  .ReactCrop--no-animate .ReactCrop__crop-selection {\n    outline: 1px dashed white;\n  }\n\n  .ReactCrop__crop-selection:not(\n    .ReactCrop--no-animate .ReactCrop__crop-selection\n  ) {\n    animation: marching-ants 1s;\n    background-image:\n      linear-gradient(to right, #fff 50%, #444 50%),\n      linear-gradient(to right, #fff 50%, #444 50%),\n      linear-gradient(to bottom, #fff 50%, #444 50%),\n      linear-gradient(to bottom, #fff 50%, #444 50%);\n    background-size:\n      10px 1px,\n      10px 1px,\n      1px 10px,\n      1px 10px;\n    background-position:\n      0 0,\n      0 100%,\n      0 0,\n      100% 0;\n    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n    color: #fff;\n    animation-play-state: running;\n    animation-timing-function: linear;\n    animation-iteration-count: infinite;\n  }\n\n  .ReactCrop__crop-selection:focus {\n    outline: 2px solid var(--rc-focus-color);\n    outline-offset: -1px;\n  }\n\n  .ReactCrop--invisible-crop .ReactCrop__crop-mask,\n  .ReactCrop--invisible-crop .ReactCrop__crop-selection {\n    display: none;\n  }\n\n  .ReactCrop__rule-of-thirds-vt:before,\n  .ReactCrop__rule-of-thirds-vt:after,\n  .ReactCrop__rule-of-thirds-hz:before,\n  .ReactCrop__rule-of-thirds-hz:after {\n    content: '';\n    display: block;\n    position: absolute;\n    background-color: #fff6;\n  }\n\n  .ReactCrop__rule-of-thirds-vt:before,\n  .ReactCrop__rule-of-thirds-vt:after {\n    width: 1px;\n    height: 100%;\n  }\n\n  .ReactCrop__rule-of-thirds-vt:before {\n    left: 33.3333333333%;\n  }\n\n  .ReactCrop__rule-of-thirds-vt:after {\n    left: 66.6666666667%;\n  }\n\n  .ReactCrop__rule-of-thirds-hz:before,\n  .ReactCrop__rule-of-thirds-hz:after {\n    width: 100%;\n    height: 1px;\n  }\n\n  .ReactCrop__rule-of-thirds-hz:before {\n    top: 33.3333333333%;\n  }\n\n  .ReactCrop__rule-of-thirds-hz:after {\n    top: 66.6666666667%;\n  }\n\n  .ReactCrop__drag-handle {\n    position: absolute;\n    width: var(--rc-drag-handle-size);\n    height: var(--rc-drag-handle-size);\n    background-color: var(--rc-drag-handle-bg-colour);\n    border: 1px solid var(--rc-border-color);\n  }\n\n  .ReactCrop__drag-handle:focus {\n    background: var(--rc-focus-color);\n  }\n\n  .ReactCrop .ord-nw {\n    top: 0;\n    left: 0;\n    transform: translate(-50%, -50%);\n    cursor: nw-resize;\n  }\n\n  .ReactCrop .ord-n {\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    cursor: n-resize;\n  }\n\n  .ReactCrop .ord-ne {\n    top: 0;\n    right: 0;\n    transform: translate(50%, -50%);\n    cursor: ne-resize;\n  }\n\n  .ReactCrop .ord-e {\n    top: 50%;\n    right: 0;\n    transform: translate(50%, -50%);\n    cursor: e-resize;\n  }\n\n  .ReactCrop .ord-se {\n    bottom: 0;\n    right: 0;\n    transform: translate(50%, 50%);\n    cursor: se-resize;\n  }\n\n  .ReactCrop .ord-s {\n    bottom: 0;\n    left: 50%;\n    transform: translate(-50%, 50%);\n    cursor: s-resize;\n  }\n\n  .ReactCrop .ord-sw {\n    bottom: 0;\n    left: 0;\n    transform: translate(-50%, 50%);\n    cursor: sw-resize;\n  }\n\n  .ReactCrop .ord-w {\n    top: 50%;\n    left: 0;\n    transform: translate(-50%, -50%);\n    cursor: w-resize;\n  }\n\n  .ReactCrop__disabled .ReactCrop__drag-handle {\n    cursor: inherit;\n  }\n\n  .ReactCrop__drag-bar {\n    position: absolute;\n  }\n\n  .ReactCrop__drag-bar.ord-n {\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: var(--rc-drag-bar-size);\n    transform: translateY(-50%);\n  }\n\n  .ReactCrop__drag-bar.ord-e {\n    right: 0;\n    top: 0;\n    width: var(--rc-drag-bar-size);\n    height: 100%;\n    transform: translate(50%);\n  }\n\n  .ReactCrop__drag-bar.ord-s {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: var(--rc-drag-bar-size);\n    transform: translateY(50%);\n  }\n\n  .ReactCrop__drag-bar.ord-w {\n    top: 0;\n    left: 0;\n    width: var(--rc-drag-bar-size);\n    height: 100%;\n    transform: translate(-50%);\n  }\n\n  .ReactCrop--new-crop .ReactCrop__drag-bar,\n  .ReactCrop--new-crop .ReactCrop__drag-handle,\n  .ReactCrop--fixed-aspect .ReactCrop__drag-bar,\n  .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,\n  .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,\n  .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,\n  .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w {\n    display: none;\n  }\n\n  @media (pointer: coarse) {\n    .ReactCrop .ord-n,\n    .ReactCrop .ord-e,\n    .ReactCrop .ord-s,\n    .ReactCrop .ord-w {\n      display: none;\n    }\n\n    .ReactCrop__drag-handle {\n      width: var(--rc-drag-handle-mobile-size);\n      height: var(--rc-drag-handle-mobile-size);\n    }\n  }\n"])));
+
+exports.default = globalStyles;

package/dist/esm/components/Alert.js

@@ -1,5 +1,5 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import React from 'react';
+import React, { forwardRef } from 'react';
 import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined';
 import ErrorOutlineOutlinedIcon from '@mui/icons-material/ErrorOutlineOutlined';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
@@ -32,7 +32,7 @@ var icons = {
     }
   })
 };
-function Alert(_ref) {
+var Alert = /*#__PURE__*/forwardRef(function Alert2(_ref, ref) {
   var children = _ref.children,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "info" : _ref$color,
@@ -48,10 +48,11 @@ function Alert(_ref) {
     variant: variantMap[variant] || variant,
     severity: color,
     iconMapping: icons,
-    closeText: "undo"
+    closeText: "undo",
+    ref: ref
   }, rest), (!icon || !color || !icons[color]) && {
     icon: false
   }), title && /* @__PURE__ */React.createElement(StyledAlertTitle, null, title), children);
-}
+});
 
 export { Alert as default };

package/dist/esm/components/AvatarCropDialog.js

@@ -1,4 +1,4 @@
-import { slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import useMediaQuery from '@mui/material/useMediaQuery';
@@ -28,13 +28,16 @@ function AvatarCropDialog(_ref) {
     } : _ref$onDelete,
     _ref$droppedFile = _ref.droppedFile,
     droppedFile = _ref$droppedFile === void 0 ? null : _ref$droppedFile;
-  var isNotMobile = useMediaQuery(function (theme) {
-    return theme.breakpoints.up("md");
+  var isMobile = useMediaQuery(function (theme) {
+    return theme.breakpoints.down("md");
   });
   var _useState = useState({
       aspect: 1,
       unit: "%",
-      width: 100
+      width: 50,
+      height: 50,
+      x: 25,
+      y: 25
     }),
     _useState2 = _slicedToArray(_useState, 2),
     crop = _useState2[0],
@@ -68,9 +71,13 @@ function AvatarCropDialog(_ref) {
     });
   };
   var handleCropChange = function handleCropChange(newCrop) {
-    return setCrop(newCrop);
+    setCrop(_objectSpread2(_objectSpread2({}, newCrop), {}, {
+      height: newCrop.width,
+      aspect: 1
+    }));
   };
-  var handleImageLoaded = function handleImageLoaded(image) {
+  var handleImageLoaded = function handleImageLoaded(e) {
+    var image = e.target;
     var width = image.width;
     if (window.innerHeight * 0.7 < image.height) {
       width = image.width * (window.innerHeight * 0.7 / image.height);
@@ -133,7 +140,6 @@ function AvatarCropDialog(_ref) {
   }, /* @__PURE__ */React.createElement(StyledEditor, {
     showError: showError
   }, /* @__PURE__ */React.createElement(ReactCrop, {
-    src: droppedFile,
     crop: crop,
     style: {
       width: editorWidth,
@@ -141,19 +147,29 @@ function AvatarCropDialog(_ref) {
     },
     circularCrop: true,
     onChange: handleCropChange,
-    onImageLoaded: handleImageLoaded,
     keepSelection: true
-  }))), /* @__PURE__ */React.createElement(ModalActions, null, /* @__PURE__ */React.createElement(Button, {
+  }, /* @__PURE__ */React.createElement("img", {
+    src: droppedFile,
+    onLoad: handleImageLoaded
+  })))), /* @__PURE__ */React.createElement(ModalActions, {
+    sx: {
+      flexDirection: {
+        xs: "column",
+        md: "row",
+        gap: "16px"
+      }
+    }
+  }, /* @__PURE__ */React.createElement(Button, {
     onClick: handleCancel,
     variant: "outlined",
     loading: cancelling,
     color: "primaryAlt",
-    fullWidth: !isNotMobile
+    fill: isMobile
   }, "Cancel"), /* @__PURE__ */React.createElement(Button, {
     onClick: handleImageSave,
     loading: saving,
     color: "primaryAlt",
-    fullWidth: !isNotMobile
+    fill: isMobile
   }, "Save")), /* @__PURE__ */React.createElement(Confirmation, {
     open: confirmDelete,
     onCancel: function onCancel() {

package/dist/esm/components/AvatarInput.js

@@ -10,13 +10,12 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import PersonIcon from '@mui/icons-material/Person';
 import WarningIcon from '@mui/icons-material/Warning';
 import { useDropzone } from 'react-dropzone';
+import IconButton from './IconButton.js';
 import Confirmation from './Confirmation.js';
 import Modal from './Modal.js';
-import ModalContent from './ModalContent.js';
-import ModalHeader from './ModalHeader.js';
 import Text from './Text.js';
 import AvatarCropDialog from './AvatarCropDialog.js';
-import { StyledRoot, StyledLinearProgress, StyledCircularProgress, StyledAvatarIcon, StyledAvatar, StyledAddIcon, StyledDeleteIcon } from './AvatarInput.styled.js';
+import { StyledRoot, StyledLinearProgress, StyledCircularProgress, StyledAvatarIcon, StyledAvatar, StyledAddIcon } from './AvatarInput.styled.js';
 
 var _excluded = ["disabled", "edges", "dropzoneLabel", "dropzoneDescription", "placeholder", "onSave", "onDelete", "value", "DropzoneIcon", "hasSelection"];
 function AvatarInput(_ref) {
@@ -166,26 +165,34 @@ function AvatarInput(_ref) {
     align: isNotMobile ? "left" : "center",
     weight: "500",
     color: "textPrimary"
-  }, isDragReject ? "The selected file(s) will not be accepted" : dropzoneDescription))))), (savedImage || value) &&
-  // <ActionArea onClick={() => setConfirmDelete(true)}>
-  /* @__PURE__ */
-  React.createElement(StyledDeleteIcon, null, /* @__PURE__ */React.createElement(DeleteIcon, null))), droppedFile && /* @__PURE__ */React.createElement(Modal, {
+  }, isDragReject ? "The selected file(s) will not be accepted" : dropzoneDescription))))), (savedImage || value) && /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      position: "absolute",
+      top: "50%",
+      right: "25px",
+      zIndex: 9,
+      transform: "translateY(-50%)"
+    }
+  }, /* @__PURE__ */React.createElement(IconButton, {
+    color: "error",
+    size: "large",
+    onClick: function onClick() {
+      return setConfirmDelete(true);
+    }
+  }, /* @__PURE__ */React.createElement(DeleteIcon, null)))), droppedFile && /* @__PURE__ */React.createElement(Modal, {
     open: open,
     onClose: function onClose() {
       return setOpen(false);
     },
     fullWidth: true,
-    maxWidth: "lg"
-  }, /* @__PURE__ */React.createElement(ModalHeader, {
-    onClose: function onClose() {
-      return setOpen(false);
-    }
-  }, /* @__PURE__ */React.createElement("span", null, "\xA0")), /* @__PURE__ */React.createElement(ModalContent, null, /* @__PURE__ */React.createElement(AvatarCropDialog, _objectSpread2(_objectSpread2({
-    droppedFile: droppedFile
-  }, rest), {}, {
-    onSave: handleSave,
-    onDelete: handleDelete
-  })))), /* @__PURE__ */React.createElement(Confirmation, {
+    maxWidth: "md",
+    content: /* @__PURE__ */React.createElement(AvatarCropDialog, _objectSpread2(_objectSpread2({
+      droppedFile: droppedFile
+    }, rest), {}, {
+      onSave: handleSave,
+      onDelete: handleDelete
+    }))
+  }), /* @__PURE__ */React.createElement(Confirmation, {
     open: confirmDelete,
     onCancel: function onCancel() {
       return setConfirmDelete(false);

package/dist/esm/components/BaseModal.js

@@ -17,7 +17,7 @@ function BaseModal(_ref) {
     _ref$maxWidth = _ref.maxWidth,
     maxWidth = _ref$maxWidth === void 0 ? "sm" : _ref$maxWidth,
     _ref$onClose = _ref.onClose,
-    onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
+    onClose = _ref$onClose === void 0 ? void 0 : _ref$onClose,
     _ref$open = _ref.open,
     open = _ref$open === void 0 ? false : _ref$open,
     _ref$slotProps = _ref.slotProps,

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

@@ -5,24 +5,24 @@ import ButtonGroup from '@mui/material/ButtonGroup';
 
 var selectedStyles = function selectedStyles(hasError, theme) {
   return {
-    borderColor: hasError === "yes" ? theme.palette.secondary.main : theme.palette.primaryAlt.main,
+    borderColor: hasError === "yes" ? theme.palette.secondary.main : theme.palette.primary.main,
     color: "#fff",
-    background: hasError === "yes" ? theme.palette.secondary.main : theme.palette.primaryAlt.main,
+    background: hasError === "yes" ? theme.palette.secondary.main : theme.palette.primary.main,
     "&:hover": {
-      background: hasError === "yes" ? theme.palette.secondary.dark : theme.palette.primaryAlt.dark
+      background: hasError === "yes" ? theme.palette.secondary.dark : theme.palette.primary.dark
     }
   };
 };
 var unselectedStyles = function unselectedStyles(error, theme) {
   return {
-    borderColor: error === "yes" ? theme.palette.secondary.main : theme.palette.primaryAlt.main,
-    color: error === "yes" ? theme.palette.secondary.main : theme.palette.primaryAlt.main
+    borderColor: error === "yes" ? theme.palette.secondary.main : theme.palette.primary.main,
+    color: error === "yes" ? theme.palette.secondary.main : theme.palette.primary.main
   };
 };
 var requiredUnselectedStyles = function requiredUnselectedStyles(selected, theme) {
   return {
-    borderColor: !selected ? theme.palette.secondary.main : theme.palette.primaryAlt.main,
-    color: !selected ? theme.palette.secondary.main : theme.palette.primaryAlt.main
+    borderColor: !selected ? theme.palette.secondary.main : theme.palette.primary.main,
+    color: !selected ? theme.palette.secondary.main : theme.palette.primary.main
   };
 };
 var borderRadiusStyles = function borderRadiusStyles(edges, theme) {

package/dist/esm/components/CroppedImageInput.js

@@ -18,7 +18,7 @@ import Modal from './Modal.js';
 import ModalHeader from './ModalHeader.js';
 import ModalContent from './ModalContent.js';
 import CroppedImageInputActions from './CroppedImageInputActions.js';
-import { StyledCircularProgress, StyledSavedImage, StyledFileIcon, StyledDeleteIcon, StyledEditor } from './CroppedImageInput.styled.js';
+import { StyledCircularProgress, StyledSavedImage, StyledFileIcon, StyledEditor } from './CroppedImageInput.styled.js';
 import { isImage } from '../utils/helpers/file.js';
 
 function CroppedImageInput(_ref) {
@@ -334,7 +334,12 @@ function CroppedImageInput(_ref) {
     item: true,
     xs: 12,
     md: 1
-  }, /* @__PURE__ */React.createElement(StyledDeleteIcon, null, /* @__PURE__ */React.createElement(DeleteIcon, null))))), !src && !documentFile && !croppedImage && (openInDialog ? /* @__PURE__ */React.createElement(motion.div, _objectSpread2(_objectSpread2({}, fade), {}, {
+  }, /* @__PURE__ */React.createElement(IconButton, {
+    onClick: function onClick() {
+      return setConfirmDelete(true);
+    },
+    color: "error"
+  }, /* @__PURE__ */React.createElement(DeleteIcon, null))))), !src && !documentFile && !croppedImage && (openInDialog ? /* @__PURE__ */React.createElement(motion.div, _objectSpread2(_objectSpread2({}, fade), {}, {
     key: "upload-button"
   }), /* @__PURE__ */React.createElement(FileUploadButton, {
     onUpload: onDrop,

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

@@ -1,11 +1,8 @@
-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';
 
-var _templateObject, _templateObject2;
 var borderRadius = function borderRadius(edges, theme) {
   switch (edges) {
     case "rounded":
@@ -69,9 +66,5 @@ var StyledCircularProgress = styled(CircularProgress)({
   marginLeft: -20,
   zIndex: 1
 });
-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 };
+export { StyledCircularProgress, StyledEditor, StyledFileIcon, StyledSavedImage };

package/dist/esm/components/CroppedImageInputActions.js

@@ -33,22 +33,20 @@ function CroppedImageInputActions(_ref) {
     }, /* @__PURE__ */React.createElement(Grid, {
       item: true
     }, /* @__PURE__ */React.createElement(Button, _objectSpread2({
-      loading: true,
       color: "primaryAlt",
       variant: "outlined",
       size: "large",
       onClick: handleCancel,
-      pending: cancelling,
+      loading: cancelling,
       disabled: disabled,
       fullWidth: !isNotMobile
     }, cancelButtonProps), cancelButtonProps.text || "Cancel")), /* @__PURE__ */React.createElement(Grid, {
       item: true
     }, /* @__PURE__ */React.createElement(Button, _objectSpread2({
-      loading: true,
       color: "primary",
       size: "large",
       onClick: handleImageSave,
-      pending: saving,
+      loading: saving,
       disabled: disabled,
       fullWidth: !isNotMobile
     }, saveButtonProps), saveButtonProps.text || "Save"))))

package/dist/esm/components/DropZone.js

@@ -65,15 +65,15 @@ function DropZone(_ref) {
   })), !isDragAccept && !isDragReject && /* @__PURE__ */React.createElement(StyledIcon, {
     compact: compact
   }, /* @__PURE__ */React.createElement(CloudUploadIcon, {
-    color: "inherit",
+    color: "primary",
     fontSize: "inherit"
   })), /* @__PURE__ */React.createElement(Typography, {
-    variant: "subtitle2",
+    variant: "body1",
     align: "center"
   }, isDragReject ? "Error" : dropzoneLabel), /* @__PURE__ */React.createElement(Typography, {
     variant: "body2",
     align: "center",
-    color: "textSecondary"
+    color: "text.blue"
   }, isDragReject ? "The selected file(s) will not be accepted" : dropzoneDescription)), /* @__PURE__ */React.createElement(AnimatePresence, null, listAcceptedFiles && acceptedFiles.length > 0 && /* @__PURE__ */React.createElement(motion.div, {
     initial: {
       translateY: -20,

package/dist/esm/components/FileUpload.js

@@ -1,11 +1,11 @@
 import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import Alert from '@mui/material/Alert';
-import { AnimateSharedLayout, AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 import DeleteIcon from '@mui/icons-material/Delete';
 import DropZone from './DropZone.js';
 import FormControl from './FormControl.js';
+import Alert from './Alert.js';
 import Button from './Button.js';
 import Confirmation from './Confirmation.js';
 import IconButton from './IconButton.js';
@@ -154,7 +154,7 @@ function FileUpload(_ref) {
     edges: edges
   }, /* @__PURE__ */React.createElement(FormFocus, {
     name: name
-  }), files && files.length > 0 && /* @__PURE__ */React.createElement(StyledSavedWrapper, _objectSpread2(_objectSpread2({}, fade), {}, {
+  }), files && files.length > 0 && /* @__PURE__ */React.createElement(AnimatePresence, null, /* @__PURE__ */React.createElement(StyledSavedWrapper, _objectSpread2(_objectSpread2({}, fade), {}, {
     edges: edges
   }), (saving || loading) && /* @__PURE__ */React.createElement(StyledLoader, {
     disableShrink: true
@@ -165,10 +165,9 @@ function FileUpload(_ref) {
   }, /* @__PURE__ */React.createElement(Grid, {
     item: true,
     xs: 12
-  }, /* @__PURE__ */React.createElement(AnimateSharedLayout, null, files.map(function (file, index) {
-    return /* @__PURE__ */React.createElement(AnimatePresence, {
-      key: getFileName(file)
-    }, /* @__PURE__ */React.createElement(motion.div, {
+  }, files.map(function (file, index) {
+    return /* @__PURE__ */React.createElement(motion.div, {
+      key: getFileName(file),
       positionTransition: true,
       initial: {
         opacity: 0,
@@ -188,7 +187,7 @@ function FileUpload(_ref) {
         }
       }
     }, /* @__PURE__ */React.createElement(Alert, {
-      severity: showError || fileErrors(file, index) !== null ? "error" : "success",
+      color: showError || fileErrors(file, index) !== null ? "error" : "success",
       style: {
         marginBottom: 5
       },
@@ -196,24 +195,19 @@ function FileUpload(_ref) {
         onClick: function onClick() {
           return setViewedFile(file);
         },
-        color: "inherit",
+        color: "success",
         size: "small",
         variant: "text"
       }, "View"), /* @__PURE__ */React.createElement(Tooltip, {
-        title: "Delete",
-        enterDelay: 0
-      }, /* @__PURE__ */React.createElement("div", null, /* @__PURE__ */React.createElement(IconButton, {
+        title: "Delete"
+      }, /* @__PURE__ */React.createElement(IconButton, {
         disabled: saving,
         size: "small",
-        "aria-label": "delete",
-        style: {
-          padding: 0
-        },
         onClick: function onClick() {
           return !showError ? handleDeleteConfirmation(index) : handleDeleteWithoutConfirmation(index);
         }
-      }, /* @__PURE__ */React.createElement(DeleteIcon, null)))))
-    }, /* @__PURE__ */React.createElement(StyledAlertTitle, null, getFileName(file)), fileErrors(file, index))));
+      }, /* @__PURE__ */React.createElement(DeleteIcon, null))))
+    }, /* @__PURE__ */React.createElement(StyledAlertTitle, null, getFileName(file)), fileErrors(file, index)));
   }))))), (!files || files.length === 0 || !dropzoneProps || dropzoneProps.maxFiles === void 0 || dropzoneProps.maxFiles > 1) && /* @__PURE__ */React.createElement(motion.div, _objectSpread2(_objectSpread2({}, fade), {}, {
     style: files && files.length > 0 ? {
       marginTop: 8

package/dist/esm/components/FileUploadButton.js

@@ -86,9 +86,8 @@ function FileUploadButton(_ref) {
     getRootProps = _useDropzone.getRootProps,
     getInputProps = _useDropzone.getInputProps;
   return /* @__PURE__ */React.createElement("span", _objectSpread2({}, getRootProps()), /* @__PURE__ */React.createElement(Button, _objectSpread2({
-    loading: true,
     disabled: disabled,
-    pending: pending,
+    loading: pending,
     pendingIndicator: /* @__PURE__ */React.createElement(FileUploadButtonLoader, {
       accepted: accepted,
       rejected: rejected

package/dist/esm/components/FlashMessage.js

@@ -12,12 +12,12 @@ function FlashMessage(_ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "success" : _ref$color,
     _ref$horizontal = _ref.horizontal,
-    horizontal = _ref$horizontal === void 0 ? "center" : _ref$horizontal,
+    horizontal = _ref$horizontal === void 0 ? "right" : _ref$horizontal,
     _ref$open = _ref.open,
     open = _ref$open === void 0 ? false : _ref$open,
     onClose = _ref.onClose,
     _ref$vertical = _ref.vertical,
-    vertical = _ref$vertical === void 0 ? "top" : _ref$vertical,
+    vertical = _ref$vertical === void 0 ? "bottom" : _ref$vertical,
     rest = _objectWithoutProperties(_ref, _excluded);
   var handleClose = function handleClose() {
     onClose();
@@ -30,11 +30,10 @@ function FlashMessage(_ref) {
     autoHideDuration: autoHideDuration,
     open: open,
     onClose: handleClose,
-    message: "This is a text snack message"
+    message: "snack"
   }, rest), /* @__PURE__ */React.createElement(Alert, {
     color: color,
-    onClose: handleClose,
-    elevation: 7
+    onClose: handleClose
   }, children));
 }
 FlashMessage.propTypes = {

package/dist/esm/components/FormControl.js

@@ -69,16 +69,11 @@ var FormControl = /*#__PURE__*/forwardRef(function FormControl2(_ref, ref) {
     color: props.color === "default" ? "info" : props.color
   }, statusMessage))), !!helperText && /* @__PURE__ */React.createElement(FormHelperText, {
     sx: {
-      color: "text.primary",
-      fontSize: function fontSize(theme) {
-        if (size === "medium") {
-          return "".concat(theme.typography.fontSize, "px");
-        }
-        return null;
-      },
-      padding: 0,
+      color: "text.blue",
+      fontSize: "13px",
+      padding: "0 0 0 8px",
       margin: 0,
-      mt: statusMessage ? 0 : "8px"
+      mt: statusMessage ? 0 : "6px"
     }
   }, helperText));
 });

package/dist/esm/components/Heading.js

@@ -13,7 +13,7 @@ function Heading(_ref) {
     _ref$transform = _ref.transform,
     transform = _ref$transform === void 0 ? void 0 : _ref$transform,
     _ref$weight = _ref.weight,
-    weight = _ref$weight === void 0 ? "600" : _ref$weight,
+    weight = _ref$weight === void 0 ? "700" : _ref$weight,
     _ref$sx = _ref.sx,
     sx = _ref$sx === void 0 ? {} : _ref$sx,
     rest = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/components/Modal.js

@@ -48,9 +48,9 @@ function Modal(_ref) {
         }
       }
     }
-  }), heading && /* @__PURE__ */React.createElement(ModalHeader, {
+  }), heading && /* @__PURE__ */React.createElement(ModalHeader, _objectSpread2({}, onClose && {
     onClose: handleClose
-  }, loading && /* @__PURE__ */React.createElement(Skeleton, {
+  }), loading && /* @__PURE__ */React.createElement(Skeleton, {
     variant: "text",
     height: 20,
     width: 250

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

@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components';
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 var StyledContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "}\n"])), function (_ref) {
   var theme = _ref.theme;
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    @media screen and (max-width: 767px) {\n      flex-direction: column;\n      padding: ", ";\n    }\n    @media screen and (min-width: 768px) {\n      height: 100%;\n    }\n  "])), theme.spacing(3));
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    cusor: pointer;\n    @media screen and (max-width: 767px) {\n      flex-direction: column;\n      padding: ", ";\n    }\n    @media screen and (min-width: 768px) {\n      height: 100%;\n    }\n  "])), theme.spacing(3));
 });
 var StyledImg = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ", "}\n\n"])), function (_ref2) {
   var theme = _ref2.theme;

package/dist/esm/components/SuccessModal.js

@@ -5,7 +5,6 @@ import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 import { StyledContent, StyledIcon } from './SuccessModal.styled.js';
 import Heading from './Heading.js';
 import Modal from './Modal.js';
-import ModalContent from './ModalContent.js';
 
 function SuccessModal(_ref) {
   var _ref$duration = _ref.duration,
@@ -19,23 +18,25 @@ function SuccessModal(_ref) {
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
   useEffect(function () {
-    if (show) {
-      setIsOpen(true);
-      setTimeout(function () {
-        return setIsOpen(false);
-      }, duration);
-    }
+    setIsOpen(show);
+    var timeout = setTimeout(function () {
+      return setIsOpen(false);
+    }, duration);
+    return function () {
+      return clearTimeout(timeout);
+    };
   }, [duration, show]);
   return /* @__PURE__ */React.createElement(Modal, {
     open: isOpen,
     fullWidth: true,
     maxWidth: "sm",
-    hideBackdrop: true
-  }, /* @__PURE__ */React.createElement(ModalContent, null, /* @__PURE__ */React.createElement(StyledContent, null, /* @__PURE__ */React.createElement(StyledIcon, null, /* @__PURE__ */React.createElement(CheckCircleOutlineIcon, null)), /* @__PURE__ */React.createElement(Heading, {
-    align: "center",
-    as: "h4",
-    gutterBottom: false
-  }, message))));
+    hideBackdrop: true,
+    content: /* @__PURE__ */React.createElement(StyledContent, null, /* @__PURE__ */React.createElement(StyledIcon, null, /* @__PURE__ */React.createElement(CheckCircleOutlineIcon, null)), /* @__PURE__ */React.createElement(Heading, {
+      align: "center",
+      as: "h4",
+      gutterBottom: false
+    }, message))
+  });
 }
 SuccessModal.propTypes = {
   /**

package/dist/esm/components/ThemeProvider.js

@@ -1,11 +1,12 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ThemeProvider as ThemeProvider$2 } from '@emotion/react';
+import { ThemeProvider as ThemeProvider$2, Global } from '@emotion/react';
 import { ThemeProvider as ThemeProvider$1 } from 'styled-components';
 import { createTheme, StyledEngineProvider, ThemeProvider as ThemeProvider$3 } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import theme from '../theme/index.js';
+import globalStyles from '../utils/allGlobalStyles.js';
 
 var _excluded = ["theme", "children"];
 function ThemeProvider(_ref) {
@@ -24,7 +25,9 @@ function ThemeProvider(_ref) {
     theme: mergedTheme
   }, /* @__PURE__ */React.createElement(ThemeProvider$3, _objectSpread2({
     theme: mergedTheme
-  }, rest), /* @__PURE__ */React.createElement(CssBaseline, null), children))));
+  }, rest), /* @__PURE__ */React.createElement(CssBaseline, null), /* @__PURE__ */React.createElement(Global, {
+    styles: globalStyles
+  }), children))));
 }
 ThemeProvider.propTypes = {
   theme: PropTypes.shape({

package/dist/esm/index.js

@@ -50,6 +50,7 @@ export { default as Skeleton } from './components/Skeleton.js';
 export { default as Stepper } from './components/Stepper.js';
 export { default as SuccessModal } from './components/SuccessModal.js';
 export { default as Switch } from './components/Switch.js';
+export { default as StatusMessage } from './components/StatusMessage.js';
 export { default as Tab } from './components/Tab.js';
 export { default as TabPanel } from './components/TabPanel.js';
 export { default as Tabs } from './components/Tabs.js';

package/dist/esm/utils/allGlobalStyles.js

@@ -0,0 +1,7 @@
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { css } from '@emotion/react';
+
+var _templateObject;
+var globalStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  @keyframes marching-ants {\n    0% {\n      background-position:\n        0 0,\n        0 100%,\n        0 0,\n        100% 0;\n    }\n\n    to {\n      background-position:\n        20px 0,\n        -20px 100%,\n        0 -20px,\n        100% 20px;\n    }\n  }\n\n  :root {\n    --rc-drag-handle-size: 12px;\n    --rc-drag-handle-mobile-size: 24px;\n    --rc-drag-handle-bg-colour: rgba(0, 0, 0, 0.2);\n    --rc-drag-bar-size: 6px;\n    --rc-border-color: rgba(255, 255, 255, 0.7);\n    --rc-focus-color: #0088ff;\n  }\n\n  .ReactCrop {\n    position: relative;\n    display: inline-block;\n    cursor: crosshair;\n    max-width: 100%;\n  }\n\n  .ReactCrop *,\n  .ReactCrop *:before,\n  .ReactCrop *:after {\n    box-sizing: border-box;\n  }\n\n  .ReactCrop--disabled,\n  .ReactCrop--locked {\n    cursor: inherit;\n  }\n\n  .ReactCrop__child-wrapper {\n    overflow: hidden;\n    max-height: inherit;\n  }\n\n  .ReactCrop__child-wrapper > img,\n  .ReactCrop__child-wrapper > video {\n    display: block;\n    max-width: 100%;\n    max-height: inherit;\n  }\n\n  .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > img,\n  .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > video {\n    touch-action: none;\n  }\n\n  .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection {\n    touch-action: none;\n  }\n\n  .ReactCrop__crop-mask {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    pointer-events: none;\n    width: calc(100% + 0.5px);\n    height: calc(100% + 0.5px);\n  }\n\n  .ReactCrop__crop-selection {\n    position: absolute;\n    top: 0;\n    left: 0;\n    transform: translateZ(0);\n    cursor: move;\n  }\n\n  .ReactCrop--disabled .ReactCrop__crop-selection {\n    cursor: inherit;\n  }\n\n  .ReactCrop--circular-crop .ReactCrop__crop-selection {\n    border-radius: 50%;\n  }\n\n  .ReactCrop--circular-crop .ReactCrop__crop-selection:after {\n    pointer-events: none;\n    content: '';\n    position: absolute;\n    top: -1px;\n    right: -1px;\n    bottom: -1px;\n    left: -1px;\n    border: 1px solid var(--rc-border-color);\n    opacity: 0.3;\n  }\n\n  .ReactCrop--no-animate .ReactCrop__crop-selection {\n    outline: 1px dashed white;\n  }\n\n  .ReactCrop__crop-selection:not(\n    .ReactCrop--no-animate .ReactCrop__crop-selection\n  ) {\n    animation: marching-ants 1s;\n    background-image:\n      linear-gradient(to right, #fff 50%, #444 50%),\n      linear-gradient(to right, #fff 50%, #444 50%),\n      linear-gradient(to bottom, #fff 50%, #444 50%),\n      linear-gradient(to bottom, #fff 50%, #444 50%);\n    background-size:\n      10px 1px,\n      10px 1px,\n      1px 10px,\n      1px 10px;\n    background-position:\n      0 0,\n      0 100%,\n      0 0,\n      100% 0;\n    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n    color: #fff;\n    animation-play-state: running;\n    animation-timing-function: linear;\n    animation-iteration-count: infinite;\n  }\n\n  .ReactCrop__crop-selection:focus {\n    outline: 2px solid var(--rc-focus-color);\n    outline-offset: -1px;\n  }\n\n  .ReactCrop--invisible-crop .ReactCrop__crop-mask,\n  .ReactCrop--invisible-crop .ReactCrop__crop-selection {\n    display: none;\n  }\n\n  .ReactCrop__rule-of-thirds-vt:before,\n  .ReactCrop__rule-of-thirds-vt:after,\n  .ReactCrop__rule-of-thirds-hz:before,\n  .ReactCrop__rule-of-thirds-hz:after {\n    content: '';\n    display: block;\n    position: absolute;\n    background-color: #fff6;\n  }\n\n  .ReactCrop__rule-of-thirds-vt:before,\n  .ReactCrop__rule-of-thirds-vt:after {\n    width: 1px;\n    height: 100%;\n  }\n\n  .ReactCrop__rule-of-thirds-vt:before {\n    left: 33.3333333333%;\n  }\n\n  .ReactCrop__rule-of-thirds-vt:after {\n    left: 66.6666666667%;\n  }\n\n  .ReactCrop__rule-of-thirds-hz:before,\n  .ReactCrop__rule-of-thirds-hz:after {\n    width: 100%;\n    height: 1px;\n  }\n\n  .ReactCrop__rule-of-thirds-hz:before {\n    top: 33.3333333333%;\n  }\n\n  .ReactCrop__rule-of-thirds-hz:after {\n    top: 66.6666666667%;\n  }\n\n  .ReactCrop__drag-handle {\n    position: absolute;\n    width: var(--rc-drag-handle-size);\n    height: var(--rc-drag-handle-size);\n    background-color: var(--rc-drag-handle-bg-colour);\n    border: 1px solid var(--rc-border-color);\n  }\n\n  .ReactCrop__drag-handle:focus {\n    background: var(--rc-focus-color);\n  }\n\n  .ReactCrop .ord-nw {\n    top: 0;\n    left: 0;\n    transform: translate(-50%, -50%);\n    cursor: nw-resize;\n  }\n\n  .ReactCrop .ord-n {\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    cursor: n-resize;\n  }\n\n  .ReactCrop .ord-ne {\n    top: 0;\n    right: 0;\n    transform: translate(50%, -50%);\n    cursor: ne-resize;\n  }\n\n  .ReactCrop .ord-e {\n    top: 50%;\n    right: 0;\n    transform: translate(50%, -50%);\n    cursor: e-resize;\n  }\n\n  .ReactCrop .ord-se {\n    bottom: 0;\n    right: 0;\n    transform: translate(50%, 50%);\n    cursor: se-resize;\n  }\n\n  .ReactCrop .ord-s {\n    bottom: 0;\n    left: 50%;\n    transform: translate(-50%, 50%);\n    cursor: s-resize;\n  }\n\n  .ReactCrop .ord-sw {\n    bottom: 0;\n    left: 0;\n    transform: translate(-50%, 50%);\n    cursor: sw-resize;\n  }\n\n  .ReactCrop .ord-w {\n    top: 50%;\n    left: 0;\n    transform: translate(-50%, -50%);\n    cursor: w-resize;\n  }\n\n  .ReactCrop__disabled .ReactCrop__drag-handle {\n    cursor: inherit;\n  }\n\n  .ReactCrop__drag-bar {\n    position: absolute;\n  }\n\n  .ReactCrop__drag-bar.ord-n {\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: var(--rc-drag-bar-size);\n    transform: translateY(-50%);\n  }\n\n  .ReactCrop__drag-bar.ord-e {\n    right: 0;\n    top: 0;\n    width: var(--rc-drag-bar-size);\n    height: 100%;\n    transform: translate(50%);\n  }\n\n  .ReactCrop__drag-bar.ord-s {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: var(--rc-drag-bar-size);\n    transform: translateY(50%);\n  }\n\n  .ReactCrop__drag-bar.ord-w {\n    top: 0;\n    left: 0;\n    width: var(--rc-drag-bar-size);\n    height: 100%;\n    transform: translate(-50%);\n  }\n\n  .ReactCrop--new-crop .ReactCrop__drag-bar,\n  .ReactCrop--new-crop .ReactCrop__drag-handle,\n  .ReactCrop--fixed-aspect .ReactCrop__drag-bar,\n  .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,\n  .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,\n  .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,\n  .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w {\n    display: none;\n  }\n\n  @media (pointer: coarse) {\n    .ReactCrop .ord-n,\n    .ReactCrop .ord-e,\n    .ReactCrop .ord-s,\n    .ReactCrop .ord-w {\n      display: none;\n    }\n\n    .ReactCrop__drag-handle {\n      width: var(--rc-drag-handle-mobile-size);\n      height: var(--rc-drag-handle-mobile-size);\n    }\n  }\n"])));
+
+export { globalStyles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenancy.nz/ui",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "description": "Library of React UI components for tenancy.co.nz apps.",
   "author": "Tenancy.co.nz <monty@tenancy.co.nz>",
   "keywords": [