@tenancy.nz/ui 1.2.9 → 1.2.10

package/dist/cjs/components/Button.styled.cjs

@@ -8,7 +8,7 @@ var react = require('@emotion/react');
 var styles = require('@mui/material/styles');
 var object = require('../utils/helpers/object.cjs');
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 var edgesStyles = function edgesStyles(_ref) {
   var edges = _ref.edges,
     theme = _ref.theme;
@@ -21,24 +21,25 @@ var sizeStyles = function sizeStyles(_ref2) {
   return react.css(_templateObject6 || (_templateObject6 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  font-weight: ", ";\n  ", "\n  ", "\n     ", "\n"])), object.getObjectProp(theme, "typography.button.fontWeight", "700"), size === "small" && react.css(_templateObject7 || (_templateObject7 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    font-size: calc(\n      ", "px - 2px\n    );\n    height: 32px;\n  "])), object.getObjectProp(theme, "typography.button.fontSize", "14")), size === "medium" && react.css(_templateObject8 || (_templateObject8 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    font-size: ", "px;\n    height: 36px;\n  "])), object.getObjectProp(theme, "typography.button.fontSize", "14")), size === "large" && react.css(_templateObject9 || (_templateObject9 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    font-size: font-size: calc(\n      ", "px + 2px\n    );\n    height: 44px;\n  "])), object.getObjectProp(theme, "typography.button.fontSize", "14")));
 };
 var disabledStyles = react.css(_templateObject0 || (_templateObject0 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  color: var(--tn-palette-text-muted);\n  background-color: var(--tn-palette-background-muted);\n  border: none;\n"])));
+var colors = ["primary", "secondary", "tertiary"];
 var containedStyles = function containedStyles(_ref3) {
   var color = _ref3.color,
     theme = _ref3.theme;
-  return react.css(_templateObject1 || (_templateObject1 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  color: ", ";\n  background-color: ", ";\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n  .MuiButton-loadingWrapper {\n    color: ", ";\n  }\n\n  ", "\n"])), object.getObjectProp(theme, "vars.palette.".concat(color, ".contrastText")), object.getObjectProp(theme, "vars.palette.".concat(color, ".main")), object.getObjectProp(theme, "vars.palette.".concat(color, ".light")), object.getObjectProp(theme, "vars.palette.".concat(color, ".contrastText")), object.getObjectProp(theme, "vars.palette.".concat(color, ".dark")), object.getObjectProp(theme, "vars.palette.".concat(color, ".contrastText")), object.getObjectProp(theme, "vars.palette.".concat(color, ".contrastText")), focusStyles);
+  return react.css(_templateObject1 || (_templateObject1 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  color: ", ";\n  background-color: ", ";\n\n  ", "\n\n  ", "\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n  .MuiButton-loadingWrapper {\n    color: ", ";\n  }\n\n  ", "\n"])), object.getObjectProp(theme, "vars.palette.".concat(color, ".contrastText")), object.getObjectProp(theme, "vars.palette.".concat(color, ".main")), colors.includes(color) && react.css(_templateObject10 || (_templateObject10 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), object.getObjectProp(theme, "vars.palette.".concat(color, ".light")), object.getObjectProp(theme, "vars.palette.".concat(color, ".contrastText"))), !colors.includes(color) && react.css(_templateObject11 || (_templateObject11 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    &:hover {\n      opacity: 0.8;\n    }\n  "]))), object.getObjectProp(theme, "vars.palette.".concat(color, ".dark")), object.getObjectProp(theme, "vars.palette.".concat(color, ".contrastText")), object.getObjectProp(theme, "vars.palette.".concat(color, ".contrastText")), focusStyles);
 };
 var outlinedStyles = function outlinedStyles(_ref4) {
   var color = _ref4.color,
     theme = _ref4.theme;
-  return react.css(_templateObject10 || (_templateObject10 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  color: ", ";\n  background-color: transparent;\n  border: 1px solid currentColor;\n\n  .MuiButton-loadingWrapper {\n    color: ", ";\n  }\n\n  &:hover,\n  &:active {\n    background-color: ", ";\n  }\n\n  ", "\n"])), object.getObjectProp(theme, "vars.palette.".concat(color, ".main")), object.getObjectProp(theme, "vars.palette.".concat(color, ".main")), object.getObjectProp(theme, "vars.palette.background.muted"), focusStyles);
+  return react.css(_templateObject12 || (_templateObject12 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  color: ", ";\n  background-color: transparent;\n  border: 1px solid currentColor;\n\n  .MuiButton-loadingWrapper {\n    color: ", ";\n  }\n\n  &:hover,\n  &:active {\n    background-color: ", ";\n  }\n\n  ", "\n"])), object.getObjectProp(theme, "vars.palette.".concat(color, ".main")), object.getObjectProp(theme, "vars.palette.".concat(color, ".main")), object.getObjectProp(theme, "vars.palette.background.muted"), focusStyles);
 };
-var StyledButton = styles.styled(Button)(_templateObject11 || (_templateObject11 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref5) {
+var StyledButton = styles.styled(Button)(_templateObject13 || (_templateObject13 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref5) {
   var color = _ref5.color,
     disabled = _ref5.disabled,
     edges = _ref5.edges,
     size = _ref5.size,
     theme = _ref5.theme,
     variant = _ref5.variant;
-  return react.css(_templateObject12 || (_templateObject12 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    && {\n      padding: 0px 24px;\n      text-transform: initial;\n      font-weight: 700;\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    }\n  "])), edgesStyles({
+  return react.css(_templateObject14 || (_templateObject14 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    && {\n      padding: 0px 24px;\n      text-transform: initial;\n      font-weight: 700;\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    }\n  "])), edgesStyles({
     edges: edges,
     theme: theme
   }), sizeStyles({

package/dist/cjs/components/Confirmation.cjs

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var Stack = require('@mui/material/Stack');
+var CheckCircleOutlineOutlinedIcon = require('@mui/icons-material/CheckCircleOutlineOutlined');
+var WarningAmberRoundedIcon = require('@mui/icons-material/WarningAmberRounded');
+var InfoOutlinedIcon = require('@mui/icons-material/InfoOutlined');
+var ReportGmailerrorredRoundedIcon = require('@mui/icons-material/ReportGmailerrorredRounded');
+var Box = require('./Box.cjs');
 var Button = require('./Button.cjs');
 var Heading = require('./Heading.cjs');
 var Modal = require('./Modal.cjs');
@@ -27,30 +33,63 @@ function Confirmation(_ref) {
     severity = _ref$severity === void 0 ? "default" : _ref$severity,
     _ref$title = _ref.title,
     title = _ref$title === void 0 ? "Are you sure?" : _ref$title;
+  var severityIconMap = {
+    error: /* @__PURE__ */React.createElement(WarningAmberRoundedIcon, {
+      color: "inherit",
+      fontSize: "inherit"
+    }),
+    info: /* @__PURE__ */React.createElement(InfoOutlinedIcon, {
+      color: "inherit",
+      fontSize: "inherit"
+    }),
+    success: /* @__PURE__ */React.createElement(CheckCircleOutlineOutlinedIcon, {
+      color: "inherit",
+      fontSize: "inherit"
+    }),
+    warning: /* @__PURE__ */React.createElement(ReportGmailerrorredRoundedIcon, {
+      color: "inherit",
+      fontSize: "inherit"
+    })
+  };
   var actions = /* @__PURE__ */React.createElement(React.Fragment, null, onCancel && cancelBtnText && /* @__PURE__ */React.createElement(Button.default, {
     onClick: onCancel,
-    color: "primaryAlt",
     variant: "outlined",
-    size: "small",
     loading: cancelling
   }, cancelBtnText), onConfirm && confirmBtnText && /* @__PURE__ */React.createElement(Button.default, {
     onClick: onConfirm,
     color: severity === "default" ? "primary" : severity,
-    size: "small",
     loading: confirming
   }, confirmBtnText));
   return /* @__PURE__ */React.createElement(Modal.default, {
-    maxWidth: "xs",
+    maxWidth: "sm",
     open: open,
-    heading: /* @__PURE__ */React.createElement(Heading.default, {
-      as: "h5",
-      gutterBottom: false
-    }, title),
     actions: actions,
-    content: /* @__PURE__ */React.createElement(Text.default, {
+    content: /* @__PURE__ */React.createElement(Stack, {
+      direction: "row",
+      spacing: "32px",
+      sx: {
+        maxWidth: "532px"
+      }
+    }, severity !== "default" && /* @__PURE__ */React.createElement(Box.default, null, /* @__PURE__ */React.createElement(Box.default, {
+      sx: {
+        width: "48px",
+        height: "48px",
+        borderRadius: "99999px",
+        fontSize: "32px",
+        bgcolor: "".concat(severity, ".light"),
+        color: "".concat(severity, ".main"),
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        mt: "12px"
+      }
+    }, severityIconMap[severity])), /* @__PURE__ */React.createElement(Stack, null, /* @__PURE__ */React.createElement(Heading.default, {
+      as: "h3",
+      gutterBottom: true
+    }, title), /* @__PURE__ */React.createElement(Text.default, {
       as: "div",
-      variant: "body2"
-    }, message)
+      weight: "500"
+    }, message)))
   });
 }
 

package/dist/cjs/components/DropZone.styled.cjs

@@ -26,15 +26,15 @@ var StyledWrapper = styles.styled(Box)(function (_ref) {
     position: "relative",
     display: compact === "yes" ? "flex" : "block",
     textAlign: "center",
-    border: "2px dashed ".concat(errors === "yes" ? theme.palette.error.main : theme.palette.primary.main),
+    border: "2px dashed ".concat(errors === "yes" ? theme.palette.error.main : theme.palette.tertiary.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 ".concat(theme.palette.primary.main),
+      border: "2px solid ".concat(theme.palette.tertiary.main),
       outline: "none",
-      background: colors.hexToRgba(theme.palette.primary.main, 0.1)
+      background: colors.hexToRgba(theme.palette.tertiary.main, 0.1)
     },
     alignItems: "center",
     "& .MuiTypography-root": {

package/dist/cjs/components/FileUpload.cjs

@@ -6,35 +6,28 @@ var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.c
 var React = require('react');
 var PropTypes = require('prop-types');
 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 Stack = require('@mui/material/Stack');
 var Confirmation = require('./Confirmation.cjs');
-var IconButton = require('./IconButton.cjs');
+var Divider = require('./Divider.cjs');
+var DropZone = require('./DropZone.cjs');
 var FileViewer = require('./FileViewer.cjs');
+var FileUploadItem = require('./FileUploadItem.cjs');
+var FormControl = require('./FormControl.cjs');
 var FormFocus = require('./FormFocus.cjs');
-var Grid = require('./Grid.cjs');
-var Tooltip = require('./Tooltip.cjs');
 var FileUpload_styled = require('./FileUpload.styled.cjs');
 var file = require('../utils/helpers/file.cjs');
 
 function FileUpload(_ref) {
-  var _ref$fileActions = _ref.fileActions,
-    fileActions = _ref$fileActions === void 0 ? function () {
-      return null;
-    } : _ref$fileActions,
-    _ref$fileErrors = _ref.fileErrors,
+  var _ref$fileErrors = _ref.fileErrors,
     fileErrors = _ref$fileErrors === void 0 ? function () {
       return null;
     } : _ref$fileErrors,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$dropzoneLabel = _ref.dropzoneLabel,
-    dropzoneLabel = _ref$dropzoneLabel === void 0 ? "Upload file(s)" : _ref$dropzoneLabel,
+    dropzoneLabel = _ref$dropzoneLabel === void 0 ? "" : _ref$dropzoneLabel,
     _ref$dropzoneDescript = _ref.dropzoneDescription,
-    dropzoneDescription = _ref$dropzoneDescript === void 0 ? "Drag and drop files here, or click to select files" : _ref$dropzoneDescript,
+    dropzoneDescription = _ref$dropzoneDescript === void 0 ? "Drag and drop file(s) here, or choose file" : _ref$dropzoneDescript,
     _ref$helperText = _ref.helperText,
     helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
     _ref$helperTextPlacem = _ref.helperTextPlacement,
@@ -58,7 +51,11 @@ function FileUpload(_ref) {
     saving = _ref$saving === void 0 ? void 0 : _ref$saving,
     name = _ref.name,
     _ref$files = _ref.files,
-    files = _ref$files === void 0 ? null : _ref$files;
+    files = _ref$files === void 0 ? null : _ref$files,
+    _ref$itemDivider = _ref.itemDivider,
+    itemDivider = _ref$itemDivider === void 0 ? true : _ref$itemDivider,
+    _ref$renderItem = _ref.renderItem,
+    renderItem = _ref$renderItem === void 0 ? void 0 : _ref$renderItem;
   var _useState = React.useState(null),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     confirmDelete = _useState2[0],
@@ -158,18 +155,28 @@ function FileUpload(_ref) {
     edges: edges
   }, /* @__PURE__ */React.createElement(FormFocus.default, {
     name: name
-  }), files && files.length > 0 && /* @__PURE__ */React.createElement(framerMotion.AnimatePresence, null, /* @__PURE__ */React.createElement(FileUpload_styled.StyledSavedWrapper, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, fade), {}, {
+  }), (!files || files.length === 0 || !dropzoneProps || dropzoneProps.maxFiles === void 0 || dropzoneProps.maxFiles > 1) && /* @__PURE__ */React.createElement(framerMotion.motion.div, _rollupPluginBabelHelpers.objectSpread2({}, fade), /* @__PURE__ */React.createElement(DropZone.default, {
+    loading: loading,
+    disabled: disabled,
+    onDrop: onDrop,
+    edges: edges,
+    dropzoneLabel: dropzoneLabel,
+    dropzoneDescription: dropzoneDescription,
+    dropzoneProps: dropzoneProps
+  })), 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
-  }), /* @__PURE__ */React.createElement(Grid.default, {
-    container: true,
-    alignItems: "center",
-    spacing: 5
-  }, /* @__PURE__ */React.createElement(Grid.default, {
-    item: true,
-    xs: 12
+  }), /* @__PURE__ */React.createElement(Stack, {
+    divider: itemDivider ? /* @__PURE__ */React.createElement(Divider.default, {
+      disableGutter: true
+    }) : null,
+    useFlexGap: true,
+    spacing: "24px"
   }, files.map(function (file$1, index) {
+    if (typeof renderItem === "function") {
+      return renderItem(file$1, index);
+    }
     return /* @__PURE__ */React.createElement(framerMotion.motion.div, {
       key: file.getFileName(file$1),
       positionTransition: true,
@@ -190,48 +197,22 @@ function FileUpload(_ref) {
           duration: 0.2
         }
       }
-    }, /* @__PURE__ */React.createElement(Alert.default, {
-      color: showError || fileErrors(file$1, index) !== null ? "error" : "success",
-      style: {
-        marginBottom: 5
-      },
-      action: /* @__PURE__ */React.createElement(React.Fragment, null, fileActions(file$1, index) !== null && fileActions(file$1, index), /* @__PURE__ */React.createElement(Button.default, {
-        onClick: function onClick() {
-          return setViewedFile(file$1);
-        },
-        color: "success",
-        size: "small",
-        variant: "text"
-      }, "View"), /* @__PURE__ */React.createElement(Tooltip.default, {
-        title: "Delete"
-      }, /* @__PURE__ */React.createElement(IconButton.default, {
-        disabled: saving,
-        size: "small",
-        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)));
-  }))))), (!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
-    } : null
-  }), /* @__PURE__ */React.createElement(DropZone.default, {
-    loading: loading,
-    disabled: disabled,
-    onDrop: onDrop,
-    edges: edges,
-    dropzoneLabel: dropzoneLabel,
-    dropzoneDescription: dropzoneDescription,
-    dropzoneProps: dropzoneProps,
-    compact: files && files.length > 0
-  }))), /* @__PURE__ */React.createElement(Confirmation.default, {
+    }, /* @__PURE__ */React.createElement(FileUploadItem.default, {
+      message: fileErrors(file$1, index),
+      file: file$1,
+      error: showError || fileErrors(file$1, index) !== null,
+      onDelete: function onDelete() {
+        return !showError ? handleDeleteConfirmation(index) : handleDeleteWithoutConfirmation(index);
+      }
+    }));
+  }))))), /* @__PURE__ */React.createElement(Confirmation.default, {
     open: confirmDeleteAll,
     onCancel: function onCancel() {
       return setConfirmDeleteAll(false);
     },
     onConfirm: handleDeleteAll,
-    message: "Are you sure you want to remove the attached file(s)?"
+    message: "Are you sure you want to remove the attached file(s)?",
+    severity: "error"
   }), /* @__PURE__ */React.createElement(Confirmation.default, {
     open: confirmDelete !== null,
     onCancel: function onCancel() {
@@ -239,7 +220,8 @@ function FileUpload(_ref) {
       setLoading(false);
     },
     onConfirm: handleDelete,
-    message: "Are you sure you want to remove the attached file?"
+    message: "Are you sure you want to remove the attached file?",
+    severity: "error"
   }), /* @__PURE__ */React.createElement(FileViewer.default, {
     file: viewedFile,
     open: viewedFile !== null,
@@ -250,6 +232,8 @@ function FileUpload(_ref) {
 }
 FileUpload.propTypes = {
   /**
+   * @deprecated
+   *
    * Add actions to file line items
    */
   fileActions: PropTypes.func,
@@ -329,7 +313,15 @@ FileUpload.propTypes = {
   /**
    * Make button edges rounded or square
    */
-  edges: PropTypes.oneOf(["normal", "rounded", "sharp"])
+  edges: PropTypes.oneOf(["normal", "rounded", "sharp"]),
+  /**
+   * Function to render custom element or component when file is uploaded.
+   */
+  renderItem: PropTypes.func,
+  /**
+   * If true, will show divider between uploaded files
+   */
+  itemDivider: PropTypes.bool
 };
 
 exports.default = FileUpload;

package/dist/cjs/components/FileUpload.styled.cjs

@@ -5,16 +5,6 @@ var styles = require('@mui/material/styles');
 var AlertTitle = require('@mui/material/AlertTitle');
 var CircularProgress = require('@mui/material/CircularProgress');
 
-var borderRadius = function borderRadius(edges, theme) {
-  switch (edges) {
-    case "rounded":
-      return 99;
-    case "sharp":
-      return 0;
-    default:
-      return theme.shape.borderRadius;
-  }
-};
 var StyledAlertTitle = styles.styled(AlertTitle)({
   fontSize: 14,
   overflow: "hidden",
@@ -30,18 +20,9 @@ var StyledLoader = styles.styled(CircularProgress)({
   marginLeft: -20,
   zIndex: 1
 });
-var StyledSavedWrapper = styles.styled(framerMotion.motion.div)(function (_ref) {
-  var edges = _ref.edges,
-    theme = _ref.theme;
+var StyledSavedWrapper = styles.styled(framerMotion.motion.div)(function () {
   return {
-    borderRadius: borderRadius(edges, theme),
-    border: "1px solid ".concat(theme.palette.text.secondary),
-    padding: theme.spacing(6, 4),
-    "& .MuiAlert-message": {
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap"
-    }
+    marginTop: "24px"
   };
 });
 

package/dist/cjs/components/FileUploadItem.cjs

@@ -0,0 +1,90 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var React = require('react');
+var Stack = require('@mui/material/Stack');
+var ImageOutlinedIcon = require('@mui/icons-material/ImageOutlined');
+var FileCopyOutlinedIcon = require('@mui/icons-material/FileCopyOutlined');
+var PictureAsPdfOutlinedIcon = require('@mui/icons-material/PictureAsPdfOutlined');
+var DeleteTwoToneIcon = require('@mui/icons-material/DeleteTwoTone');
+var CheckCircleOutlineRoundedIcon = require('@mui/icons-material/CheckCircleOutlineRounded');
+var ErrorOutlineRoundedIcon = require('@mui/icons-material/ErrorOutlineRounded');
+var Box = require('./Box.cjs');
+var IconButton = require('./IconButton.cjs');
+var Text = require('./Text.cjs');
+var file = require('../utils/helpers/file.cjs');
+
+function FileUploadItem(_ref) {
+  var _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    file$1 = _ref.file,
+    _ref$message = _ref.message,
+    message = _ref$message === void 0 ? void 0 : _ref$message,
+    onDelete = _ref.onDelete,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx;
+  var displayName = file.getFileName(file$1).replace("./", "");
+  var styles = _rollupPluginBabelHelpers.objectSpread2({
+    py: "6px"
+  }, sx);
+  var icon = function icon() {
+    if (file.isImage(file$1)) {
+      return /* @__PURE__ */React.createElement(ImageOutlinedIcon, {
+        fontSize: "medium",
+        color: "inherit"
+      });
+    }
+    if (file.getFileExtension(file$1) === "pdf") {
+      return /* @__PURE__ */React.createElement(PictureAsPdfOutlinedIcon, {
+        fontSize: "medium",
+        color: "inherit"
+      });
+    }
+    return /* @__PURE__ */React.createElement(FileCopyOutlinedIcon, {
+      fontSize: "medium",
+      color: "inherit"
+    });
+  };
+  return /* @__PURE__ */React.createElement(Stack, {
+    direction: "row",
+    spacing: "16px",
+    alignItems: "center",
+    sx: styles,
+    useFlexGap: true
+  }, /* @__PURE__ */React.createElement(Stack, {
+    direction: "row",
+    alignItems: message ? "flex-start" : "center",
+    flex: 1,
+    spacing: "16px",
+    color: "grey.500",
+    useFlexGap: true
+  }, icon(), /* @__PURE__ */React.createElement(Box.default, null, /* @__PURE__ */React.createElement(Text.default, {
+    weight: "600",
+    sx: {
+      fontSize: "16px"
+    },
+    color: "primary"
+  }, displayName), message && /* @__PURE__ */React.createElement(Text.default, {
+    sx: {
+      fontSize: "14px",
+      mt: "4px"
+    },
+    color: error ? "error" : "grey.700"
+  }, message))), /* @__PURE__ */React.createElement(Stack, {
+    direction: "row",
+    alignItems: "center",
+    spacing: "16px",
+    useFlexGap: true
+  }, error ? /* @__PURE__ */React.createElement(ErrorOutlineRoundedIcon, {
+    color: "error"
+  }) : /* @__PURE__ */React.createElement(CheckCircleOutlineRoundedIcon, {
+    color: "tertiary"
+  }), /* @__PURE__ */React.createElement(IconButton.default, {
+    onClick: onDelete,
+    color: "primary"
+  }, /* @__PURE__ */React.createElement(DeleteTwoToneIcon, null))));
+}
+
+exports.default = FileUploadItem;

package/dist/cjs/components/IconButton.cjs

@@ -6,7 +6,7 @@ var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.c
 var React = require('react');
 var IconButton_styled = require('./IconButton.styled.cjs');
 
-var _excluded = ["children", "color", "edges", "disabled", "size"];
+var _excluded = ["children", "color", "edges", "disabled", "size", "loading"];
 function IconButton(_ref) {
   var children = _ref.children,
     _ref$color = _ref.color,
@@ -17,9 +17,12 @@ function IconButton(_ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? "medium" : _ref$size,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
     others = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var rest = _rollupPluginBabelHelpers.objectSpread2({
-    size: size
+    size: size,
+    loading: loading
   }, others);
   return /* @__PURE__ */React.createElement(IconButton_styled.default, _rollupPluginBabelHelpers.objectSpread2({
     type: "button",

package/dist/cjs/components/IconButton.styled.cjs

@@ -9,7 +9,7 @@ var IconButton = require('@mui/material/IconButton');
 var Button_styled = require('./Button.styled.cjs');
 var object = require('../utils/helpers/object.cjs');
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 var sizeStyles = function sizeStyles(_ref) {
   var size = _ref.size;
   return react.css(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n  ", "\n    ", "\n"])), size === "small" && react.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    font-size: 24px;\n  "]))), size === "medium" && react.css(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    font-size: 30px;\n  "]))), size === "large" && react.css(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    font-size: 36px;\n  "]))));
@@ -19,13 +19,19 @@ var hoverStyles = function hoverStyles(_ref2) {
     theme = _ref2.theme;
   return react.css(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  &:hover,\n  &:active {\n    background-color: var(--IconButton-hoverBg) !important;\n    color: ", ";\n  }\n"])), object.getObjectProp(theme, "vars.palette.".concat(color, ".main")));
 };
-var StyledIconButton = styles.styled(IconButton)(_templateObject6 || (_templateObject6 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref3) {
+var loadingStyles = function loadingStyles(_ref3) {
   var color = _ref3.color,
-    disabled = _ref3.disabled,
-    edges = _ref3.edges,
-    size = _ref3.size,
     theme = _ref3.theme;
-  return react.css(_templateObject7 || (_templateObject7 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    && {\n      padding: 4px;\n      ", "\n      ", "\n      ", "\n      ", "\n    }\n  "])), disabled && Button_styled.disabledStyles, Button_styled.edgesStyles({
+  return react.css(_templateObject6 || (_templateObject6 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  color: ", ";\n  .MuiSvgIcon-root {\n    display: none;\n  }\n"])), object.getObjectProp(theme, "vars.palette.".concat(color, ".main")));
+};
+var StyledIconButton = styles.styled(IconButton)(_templateObject7 || (_templateObject7 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  ", "\n"])), function (_ref4) {
+  var color = _ref4.color,
+    disabled = _ref4.disabled,
+    loading = _ref4.loading,
+    edges = _ref4.edges,
+    size = _ref4.size,
+    theme = _ref4.theme;
+  return react.css(_templateObject8 || (_templateObject8 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n    && {\n      padding: 4px;\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    }\n  "])), disabled && Button_styled.disabledStyles, Button_styled.edgesStyles({
     edges: edges,
     theme: theme
   }), sizeStyles({
@@ -33,8 +39,12 @@ var StyledIconButton = styles.styled(IconButton)(_templateObject6 || (_templateO
   }), hoverStyles({
     color: color,
     theme: theme
+  }), loading && loadingStyles({
+    color: color,
+    theme: theme
   }));
 });
 
 exports.default = StyledIconButton;
 exports.hoverStyles = hoverStyles;
+exports.loadingStyles = loadingStyles;

package/dist/cjs/components/Modal.cjs

@@ -68,7 +68,7 @@ function Modal(_ref) {
     sx: {
       marginTop: {
         xs: "20px",
-        md: "40px"
+        md: "28px"
       }
     }
   }, actions), loading && /* @__PURE__ */React.createElement(ModalContent.default, {

package/dist/cjs/index.cjs

@@ -25,6 +25,7 @@ var Divider = require('./components/Divider.cjs');
 var DropZone = require('./components/DropZone.cjs');
 var Embed = require('./components/Embed.cjs');
 var FileUpload = require('./components/FileUpload.cjs');
+var FileUploadItem = require('./components/FileUploadItem.cjs');
 var FileUploadButton = require('./components/FileUploadButton.cjs');
 var FileViewer = require('./components/FileViewer.cjs');
 var FlashMessage = require('./components/FlashMessage.cjs');
@@ -113,6 +114,7 @@ exports.Divider = Divider.default;
 exports.DropZone = DropZone.default;
 exports.Embed = Embed.default;
 exports.FileUpload = FileUpload.default;
+exports.FileUploadItem = FileUploadItem.default;
 exports.FileUploadButton = FileUploadButton.default;
 exports.FileViewer = FileViewer.default;
 exports.FlashMessage = FlashMessage.default;

package/dist/cjs/theme/index.cjs

@@ -56,7 +56,7 @@ var palette = {
   // },
   error: {
     main: "#d1293d",
-    light: "#fcf8f8",
+    light: "#FFEDEF",
     dark: "#921d2b",
     contrastText: "#fff"
   },

package/dist/cjs/utils/helpers/file.cjs

@@ -33,7 +33,7 @@ var getFileExtension = function getFileExtension(file) {
 };
 var isImage = function isImage(file) {
   var extension = getFileExtension(file);
-  var extensions = ["jpg", "jpeg", "png", "gif", "svg"];
+  var extensions = ["jpg", "jpeg", "png", "gif", "svg", "webp"];
   return extensions.includes(extension);
 };
 var formatBytes = function formatBytes(bytes) {

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

@@ -4,7 +4,7 @@ import { css } from '@emotion/react';
 import { styled } from '@mui/material/styles';
 import { getObjectProp } from '../utils/helpers/object.js';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 var edgesStyles = function edgesStyles(_ref) {
   var edges = _ref.edges,
     theme = _ref.theme;
@@ -17,24 +17,25 @@ var sizeStyles = function sizeStyles(_ref2) {
   return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  font-weight: ", ";\n  ", "\n  ", "\n     ", "\n"])), getObjectProp(theme, "typography.button.fontWeight", "700"), size === "small" && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    font-size: calc(\n      ", "px - 2px\n    );\n    height: 32px;\n  "])), getObjectProp(theme, "typography.button.fontSize", "14")), size === "medium" && css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    font-size: ", "px;\n    height: 36px;\n  "])), getObjectProp(theme, "typography.button.fontSize", "14")), size === "large" && css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    font-size: font-size: calc(\n      ", "px + 2px\n    );\n    height: 44px;\n  "])), getObjectProp(theme, "typography.button.fontSize", "14")));
 };
 var disabledStyles = css(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n  color: var(--tn-palette-text-muted);\n  background-color: var(--tn-palette-background-muted);\n  border: none;\n"])));
+var colors = ["primary", "secondary", "tertiary"];
 var containedStyles = function containedStyles(_ref3) {
   var color = _ref3.color,
     theme = _ref3.theme;
-  return css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n  color: ", ";\n  background-color: ", ";\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n  .MuiButton-loadingWrapper {\n    color: ", ";\n  }\n\n  ", "\n"])), getObjectProp(theme, "vars.palette.".concat(color, ".contrastText")), getObjectProp(theme, "vars.palette.".concat(color, ".main")), getObjectProp(theme, "vars.palette.".concat(color, ".light")), getObjectProp(theme, "vars.palette.".concat(color, ".contrastText")), getObjectProp(theme, "vars.palette.".concat(color, ".dark")), getObjectProp(theme, "vars.palette.".concat(color, ".contrastText")), getObjectProp(theme, "vars.palette.".concat(color, ".contrastText")), focusStyles);
+  return css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n  color: ", ";\n  background-color: ", ";\n\n  ", "\n\n  ", "\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n  .MuiButton-loadingWrapper {\n    color: ", ";\n  }\n\n  ", "\n"])), getObjectProp(theme, "vars.palette.".concat(color, ".contrastText")), getObjectProp(theme, "vars.palette.".concat(color, ".main")), colors.includes(color) && css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), getObjectProp(theme, "vars.palette.".concat(color, ".light")), getObjectProp(theme, "vars.palette.".concat(color, ".contrastText"))), !colors.includes(color) && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    &:hover {\n      opacity: 0.8;\n    }\n  "]))), getObjectProp(theme, "vars.palette.".concat(color, ".dark")), getObjectProp(theme, "vars.palette.".concat(color, ".contrastText")), getObjectProp(theme, "vars.palette.".concat(color, ".contrastText")), focusStyles);
 };
 var outlinedStyles = function outlinedStyles(_ref4) {
   var color = _ref4.color,
     theme = _ref4.theme;
-  return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  color: ", ";\n  background-color: transparent;\n  border: 1px solid currentColor;\n\n  .MuiButton-loadingWrapper {\n    color: ", ";\n  }\n\n  &:hover,\n  &:active {\n    background-color: ", ";\n  }\n\n  ", "\n"])), getObjectProp(theme, "vars.palette.".concat(color, ".main")), getObjectProp(theme, "vars.palette.".concat(color, ".main")), getObjectProp(theme, "vars.palette.background.muted"), focusStyles);
+  return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  color: ", ";\n  background-color: transparent;\n  border: 1px solid currentColor;\n\n  .MuiButton-loadingWrapper {\n    color: ", ";\n  }\n\n  &:hover,\n  &:active {\n    background-color: ", ";\n  }\n\n  ", "\n"])), getObjectProp(theme, "vars.palette.".concat(color, ".main")), getObjectProp(theme, "vars.palette.".concat(color, ".main")), getObjectProp(theme, "vars.palette.background.muted"), focusStyles);
 };
-var StyledButton = styled(Button)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref5) {
+var StyledButton = styled(Button)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref5) {
   var color = _ref5.color,
     disabled = _ref5.disabled,
     edges = _ref5.edges,
     size = _ref5.size,
     theme = _ref5.theme,
     variant = _ref5.variant;
-  return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    && {\n      padding: 0px 24px;\n      text-transform: initial;\n      font-weight: 700;\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    }\n  "])), edgesStyles({
+  return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    && {\n      padding: 0px 24px;\n      text-transform: initial;\n      font-weight: 700;\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    }\n  "])), edgesStyles({
     edges: edges,
     theme: theme
   }), sizeStyles({

package/dist/esm/components/Confirmation.js

@@ -1,4 +1,10 @@
 import React from 'react';
+import Stack from '@mui/material/Stack';
+import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined';
+import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import ReportGmailerrorredRoundedIcon from '@mui/icons-material/ReportGmailerrorredRounded';
+import Box from './Box.js';
 import Button from './Button.js';
 import Heading from './Heading.js';
 import Modal from './Modal.js';
@@ -23,30 +29,63 @@ function Confirmation(_ref) {
     severity = _ref$severity === void 0 ? "default" : _ref$severity,
     _ref$title = _ref.title,
     title = _ref$title === void 0 ? "Are you sure?" : _ref$title;
+  var severityIconMap = {
+    error: /* @__PURE__ */React.createElement(WarningAmberRoundedIcon, {
+      color: "inherit",
+      fontSize: "inherit"
+    }),
+    info: /* @__PURE__ */React.createElement(InfoOutlinedIcon, {
+      color: "inherit",
+      fontSize: "inherit"
+    }),
+    success: /* @__PURE__ */React.createElement(CheckCircleOutlineOutlinedIcon, {
+      color: "inherit",
+      fontSize: "inherit"
+    }),
+    warning: /* @__PURE__ */React.createElement(ReportGmailerrorredRoundedIcon, {
+      color: "inherit",
+      fontSize: "inherit"
+    })
+  };
   var actions = /* @__PURE__ */React.createElement(React.Fragment, null, onCancel && cancelBtnText && /* @__PURE__ */React.createElement(Button, {
     onClick: onCancel,
-    color: "primaryAlt",
     variant: "outlined",
-    size: "small",
     loading: cancelling
   }, cancelBtnText), onConfirm && confirmBtnText && /* @__PURE__ */React.createElement(Button, {
     onClick: onConfirm,
     color: severity === "default" ? "primary" : severity,
-    size: "small",
     loading: confirming
   }, confirmBtnText));
   return /* @__PURE__ */React.createElement(Modal, {
-    maxWidth: "xs",
+    maxWidth: "sm",
     open: open,
-    heading: /* @__PURE__ */React.createElement(Heading, {
-      as: "h5",
-      gutterBottom: false
-    }, title),
     actions: actions,
-    content: /* @__PURE__ */React.createElement(Text, {
+    content: /* @__PURE__ */React.createElement(Stack, {
+      direction: "row",
+      spacing: "32px",
+      sx: {
+        maxWidth: "532px"
+      }
+    }, severity !== "default" && /* @__PURE__ */React.createElement(Box, null, /* @__PURE__ */React.createElement(Box, {
+      sx: {
+        width: "48px",
+        height: "48px",
+        borderRadius: "99999px",
+        fontSize: "32px",
+        bgcolor: "".concat(severity, ".light"),
+        color: "".concat(severity, ".main"),
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        mt: "12px"
+      }
+    }, severityIconMap[severity])), /* @__PURE__ */React.createElement(Stack, null, /* @__PURE__ */React.createElement(Heading, {
+      as: "h3",
+      gutterBottom: true
+    }, title), /* @__PURE__ */React.createElement(Text, {
       as: "div",
-      variant: "body2"
-    }, message)
+      weight: "500"
+    }, message)))
   });
 }
 

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

@@ -24,15 +24,15 @@ var StyledWrapper = styled(Box)(function (_ref) {
     position: "relative",
     display: compact === "yes" ? "flex" : "block",
     textAlign: "center",
-    border: "2px dashed ".concat(errors === "yes" ? theme.palette.error.main : theme.palette.primary.main),
+    border: "2px dashed ".concat(errors === "yes" ? theme.palette.error.main : theme.palette.tertiary.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 ".concat(theme.palette.primary.main),
+      border: "2px solid ".concat(theme.palette.tertiary.main),
       outline: "none",
-      background: hexToRgba(theme.palette.primary.main, 0.1)
+      background: hexToRgba(theme.palette.tertiary.main, 0.1)
     },
     alignItems: "center",
     "& .MuiTypography-root": {

package/dist/esm/components/FileUpload.js

@@ -1,36 +1,29 @@
 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 { 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 { motion, AnimatePresence } from 'framer-motion';
+import Stack from '@mui/material/Stack';
 import Confirmation from './Confirmation.js';
-import IconButton from './IconButton.js';
+import Divider from './Divider.js';
+import DropZone from './DropZone.js';
 import FileViewer from './FileViewer.js';
+import FileUploadItem from './FileUploadItem.js';
+import FormControl from './FormControl.js';
 import FormFocus from './FormFocus.js';
-import Grid from './Grid.js';
-import Tooltip from './Tooltip.js';
-import { StyledSavedWrapper, StyledLoader, StyledAlertTitle } from './FileUpload.styled.js';
+import { StyledSavedWrapper, StyledLoader } from './FileUpload.styled.js';
 import { getFileName } from '../utils/helpers/file.js';
 
 function FileUpload(_ref) {
-  var _ref$fileActions = _ref.fileActions,
-    fileActions = _ref$fileActions === void 0 ? function () {
-      return null;
-    } : _ref$fileActions,
-    _ref$fileErrors = _ref.fileErrors,
+  var _ref$fileErrors = _ref.fileErrors,
     fileErrors = _ref$fileErrors === void 0 ? function () {
       return null;
     } : _ref$fileErrors,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$dropzoneLabel = _ref.dropzoneLabel,
-    dropzoneLabel = _ref$dropzoneLabel === void 0 ? "Upload file(s)" : _ref$dropzoneLabel,
+    dropzoneLabel = _ref$dropzoneLabel === void 0 ? "" : _ref$dropzoneLabel,
     _ref$dropzoneDescript = _ref.dropzoneDescription,
-    dropzoneDescription = _ref$dropzoneDescript === void 0 ? "Drag and drop files here, or click to select files" : _ref$dropzoneDescript,
+    dropzoneDescription = _ref$dropzoneDescript === void 0 ? "Drag and drop file(s) here, or choose file" : _ref$dropzoneDescript,
     _ref$helperText = _ref.helperText,
     helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
     _ref$helperTextPlacem = _ref.helperTextPlacement,
@@ -54,7 +47,11 @@ function FileUpload(_ref) {
     saving = _ref$saving === void 0 ? void 0 : _ref$saving,
     name = _ref.name,
     _ref$files = _ref.files,
-    files = _ref$files === void 0 ? null : _ref$files;
+    files = _ref$files === void 0 ? null : _ref$files,
+    _ref$itemDivider = _ref.itemDivider,
+    itemDivider = _ref$itemDivider === void 0 ? true : _ref$itemDivider,
+    _ref$renderItem = _ref.renderItem,
+    renderItem = _ref$renderItem === void 0 ? void 0 : _ref$renderItem;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     confirmDelete = _useState2[0],
@@ -154,18 +151,28 @@ function FileUpload(_ref) {
     edges: edges
   }, /* @__PURE__ */React.createElement(FormFocus, {
     name: name
-  }), files && files.length > 0 && /* @__PURE__ */React.createElement(AnimatePresence, null, /* @__PURE__ */React.createElement(StyledSavedWrapper, _objectSpread2(_objectSpread2({}, fade), {}, {
+  }), (!files || files.length === 0 || !dropzoneProps || dropzoneProps.maxFiles === void 0 || dropzoneProps.maxFiles > 1) && /* @__PURE__ */React.createElement(motion.div, _objectSpread2({}, fade), /* @__PURE__ */React.createElement(DropZone, {
+    loading: loading,
+    disabled: disabled,
+    onDrop: onDrop,
+    edges: edges,
+    dropzoneLabel: dropzoneLabel,
+    dropzoneDescription: dropzoneDescription,
+    dropzoneProps: dropzoneProps
+  })), 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
-  }), /* @__PURE__ */React.createElement(Grid, {
-    container: true,
-    alignItems: "center",
-    spacing: 5
-  }, /* @__PURE__ */React.createElement(Grid, {
-    item: true,
-    xs: 12
+  }), /* @__PURE__ */React.createElement(Stack, {
+    divider: itemDivider ? /* @__PURE__ */React.createElement(Divider, {
+      disableGutter: true
+    }) : null,
+    useFlexGap: true,
+    spacing: "24px"
   }, files.map(function (file, index) {
+    if (typeof renderItem === "function") {
+      return renderItem(file, index);
+    }
     return /* @__PURE__ */React.createElement(motion.div, {
       key: getFileName(file),
       positionTransition: true,
@@ -186,48 +193,22 @@ function FileUpload(_ref) {
           duration: 0.2
         }
       }
-    }, /* @__PURE__ */React.createElement(Alert, {
-      color: showError || fileErrors(file, index) !== null ? "error" : "success",
-      style: {
-        marginBottom: 5
-      },
-      action: /* @__PURE__ */React.createElement(React.Fragment, null, fileActions(file, index) !== null && fileActions(file, index), /* @__PURE__ */React.createElement(Button, {
-        onClick: function onClick() {
-          return setViewedFile(file);
-        },
-        color: "success",
-        size: "small",
-        variant: "text"
-      }, "View"), /* @__PURE__ */React.createElement(Tooltip, {
-        title: "Delete"
-      }, /* @__PURE__ */React.createElement(IconButton, {
-        disabled: saving,
-        size: "small",
-        onClick: function onClick() {
-          return !showError ? handleDeleteConfirmation(index) : handleDeleteWithoutConfirmation(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
-    } : null
-  }), /* @__PURE__ */React.createElement(DropZone, {
-    loading: loading,
-    disabled: disabled,
-    onDrop: onDrop,
-    edges: edges,
-    dropzoneLabel: dropzoneLabel,
-    dropzoneDescription: dropzoneDescription,
-    dropzoneProps: dropzoneProps,
-    compact: files && files.length > 0
-  }))), /* @__PURE__ */React.createElement(Confirmation, {
+    }, /* @__PURE__ */React.createElement(FileUploadItem, {
+      message: fileErrors(file, index),
+      file: file,
+      error: showError || fileErrors(file, index) !== null,
+      onDelete: function onDelete() {
+        return !showError ? handleDeleteConfirmation(index) : handleDeleteWithoutConfirmation(index);
+      }
+    }));
+  }))))), /* @__PURE__ */React.createElement(Confirmation, {
     open: confirmDeleteAll,
     onCancel: function onCancel() {
       return setConfirmDeleteAll(false);
     },
     onConfirm: handleDeleteAll,
-    message: "Are you sure you want to remove the attached file(s)?"
+    message: "Are you sure you want to remove the attached file(s)?",
+    severity: "error"
   }), /* @__PURE__ */React.createElement(Confirmation, {
     open: confirmDelete !== null,
     onCancel: function onCancel() {
@@ -235,7 +216,8 @@ function FileUpload(_ref) {
       setLoading(false);
     },
     onConfirm: handleDelete,
-    message: "Are you sure you want to remove the attached file?"
+    message: "Are you sure you want to remove the attached file?",
+    severity: "error"
   }), /* @__PURE__ */React.createElement(FileViewer, {
     file: viewedFile,
     open: viewedFile !== null,
@@ -246,6 +228,8 @@ function FileUpload(_ref) {
 }
 FileUpload.propTypes = {
   /**
+   * @deprecated
+   *
    * Add actions to file line items
    */
   fileActions: PropTypes.func,
@@ -325,7 +309,15 @@ FileUpload.propTypes = {
   /**
    * Make button edges rounded or square
    */
-  edges: PropTypes.oneOf(["normal", "rounded", "sharp"])
+  edges: PropTypes.oneOf(["normal", "rounded", "sharp"]),
+  /**
+   * Function to render custom element or component when file is uploaded.
+   */
+  renderItem: PropTypes.func,
+  /**
+   * If true, will show divider between uploaded files
+   */
+  itemDivider: PropTypes.bool
 };
 
 export { FileUpload as default };

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

@@ -3,16 +3,6 @@ import { styled } from '@mui/material/styles';
 import AlertTitle from '@mui/material/AlertTitle';
 import CircularProgress from '@mui/material/CircularProgress';
 
-var borderRadius = function borderRadius(edges, theme) {
-  switch (edges) {
-    case "rounded":
-      return 99;
-    case "sharp":
-      return 0;
-    default:
-      return theme.shape.borderRadius;
-  }
-};
 var StyledAlertTitle = styled(AlertTitle)({
   fontSize: 14,
   overflow: "hidden",
@@ -28,18 +18,9 @@ var StyledLoader = styled(CircularProgress)({
   marginLeft: -20,
   zIndex: 1
 });
-var StyledSavedWrapper = styled(motion.div)(function (_ref) {
-  var edges = _ref.edges,
-    theme = _ref.theme;
+var StyledSavedWrapper = styled(motion.div)(function () {
   return {
-    borderRadius: borderRadius(edges, theme),
-    border: "1px solid ".concat(theme.palette.text.secondary),
-    padding: theme.spacing(6, 4),
-    "& .MuiAlert-message": {
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap"
-    }
+    marginTop: "24px"
   };
 });
 

package/dist/esm/components/FileUploadItem.js

@@ -0,0 +1,86 @@
+import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import Stack from '@mui/material/Stack';
+import ImageOutlinedIcon from '@mui/icons-material/ImageOutlined';
+import FileCopyOutlinedIcon from '@mui/icons-material/FileCopyOutlined';
+import PictureAsPdfOutlinedIcon from '@mui/icons-material/PictureAsPdfOutlined';
+import DeleteTwoToneIcon from '@mui/icons-material/DeleteTwoTone';
+import CheckCircleOutlineRoundedIcon from '@mui/icons-material/CheckCircleOutlineRounded';
+import ErrorOutlineRoundedIcon from '@mui/icons-material/ErrorOutlineRounded';
+import Box from './Box.js';
+import IconButton from './IconButton.js';
+import Text from './Text.js';
+import { getFileName, isImage, getFileExtension } from '../utils/helpers/file.js';
+
+function FileUploadItem(_ref) {
+  var _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    file = _ref.file,
+    _ref$message = _ref.message,
+    message = _ref$message === void 0 ? void 0 : _ref$message,
+    onDelete = _ref.onDelete,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx;
+  var displayName = getFileName(file).replace("./", "");
+  var styles = _objectSpread2({
+    py: "6px"
+  }, sx);
+  var icon = function icon() {
+    if (isImage(file)) {
+      return /* @__PURE__ */React.createElement(ImageOutlinedIcon, {
+        fontSize: "medium",
+        color: "inherit"
+      });
+    }
+    if (getFileExtension(file) === "pdf") {
+      return /* @__PURE__ */React.createElement(PictureAsPdfOutlinedIcon, {
+        fontSize: "medium",
+        color: "inherit"
+      });
+    }
+    return /* @__PURE__ */React.createElement(FileCopyOutlinedIcon, {
+      fontSize: "medium",
+      color: "inherit"
+    });
+  };
+  return /* @__PURE__ */React.createElement(Stack, {
+    direction: "row",
+    spacing: "16px",
+    alignItems: "center",
+    sx: styles,
+    useFlexGap: true
+  }, /* @__PURE__ */React.createElement(Stack, {
+    direction: "row",
+    alignItems: message ? "flex-start" : "center",
+    flex: 1,
+    spacing: "16px",
+    color: "grey.500",
+    useFlexGap: true
+  }, icon(), /* @__PURE__ */React.createElement(Box, null, /* @__PURE__ */React.createElement(Text, {
+    weight: "600",
+    sx: {
+      fontSize: "16px"
+    },
+    color: "primary"
+  }, displayName), message && /* @__PURE__ */React.createElement(Text, {
+    sx: {
+      fontSize: "14px",
+      mt: "4px"
+    },
+    color: error ? "error" : "grey.700"
+  }, message))), /* @__PURE__ */React.createElement(Stack, {
+    direction: "row",
+    alignItems: "center",
+    spacing: "16px",
+    useFlexGap: true
+  }, error ? /* @__PURE__ */React.createElement(ErrorOutlineRoundedIcon, {
+    color: "error"
+  }) : /* @__PURE__ */React.createElement(CheckCircleOutlineRoundedIcon, {
+    color: "tertiary"
+  }), /* @__PURE__ */React.createElement(IconButton, {
+    onClick: onDelete,
+    color: "primary"
+  }, /* @__PURE__ */React.createElement(DeleteTwoToneIcon, null))));
+}
+
+export { FileUploadItem as default };

package/dist/esm/components/IconButton.js

@@ -2,7 +2,7 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
 import React from 'react';
 import StyledIconButton from './IconButton.styled.js';
 
-var _excluded = ["children", "color", "edges", "disabled", "size"];
+var _excluded = ["children", "color", "edges", "disabled", "size", "loading"];
 function IconButton(_ref) {
   var children = _ref.children,
     _ref$color = _ref.color,
@@ -13,9 +13,12 @@ function IconButton(_ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? "medium" : _ref$size,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
     others = _objectWithoutProperties(_ref, _excluded);
   var rest = _objectSpread2({
-    size: size
+    size: size,
+    loading: loading
   }, others);
   return /* @__PURE__ */React.createElement(StyledIconButton, _objectSpread2({
     type: "button",

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

@@ -5,7 +5,7 @@ import IconButton from '@mui/material/IconButton';
 import { disabledStyles, edgesStyles } from './Button.styled.js';
 import { getObjectProp } from '../utils/helpers/object.js';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 var sizeStyles = function sizeStyles(_ref) {
   var size = _ref.size;
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n    ", "\n"])), size === "small" && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    font-size: 24px;\n  "]))), size === "medium" && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    font-size: 30px;\n  "]))), size === "large" && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    font-size: 36px;\n  "]))));
@@ -15,13 +15,19 @@ var hoverStyles = function hoverStyles(_ref2) {
     theme = _ref2.theme;
   return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  &:hover,\n  &:active {\n    background-color: var(--IconButton-hoverBg) !important;\n    color: ", ";\n  }\n"])), getObjectProp(theme, "vars.palette.".concat(color, ".main")));
 };
-var StyledIconButton = styled(IconButton)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref3) {
+var loadingStyles = function loadingStyles(_ref3) {
   var color = _ref3.color,
-    disabled = _ref3.disabled,
-    edges = _ref3.edges,
-    size = _ref3.size,
     theme = _ref3.theme;
-  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    && {\n      padding: 4px;\n      ", "\n      ", "\n      ", "\n      ", "\n    }\n  "])), disabled && disabledStyles, edgesStyles({
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: ", ";\n  .MuiSvgIcon-root {\n    display: none;\n  }\n"])), getObjectProp(theme, "vars.palette.".concat(color, ".main")));
+};
+var StyledIconButton = styled(IconButton)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref4) {
+  var color = _ref4.color,
+    disabled = _ref4.disabled,
+    loading = _ref4.loading,
+    edges = _ref4.edges,
+    size = _ref4.size,
+    theme = _ref4.theme;
+  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    && {\n      padding: 4px;\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    }\n  "])), disabled && disabledStyles, edgesStyles({
     edges: edges,
     theme: theme
   }), sizeStyles({
@@ -29,7 +35,10 @@ var StyledIconButton = styled(IconButton)(_templateObject6 || (_templateObject6
   }), hoverStyles({
     color: color,
     theme: theme
+  }), loading && loadingStyles({
+    color: color,
+    theme: theme
   }));
 });
 
-export { StyledIconButton as default, hoverStyles };
+export { StyledIconButton as default, hoverStyles, loadingStyles };

package/dist/esm/components/Modal.js

@@ -64,7 +64,7 @@ function Modal(_ref) {
     sx: {
       marginTop: {
         xs: "20px",
-        md: "40px"
+        md: "28px"
       }
     }
   }, actions), loading && /* @__PURE__ */React.createElement(ModalContent, {

package/dist/esm/index.js

@@ -23,6 +23,7 @@ export { default as Divider } from './components/Divider.js';
 export { default as DropZone } from './components/DropZone.js';
 export { default as Embed } from './components/Embed.js';
 export { default as FileUpload } from './components/FileUpload.js';
+export { default as FileUploadItem } from './components/FileUploadItem.js';
 export { default as FileUploadButton } from './components/FileUploadButton.js';
 export { default as FileViewer } from './components/FileViewer.js';
 export { default as FlashMessage } from './components/FlashMessage.js';

package/dist/esm/theme/index.js

@@ -52,7 +52,7 @@ var palette = {
   // },
   error: {
     main: "#d1293d",
-    light: "#fcf8f8",
+    light: "#FFEDEF",
     dark: "#921d2b",
     contrastText: "#fff"
   },

package/dist/esm/utils/helpers/file.js

@@ -31,7 +31,7 @@ var getFileExtension = function getFileExtension(file) {
 };
 var isImage = function isImage(file) {
   var extension = getFileExtension(file);
-  var extensions = ["jpg", "jpeg", "png", "gif", "svg"];
+  var extensions = ["jpg", "jpeg", "png", "gif", "svg", "webp"];
   return extensions.includes(extension);
 };
 var formatBytes = function formatBytes(bytes) {

package/package.json

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