@tenancy.nz/ui 1.0.4 → 1.0.5

package/dist/cjs/components/TextInput.cjs

@@ -4,8 +4,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
+var React$1 = require('react');
 var InputAdornment = require('@mui/material/InputAdornment');
 var FormControl = require('./FormControl.cjs');
 var FormLabel = require('./FormLabel.cjs');
@@ -17,7 +16,7 @@ var _excluded = ["autoComplete", "autoFocus", "color", "disabled", "edges", "end
 var typeMap = {
   number: "text"
 };
-var TextInput = /*#__PURE__*/React.forwardRef(function TextInput2(_ref, ref) {
+var TextInput = /*#__PURE__*/React$1.forwardRef(function TextInput2(_ref, ref) {
   var _ref$autoComplete = _ref.autoComplete,
     autoComplete = _ref$autoComplete === void 0 ? "off" : _ref$autoComplete,
     _ref$autoFocus = _ref.autoFocus,
@@ -70,7 +69,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function TextInput2(_ref, ref) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? "text" : _ref$type,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var _useState = React.useState(rest.value ? rest.value.length : 0),
+  var _useState = React$1.useState(rest.value ? rest.value.length : 0),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     noOfChars = _useState2[0],
     setNoOfChars = _useState2[1];
@@ -92,11 +91,10 @@ var TextInput = /*#__PURE__*/React.forwardRef(function TextInput2(_ref, ref) {
     autoFocus: autoFocus,
     color: showError ? "error" : color,
     disabled: disabled,
-    endAdornment: endAdornment && /* @__PURE__ */jsxRuntime.jsx(InputAdornment, {
+    endAdornment: endAdornment && /* @__PURE__ */React.createElement(InputAdornment, {
       position: "end",
-      variant: "outlined",
-      children: endAdornment
-    }),
+      variant: "outlined"
+    }, endAdornment),
     edges: edges,
     fullWidth: fullWidth,
     id: id || name,
@@ -108,11 +106,10 @@ var TextInput = /*#__PURE__*/React.forwardRef(function TextInput2(_ref, ref) {
     $error: showError,
     readOnly: readOnly,
     size: size,
-    startAdornment: startAdornment && /* @__PURE__ */jsxRuntime.jsx(InputAdornment, {
+    startAdornment: startAdornment && /* @__PURE__ */React.createElement(InputAdornment, {
       position: "start",
-      variant: "outlined",
-      children: startAdornment
-    }),
+      variant: "outlined"
+    }, startAdornment),
     type: typeMap[type] || type
   }, multiline && textareaProps), rest), {}, {
     margin: "none"
@@ -121,36 +118,32 @@ var TextInput = /*#__PURE__*/React.forwardRef(function TextInput2(_ref, ref) {
     var value = event.target.value;
     setNoOfChars(value.length);
   };
-  var controlLabel = showCounter ? /* @__PURE__ */jsxRuntime.jsxs(Box.default, {
+  var controlLabel = showCounter ? /* @__PURE__ */React.createElement(Box.default, {
     display: "flex",
-    mb: "8px",
-    children: [/* @__PURE__ */jsxRuntime.jsx(Box.default, {
-      as: "span",
-      children: /* @__PURE__ */jsxRuntime.jsx(FormLabel.default, {
-        disabled: disabled,
-        htmlFor: id,
-        required: required,
-        margin: "none",
-        size: size,
-        children: label
-      })
-    }), /* @__PURE__ */jsxRuntime.jsxs(Box.default, {
-      as: "span",
-      sx: {
-        color: disabled ? "grey.400" : "grey.600",
-        flexShrink: 0,
-        ml: "auto",
-        fontSize: function fontSize(theme) {
-          if (size === "medium") {
-            return "".concat(theme.typography.fontSize, "px");
-          }
-          return null;
+    mb: "8px"
+  }, /* @__PURE__ */React.createElement(Box.default, {
+    as: "span"
+  }, /* @__PURE__ */React.createElement(FormLabel.default, {
+    disabled: disabled,
+    htmlFor: id,
+    required: required,
+    margin: "none",
+    size: size
+  }, label)), /* @__PURE__ */React.createElement(Box.default, {
+    as: "span",
+    sx: {
+      color: disabled ? "grey.400" : "grey.600",
+      flexShrink: 0,
+      ml: "auto",
+      fontSize: function fontSize(theme) {
+        if (size === "medium") {
+          return "".concat(theme.typography.fontSize, "px");
         }
-      },
-      children: [noOfChars, maxLength ? " / ".concat(maxLength) : ""]
-    })]
-  }) : label;
-  return /* @__PURE__ */jsxRuntime.jsx(FormControl.default, {
+        return null;
+      }
+    }
+  }, noOfChars, maxLength ? " / ".concat(maxLength) : "")) : label;
+  return /* @__PURE__ */React.createElement(FormControl.default, {
     color: color,
     id: props.id,
     label: controlLabel,
@@ -161,13 +154,12 @@ var TextInput = /*#__PURE__*/React.forwardRef(function TextInput2(_ref, ref) {
     disabled: disabled,
     required: required,
     size: size,
-    ref: ref,
-    children: /* @__PURE__ */jsxRuntime.jsx(TextInput_styled.default, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), {}, {
-      error: true
-    }, showCounter && {
-      onKeyUp: handleChange
-    }))
-  });
+    ref: ref
+  }, /* @__PURE__ */React.createElement(TextInput_styled.default, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), {}, {
+    error: true
+  }, showCounter && {
+    onKeyUp: handleChange
+  })));
 });
 
 exports.default = TextInput;

package/dist/cjs/components/ThemeProvider.cjs

@@ -4,8 +4,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
-var jsxRuntime = require('react/jsx-runtime');
-require('react');
+var React = require('react');
 var PropTypes = require('prop-types');
 var react = require('@emotion/react');
 var styled = require('styled-components');
@@ -24,19 +23,13 @@ function ThemeProvider(_ref) {
       cssVarPrefix: "tn"
     }
   }));
-  return /* @__PURE__ */jsxRuntime.jsx(styles.StyledEngineProvider, {
-    children: /* @__PURE__ */jsxRuntime.jsx(styled.ThemeProvider, {
-      theme: mergedTheme,
-      children: /* @__PURE__ */jsxRuntime.jsx(react.ThemeProvider, {
-        theme: mergedTheme,
-        children: /* @__PURE__ */jsxRuntime.jsxs(styles.ThemeProvider, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
-          theme: mergedTheme
-        }, rest), {}, {
-          children: [/* @__PURE__ */jsxRuntime.jsx(CssBaseline, {}), children]
-        }))
-      })
-    })
-  });
+  return /* @__PURE__ */React.createElement(styles.StyledEngineProvider, null, /* @__PURE__ */React.createElement(styled.ThemeProvider, {
+    theme: mergedTheme
+  }, /* @__PURE__ */React.createElement(react.ThemeProvider, {
+    theme: mergedTheme
+  }, /* @__PURE__ */React.createElement(styles.ThemeProvider, _rollupPluginBabelHelpers.objectSpread2({
+    theme: mergedTheme
+  }, rest), /* @__PURE__ */React.createElement(CssBaseline, null), children))));
 }
 ThemeProvider.propTypes = {
   theme: PropTypes.shape({

package/dist/cjs/components/TimeInput.cjs

@@ -4,7 +4,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var PropTypes = require('prop-types');
 var FormControl = require('./FormControl.cjs');
@@ -82,7 +81,7 @@ function TimeInput(_ref) {
     setValues(newValues);
     onChange(evt);
   };
-  return /* @__PURE__ */jsxRuntime.jsxs(FormControl.default, {
+  return /* @__PURE__ */React.createElement(FormControl.default, {
     fullWidth: fullWidth,
     name: name,
     label: label,
@@ -92,75 +91,68 @@ function TimeInput(_ref) {
     required: required,
     showError: showError,
     errorMessage: errorMessage,
-    edges: "normal",
-    children: [/* @__PURE__ */jsxRuntime.jsx("input", {
-      defaultValue: rest.defaultValue || value,
-      name: name,
-      ref: inputRef,
-      style: {
-        height: 0,
-        width: 0,
-        appearance: "none",
-        border: "none",
-        outline: "none",
-        margin: 0,
-        padding: 0
-      }
-    }), /* @__PURE__ */jsxRuntime.jsxs(TimeInput_styled.StyledContainer, {
-      size: size,
-      children: [/* @__PURE__ */jsxRuntime.jsx(TimeInput_styled.StyledSelect, {
-        required: required,
-        size: size,
-        value: inputRef.current ? inputRef.current.value : value,
-        children: /* @__PURE__ */jsxRuntime.jsx(Select.default, {
-          disabled: disabled,
-          name: "".concat(name, "_hours"),
-          placeholder: "HH",
-          required: required,
-          native: true,
-          options: hourOptions,
-          value: values.hour,
-          onChange: function onChange(e) {
-            handleChange(e, "hour");
-          }
-        })
-      }), /* @__PURE__ */jsxRuntime.jsx(TimeInput_styled.StyledSpacer, {
-        children: ":"
-      }), /* @__PURE__ */jsxRuntime.jsx(TimeInput_styled.StyledSelect, {
-        required: required,
-        size: size,
-        value: inputRef.current ? inputRef.current.value : value,
-        children: /* @__PURE__ */jsxRuntime.jsx(Select.default, {
-          disabled: disabled,
-          name: "".concat(name, "_minutes"),
-          placeholder: "MM",
-          required: required,
-          native: true,
-          options: minuteOptions,
-          value: values.minute,
-          onChange: function onChange(e) {
-            handleChange(e, "minute");
-          }
-        })
-      }), /* @__PURE__ */jsxRuntime.jsx(TimeInput_styled.StyledSpacer, {}), /* @__PURE__ */jsxRuntime.jsx(TimeInput_styled.StyledSelect, {
-        required: required,
-        size: size,
-        value: inputRef.current ? inputRef.current.value : value,
-        children: /* @__PURE__ */jsxRuntime.jsx(Select.default, {
-          disabled: disabled,
-          name: "".concat(name, "_meridian"),
-          placeholder: "AM",
-          required: required,
-          native: true,
-          options: meridianOptions,
-          value: values.meridian,
-          onChange: function onChange(e) {
-            handleChange(e, "meridian");
-          }
-        })
-      })]
-    })]
-  });
+    edges: "normal"
+  }, /* @__PURE__ */React.createElement("input", {
+    defaultValue: rest.defaultValue || value,
+    name: name,
+    ref: inputRef,
+    style: {
+      height: 0,
+      width: 0,
+      appearance: "none",
+      border: "none",
+      outline: "none",
+      margin: 0,
+      padding: 0
+    }
+  }), /* @__PURE__ */React.createElement(TimeInput_styled.StyledContainer, {
+    size: size
+  }, /* @__PURE__ */React.createElement(TimeInput_styled.StyledSelect, {
+    required: required,
+    size: size,
+    value: inputRef.current ? inputRef.current.value : value
+  }, /* @__PURE__ */React.createElement(Select.default, {
+    disabled: disabled,
+    name: "".concat(name, "_hours"),
+    placeholder: "HH",
+    required: required,
+    native: true,
+    options: hourOptions,
+    value: values.hour,
+    onChange: function onChange(e) {
+      handleChange(e, "hour");
+    }
+  })), /* @__PURE__ */React.createElement(TimeInput_styled.StyledSpacer, null, ":"), /* @__PURE__ */React.createElement(TimeInput_styled.StyledSelect, {
+    required: required,
+    size: size,
+    value: inputRef.current ? inputRef.current.value : value
+  }, /* @__PURE__ */React.createElement(Select.default, {
+    disabled: disabled,
+    name: "".concat(name, "_minutes"),
+    placeholder: "MM",
+    required: required,
+    native: true,
+    options: minuteOptions,
+    value: values.minute,
+    onChange: function onChange(e) {
+      handleChange(e, "minute");
+    }
+  })), /* @__PURE__ */React.createElement(TimeInput_styled.StyledSpacer, null), /* @__PURE__ */React.createElement(TimeInput_styled.StyledSelect, {
+    required: required,
+    size: size,
+    value: inputRef.current ? inputRef.current.value : value
+  }, /* @__PURE__ */React.createElement(Select.default, {
+    disabled: disabled,
+    name: "".concat(name, "_meridian"),
+    placeholder: "AM",
+    required: required,
+    native: true,
+    options: meridianOptions,
+    value: values.meridian,
+    onChange: function onChange(e) {
+      handleChange(e, "meridian");
+    }
+  }))));
 }
 TimeInput.propTypes = {
   /**

package/dist/cjs/components/Tooltip.cjs

@@ -4,7 +4,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
-var jsxRuntime = require('react/jsx-runtime');
 var Box = require('./Box.cjs');
 var Tooltip_styled = require('./Tooltip.styled.cjs');
 
@@ -44,17 +43,14 @@ function Tooltip(_ref) {
     leaveTouchDelay: leaveTouchDelay,
     placement: placement
   }, others);
-  return /* @__PURE__ */jsxRuntime.jsx(Tooltip_styled.default, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+  return /* @__PURE__ */React.createElement(Tooltip_styled.default, _rollupPluginBabelHelpers.objectSpread2({
     classes: {
       popper: className
     }
-  }, rest), {}, {
-    children: /* @__PURE__ */jsxRuntime.jsx(Box.default, {
-      display: "inline-flex",
-      sx: boxProps,
-      children: children
-    })
-  }));
+  }, rest), /* @__PURE__ */React.createElement(Box.default, {
+    display: "inline-flex",
+    sx: boxProps
+  }, children));
 }
 
 exports.default = Tooltip;

