@payloadcms/ui 3.0.0-beta.90 → 3.0.0-beta.92

package/dist/elements/EditUpload/index.js

@@ -1,6 +1,5 @@
 'use client';
 
-import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useModal } from '@faceless-ui/modal';
 import React, { forwardRef, useRef, useState } from 'react';
@@ -36,59 +35,34 @@ const defaultCrop = {
   x: 0,
   y: 0
 };
-export const EditUpload = t0 => {
-  const $ = _c(14);
-  const {
-    fileName,
-    fileSrc,
-    imageCacheTag,
-    initialCrop,
-    initialFocalPoint,
-    onSave,
-    showCrop,
-    showFocalPoint
-  } = t0;
+export const EditUpload = ({
+  fileName,
+  fileSrc,
+  imageCacheTag,
+  initialCrop,
+  initialFocalPoint,
+  onSave,
+  showCrop,
+  showFocalPoint
+}) => {
   const {
     closeModal
   } = useModal();
   const {
     t
   } = useTranslation();
-  let t1;
-  if ($[0] !== initialCrop) {
-    t1 = () => ({
-      ...defaultCrop,
-      ...(initialCrop || {})
-    });
-    $[0] = initialCrop;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  const [crop, setCrop] = useState(t1);
-  let t2;
-  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = {
-      x: 50,
-      y: 50
-    };
-    $[2] = t2;
-  } else {
-    t2 = $[2];
-  }
-  const defaultFocalPosition = t2;
-  let t3;
-  if ($[3] !== initialFocalPoint) {
-    t3 = () => ({
-      ...defaultFocalPosition,
-      ...initialFocalPoint
-    });
-    $[3] = initialFocalPoint;
-    $[4] = t3;
-  } else {
-    t3 = $[4];
-  }
-  const [focalPosition, setFocalPosition] = useState(t3);
+  const [crop, setCrop] = useState(() => ({
+    ...defaultCrop,
+    ...(initialCrop || {})
+  }));
+  const defaultFocalPosition = {
+    x: 50,
+    y: 50
+  };
+  const [focalPosition, setFocalPosition] = useState(() => ({
+    ...defaultFocalPosition,
+    ...initialFocalPoint
+  }));
   const [checkBounds, setCheckBounds] = useState(false);
   const [uncroppedPixelHeight, setUncroppedPixelHeight] = useState(0);
   const [uncroppedPixelWidth, setUncroppedPixelWidth] = useState(0);
@@ -98,98 +72,57 @@ export const EditUpload = t0 => {
   const heightInputRef = useRef(null);
   const widthInputRef = useRef(null);
   const [imageLoaded, setImageLoaded] = useState(false);
-  let t4;
-  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-    t4 = e => {
-      setUncroppedPixelHeight(e.currentTarget.naturalHeight);
-      setUncroppedPixelWidth(e.currentTarget.naturalWidth);
-      setImageLoaded(true);
-    };
-    $[5] = t4;
-  } else {
-    t4 = $[5];
-  }
-  const onImageLoad = t4;
-  let t5;
-  if ($[6] !== uncroppedPixelWidth || $[7] !== uncroppedPixelHeight || $[8] !== crop) {
-    t5 = t6 => {
-      const {
-        dimension,
-        value
-      } = t6;
-      const intValue = parseInt(value);
-      if (dimension === "width" && intValue >= uncroppedPixelWidth) {
-        return null;
-      }
-      if (dimension === "height" && intValue >= uncroppedPixelHeight) {
-        return null;
-      }
-      const percentage = 100 * (intValue / (dimension === "width" ? uncroppedPixelWidth : uncroppedPixelHeight));
-      if (percentage === 100 || percentage === 0) {
-        return null;
-      }
-      setCrop({
-        ...crop,
-        [dimension]: percentage
-      });
-    };
-    $[6] = uncroppedPixelWidth;
-    $[7] = uncroppedPixelHeight;
-    $[8] = crop;
-    $[9] = t5;
-  } else {
-    t5 = $[9];
-  }
-  const fineTuneCrop = t5;
-  let t6;
-  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-    t6 = t7 => {
-      const {
-        coordinate,
-        value: value_0
-      } = t7;
-      const intValue_0 = parseInt(value_0);
-      if (intValue_0 >= 0 && intValue_0 <= 100) {
-        setFocalPosition(prevPosition => ({
-          ...prevPosition,
-          [coordinate]: intValue_0
-        }));
-      }
-    };
-    $[10] = t6;
-  } else {
-    t6 = $[10];
-  }
-  const fineTuneFocalPosition = t6;
-  const saveEdits = () => {
-    if (typeof onSave === "function") {
-      onSave({
-        crop: crop ? crop : undefined,
-        focalPoint: focalPosition,
-        heightInPixels: Number(heightInputRef?.current?.value ?? uncroppedPixelHeight),
-        widthInPixels: Number(widthInputRef?.current?.value ?? uncroppedPixelWidth)
-      });
+  const onImageLoad = e => {
+    // set the default image height/width on load
+    setUncroppedPixelHeight(e.currentTarget.naturalHeight);
+    setUncroppedPixelWidth(e.currentTarget.naturalWidth);
+    setImageLoaded(true);
+  };
+  const fineTuneCrop = ({
+    dimension,
+    value
+  }) => {
+    const intValue = parseInt(value);
+    if (dimension === 'width' && intValue >= uncroppedPixelWidth) return null;
+    if (dimension === 'height' && intValue >= uncroppedPixelHeight) return null;
+    const percentage = 100 * (intValue / (dimension === 'width' ? uncroppedPixelWidth : uncroppedPixelHeight));
+    if (percentage === 100 || percentage === 0) return null;
+    setCrop({
+      ...crop,
+      [dimension]: percentage
+    });
+  };
+  const fineTuneFocalPosition = ({
+    coordinate,
+    value: value_0
+  }) => {
+    const intValue_0 = parseInt(value_0);
+    if (intValue_0 >= 0 && intValue_0 <= 100) {
+      setFocalPosition(prevPosition => ({
+        ...prevPosition,
+        [coordinate]: intValue_0
+      }));
     }
+  };
+  const saveEdits = () => {
+    if (typeof onSave === 'function') onSave({
+      crop: crop ? crop : undefined,
+      focalPoint: focalPosition,
+      heightInPixels: Number(heightInputRef?.current?.value ?? uncroppedPixelHeight),
+      widthInPixels: Number(widthInputRef?.current?.value ?? uncroppedPixelWidth)
+    });
     closeModal(editDrawerSlug);
   };
-  let t7;
-  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-    t7 = t8 => {
-      const {
-        x,
-        y
-      } = t8;
-      setFocalPosition({
-        x,
-        y
-      });
-      setCheckBounds(false);
-    };
-    $[11] = t7;
-  } else {
-    t7 = $[11];
-  }
-  const onDragEnd = t7;
+  const onDragEnd = React.useCallback(({
+    x,
+    y
+  }) => {
+    setFocalPosition({
+      x,
+      y
+    });
+    setCheckBounds(false);
+  }, []);
   const centerFocalPoint = () => {
     const containerRect = focalWrapRef.current.getBoundingClientRect();
     const boundsRect = showCrop ? cropRef.current.getBoundingClientRect() : imageRef.current.getBoundingClientRect();
@@ -201,154 +134,148 @@ export const EditUpload = t0 => {
     });
   };
   const fileSrcToUse = imageCacheTag ? `${fileSrc}?${imageCacheTag}` : fileSrc;
-  let t8;
-  if ($[12] !== closeModal) {
-    t8 = () => closeModal(editDrawerSlug);
-    $[12] = closeModal;
-    $[13] = t8;
-  } else {
-    t8 = $[13];
-  }
-  return _jsxs("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: baseClass,
-    children: [_jsxs("div", {
+    children: [/*#__PURE__*/_jsxs("div", {
       className: `${baseClass}__header`,
-      children: [_jsxs("h2", {
-        title: `${t("general:editing")} ${fileName}`,
-        children: [t("general:editing"), " ", fileName]
-      }), _jsxs("div", {
+      children: [/*#__PURE__*/_jsxs("h2", {
+        title: `${t('general:editing')} ${fileName}`,
+        children: [t('general:editing'), " ", fileName]
+      }), /*#__PURE__*/_jsxs("div", {
         className: `${baseClass}__actions`,
-        children: [_jsx(Button, {
-          "aria-label": t("general:cancel"),
+        children: [/*#__PURE__*/_jsx(Button, {
+          "aria-label": t('general:cancel'),
           buttonStyle: "secondary",
           className: `${baseClass}__cancel`,
-          onClick: t8,
-          children: t("general:cancel")
-        }), _jsx(Button, {
-          "aria-label": t("general:applyChanges"),
+          onClick: () => closeModal(editDrawerSlug),
+          children: t('general:cancel')
+        }), /*#__PURE__*/_jsx(Button, {
+          "aria-label": t('general:applyChanges'),
           buttonStyle: "primary",
           className: `${baseClass}__save`,
           disabled: !imageLoaded,
           onClick: saveEdits,
-          children: t("general:applyChanges")
+          children: t('general:applyChanges')
         })]
       })]
-    }), _jsxs("div", {
+    }), /*#__PURE__*/_jsxs("div", {
       className: `${baseClass}__toolWrap`,
-      children: [_jsx("div", {
+      children: [/*#__PURE__*/_jsx("div", {
         className: `${baseClass}__crop`,
-        children: _jsxs("div", {
+        children: /*#__PURE__*/_jsxs("div", {
           className: `${baseClass}__focal-wrapper`,
           ref: focalWrapRef,
           style: {
             aspectRatio: `${uncroppedPixelWidth / uncroppedPixelHeight}`
           },
-          children: [showCrop ? _jsx(ReactCrop, {
+          children: [showCrop ? /*#__PURE__*/_jsx(ReactCrop, {
             className: `${baseClass}__reactCrop`,
-            crop,
+            crop: crop,
             onChange: (_, c) => setCrop(c),
             onComplete: () => setCheckBounds(true),
-            renderSelectionAddon: () => _jsx("div", {
-              className: `${baseClass}__crop-window`,
-              ref: cropRef
-            }),
-            children: _jsx("img", {
-              alt: t("upload:setCropArea"),
+            renderSelectionAddon: () => {
+              return /*#__PURE__*/_jsx("div", {
+                className: `${baseClass}__crop-window`,
+                ref: cropRef
+              });
+            },
+            children: /*#__PURE__*/_jsx("img", {
+              alt: t('upload:setCropArea'),
               onLoad: onImageLoad,
               ref: imageRef,
               src: fileSrcToUse
             })
-          }) : _jsx("img", {
-            alt: t("upload:setFocalPoint"),
+          }) : /*#__PURE__*/_jsx("img", {
+            alt: t('upload:setFocalPoint'),
             onLoad: onImageLoad,
             ref: imageRef,
             src: fileSrcToUse
-          }), showFocalPoint && _jsx(DraggableElement, {
+          }), showFocalPoint && /*#__PURE__*/_jsx(DraggableElement, {
             boundsRef: showCrop ? cropRef : imageRef,
             checkBounds: showCrop ? checkBounds : false,
             className: `${baseClass}__focalPoint`,
             containerRef: focalWrapRef,
             initialPosition: focalPosition,
-            onDragEnd,
+            onDragEnd: onDragEnd,
             setCheckBounds: showCrop ? setCheckBounds : false,
-            children: _jsx(PlusIcon, {})
+            children: /*#__PURE__*/_jsx(PlusIcon, {})
           })]
         })
-      }), (showCrop || showFocalPoint) && _jsxs("div", {
+      }), (showCrop || showFocalPoint) && /*#__PURE__*/_jsxs("div", {
         className: `${baseClass}__sidebar`,
-        children: [showCrop && _jsxs("div", {
+        children: [showCrop && /*#__PURE__*/_jsxs("div", {
           className: `${baseClass}__groupWrap`,
-          children: [_jsx("div", {
-            children: _jsxs("div", {
+          children: [/*#__PURE__*/_jsx("div", {
+            children: /*#__PURE__*/_jsxs("div", {
               className: `${baseClass}__titleWrap`,
-              children: [_jsx("h3", {
-                children: t("upload:crop")
-              }), _jsx(Button, {
+              children: [/*#__PURE__*/_jsx("h3", {
+                children: t('upload:crop')
+              }), /*#__PURE__*/_jsx(Button, {
                 buttonStyle: "none",
                 className: `${baseClass}__reset`,
                 onClick: () => setCrop({
                   height: 100,
-                  unit: "%",
+                  unit: '%',
                   width: 100,
                   x: 0,
                   y: 0
                 }),
-                children: t("general:reset")
+                children: t('general:reset')
               })]
             })
-          }), _jsx("span", {
+          }), /*#__PURE__*/_jsx("span", {
             className: `${baseClass}__description`,
-            children: t("upload:cropToolDescription")
-          }), _jsxs("div", {
+            children: t('upload:cropToolDescription')
+          }), /*#__PURE__*/_jsxs("div", {
             className: `${baseClass}__inputsWrap`,
-            children: [_jsx(Input, {
-              name: `${t("upload:width")} (px)`,
+            children: [/*#__PURE__*/_jsx(Input, {
+              name: `${t('upload:width')} (px)`,
               onChange: value_1 => fineTuneCrop({
-                dimension: "width",
+                dimension: 'width',
                 value: value_1
               }),
               ref: widthInputRef,
               value: (crop.width / 100 * uncroppedPixelWidth).toFixed(0)
-            }), _jsx(Input, {
-              name: `${t("upload:height")} (px)`,
+            }), /*#__PURE__*/_jsx(Input, {
+              name: `${t('upload:height')} (px)`,
               onChange: value_2 => fineTuneCrop({
-                dimension: "height",
+                dimension: 'height',
                 value: value_2
               }),
               ref: heightInputRef,
               value: (crop.height / 100 * uncroppedPixelHeight).toFixed(0)
             })]
           })]
-        }), showFocalPoint && _jsxs("div", {
+        }), showFocalPoint && /*#__PURE__*/_jsxs("div", {
           className: `${baseClass}__groupWrap`,
-          children: [_jsx("div", {
-            children: _jsxs("div", {
+          children: [/*#__PURE__*/_jsx("div", {
+            children: /*#__PURE__*/_jsxs("div", {
               className: `${baseClass}__titleWrap`,
-              children: [_jsx("h3", {
-                children: t("upload:focalPoint")
-              }), _jsx(Button, {
+              children: [/*#__PURE__*/_jsx("h3", {
+                children: t('upload:focalPoint')
+              }), /*#__PURE__*/_jsx(Button, {
                 buttonStyle: "none",
                 className: `${baseClass}__reset`,
                 onClick: centerFocalPoint,
-                children: t("general:reset")
+                children: t('general:reset')
               })]
             })
-          }), _jsx("span", {
+          }), /*#__PURE__*/_jsx("span", {
             className: `${baseClass}__description`,
-            children: t("upload:focalPointDescription")
-          }), _jsxs("div", {
+            children: t('upload:focalPointDescription')
+          }), /*#__PURE__*/_jsxs("div", {
             className: `${baseClass}__inputsWrap`,
-            children: [_jsx(Input, {
+            children: [/*#__PURE__*/_jsx(Input, {
               name: "X %",
               onChange: value_3 => fineTuneFocalPosition({
-                coordinate: "x",
+                coordinate: 'x',
                 value: value_3
               }),
               value: focalPosition.x.toFixed(0)
-            }), _jsx(Input, {
+            }), /*#__PURE__*/_jsx(Input, {
               name: "Y %",
               onChange: value_4 => fineTuneFocalPosition({
-                coordinate: "y",
+                coordinate: 'y',
                 value: value_4
               }),
               value: focalPosition.y.toFixed(0)

package/dist/elements/EditUpload/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useModal","React","forwardRef","useRef","useState","ReactCrop","editDrawerSlug","PlusIcon","useTranslation","Button","baseClass","Input","props","ref","name","onChange","value","_jsxs","className","_jsx","e","target","type","defaultCrop","height","unit","width","x","y","EditUpload","t0","$","fileName","fileSrc","imageCacheTag","initialCrop","initialFocalPoint","onSave","showCrop","showFocalPoint","closeModal","t","t1","crop","setCrop","t2","Symbol","for","defaultFocalPosition","t3","focalPosition","setFocalPosition","checkBounds","setCheckBounds","uncroppedPixelHeight","setUncroppedPixelHeight","uncroppedPixelWidth","setUncroppedPixelWidth","focalWrapRef","undefined","imageRef","cropRef","heightInputRef","widthInputRef","imageLoaded","setImageLoaded","t4","currentTarget","naturalHeight","naturalWidth","onImageLoad","t5","t6","dimension","intValue","parseInt","percentage","fineTuneCrop","t7","coordinate","value_0","intValue_0","prevPosition","fineTuneFocalPosition","saveEdits","focalPoint","heightInPixels","Number","current","widthInPixels","t8","onDragEnd","centerFocalPoint","containerRect","getBoundingClientRect","boundsRect","xCenter","left","yCenter","top","fileSrcToUse","children","title","buttonStyle","onClick","disabled","style","aspectRatio","_","onComplete","renderSelectionAddon","alt","onLoad","src","DraggableElement","boundsRef","containerRef","initialPosition","value_1","toFixed","value_2","value_3","value_4","position","setPosition","isDragging","setIsDragging","dragRef","getCoordinates","useCallback","mouseXArg","mouseYArg","recenter","mouseX","mouseY","xOutOfBounds","right","yOutOfBounds","bottom","handleMouseDown","event","preventDefault","handleMouseMove","clientX","clientY","onDrop","useEffect","filter","Boolean","join","onMouseMove","onMouseDown","onMouseUp"],"sources":["../../../src/elements/EditUpload/index.tsx"],"sourcesContent":["'use client'\n\nimport type { UploadEdits } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport React, { forwardRef, useRef, useState } from 'react'\nimport ReactCrop from 'react-image-crop'\nimport 'react-image-crop/dist/ReactCrop.css'\n\nimport { editDrawerSlug } from '../../elements/Upload/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nconst baseClass = 'edit-upload'\n\ntype Props = {\n  name: string\n  onChange: (value: string) => void\n  value: string\n}\n\nconst Input = forwardRef<HTMLInputElement, Props>((props, ref) => {\n  const { name, onChange, value } = props\n\n  return (\n    <div className={`${baseClass}__input`}>\n      {name}\n      <input\n        name={name}\n        onChange={(e) => onChange(e.target.value)}\n        ref={ref}\n        type=\"number\"\n        value={value}\n      />\n    </div>\n  )\n})\n\ntype FocalPosition = {\n  x: number\n  y: number\n}\n\nexport type EditUploadProps = {\n  fileName: string\n  fileSrc: string\n  imageCacheTag?: string\n  initialCrop?: UploadEdits['crop']\n  initialFocalPoint?: FocalPosition\n  onSave?: (uploadEdits: UploadEdits) => void\n  showCrop?: boolean\n  showFocalPoint?: boolean\n}\n\nconst defaultCrop: UploadEdits['crop'] = {\n  height: 100,\n  unit: '%',\n  width: 100,\n  x: 0,\n  y: 0,\n}\n\nexport const EditUpload: React.FC<EditUploadProps> = ({\n  fileName,\n  fileSrc,\n  imageCacheTag,\n  initialCrop,\n  initialFocalPoint,\n  onSave,\n  showCrop,\n  showFocalPoint,\n}) => {\n  const { closeModal } = useModal()\n  const { t } = useTranslation()\n\n  const [crop, setCrop] = useState<UploadEdits['crop']>(() => ({\n    ...defaultCrop,\n    ...(initialCrop || {}),\n  }))\n\n  const defaultFocalPosition: FocalPosition = {\n    x: 50,\n    y: 50,\n  }\n\n  const [focalPosition, setFocalPosition] = useState<FocalPosition>(() => ({\n    ...defaultFocalPosition,\n    ...initialFocalPoint,\n  }))\n\n  const [checkBounds, setCheckBounds] = useState<boolean>(false)\n  const [uncroppedPixelHeight, setUncroppedPixelHeight] = useState<number>(0)\n  const [uncroppedPixelWidth, setUncroppedPixelWidth] = useState<number>(0)\n\n  const focalWrapRef = useRef<HTMLDivElement | undefined>(undefined)\n  const imageRef = useRef<HTMLImageElement | undefined>(undefined)\n  const cropRef = useRef<HTMLDivElement | undefined>(undefined)\n\n  const heightInputRef = useRef<HTMLInputElement | null>(null)\n  const widthInputRef = useRef<HTMLInputElement | null>(null)\n\n  const [imageLoaded, setImageLoaded] = useState<boolean>(false)\n\n  const onImageLoad = (e) => {\n    // set the default image height/width on load\n    setUncroppedPixelHeight(e.currentTarget.naturalHeight)\n    setUncroppedPixelWidth(e.currentTarget.naturalWidth)\n    setImageLoaded(true)\n  }\n\n  const fineTuneCrop = ({ dimension, value }: { dimension: 'height' | 'width'; value: string }) => {\n    const intValue = parseInt(value)\n    if (dimension === 'width' && intValue >= uncroppedPixelWidth) return null\n    if (dimension === 'height' && intValue >= uncroppedPixelHeight) return null\n\n    const percentage =\n      100 * (intValue / (dimension === 'width' ? uncroppedPixelWidth : uncroppedPixelHeight))\n\n    if (percentage === 100 || percentage === 0) return null\n\n    setCrop({\n      ...crop,\n      [dimension]: percentage,\n    })\n  }\n\n  const fineTuneFocalPosition = ({\n    coordinate,\n    value,\n  }: {\n    coordinate: 'x' | 'y'\n    value: string\n  }) => {\n    const intValue = parseInt(value)\n    if (intValue >= 0 && intValue <= 100) {\n      setFocalPosition((prevPosition) => ({ ...prevPosition, [coordinate]: intValue }))\n    }\n  }\n\n  const saveEdits = () => {\n    if (typeof onSave === 'function')\n      onSave({\n        crop: crop ? crop : undefined,\n        focalPoint: focalPosition,\n        heightInPixels: Number(heightInputRef?.current?.value ?? uncroppedPixelHeight),\n        widthInPixels: Number(widthInputRef?.current?.value ?? uncroppedPixelWidth),\n      })\n    closeModal(editDrawerSlug)\n  }\n\n  const onDragEnd = React.useCallback(({ x, y }) => {\n    setFocalPosition({ x, y })\n    setCheckBounds(false)\n  }, [])\n\n  const centerFocalPoint = () => {\n    const containerRect = focalWrapRef.current.getBoundingClientRect()\n    const boundsRect = showCrop\n      ? cropRef.current.getBoundingClientRect()\n      : imageRef.current.getBoundingClientRect()\n    const xCenter =\n      ((boundsRect.left - containerRect.left + boundsRect.width / 2) / containerRect.width) * 100\n    const yCenter =\n      ((boundsRect.top - containerRect.top + boundsRect.height / 2) / containerRect.height) * 100\n    setFocalPosition({ x: xCenter, y: yCenter })\n  }\n\n  const fileSrcToUse = imageCacheTag ? `${fileSrc}?${imageCacheTag}` : fileSrc\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__header`}>\n        <h2 title={`${t('general:editing')} ${fileName}`}>\n          {t('general:editing')} {fileName}\n        </h2>\n        <div className={`${baseClass}__actions`}>\n          <Button\n            aria-label={t('general:cancel')}\n            buttonStyle=\"secondary\"\n            className={`${baseClass}__cancel`}\n            onClick={() => closeModal(editDrawerSlug)}\n          >\n            {t('general:cancel')}\n          </Button>\n          <Button\n            aria-label={t('general:applyChanges')}\n            buttonStyle=\"primary\"\n            className={`${baseClass}__save`}\n            disabled={!imageLoaded}\n            onClick={saveEdits}\n          >\n            {t('general:applyChanges')}\n          </Button>\n        </div>\n      </div>\n      <div className={`${baseClass}__toolWrap`}>\n        <div className={`${baseClass}__crop`}>\n          <div\n            className={`${baseClass}__focal-wrapper`}\n            ref={focalWrapRef}\n            style={{\n              aspectRatio: `${uncroppedPixelWidth / uncroppedPixelHeight}`,\n            }}\n          >\n            {showCrop ? (\n              <ReactCrop\n                className={`${baseClass}__reactCrop`}\n                crop={crop}\n                onChange={(_, c) => setCrop(c)}\n                onComplete={() => setCheckBounds(true)}\n                renderSelectionAddon={() => {\n                  return <div className={`${baseClass}__crop-window`} ref={cropRef} />\n                }}\n              >\n                <img\n                  alt={t('upload:setCropArea')}\n                  onLoad={onImageLoad}\n                  ref={imageRef}\n                  src={fileSrcToUse}\n                />\n              </ReactCrop>\n            ) : (\n              <img\n                alt={t('upload:setFocalPoint')}\n                onLoad={onImageLoad}\n                ref={imageRef}\n                src={fileSrcToUse}\n              />\n            )}\n            {showFocalPoint && (\n              <DraggableElement\n                boundsRef={showCrop ? cropRef : imageRef}\n                checkBounds={showCrop ? checkBounds : false}\n                className={`${baseClass}__focalPoint`}\n                containerRef={focalWrapRef}\n                initialPosition={focalPosition}\n                onDragEnd={onDragEnd}\n                setCheckBounds={showCrop ? setCheckBounds : false}\n              >\n                <PlusIcon />\n              </DraggableElement>\n            )}\n          </div>\n        </div>\n        {(showCrop || showFocalPoint) && (\n          <div className={`${baseClass}__sidebar`}>\n            {showCrop && (\n              <div className={`${baseClass}__groupWrap`}>\n                <div>\n                  <div className={`${baseClass}__titleWrap`}>\n                    <h3>{t('upload:crop')}</h3>\n                    <Button\n                      buttonStyle=\"none\"\n                      className={`${baseClass}__reset`}\n                      onClick={() =>\n                        setCrop({\n                          height: 100,\n                          unit: '%',\n                          width: 100,\n                          x: 0,\n                          y: 0,\n                        })\n                      }\n                    >\n                      {t('general:reset')}\n                    </Button>\n                  </div>\n                </div>\n                <span className={`${baseClass}__description`}>\n                  {t('upload:cropToolDescription')}\n                </span>\n                <div className={`${baseClass}__inputsWrap`}>\n                  <Input\n                    name={`${t('upload:width')} (px)`}\n                    onChange={(value) => fineTuneCrop({ dimension: 'width', value })}\n                    ref={widthInputRef}\n                    value={((crop.width / 100) * uncroppedPixelWidth).toFixed(0)}\n                  />\n                  <Input\n                    name={`${t('upload:height')} (px)`}\n                    onChange={(value) => fineTuneCrop({ dimension: 'height', value })}\n                    ref={heightInputRef}\n                    value={((crop.height / 100) * uncroppedPixelHeight).toFixed(0)}\n                  />\n                </div>\n              </div>\n            )}\n\n            {showFocalPoint && (\n              <div className={`${baseClass}__groupWrap`}>\n                <div>\n                  <div className={`${baseClass}__titleWrap`}>\n                    <h3>{t('upload:focalPoint')}</h3>\n                    <Button\n                      buttonStyle=\"none\"\n                      className={`${baseClass}__reset`}\n                      onClick={centerFocalPoint}\n                    >\n                      {t('general:reset')}\n                    </Button>\n                  </div>\n                </div>\n                <span className={`${baseClass}__description`}>\n                  {t('upload:focalPointDescription')}\n                </span>\n                <div className={`${baseClass}__inputsWrap`}>\n                  <Input\n                    name=\"X %\"\n                    onChange={(value) => fineTuneFocalPosition({ coordinate: 'x', value })}\n                    value={focalPosition.x.toFixed(0)}\n                  />\n                  <Input\n                    name=\"Y %\"\n                    onChange={(value) => fineTuneFocalPosition({ coordinate: 'y', value })}\n                    value={focalPosition.y.toFixed(0)}\n                  />\n                </div>\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst DraggableElement = ({\n  boundsRef,\n  checkBounds,\n  children,\n  className,\n  containerRef,\n  initialPosition = { x: 50, y: 50 },\n  onDragEnd,\n  setCheckBounds,\n}) => {\n  const [position, setPosition] = useState({ x: initialPosition.x, y: initialPosition.y })\n  const [isDragging, setIsDragging] = useState(false)\n  const dragRef = useRef<HTMLButtonElement | undefined>(undefined)\n\n  const getCoordinates = React.useCallback(\n    (mouseXArg?: number, mouseYArg?: number, recenter?: boolean) => {\n      const containerRect = containerRef.current.getBoundingClientRect()\n      const boundsRect = boundsRef.current.getBoundingClientRect()\n      const mouseX = mouseXArg ?? boundsRect.left\n      const mouseY = mouseYArg ?? boundsRect.top\n\n      const xOutOfBounds = mouseX < boundsRect.left || mouseX > boundsRect.right\n      const yOutOfBounds = mouseY < boundsRect.top || mouseY > boundsRect.bottom\n\n      let x = ((mouseX - containerRect.left) / containerRect.width) * 100\n      let y = ((mouseY - containerRect.top) / containerRect.height) * 100\n      const xCenter =\n        ((boundsRect.left - containerRect.left + boundsRect.width / 2) / containerRect.width) * 100\n      const yCenter =\n        ((boundsRect.top - containerRect.top + boundsRect.height / 2) / containerRect.height) * 100\n      if (xOutOfBounds || yOutOfBounds) {\n        setIsDragging(false)\n        if (mouseX < boundsRect.left) {\n          x = ((boundsRect.left - containerRect.left) / containerRect.width) * 100\n        } else if (mouseX > boundsRect.right) {\n          x =\n            ((containerRect.width - (containerRect.right - boundsRect.right)) /\n              containerRect.width) *\n            100\n        }\n\n        if (mouseY < boundsRect.top) {\n          y = ((boundsRect.top - containerRect.top) / containerRect.height) * 100\n        } else if (mouseY > boundsRect.bottom) {\n          y =\n            ((containerRect.height - (containerRect.bottom - boundsRect.bottom)) /\n              containerRect.height) *\n            100\n        }\n\n        if (recenter) {\n          x = xOutOfBounds ? xCenter : x\n          y = yOutOfBounds ? yCenter : y\n        }\n      }\n\n      return { x, y }\n    },\n    [boundsRef, containerRef],\n  )\n\n  const handleMouseDown = (event) => {\n    event.preventDefault()\n    setIsDragging(true)\n  }\n\n  const handleMouseMove = (event) => {\n    if (!isDragging) return null\n    const { x, y } = getCoordinates(event.clientX, event.clientY)\n\n    setPosition({ x, y })\n  }\n\n  const onDrop = () => {\n    setIsDragging(false)\n    onDragEnd(position)\n  }\n\n  React.useEffect(() => {\n    if (isDragging || !dragRef.current) return\n    if (checkBounds) {\n      const { height, left, top, width } = dragRef.current.getBoundingClientRect()\n      const { x, y } = getCoordinates(left + width / 2, top + height / 2, true)\n      onDragEnd({ x, y })\n      setPosition({ x, y })\n      setCheckBounds(false)\n      return\n    }\n  }, [getCoordinates, isDragging, checkBounds, setCheckBounds, position.x, position.y, onDragEnd])\n\n  React.useEffect(() => {\n    setPosition({ x: initialPosition.x, y: initialPosition.y })\n  }, [initialPosition.x, initialPosition.y])\n\n  return (\n    <div\n      className={[\n        `${baseClass}__draggable-container`,\n        isDragging && `${baseClass}__draggable-container--dragging`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onMouseMove={handleMouseMove}\n    >\n      <button\n        className={[`${baseClass}__draggable`, className].filter(Boolean).join(' ')}\n        onMouseDown={handleMouseDown}\n        onMouseUp={onDrop}\n        ref={dragRef}\n        style={{ left: `${position.x}%`, top: `${position.y}%` }}\n        type=\"button\"\n      >\n        {children}\n      </button>\n      <div />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useModal","React","forwardRef","useRef","useState","ReactCrop","editDrawerSlug","PlusIcon","useTranslation","Button","baseClass","Input","props","ref","name","onChange","value","_jsxs","className","_jsx","e","target","type","defaultCrop","height","unit","width","x","y","EditUpload","fileName","fileSrc","imageCacheTag","initialCrop","initialFocalPoint","onSave","showCrop","showFocalPoint","closeModal","t","crop","setCrop","defaultFocalPosition","focalPosition","setFocalPosition","checkBounds","setCheckBounds","uncroppedPixelHeight","setUncroppedPixelHeight","uncroppedPixelWidth","setUncroppedPixelWidth","focalWrapRef","undefined","imageRef","cropRef","heightInputRef","widthInputRef","imageLoaded","setImageLoaded","onImageLoad","currentTarget","naturalHeight","naturalWidth","fineTuneCrop","dimension","intValue","parseInt","percentage","fineTuneFocalPosition","coordinate","prevPosition","saveEdits","focalPoint","heightInPixels","Number","current","widthInPixels","onDragEnd","useCallback","centerFocalPoint","containerRect","getBoundingClientRect","boundsRect","xCenter","left","yCenter","top","fileSrcToUse","title","buttonStyle","onClick","disabled","style","aspectRatio","_","c","onComplete","renderSelectionAddon","alt","onLoad","src","DraggableElement","boundsRef","containerRef","initialPosition","toFixed","children","position","setPosition","isDragging","setIsDragging","dragRef","getCoordinates","mouseXArg","mouseYArg","recenter","mouseX","mouseY","xOutOfBounds","right","yOutOfBounds","bottom","handleMouseDown","event","preventDefault","handleMouseMove","clientX","clientY","onDrop","useEffect","filter","Boolean","join","onMouseMove","onMouseDown","onMouseUp"],"sources":["../../../src/elements/EditUpload/index.tsx"],"sourcesContent":["'use client'\n\nimport type { UploadEdits } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport React, { forwardRef, useRef, useState } from 'react'\nimport ReactCrop from 'react-image-crop'\nimport 'react-image-crop/dist/ReactCrop.css'\n\nimport { editDrawerSlug } from '../../elements/Upload/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nconst baseClass = 'edit-upload'\n\ntype Props = {\n  name: string\n  onChange: (value: string) => void\n  value: string\n}\n\nconst Input = forwardRef<HTMLInputElement, Props>((props, ref) => {\n  const { name, onChange, value } = props\n\n  return (\n    <div className={`${baseClass}__input`}>\n      {name}\n      <input\n        name={name}\n        onChange={(e) => onChange(e.target.value)}\n        ref={ref}\n        type=\"number\"\n        value={value}\n      />\n    </div>\n  )\n})\n\ntype FocalPosition = {\n  x: number\n  y: number\n}\n\nexport type EditUploadProps = {\n  fileName: string\n  fileSrc: string\n  imageCacheTag?: string\n  initialCrop?: UploadEdits['crop']\n  initialFocalPoint?: FocalPosition\n  onSave?: (uploadEdits: UploadEdits) => void\n  showCrop?: boolean\n  showFocalPoint?: boolean\n}\n\nconst defaultCrop: UploadEdits['crop'] = {\n  height: 100,\n  unit: '%',\n  width: 100,\n  x: 0,\n  y: 0,\n}\n\nexport const EditUpload: React.FC<EditUploadProps> = ({\n  fileName,\n  fileSrc,\n  imageCacheTag,\n  initialCrop,\n  initialFocalPoint,\n  onSave,\n  showCrop,\n  showFocalPoint,\n}) => {\n  const { closeModal } = useModal()\n  const { t } = useTranslation()\n\n  const [crop, setCrop] = useState<UploadEdits['crop']>(() => ({\n    ...defaultCrop,\n    ...(initialCrop || {}),\n  }))\n\n  const defaultFocalPosition: FocalPosition = {\n    x: 50,\n    y: 50,\n  }\n\n  const [focalPosition, setFocalPosition] = useState<FocalPosition>(() => ({\n    ...defaultFocalPosition,\n    ...initialFocalPoint,\n  }))\n\n  const [checkBounds, setCheckBounds] = useState<boolean>(false)\n  const [uncroppedPixelHeight, setUncroppedPixelHeight] = useState<number>(0)\n  const [uncroppedPixelWidth, setUncroppedPixelWidth] = useState<number>(0)\n\n  const focalWrapRef = useRef<HTMLDivElement | undefined>(undefined)\n  const imageRef = useRef<HTMLImageElement | undefined>(undefined)\n  const cropRef = useRef<HTMLDivElement | undefined>(undefined)\n\n  const heightInputRef = useRef<HTMLInputElement | null>(null)\n  const widthInputRef = useRef<HTMLInputElement | null>(null)\n\n  const [imageLoaded, setImageLoaded] = useState<boolean>(false)\n\n  const onImageLoad = (e) => {\n    // set the default image height/width on load\n    setUncroppedPixelHeight(e.currentTarget.naturalHeight)\n    setUncroppedPixelWidth(e.currentTarget.naturalWidth)\n    setImageLoaded(true)\n  }\n\n  const fineTuneCrop = ({ dimension, value }: { dimension: 'height' | 'width'; value: string }) => {\n    const intValue = parseInt(value)\n    if (dimension === 'width' && intValue >= uncroppedPixelWidth) return null\n    if (dimension === 'height' && intValue >= uncroppedPixelHeight) return null\n\n    const percentage =\n      100 * (intValue / (dimension === 'width' ? uncroppedPixelWidth : uncroppedPixelHeight))\n\n    if (percentage === 100 || percentage === 0) return null\n\n    setCrop({\n      ...crop,\n      [dimension]: percentage,\n    })\n  }\n\n  const fineTuneFocalPosition = ({\n    coordinate,\n    value,\n  }: {\n    coordinate: 'x' | 'y'\n    value: string\n  }) => {\n    const intValue = parseInt(value)\n    if (intValue >= 0 && intValue <= 100) {\n      setFocalPosition((prevPosition) => ({ ...prevPosition, [coordinate]: intValue }))\n    }\n  }\n\n  const saveEdits = () => {\n    if (typeof onSave === 'function')\n      onSave({\n        crop: crop ? crop : undefined,\n        focalPoint: focalPosition,\n        heightInPixels: Number(heightInputRef?.current?.value ?? uncroppedPixelHeight),\n        widthInPixels: Number(widthInputRef?.current?.value ?? uncroppedPixelWidth),\n      })\n    closeModal(editDrawerSlug)\n  }\n\n  const onDragEnd = React.useCallback(({ x, y }) => {\n    setFocalPosition({ x, y })\n    setCheckBounds(false)\n  }, [])\n\n  const centerFocalPoint = () => {\n    const containerRect = focalWrapRef.current.getBoundingClientRect()\n    const boundsRect = showCrop\n      ? cropRef.current.getBoundingClientRect()\n      : imageRef.current.getBoundingClientRect()\n    const xCenter =\n      ((boundsRect.left - containerRect.left + boundsRect.width / 2) / containerRect.width) * 100\n    const yCenter =\n      ((boundsRect.top - containerRect.top + boundsRect.height / 2) / containerRect.height) * 100\n    setFocalPosition({ x: xCenter, y: yCenter })\n  }\n\n  const fileSrcToUse = imageCacheTag ? `${fileSrc}?${imageCacheTag}` : fileSrc\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__header`}>\n        <h2 title={`${t('general:editing')} ${fileName}`}>\n          {t('general:editing')} {fileName}\n        </h2>\n        <div className={`${baseClass}__actions`}>\n          <Button\n            aria-label={t('general:cancel')}\n            buttonStyle=\"secondary\"\n            className={`${baseClass}__cancel`}\n            onClick={() => closeModal(editDrawerSlug)}\n          >\n            {t('general:cancel')}\n          </Button>\n          <Button\n            aria-label={t('general:applyChanges')}\n            buttonStyle=\"primary\"\n            className={`${baseClass}__save`}\n            disabled={!imageLoaded}\n            onClick={saveEdits}\n          >\n            {t('general:applyChanges')}\n          </Button>\n        </div>\n      </div>\n      <div className={`${baseClass}__toolWrap`}>\n        <div className={`${baseClass}__crop`}>\n          <div\n            className={`${baseClass}__focal-wrapper`}\n            ref={focalWrapRef}\n            style={{\n              aspectRatio: `${uncroppedPixelWidth / uncroppedPixelHeight}`,\n            }}\n          >\n            {showCrop ? (\n              <ReactCrop\n                className={`${baseClass}__reactCrop`}\n                crop={crop}\n                onChange={(_, c) => setCrop(c)}\n                onComplete={() => setCheckBounds(true)}\n                renderSelectionAddon={() => {\n                  return <div className={`${baseClass}__crop-window`} ref={cropRef} />\n                }}\n              >\n                <img\n                  alt={t('upload:setCropArea')}\n                  onLoad={onImageLoad}\n                  ref={imageRef}\n                  src={fileSrcToUse}\n                />\n              </ReactCrop>\n            ) : (\n              <img\n                alt={t('upload:setFocalPoint')}\n                onLoad={onImageLoad}\n                ref={imageRef}\n                src={fileSrcToUse}\n              />\n            )}\n            {showFocalPoint && (\n              <DraggableElement\n                boundsRef={showCrop ? cropRef : imageRef}\n                checkBounds={showCrop ? checkBounds : false}\n                className={`${baseClass}__focalPoint`}\n                containerRef={focalWrapRef}\n                initialPosition={focalPosition}\n                onDragEnd={onDragEnd}\n                setCheckBounds={showCrop ? setCheckBounds : false}\n              >\n                <PlusIcon />\n              </DraggableElement>\n            )}\n          </div>\n        </div>\n        {(showCrop || showFocalPoint) && (\n          <div className={`${baseClass}__sidebar`}>\n            {showCrop && (\n              <div className={`${baseClass}__groupWrap`}>\n                <div>\n                  <div className={`${baseClass}__titleWrap`}>\n                    <h3>{t('upload:crop')}</h3>\n                    <Button\n                      buttonStyle=\"none\"\n                      className={`${baseClass}__reset`}\n                      onClick={() =>\n                        setCrop({\n                          height: 100,\n                          unit: '%',\n                          width: 100,\n                          x: 0,\n                          y: 0,\n                        })\n                      }\n                    >\n                      {t('general:reset')}\n                    </Button>\n                  </div>\n                </div>\n                <span className={`${baseClass}__description`}>\n                  {t('upload:cropToolDescription')}\n                </span>\n                <div className={`${baseClass}__inputsWrap`}>\n                  <Input\n                    name={`${t('upload:width')} (px)`}\n                    onChange={(value) => fineTuneCrop({ dimension: 'width', value })}\n                    ref={widthInputRef}\n                    value={((crop.width / 100) * uncroppedPixelWidth).toFixed(0)}\n                  />\n                  <Input\n                    name={`${t('upload:height')} (px)`}\n                    onChange={(value) => fineTuneCrop({ dimension: 'height', value })}\n                    ref={heightInputRef}\n                    value={((crop.height / 100) * uncroppedPixelHeight).toFixed(0)}\n                  />\n                </div>\n              </div>\n            )}\n\n            {showFocalPoint && (\n              <div className={`${baseClass}__groupWrap`}>\n                <div>\n                  <div className={`${baseClass}__titleWrap`}>\n                    <h3>{t('upload:focalPoint')}</h3>\n                    <Button\n                      buttonStyle=\"none\"\n                      className={`${baseClass}__reset`}\n                      onClick={centerFocalPoint}\n                    >\n                      {t('general:reset')}\n                    </Button>\n                  </div>\n                </div>\n                <span className={`${baseClass}__description`}>\n                  {t('upload:focalPointDescription')}\n                </span>\n                <div className={`${baseClass}__inputsWrap`}>\n                  <Input\n                    name=\"X %\"\n                    onChange={(value) => fineTuneFocalPosition({ coordinate: 'x', value })}\n                    value={focalPosition.x.toFixed(0)}\n                  />\n                  <Input\n                    name=\"Y %\"\n                    onChange={(value) => fineTuneFocalPosition({ coordinate: 'y', value })}\n                    value={focalPosition.y.toFixed(0)}\n                  />\n                </div>\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst DraggableElement = ({\n  boundsRef,\n  checkBounds,\n  children,\n  className,\n  containerRef,\n  initialPosition = { x: 50, y: 50 },\n  onDragEnd,\n  setCheckBounds,\n}) => {\n  const [position, setPosition] = useState({ x: initialPosition.x, y: initialPosition.y })\n  const [isDragging, setIsDragging] = useState(false)\n  const dragRef = useRef<HTMLButtonElement | undefined>(undefined)\n\n  const getCoordinates = React.useCallback(\n    (mouseXArg?: number, mouseYArg?: number, recenter?: boolean) => {\n      const containerRect = containerRef.current.getBoundingClientRect()\n      const boundsRect = boundsRef.current.getBoundingClientRect()\n      const mouseX = mouseXArg ?? boundsRect.left\n      const mouseY = mouseYArg ?? boundsRect.top\n\n      const xOutOfBounds = mouseX < boundsRect.left || mouseX > boundsRect.right\n      const yOutOfBounds = mouseY < boundsRect.top || mouseY > boundsRect.bottom\n\n      let x = ((mouseX - containerRect.left) / containerRect.width) * 100\n      let y = ((mouseY - containerRect.top) / containerRect.height) * 100\n      const xCenter =\n        ((boundsRect.left - containerRect.left + boundsRect.width / 2) / containerRect.width) * 100\n      const yCenter =\n        ((boundsRect.top - containerRect.top + boundsRect.height / 2) / containerRect.height) * 100\n      if (xOutOfBounds || yOutOfBounds) {\n        setIsDragging(false)\n        if (mouseX < boundsRect.left) {\n          x = ((boundsRect.left - containerRect.left) / containerRect.width) * 100\n        } else if (mouseX > boundsRect.right) {\n          x =\n            ((containerRect.width - (containerRect.right - boundsRect.right)) /\n              containerRect.width) *\n            100\n        }\n\n        if (mouseY < boundsRect.top) {\n          y = ((boundsRect.top - containerRect.top) / containerRect.height) * 100\n        } else if (mouseY > boundsRect.bottom) {\n          y =\n            ((containerRect.height - (containerRect.bottom - boundsRect.bottom)) /\n              containerRect.height) *\n            100\n        }\n\n        if (recenter) {\n          x = xOutOfBounds ? xCenter : x\n          y = yOutOfBounds ? yCenter : y\n        }\n      }\n\n      return { x, y }\n    },\n    [boundsRef, containerRef],\n  )\n\n  const handleMouseDown = (event) => {\n    event.preventDefault()\n    setIsDragging(true)\n  }\n\n  const handleMouseMove = (event) => {\n    if (!isDragging) return null\n    const { x, y } = getCoordinates(event.clientX, event.clientY)\n\n    setPosition({ x, y })\n  }\n\n  const onDrop = () => {\n    setIsDragging(false)\n    onDragEnd(position)\n  }\n\n  React.useEffect(() => {\n    if (isDragging || !dragRef.current) return\n    if (checkBounds) {\n      const { height, left, top, width } = dragRef.current.getBoundingClientRect()\n      const { x, y } = getCoordinates(left + width / 2, top + height / 2, true)\n      onDragEnd({ x, y })\n      setPosition({ x, y })\n      setCheckBounds(false)\n      return\n    }\n  }, [getCoordinates, isDragging, checkBounds, setCheckBounds, position.x, position.y, onDragEnd])\n\n  React.useEffect(() => {\n    setPosition({ x: initialPosition.x, y: initialPosition.y })\n  }, [initialPosition.x, initialPosition.y])\n\n  return (\n    <div\n      className={[\n        `${baseClass}__draggable-container`,\n        isDragging && `${baseClass}__draggable-container--dragging`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onMouseMove={handleMouseMove}\n    >\n      <button\n        className={[`${baseClass}__draggable`, className].filter(Boolean).join(' ')}\n        onMouseDown={handleMouseDown}\n        onMouseUp={onDrop}\n        ref={dragRef}\n        style={{ left: `${position.x}%`, top: `${position.y}%` }}\n        type=\"button\"\n      >\n        {children}\n      </button>\n      <div />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}