@tenancy.nz/ui 1.0.2 → 1.0.3

package/dist/esm/components/CroppedImageInput.js

@@ -1,4 +1,5 @@
 "use strict";
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, useCallback, createElement } from 'react';
 import PropTypes from 'prop-types';
@@ -24,48 +25,110 @@ import '../utils/helpers/time.js';
 import 'react-image-crop/dist/ReactCrop.css';
 import { StyledCircularProgress, StyledSavedImage, StyledFileIcon, StyledDeleteIcon, StyledEditor } from './CroppedImageInput.styled.js';
 
-function CroppedImageInput({
-  defaultValue = null,
-  disabled = false,
-  dropzoneLabel = "Upload file",
-  dropzoneDescription = "Drag and drop a file here, or click to select a file",
-  helperText = "",
-  helperTextPlacement = "above",
-  croppedImageQuality = 0.6,
-  label = "",
-  required = false,
-  showError = false,
-  errorMessage = "",
-  edges = "normal",
-  cropRatio = null,
-  inputProps = null,
-  dropzoneProps = null,
-  onCancel = Promise.resolve(true),
-  onSave = Promise.resolve(true),
-  onDelete = Promise.resolve(true),
-  name,
-  dropppedFile = null,
-  cropGuide = null,
-  showActions = false,
-  saveButtonProps = {},
-  cancelButtonProps = {},
-  openInDialog = false,
-  fileViewerProps = {}
-}) {
-  const [src, setSrc] = useState(null);
-  const [filetype, setFiletype] = useState("");
-  const [originalImage, setOriginalImage] = useState(null);
-  const [croppedImage, setCroppedImage] = useState(null);
-  const [documentFile, setDocumentFile] = useState(null);
-  const [confirmDelete, setConfirmDelete] = useState(false);
-  const [viewDocument, setViewDocument] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [saving, setSaving] = useState(false);
-  const [cancelling, setCancelling] = useState(false);
-  const [crop, setCrop] = useState({ aspect: cropRatio, unit: "px" });
-  const input = useRef(null);
-  const isNotMobile = useMediaQuery((theme) => theme.breakpoints.up("md"));
-  useEffect(() => {
+function CroppedImageInput(_ref) {
+  var _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? null : _ref$defaultValue,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$dropzoneLabel = _ref.dropzoneLabel,
+    dropzoneLabel = _ref$dropzoneLabel === void 0 ? "Upload file" : _ref$dropzoneLabel,
+    _ref$dropzoneDescript = _ref.dropzoneDescription,
+    dropzoneDescription = _ref$dropzoneDescript === void 0 ? "Drag and drop a file here, or click to select a file" : _ref$dropzoneDescript,
+    _ref$helperText = _ref.helperText,
+    helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
+    _ref$helperTextPlacem = _ref.helperTextPlacement,
+    helperTextPlacement = _ref$helperTextPlacem === void 0 ? "above" : _ref$helperTextPlacem,
+    _ref$croppedImageQual = _ref.croppedImageQuality,
+    croppedImageQuality = _ref$croppedImageQual === void 0 ? 0.6 : _ref$croppedImageQual,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$showError = _ref.showError,
+    showError = _ref$showError === void 0 ? false : _ref$showError,
+    _ref$errorMessage = _ref.errorMessage,
+    errorMessage = _ref$errorMessage === void 0 ? "" : _ref$errorMessage,
+    _ref$edges = _ref.edges,
+    edges = _ref$edges === void 0 ? "normal" : _ref$edges,
+    _ref$cropRatio = _ref.cropRatio,
+    cropRatio = _ref$cropRatio === void 0 ? null : _ref$cropRatio,
+    _ref$inputProps = _ref.inputProps,
+    inputProps = _ref$inputProps === void 0 ? null : _ref$inputProps,
+    _ref$dropzoneProps = _ref.dropzoneProps,
+    dropzoneProps = _ref$dropzoneProps === void 0 ? null : _ref$dropzoneProps,
+    _ref$onCancel = _ref.onCancel,
+    onCancel = _ref$onCancel === void 0 ? Promise.resolve(true) : _ref$onCancel,
+    _ref$onSave = _ref.onSave,
+    onSave = _ref$onSave === void 0 ? Promise.resolve(true) : _ref$onSave,
+    _ref$onDelete = _ref.onDelete,
+    onDelete = _ref$onDelete === void 0 ? Promise.resolve(true) : _ref$onDelete,
+    name = _ref.name,
+    _ref$dropppedFile = _ref.dropppedFile,
+    dropppedFile = _ref$dropppedFile === void 0 ? null : _ref$dropppedFile,
+    _ref$cropGuide = _ref.cropGuide,
+    cropGuide = _ref$cropGuide === void 0 ? null : _ref$cropGuide,
+    _ref$showActions = _ref.showActions,
+    showActions = _ref$showActions === void 0 ? false : _ref$showActions,
+    _ref$saveButtonProps = _ref.saveButtonProps,
+    saveButtonProps = _ref$saveButtonProps === void 0 ? {} : _ref$saveButtonProps,
+    _ref$cancelButtonProp = _ref.cancelButtonProps,
+    cancelButtonProps = _ref$cancelButtonProp === void 0 ? {} : _ref$cancelButtonProp,
+    _ref$openInDialog = _ref.openInDialog,
+    openInDialog = _ref$openInDialog === void 0 ? false : _ref$openInDialog,
+    _ref$fileViewerProps = _ref.fileViewerProps,
+    fileViewerProps = _ref$fileViewerProps === void 0 ? {} : _ref$fileViewerProps;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    src = _useState2[0],
+    setSrc = _useState2[1];
+  var _useState3 = useState(""),
+    _useState4 = _slicedToArray(_useState3, 2),
+    filetype = _useState4[0],
+    setFiletype = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    originalImage = _useState6[0],
+    setOriginalImage = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    croppedImage = _useState8[0],
+    setCroppedImage = _useState8[1];
+  var _useState9 = useState(null),
+    _useState0 = _slicedToArray(_useState9, 2),
+    documentFile = _useState0[0],
+    setDocumentFile = _useState0[1];
+  var _useState1 = useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    confirmDelete = _useState10[0],
+    setConfirmDelete = _useState10[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    viewDocument = _useState12[0],
+    setViewDocument = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    loading = _useState14[0],
+    setLoading = _useState14[1];
+  var _useState15 = useState(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    saving = _useState16[0],
+    setSaving = _useState16[1];
+  var _useState17 = useState(false),
+    _useState18 = _slicedToArray(_useState17, 2),
+    cancelling = _useState18[0],
+    setCancelling = _useState18[1];
+  var _useState19 = useState({
+      aspect: cropRatio,
+      unit: "px"
+    }),
+    _useState20 = _slicedToArray(_useState19, 2),
+    crop = _useState20[0],
+    setCrop = _useState20[1];
+  var input = useRef(null);
+  var isNotMobile = useMediaQuery(function (theme) {
+    return theme.breakpoints.up("md");
+  });
+  useEffect(function () {
     if (defaultValue) {
       if (isImage(defaultValue)) {
         setCroppedImage(defaultValue);
@@ -74,37 +137,34 @@ function CroppedImageInput({
       }
     }
   }, [defaultValue]);
-  const onDrop = useCallback(
-    (acceptedFiles) => {
-      setFiletype(acceptedFiles[0].type);
-      if (!acceptedFiles[0].type.startsWith("image")) {
-        setSaving(true);
+  var onDrop = useCallback(function (acceptedFiles) {
+    setFiletype(acceptedFiles[0].type);
+    if (!acceptedFiles[0].type.startsWith("image")) {
+      setSaving(true);
+    }
+    setLoading(true);
+    var reader = new FileReader();
+    reader.addEventListener("load", function () {
+      if (acceptedFiles[0].type.startsWith("image")) {
+        setSrc(reader.result);
+      } else {
+        setDocumentFile(reader.result);
+        onSave(reader.result, acceptedFiles[0]).then(function () {
+          setSaving(false);
+        });
       }
-      setLoading(true);
-      const reader = new FileReader();
-      reader.addEventListener("load", () => {
-        if (acceptedFiles[0].type.startsWith("image")) {
-          setSrc(reader.result);
-        } else {
-          setDocumentFile(reader.result);
-          onSave(reader.result, acceptedFiles[0]).then(() => {
-            setSaving(false);
-          });
-        }
-        setLoading(false);
-      });
-      reader.readAsDataURL(acceptedFiles[0]);
-    },
-    [onSave]
-  );
-  useEffect(() => {
+      setLoading(false);
+    });
+    reader.readAsDataURL(acceptedFiles[0]);
+  }, [onSave]);
+  useEffect(function () {
     if (dropppedFile) {
       onDrop(dropppedFile);
     }
   }, [dropppedFile, onDrop]);
-  const handleCancel = () => {
+  var handleCancel = function handleCancel() {
     setCancelling(true);
-    onCancel().then(() => {
+    onCancel().then(function () {
       setSrc(null);
       setOriginalImage(null);
       setCroppedImage(null);
@@ -112,9 +172,9 @@ function CroppedImageInput({
       setCancelling(false);
     });
   };
-  const handleDelete = () => {
+  var handleDelete = function handleDelete() {
     setCancelling(true);
-    onDelete().then(() => {
+    onDelete().then(function () {
       setSrc(null);
       setDocumentFile(null);
       setOriginalImage(null);
@@ -123,26 +183,34 @@ function CroppedImageInput({
       setCancelling(false);
     });
   };
-  const fade = {
-    initial: { opacity: 0 },
-    animate: { opacity: 1 },
-    exit: { opacity: 0 }
+  var fade = {
+    initial: {
+      opacity: 0
+    },
+    animate: {
+      opacity: 1
+    },
+    exit: {
+      opacity: 0
+    }
+  };
+  var handleCropChange = function handleCropChange(newCrop) {
+    return setCrop(newCrop);
   };
-  const handleCropChange = (newCrop) => setCrop(newCrop);
-  const handleImageLoaded = (image) => {
-    const {
-      target: { clientWidth, clientHeight }
-    } = image;
-    let width = clientWidth;
+  var handleImageLoaded = function handleImageLoaded(image) {
+    var _image$target = image.target,
+      clientWidth = _image$target.clientWidth,
+      clientHeight = _image$target.clientHeight;
+    var width = clientWidth;
     if (window.innerHeight * 0.5 < clientHeight) {
       width = clientWidth * (window.innerHeight * 0.5 / clientHeight);
     }
-    const height = clientHeight * (width / clientWidth);
+    var height = clientHeight * (width / clientWidth);
     if (cropRatio) {
-      const widthPercent = clientWidth / crop.aspect < clientHeight * crop.aspect ? 1 : clientHeight * crop.aspect / clientWidth;
-      const heightPercent = clientWidth / crop.aspect > clientHeight * crop.aspect ? 1 : clientWidth / crop.aspect / clientHeight;
-      const y = (1 - heightPercent) / 2;
-      const x = (1 - widthPercent) / 2;
+      var widthPercent = clientWidth / crop.aspect < clientHeight * crop.aspect ? 1 : clientHeight * crop.aspect / clientWidth;
+      var heightPercent = clientWidth / crop.aspect > clientHeight * crop.aspect ? 1 : clientWidth / crop.aspect / clientHeight;
+      var y = (1 - heightPercent) / 2;
+      var x = (1 - widthPercent) / 2;
       setCrop({
         unit: "px",
         width: width * widthPercent,
@@ -154,8 +222,8 @@ function CroppedImageInput({
     } else {
       setCrop({
         unit: "px",
-        width,
-        height,
+        width: width,
+        height: height,
         x: 0,
         y: 0
       });
@@ -163,193 +231,219 @@ function CroppedImageInput({
     setOriginalImage(image);
     return false;
   };
-  const handleImageSave = () => {
+  var handleImageSave = function handleImageSave() {
     if (originalImage && crop.width && crop.height) {
-      const {
-        target: { clientWidth, clientHeight, naturalWidth, naturalHeight }
-      } = originalImage;
-      const canvas = document.createElement("canvas");
-      const scaleX = naturalWidth / clientWidth;
-      const scaleY = naturalHeight / clientHeight;
-      const ctx = canvas.getContext("2d");
+      var _originalImage$target = originalImage.target,
+        clientWidth = _originalImage$target.clientWidth,
+        clientHeight = _originalImage$target.clientHeight,
+        naturalWidth = _originalImage$target.naturalWidth,
+        naturalHeight = _originalImage$target.naturalHeight;
+      var canvas = document.createElement("canvas");
+      var scaleX = naturalWidth / clientWidth;
+      var scaleY = naturalHeight / clientHeight;
+      var ctx = canvas.getContext("2d");
       canvas.width = Math.floor(crop.width * scaleX);
       canvas.height = Math.floor(crop.height * scaleY);
       ctx.imageSmoothingQuality = "high";
-      const cropX = crop.x * scaleX;
-      const cropY = crop.y * scaleY;
-      const centerX = naturalWidth / 2;
-      const centerY = naturalHeight / 2;
+      var cropX = crop.x * scaleX;
+      var cropY = crop.y * scaleY;
+      var centerX = naturalWidth / 2;
+      var centerY = naturalHeight / 2;
       ctx.save();
       ctx.translate(-cropX, -cropY);
       ctx.translate(centerX, centerY);
       ctx.translate(-centerX, -centerY);
-      ctx.drawImage(
-        originalImage.target,
-        0,
-        0,
-        naturalWidth,
-        naturalHeight,
-        0,
-        0,
-        naturalWidth,
-        naturalHeight
-      );
+      ctx.drawImage(originalImage.target, 0, 0, naturalWidth, naturalHeight, 0, 0, naturalWidth, naturalHeight);
       ctx.restore();
-      return new Promise(() => {
-        canvas.toBlob(
-          (blob) => {
-            if (!blob) {
-              console.error("Canvas is empty");
-              return;
-            }
-            setSaving(true);
-            const reader = new FileReader();
-            reader.addEventListener("load", () => {
-              input.current.value = reader.result;
-              onSave(reader.result, blob).then(() => {
-                setCroppedImage(reader.result);
-                setSaving(false);
-              }).catch((e) => console.error(e));
+      return new Promise(function () {
+        canvas.toBlob(function (blob) {
+          if (!blob) {
+            console.error("Canvas is empty");
+            return;
+          }
+          setSaving(true);
+          var reader = new FileReader();
+          reader.addEventListener("load", function () {
+            input.current.value = reader.result;
+            onSave(reader.result, blob).then(function () {
+              setCroppedImage(reader.result);
+              setSaving(false);
+            }).catch(function (e) {
+              return console.error(e);
             });
-            reader.readAsDataURL(blob);
-          },
-          "image/jpeg",
-          croppedImageQuality
-        );
+          });
+          reader.readAsDataURL(blob);
+        }, "image/jpeg", croppedImageQuality);
       });
     }
     return false;
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      FileViewer,
-      {
-        ...fileViewerProps,
-        file: { url: documentFile, filetype },
-        open: viewDocument,
-        onClose: () => setViewDocument(false)
+  return /* @__PURE__ */jsxs(Fragment, {
+    children: [/* @__PURE__ */jsx(FileViewer, _objectSpread2(_objectSpread2({}, fileViewerProps), {}, {
+      file: {
+        url: documentFile,
+        filetype: filetype
+      },
+      open: viewDocument,
+      onClose: function onClose() {
+        return setViewDocument(false);
       }
-    ),
-    /* @__PURE__ */ jsx(
-      FormControl,
-      {
-        name,
-        fullWidth: true,
-        label,
-        helperText,
-        helperTextPlacement,
-        disabled,
-        required,
-        showError,
-        errorMessage,
-        edges,
-        children: /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ createElement("input", { type: "hidden", ref: input, ...inputProps, key: "hidden-input" }),
-          saving || cancelling && /* @__PURE__ */ jsx(StyledCircularProgress, {}, "loading"),
-          /* @__PURE__ */ jsxs(AnimatePresence, { exitBeforeEnter: true, children: [
-            (croppedImage || documentFile) && !showError && /* @__PURE__ */ createElement(StyledSavedImage, { ...fade, key: "saved-image", edges }, /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", spacing: 5, children: [
-              /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, md: 11, children: [
-                croppedImage && /* @__PURE__ */ jsx("img", { src: croppedImage, alt: "" }),
-                documentFile && /* @__PURE__ */ jsx(
-                  Grid,
-                  {
-                    item: true,
-                    xs: 12,
-                    md: 1,
-                    style: {
-                      justifyContent: "center",
-                      alignItems: "center"
-                    },
-                    children: /* @__PURE__ */ jsx(IconButton, { onClick: () => setViewDocument(true), children: /* @__PURE__ */ jsx(StyledFileIcon, {}) })
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 1, children: /* @__PURE__ */ jsx(StyledDeleteIcon, { children: /* @__PURE__ */ jsx(DeleteIcon, {}) }) })
-            ] })),
-            !src && !documentFile && !croppedImage && (openInDialog ? /* @__PURE__ */ createElement(motion.div, { ...fade, key: "upload-button" }, /* @__PURE__ */ jsx(FileUploadButton, { onUpload: onDrop, fullWidth: !isNotMobile, children: dropzoneLabel })) : /* @__PURE__ */ createElement(motion.div, { ...fade, key: "dropzone" }, /* @__PURE__ */ jsx(
-              DropZone,
-              {
-                loading,
-                disabled,
-                onDrop,
-                edges,
-                dropzoneLabel,
-                dropzoneDescription,
-                dropzoneProps: {
-                  accept: ["image/*"],
-                  ...dropzoneProps,
-                  maxFiles: 1
-                }
-              }
-            ))),
-            src !== null && documentFile === null && (!croppedImage || showError) && (openInDialog ? /* @__PURE__ */ jsxs(Modal, { open: true, fullWidth: true, fullScreen: true, children: [
-              /* @__PURE__ */ jsx(ModalHeader, { onClose: handleCancel, children: /* @__PURE__ */ jsx(Heading, { as: "h4", children: "Crop Image" }) }),
-              /* @__PURE__ */ jsx(ModalContent, { children: /* @__PURE__ */ jsxs(Box, { pl: 2.5, pr: 2.5, pb: 2.5, children: [
-                /* @__PURE__ */ jsx(StyledEditor, { edges, showError, children: /* @__PURE__ */ jsx(
-                  ReactCrop,
-                  {
-                    crop,
+    })), /* @__PURE__ */jsx(FormControl, {
+      name: name,
+      fullWidth: true,
+      label: label,
+      helperText: helperText,
+      helperTextPlacement: helperTextPlacement,
+      disabled: disabled,
+      required: required,
+      showError: showError,
+      errorMessage: errorMessage,
+      edges: edges,
+      children: /* @__PURE__ */jsxs("div", {
+        children: [/* @__PURE__ */createElement("input", _objectSpread2(_objectSpread2({
+          type: "hidden",
+          ref: input
+        }, inputProps), {}, {
+          key: "hidden-input"
+        })), saving || cancelling && /* @__PURE__ */jsx(StyledCircularProgress, {}, "loading"), /* @__PURE__ */jsxs(AnimatePresence, {
+          exitBeforeEnter: true,
+          children: [(croppedImage || documentFile) && !showError && /* @__PURE__ */createElement(StyledSavedImage, _objectSpread2(_objectSpread2({}, fade), {}, {
+            key: "saved-image",
+            edges: edges
+          }), /* @__PURE__ */jsxs(Grid, {
+            container: true,
+            alignItems: "center",
+            spacing: 5,
+            children: [/* @__PURE__ */jsxs(Grid, {
+              item: true,
+              xs: 12,
+              md: 11,
+              children: [croppedImage && /* @__PURE__ */jsx("img", {
+                src: croppedImage,
+                alt: ""
+              }), documentFile && /* @__PURE__ */jsx(Grid, {
+                item: true,
+                xs: 12,
+                md: 1,
+                style: {
+                  justifyContent: "center",
+                  alignItems: "center"
+                },
+                children: /* @__PURE__ */jsx(IconButton, {
+                  onClick: function onClick() {
+                    return setViewDocument(true);
+                  },
+                  children: /* @__PURE__ */jsx(StyledFileIcon, {})
+                })
+              })]
+            }), /* @__PURE__ */jsx(Grid, {
+              item: true,
+              xs: 12,
+              md: 1,
+              children: /* @__PURE__ */jsx(StyledDeleteIcon, {
+                children: /* @__PURE__ */jsx(DeleteIcon, {})
+              })
+            })]
+          })), !src && !documentFile && !croppedImage && (openInDialog ? /* @__PURE__ */createElement(motion.div, _objectSpread2(_objectSpread2({}, fade), {}, {
+            key: "upload-button"
+          }), /* @__PURE__ */jsx(FileUploadButton, {
+            onUpload: onDrop,
+            fullWidth: !isNotMobile,
+            children: dropzoneLabel
+          })) : /* @__PURE__ */createElement(motion.div, _objectSpread2(_objectSpread2({}, fade), {}, {
+            key: "dropzone"
+          }), /* @__PURE__ */jsx(DropZone, {
+            loading: loading,
+            disabled: disabled,
+            onDrop: onDrop,
+            edges: edges,
+            dropzoneLabel: dropzoneLabel,
+            dropzoneDescription: dropzoneDescription,
+            dropzoneProps: _objectSpread2(_objectSpread2({
+              accept: ["image/*"]
+            }, dropzoneProps), {}, {
+              maxFiles: 1
+            })
+          }))), src !== null && documentFile === null && (!croppedImage || showError) && (openInDialog ? /* @__PURE__ */jsxs(Modal, {
+            open: true,
+            fullWidth: true,
+            fullScreen: true,
+            children: [/* @__PURE__ */jsx(ModalHeader, {
+              onClose: handleCancel,
+              children: /* @__PURE__ */jsx(Heading, {
+                as: "h4",
+                children: "Crop Image"
+              })
+            }), /* @__PURE__ */jsx(ModalContent, {
+              children: /* @__PURE__ */jsxs(Box, {
+                pl: 2.5,
+                pr: 2.5,
+                pb: 2.5,
+                children: [/* @__PURE__ */jsx(StyledEditor, {
+                  edges: edges,
+                  showError: showError,
+                  children: /* @__PURE__ */jsx(ReactCrop, {
+                    crop: crop,
                     style: {
                       width: "100%"
                     },
                     onChange: handleCropChange,
                     onImageLoaded: handleImageLoaded,
                     renderSelectionAddon: cropGuide,
-                    children: /* @__PURE__ */ jsx("img", { src, alt: "" })
-                  }
-                ) }),
-                /* @__PURE__ */ jsx(
-                  CroppedImageInputActions,
-                  {
-                    handleCancel,
-                    cancelling,
-                    cancelButtonProps,
-                    handleImageSave,
-                    saving,
-                    saveButtonProps,
-                    disabled
-                  }
-                )
-              ] }) })
-            ] }) : /* @__PURE__ */ createElement(motion.div, { ...fade, key: "editor" }, /* @__PURE__ */ jsx(StyledEditor, { edges, showError, children: /* @__PURE__ */ jsx(
-              ReactCrop,
-              {
-                crop,
-                style: {
-                  width: "100%"
-                },
-                onChange: handleCropChange,
-                renderSelectionAddon: cropGuide,
-                children: /* @__PURE__ */ jsx("img", { src, alt: "", onLoad: handleImageLoaded })
-              }
-            ) })))
-          ] })
-        ] })
+                    children: /* @__PURE__ */jsx("img", {
+                      src: src,
+                      alt: ""
+                    })
+                  })
+                }), /* @__PURE__ */jsx(CroppedImageInputActions, {
+                  handleCancel: handleCancel,
+                  cancelling: cancelling,
+                  cancelButtonProps: cancelButtonProps,
+                  handleImageSave: handleImageSave,
+                  saving: saving,
+                  saveButtonProps: saveButtonProps,
+                  disabled: disabled
+                })]
+              })
+            })]
+          }) : /* @__PURE__ */createElement(motion.div, _objectSpread2(_objectSpread2({}, fade), {}, {
+            key: "editor"
+          }), /* @__PURE__ */jsx(StyledEditor, {
+            edges: edges,
+            showError: showError,
+            children: /* @__PURE__ */jsx(ReactCrop, {
+              crop: crop,
+              style: {
+                width: "100%"
+              },
+              onChange: handleCropChange,
+              renderSelectionAddon: cropGuide,
+              children: /* @__PURE__ */jsx("img", {
+                src: src,
+                alt: "",
+                onLoad: handleImageLoaded
+              })
+            })
+          })))]
+        })]
+      })
+    }, "form-control"), (!openInDialog && src !== null && (!croppedImage || showError) || !openInDialog && showActions) && /* @__PURE__ */jsx(CroppedImageInputActions, {
+      handleCancel: handleCancel,
+      cancelling: cancelling,
+      cancelButtonProps: cancelButtonProps,
+      handleImageSave: handleImageSave,
+      saving: saving,
+      saveButtonProps: saveButtonProps,
+      disabled: disabled
+    }), /* @__PURE__ */jsx(Confirmation, {
+      open: confirmDelete,
+      onCancel: function onCancel() {
+        return setConfirmDelete(false);
       },
-      "form-control"
-    ),
-    (!openInDialog && src !== null && (!croppedImage || showError) || !openInDialog && showActions) && /* @__PURE__ */ jsx(
-      CroppedImageInputActions,
-      {
-        handleCancel,
-        cancelling,
-        cancelButtonProps,
-        handleImageSave,
-        saving,
-        saveButtonProps,
-        disabled
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Confirmation,
-      {
-        open: confirmDelete,
-        onCancel: () => setConfirmDelete(false),
-        onConfirm: handleDelete,
-        message: "Are you sure you want to remove the attached image?"
-      }
-    )
-  ] });
+      onConfirm: handleDelete,
+      message: "Are you sure you want to remove the attached image?"
+    })]
+  });
 }
 CroppedImageInput.propTypes = {
   /**