package/dist/esm/components/Alert.js

@@ -1,6 +1,5 @@
 "use strict";
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
 import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined';
 import ErrorOutlineOutlinedIcon from '@mui/icons-material/ErrorOutlineOutlined';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
@@ -12,22 +11,22 @@ var variantMap = {
   contained: "filled"
 };
 var icons = {
-  info: /* @__PURE__ */jsx(InfoOutlinedIcon, {
+  info: /* @__PURE__ */React.createElement(InfoOutlinedIcon, {
     sx: {
       fontSize: 24
     }
   }),
-  success: /* @__PURE__ */jsx(CheckCircleOutlineOutlinedIcon, {
+  success: /* @__PURE__ */React.createElement(CheckCircleOutlineOutlinedIcon, {
     sx: {
       fontSize: 24
     }
   }),
-  error: /* @__PURE__ */jsx(ErrorOutlineOutlinedIcon, {
+  error: /* @__PURE__ */React.createElement(ErrorOutlineOutlinedIcon, {
     sx: {
       fontSize: 24
     }
   }),
-  warning: /* @__PURE__ */jsx(WarningAmberOutlinedIcon, {
+  warning: /* @__PURE__ */React.createElement(WarningAmberOutlinedIcon, {
     sx: {
       fontSize: 24
     }
@@ -44,7 +43,7 @@ function Alert(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? "standard" : _ref$variant,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /* @__PURE__ */jsxs(StyledAlert, _objectSpread2(_objectSpread2(_objectSpread2({
+  return /* @__PURE__ */React.createElement(StyledAlert, _objectSpread2(_objectSpread2({
     color: color,
     variant: variantMap[variant] || variant,
     severity: color,
@@ -52,11 +51,7 @@ function Alert(_ref) {
     closeText: "undo"
   }, rest), (!icon || !color || !icons[color]) && {
     icon: false
-  }), {}, {
-    children: [title && /* @__PURE__ */jsx(StyledAlertTitle, {
-      children: title
-    }), children]
-  }));
+  }), title && /* @__PURE__ */React.createElement(StyledAlertTitle, null, title), children);
 }
 
 export { Alert as default };

package/dist/esm/components/Autocomplete.js

@@ -1,7 +1,6 @@
 "use strict";
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import FormControl from './FormControl.js';
@@ -60,7 +59,7 @@ function Autocomplete(_ref) {
     }
     onChange.apply(void 0, [event, val].concat(extras));
   };
-  return /* @__PURE__ */jsx(FormControl, {
+  return /* @__PURE__ */React.createElement(FormControl, {
     name: name,
     fullWidth: fullWidth,
     label: label,
@@ -71,38 +70,37 @@ function Autocomplete(_ref) {
     showError: showError,
     errorMessage: errorMessage,
     hideLabel: hideLabel,
-    edges: edges,
-    children: /* @__PURE__ */jsx(StyledAutocomplete, _objectSpread2({
-      disabled: disabled,
-      iconrotation: disableIconRotation ? "no" : "yes",
-      popupIcon: popupIcon === void 0 ? /* @__PURE__ */jsx(KeyboardArrowDownIcon, {}) : popupIcon,
-      renderInput: function renderInput(_ref2) {
-        var inputProps = _ref2.inputProps,
-          InputProps = _ref2.InputProps,
-          params = _objectWithoutProperties(_ref2, _excluded2);
-        return /* @__PURE__ */jsx(TextInput, _objectSpread2(_objectSpread2({}, params), {}, {
-          disabled: disabled,
-          name: name,
-          variant: variant,
-          size: size,
-          edges: edges,
-          required: required,
-          value: selectedValue,
-          placeholder: placeholder,
-          inputProps: _objectSpread2(_objectSpread2({
-            autoComplete: "off"
-          }, textInputAttrs), inputProps),
-          slotProps: {
-            input: _objectSpread2(_objectSpread2({}, TextInputProps), InputProps)
-          },
-          showError: showError,
-          message: errorMessage,
-          ref: InputProps.ref
-        }));
-      },
-      onChange: handleChange
-    }, rest))
-  });
+    edges: edges
+  }, /* @__PURE__ */React.createElement(StyledAutocomplete, _objectSpread2({
+    disabled: disabled,
+    iconrotation: disableIconRotation ? "no" : "yes",
+    popupIcon: popupIcon === void 0 ? /* @__PURE__ */React.createElement(KeyboardArrowDownIcon, null) : popupIcon,
+    renderInput: function renderInput(_ref2) {
+      var inputProps = _ref2.inputProps,
+        InputProps = _ref2.InputProps,
+        params = _objectWithoutProperties(_ref2, _excluded2);
+      return /* @__PURE__ */React.createElement(TextInput, _objectSpread2(_objectSpread2({}, params), {}, {
+        disabled: disabled,
+        name: name,
+        variant: variant,
+        size: size,
+        edges: edges,
+        required: required,
+        value: selectedValue,
+        placeholder: placeholder,
+        inputProps: _objectSpread2(_objectSpread2({
+          autoComplete: "off"
+        }, textInputAttrs), inputProps),
+        slotProps: {
+          input: _objectSpread2(_objectSpread2({}, TextInputProps), InputProps)
+        },
+        showError: showError,
+        message: errorMessage,
+        ref: InputProps.ref
+      }));
+    },
+    onChange: handleChange
+  }, rest)));
 }
 Autocomplete.propTypes = {
   /**

package/dist/esm/components/Avatar.js

@@ -1,7 +1,6 @@
 "use strict";
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx } from 'react/jsx-runtime';
-import 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { StyledAvatar } from './Avatar.styled.js';
 
@@ -24,9 +23,7 @@ function Avatar(_ref) {
     srcSet: srcSet,
     variant: variant
   }, rest);
-  return /* @__PURE__ */jsx(StyledAvatar, _objectSpread2(_objectSpread2({}, props), {}, {
-    children: children
-  }));
+  return /* @__PURE__ */React.createElement(StyledAvatar, _objectSpread2({}, props), children);
 }
 Avatar.propTypes = {
   /**

package/dist/esm/components/AvatarCropDialog.js

@@ -1,7 +1,6 @@
 "use strict";
 import { slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import ReactCrop from 'react-image-crop';
@@ -125,53 +124,46 @@ function AvatarCropDialog(_ref) {
     }
     return false;
   };
-  return /* @__PURE__ */jsxs(Fragment, {
-    children: [/* @__PURE__ */jsx(FormControl, {
-      name: "avatar-crop-editor",
-      fullWidth: true,
-      label: label,
-      helperText: helperText,
-      showError: showError,
-      errorMessage: errorMessage,
-      children: /* @__PURE__ */jsx(StyledEditor, {
-        showError: showError,
-        children: /* @__PURE__ */jsx(ReactCrop, {
-          src: droppedFile,
-          crop: crop,
-          style: {
-            width: editorWidth,
-            maxHeight: window.innerHeight * 0.7
-          },
-          circularCrop: true,
-          onChange: handleCropChange,
-          onImageLoaded: handleImageLoaded,
-          keepSelection: true
-        })
-      })
-    }, "form-control"), /* @__PURE__ */jsxs(ModalActions, {
-      children: [/* @__PURE__ */jsx(Button, {
-        onClick: handleCancel,
-        variant: "outlined",
-        loading: cancelling,
-        color: "primaryAlt",
-        fullWidth: !isNotMobile,
-        children: "Cancel"
-      }), /* @__PURE__ */jsx(Button, {
-        onClick: handleImageSave,
-        loading: saving,
-        color: "primaryAlt",
-        fullWidth: !isNotMobile,
-        children: "Save"
-      })]
-    }), /* @__PURE__ */jsx(Confirmation, {
-      open: confirmDelete,
-      onCancel: function onCancel() {
-        return setConfirmDelete(false);
-      },
-      onConfirm: handleCancel,
-      message: "Are you sure you want to remove the attached image?"
-    })]
-  });
+  return /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(FormControl, {
+    key: "form-control",
+    name: "avatar-crop-editor",
+    fullWidth: true,
+    label: label,
+    helperText: helperText,
+    showError: showError,
+    errorMessage: errorMessage
+  }, /* @__PURE__ */React.createElement(StyledEditor, {
+    showError: showError
+  }, /* @__PURE__ */React.createElement(ReactCrop, {
+    src: droppedFile,
+    crop: crop,
+    style: {
+      width: editorWidth,
+      maxHeight: window.innerHeight * 0.7
+    },
+    circularCrop: true,
+    onChange: handleCropChange,
+    onImageLoaded: handleImageLoaded,
+    keepSelection: true
+  }))), /* @__PURE__ */React.createElement(ModalActions, null, /* @__PURE__ */React.createElement(Button, {
+    onClick: handleCancel,
+    variant: "outlined",
+    loading: cancelling,
+    color: "primaryAlt",
+    fullWidth: !isNotMobile
+  }, "Cancel"), /* @__PURE__ */React.createElement(Button, {
+    onClick: handleImageSave,
+    loading: saving,
+    color: "primaryAlt",
+    fullWidth: !isNotMobile
+  }, "Save")), /* @__PURE__ */React.createElement(Confirmation, {
+    open: confirmDelete,
+    onCancel: function onCancel() {
+      return setConfirmDelete(false);
+    },
+    onConfirm: handleCancel,
+    message: "Are you sure you want to remove the attached image?"
+  }));
 }
 AvatarCropDialog.propTypes = {
   /**