@payloadcms/ui 3.0.0-canary.ee6d727 → 3.0.0-canary.ef0a8d0

package/dist/elements/EditUpload/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/EditUpload/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,QAAQ,MAAM,kBAAkB,CAAA;AAG5C,OAAO,KAA2B,MAAM,OAAO,CAAA;AAE/C,OAAO,qCAAqC,CAAA;AAM5C,OAAO,cAAc,CAAA;AAerB,KAAK,aAAa,GAAG;IACnB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,WAAW,CAAC,EAAE,QAAQ,CAAA;IACtB,iBAAiB,CAAC,EAAE,aAAa,CAAA;IACjC,MAAM,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE;QAAE,IAAI,EAAE,QAAQ,CAAC;QAAC,aAAa,EAAE,aAAa,CAAA;KAAE,KAAK,IAAI,CAAA;IAC5F,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAUD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA6PhD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/EditUpload/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,QAAQ,MAAM,kBAAkB,CAAA;AAG5C,OAAO,KAAuC,MAAM,OAAO,CAAA;AAE3D,OAAO,qCAAqC,CAAA;AAM5C,OAAO,cAAc,CAAA;AA2BrB,KAAK,aAAa,GAAG;IACnB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,WAAW,CAAC,EAAE,QAAQ,CAAA;IACtB,iBAAiB,CAAC,EAAE,aAAa,CAAA;IACjC,MAAM,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE;QAAE,IAAI,EAAE,QAAQ,CAAC;QAAC,aAAa,EAAE,aAAa,CAAA;KAAE,KAAK,IAAI,CAAA;IAC5F,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAYD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAyQhD,CAAA"}

package/dist/elements/EditUpload/index.js

@@ -1,34 +1,41 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as facelessUIImport from '@faceless-ui/modal';
-import React, { useRef, useState } from 'react';
+import { useModal } from '@faceless-ui/modal';
+import React, { forwardRef, useRef, useState } from 'react';
 import ReactCrop from 'react-image-crop';
+import 'react-image-crop/dist/ReactCrop.css';
 import { editDrawerSlug } from '../../elements/Upload/index.js';
-import { Plus } from '../../icons/Plus/index.js';
+import { PlusIcon } from '../../icons/Plus/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Button } from '../Button/index.js';
+import './index.scss';
 const baseClass = 'edit-upload';
-const Input = ({ name, onChange, value })=>/*#__PURE__*/ _jsxs("div", {
+const Input = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { name, onChange, value } = props;
+    return /*#__PURE__*/ _jsxs("div", {
         className: `${baseClass}__input`,
         children: [
             name,
             /*#__PURE__*/ _jsx("input", {
                 name: name,
                 onChange: (e)=>onChange(e.target.value),
+                ref: ref,
                 type: "number",
                 value: value
             })
         ]
     });
+});
 const defaultCrop = {
     height: 100,
+    heightPixels: 0,
     unit: '%',
     width: 100,
+    widthPixels: 0,
     x: 0,
     y: 0
 };
 export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, initialFocalPoint, onSave, showCrop, showFocalPoint })=>{
-    const { useModal } = facelessUIImport;
     const { closeModal } = useModal();
     const { t } = useTranslation();
     const [crop, setCrop] = useState(()=>({
@@ -39,9 +46,6 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
         x: 50,
         y: 50
     };
-    console.log({
-        initialFocalPoint
-    });
     const [focalPosition, setFocalPosition] = useState(()=>({
             ...defaultFocalPosition,
             ...initialFocalPoint
@@ -52,6 +56,14 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
     const focalWrapRef = useRef(undefined);
     const imageRef = useRef(undefined);
     const cropRef = useRef(undefined);
+    const heightRef = useRef(null);
+    const widthRef = useRef(null);
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const onImageLoad = (e)=>{
+        setOriginalHeight(e.currentTarget.naturalHeight);
+        setOriginalWidth(e.currentTarget.naturalWidth);
+        setImageLoaded(true);
+    };
     const fineTuneCrop = ({ dimension, value })=>{
         const intValue = parseInt(value);
         if (dimension === 'width' && intValue >= originalWidth) return null;
@@ -74,7 +86,11 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
     };
     const saveEdits = ()=>{
         if (typeof onSave === 'function') onSave({
-            crop,
+            crop: crop ? {
+                ...crop,
+                heightPixels: Number(heightRef.current?.value ?? crop.heightPixels),
+                widthPixels: Number(widthRef.current?.value ?? crop.widthPixels)
+            } : undefined,
             focalPosition
         });
         closeModal(editDrawerSlug);
@@ -125,6 +141,7 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
                                 "aria-label": t('general:applyChanges'),
                                 buttonStyle: "primary",
                                 className: `${baseClass}__save`,
+                                disabled: !imageLoaded,
                                 onClick: saveEdits,
                                 children: t('general:applyChanges')
                             })
@@ -157,19 +174,13 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
                                     },
                                     children: /*#__PURE__*/ _jsx("img", {
                                         alt: t('upload:setCropArea'),
-                                        onLoad: (e)=>{
-                                            setOriginalHeight(e.currentTarget.naturalHeight);
-                                            setOriginalWidth(e.currentTarget.naturalWidth);
-                                        },
+                                        onLoad: onImageLoad,
                                         ref: imageRef,
                                         src: fileSrcToUse
                                     })
                                 }) : /*#__PURE__*/ _jsx("img", {
                                     alt: t('upload:setFocalPoint'),
-                                    onLoad: (e)=>{
-                                        setOriginalHeight(e.currentTarget.naturalHeight);
-                                        setOriginalWidth(e.currentTarget.naturalWidth);
-                                    },
+                                    onLoad: onImageLoad,
                                     ref: imageRef,
                                     src: fileSrcToUse
                                 }),
@@ -181,7 +192,7 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
                                     initialPosition: focalPosition,
                                     onDragEnd: onDragEnd,
                                     setCheckBounds: showCrop ? setCheckBounds : false,
-                                    children: /*#__PURE__*/ _jsx(Plus, {})
+                                    children: /*#__PURE__*/ _jsx(PlusIcon, {})
                                 })
                             ]
                         })
@@ -204,8 +215,10 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
                                                     className: `${baseClass}__reset`,
                                                     onClick: ()=>setCrop({
                                                             height: 100,
+                                                            heightPixels: originalHeight,
                                                             unit: '%',
                                                             width: 100,
+                                                            widthPixels: originalWidth,
                                                             x: 0,
                                                             y: 0
                                                         }),
@@ -227,6 +240,7 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
                                                         dimension: 'width',
                                                         value
                                                     }),
+                                                ref: widthRef,
                                                 value: (crop.width / 100 * originalWidth).toFixed(0)
                                             }),
                                             /*#__PURE__*/ _jsx(Input, {
@@ -235,6 +249,7 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
                                                         dimension: 'height',
                                                         value
                                                     }),
+                                                ref: heightRef,
                                                 value: (crop.height / 100 * originalHeight).toFixed(0)
                                             })
                                         ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/EditUpload/index.tsx"],"sourcesContent":["'use client'\nimport type { Data } from 'payload/types'\nimport type CropType from 'react-image-crop'\n\nimport * as facelessUIImport from '@faceless-ui/modal'\nimport React, { 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 { Plus } 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\nconst Input: React.FC<{ name: string; onChange: (value: string) => void; value: string }> = ({\n  name,\n  onChange,\n  value,\n}) => (\n  <div className={`${baseClass}__input`}>\n    {name}\n    <input name={name} onChange={(e) => onChange(e.target.value)} type=\"number\" value={value} />\n  </div>\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?: CropType\n  initialFocalPoint?: FocalPosition\n  onSave?: ({ crop, focalPosition }: { crop: CropType; focalPosition: FocalPosition }) => void\n  showCrop?: boolean\n  showFocalPoint?: boolean\n}\n\nconst defaultCrop: CropType = {\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 { useModal } = facelessUIImport\n\n  const { closeModal } = useModal()\n  const { t } = useTranslation()\n\n  const [crop, setCrop] = useState<CropType>(() => ({\n    ...defaultCrop,\n    ...initialCrop,\n  }))\n\n  const defaultFocalPosition: FocalPosition = {\n    x: 50,\n    y: 50,\n  }\n\n  console.log({ initialFocalPoint })\n\n  const [focalPosition, setFocalPosition] = useState<FocalPosition>(() => ({\n    ...defaultFocalPosition,\n    ...initialFocalPoint,\n  }))\n  const [checkBounds, setCheckBounds] = useState<boolean>(false)\n  const [originalHeight, setOriginalHeight] = useState<number>(0)\n  const [originalWidth, setOriginalWidth] = 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 fineTuneCrop = ({ dimension, value }: { dimension: 'height' | 'width'; value: string }) => {\n    const intValue = parseInt(value)\n    if (dimension === 'width' && intValue >= originalWidth) return null\n    if (dimension === 'height' && intValue >= originalHeight) return null\n\n    const percentage = 100 * (intValue / (dimension === 'width' ? originalWidth : originalHeight))\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,\n        focalPosition,\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            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: `${originalWidth / originalHeight}`,\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={(e) => {\n                    setOriginalHeight(e.currentTarget.naturalHeight)\n                    setOriginalWidth(e.currentTarget.naturalWidth)\n                  }}\n                  ref={imageRef}\n                  src={fileSrcToUse}\n                />\n              </ReactCrop>\n            ) : (\n              <img\n                alt={t('upload:setFocalPoint')}\n                onLoad={(e) => {\n                  setOriginalHeight(e.currentTarget.naturalHeight)\n                  setOriginalWidth(e.currentTarget.naturalWidth)\n                }}\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                <Plus />\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                    value={((crop.width / 100) * originalWidth).toFixed(0)}\n                  />\n                  <Input\n                    name={`${t('upload:height')} (px)`}\n                    onChange={(value) => fineTuneCrop({ dimension: 'height', value })}\n                    value={((crop.height / 100) * originalHeight).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"],"names":["facelessUIImport","React","useRef","useState","ReactCrop","editDrawerSlug","Plus","useTranslation","Button","baseClass","Input","name","onChange","value","div","className","input","e","target","type","defaultCrop","height","unit","width","x","y","EditUpload","fileName","fileSrc","imageCacheTag","initialCrop","initialFocalPoint","onSave","showCrop","showFocalPoint","useModal","closeModal","t","crop","setCrop","defaultFocalPosition","console","log","focalPosition","setFocalPosition","checkBounds","setCheckBounds","originalHeight","setOriginalHeight","originalWidth","setOriginalWidth","focalWrapRef","undefined","imageRef","cropRef","fineTuneCrop","dimension","intValue","parseInt","percentage","fineTuneFocalPosition","coordinate","prevPosition","saveEdits","onDragEnd","useCallback","centerFocalPoint","containerRect","current","getBoundingClientRect","boundsRect","xCenter","left","yCenter","top","fileSrcToUse","h2","title","aria-label","buttonStyle","onClick","ref","style","aspectRatio","_","c","onComplete","renderSelectionAddon","img","alt","onLoad","currentTarget","naturalHeight","naturalWidth","src","DraggableElement","boundsRef","containerRef","initialPosition","h3","span","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","button","onMouseDown","onMouseUp"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../src/elements/EditUpload/index.tsx"],"sourcesContent":["'use client'\nimport type CropType from 'react-image-crop'\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?: CropType\n  initialFocalPoint?: FocalPosition\n  onSave?: ({ crop, focalPosition }: { crop: CropType; focalPosition: FocalPosition }) => void\n  showCrop?: boolean\n  showFocalPoint?: boolean\n}\n\nconst defaultCrop: CropType = {\n  height: 100,\n  heightPixels: 0,\n  unit: '%',\n  width: 100,\n  widthPixels: 0,\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<CropType>(() => ({\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  const [checkBounds, setCheckBounds] = useState<boolean>(false)\n  const [originalHeight, setOriginalHeight] = useState<number>(0)\n  const [originalWidth, setOriginalWidth] = 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 heightRef = useRef<HTMLInputElement | null>(null)\n  const widthRef = useRef<HTMLInputElement | null>(null)\n\n  const [imageLoaded, setImageLoaded] = useState<boolean>(false)\n\n  const onImageLoad = (e) => {\n    setOriginalHeight(e.currentTarget.naturalHeight)\n    setOriginalWidth(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 >= originalWidth) return null\n    if (dimension === 'height' && intValue >= originalHeight) return null\n\n    const percentage = 100 * (intValue / (dimension === 'width' ? originalWidth : originalHeight))\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\n          ? {\n              ...crop,\n              heightPixels: Number(heightRef.current?.value ?? crop.heightPixels),\n              widthPixels: Number(widthRef.current?.value ?? crop.widthPixels),\n            }\n          : undefined,\n        focalPosition,\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: `${originalWidth / originalHeight}`,\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                          heightPixels: originalHeight,\n                          unit: '%',\n                          width: 100,\n                          widthPixels: originalWidth,\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={widthRef}\n                    value={((crop.width / 100) * originalWidth).toFixed(0)}\n                  />\n                  <Input\n                    name={`${t('upload:height')} (px)`}\n                    onChange={(value) => fineTuneCrop({ dimension: 'height', value })}\n                    ref={heightRef}\n                    value={((crop.height / 100) * originalHeight).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"],"names":["useModal","React","forwardRef","useRef","useState","ReactCrop","editDrawerSlug","PlusIcon","useTranslation","Button","baseClass","Input","props","ref","name","onChange","value","div","className","input","e","target","type","defaultCrop","height","heightPixels","unit","width","widthPixels","x","y","EditUpload","fileName","fileSrc","imageCacheTag","initialCrop","initialFocalPoint","onSave","showCrop","showFocalPoint","closeModal","t","crop","setCrop","defaultFocalPosition","focalPosition","setFocalPosition","checkBounds","setCheckBounds","originalHeight","setOriginalHeight","originalWidth","setOriginalWidth","focalWrapRef","undefined","imageRef","cropRef","heightRef","widthRef","imageLoaded","setImageLoaded","onImageLoad","currentTarget","naturalHeight","naturalWidth","fineTuneCrop","dimension","intValue","parseInt","percentage","fineTuneFocalPosition","coordinate","prevPosition","saveEdits","Number","current","onDragEnd","useCallback","centerFocalPoint","containerRect","getBoundingClientRect","boundsRect","xCenter","left","yCenter","top","fileSrcToUse","h2","title","aria-label","buttonStyle","onClick","disabled","style","aspectRatio","_","c","onComplete","renderSelectionAddon","img","alt","onLoad","src","DraggableElement","boundsRef","containerRef","initialPosition","h3","span","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","button","onMouseDown","onMouseUp"],"mappings":"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"}

package/dist/elements/ErrorPill/index.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import './index.scss';
 const baseClass = 'error-pill';
 export const ErrorPill = (props)=>{
     const { className, count, i18n, withMessage } = props;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ErrorPill/index.tsx"],"sourcesContent":["'use client'\nimport type { I18nClient } from '@payloadcms/translations'\n\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'error-pill'\n\nexport type ErrorPillProps = {\n  className?: string\n  count: number\n  i18n: I18nClient\n  withMessage?: boolean\n}\n\nexport const ErrorPill: React.FC<ErrorPillProps> = (props) => {\n  const { className, count, i18n, withMessage } = props\n  const lessThan3Chars = !withMessage && count < 99\n\n  const classes = [baseClass, lessThan3Chars && `${baseClass}--fixed-width`, className && className]\n    .filter(Boolean)\n    .join(' ')\n\n  if (count === 0) return null\n\n  return (\n    <div className={classes}>\n      <div className={`${baseClass}__content`}>\n        <span className={`${baseClass}__count`}>{count}</span>\n        {withMessage && ` ${count > 1 ? i18n.t('general:errors') : i18n.t('general:error')}`}\n      </div>\n    </div>\n  )\n}\n"],"names":["React","baseClass","ErrorPill","props","className","count","i18n","withMessage","lessThan3Chars","classes","filter","Boolean","join","div","span","t"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AAIzB,MAAMC,YAAY;AASlB,OAAO,MAAMC,YAAsC,CAACC;IAClD,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGJ;IAChD,MAAMK,iBAAiB,CAACD,eAAeF,QAAQ;IAE/C,MAAMI,UAAU;QAACR;QAAWO,kBAAkB,CAAC,EAAEP,UAAU,aAAa,CAAC;QAAEG,aAAaA;KAAU,CAC/FM,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIP,UAAU,GAAG,OAAO;IAExB,qBACE,KAACQ;QAAIT,WAAWK;kBACd,cAAA,MAACI;YAAIT,WAAW,CAAC,EAAEH,UAAU,SAAS,CAAC;;8BACrC,KAACa;oBAAKV,WAAW,CAAC,EAAEH,UAAU,OAAO,CAAC;8BAAGI;;gBACxCE,eAAe,CAAC,CAAC,EAAEF,QAAQ,IAAIC,KAAKS,CAAC,CAAC,oBAAoBT,KAAKS,CAAC,CAAC,iBAAiB,CAAC;;;;AAI5F,EAAC"}
+{"version":3,"sources":["../../../src/elements/ErrorPill/index.tsx"],"sourcesContent":["'use client'\nimport type { I18nClient } from '@payloadcms/translations'\n\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'error-pill'\n\nexport type ErrorPillProps = {\n  className?: string\n  count: number\n  i18n: I18nClient\n  withMessage?: boolean\n}\n\nexport const ErrorPill: React.FC<ErrorPillProps> = (props) => {\n  const { className, count, i18n, withMessage } = props\n  const lessThan3Chars = !withMessage && count < 99\n\n  const classes = [baseClass, lessThan3Chars && `${baseClass}--fixed-width`, className && className]\n    .filter(Boolean)\n    .join(' ')\n\n  if (count === 0) return null\n\n  return (\n    <div className={classes}>\n      <div className={`${baseClass}__content`}>\n        <span className={`${baseClass}__count`}>{count}</span>\n        {withMessage && ` ${count > 1 ? i18n.t('general:errors') : i18n.t('general:error')}`}\n      </div>\n    </div>\n  )\n}\n"],"names":["React","baseClass","ErrorPill","props","className","count","i18n","withMessage","lessThan3Chars","classes","filter","Boolean","join","div","span","t"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AAEzB,OAAO,eAAc;AAErB,MAAMC,YAAY;AASlB,OAAO,MAAMC,YAAsC,CAACC;IAClD,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGJ;IAChD,MAAMK,iBAAiB,CAACD,eAAeF,QAAQ;IAE/C,MAAMI,UAAU;QAACR;QAAWO,kBAAkB,CAAC,EAAEP,UAAU,aAAa,CAAC;QAAEG,aAAaA;KAAU,CAC/FM,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIP,UAAU,GAAG,OAAO;IAExB,qBACE,KAACQ;QAAIT,WAAWK;kBACd,cAAA,MAACI;YAAIT,WAAW,CAAC,EAAEH,UAAU,SAAS,CAAC;;8BACrC,KAACa;oBAAKV,WAAW,CAAC,EAAEH,UAAU,OAAO,CAAC;8BAAGI;;gBACxCE,eAAe,CAAC,CAAC,EAAEF,QAAQ,IAAIC,KAAKS,CAAC,CAAC,oBAAoBT,KAAKS,CAAC,CAAC,iBAAiB,CAAC;;;;AAI5F,EAAC"}

package/dist/elements/ErrorPill/index.scss

@@ -14,6 +14,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  background: var(--theme-error-300);
+  color: var(--theme-error-950);
 
   &--fixed-width {
     width: 18px;
@@ -27,17 +29,3 @@
     margin-left: 0.5px;
   }
 }
-
-html[data-theme='light'] {
-  .error-pill {
-    background: var(--theme-error-250);
-    color: var(--theme-error-750);
-  }
-}
-
-html[data-theme='dark'] {
-  .error-pill {
-    background: var(--theme-error-500);
-    color: var(--color-base-1000);
-  }
-}

package/dist/elements/FieldSelect/index.d.ts

@@ -1,10 +1,15 @@
-import type { FieldWithPath } from 'payload/types';
-import React from 'react';
-import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js';
+import type { FieldWithPath } from 'payload';
+import React, { type JSX } from 'react';
+import type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js';
 import './index.scss';
 export type FieldSelectProps = {
     fieldMap: FieldMap;
     setSelected: (fields: FieldWithPath[]) => void;
 };
+export declare const combineLabel: ({ customLabel, field, prefix, }: {
+    customLabel?: string;
+    field?: MappedField;
+    prefix?: JSX.Element | string;
+}) => JSX.Element;
 export declare const FieldSelect: React.FC<FieldSelectProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/FieldSelect/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldSelect/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,KAAuC,MAAM,OAAO,CAAA;AAE3D,OAAO,KAAK,EAAE,QAAQ,EAAe,MAAM,yDAAyD,CAAA;AAOpG,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,QAAQ,CAAA;IAClB,WAAW,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,IAAI,CAAA;CAC/C,CAAA;AAiHD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgDlD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldSelect/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE5C,OAAO,KAAK,EAAE,EAAY,KAAK,GAAG,EAAY,MAAM,OAAO,CAAA;AAE3D,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,yDAAyD,CAAA;AAOpG,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,QAAQ,CAAA;IAClB,WAAW,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,IAAI,CAAA;CAC/C,CAAA;AAED,eAAO,MAAM,YAAY,oCAItB;IACD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAA;CAC9B,KAAG,GAAG,CAAC,OA8BP,CAAA;AAyED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgDlD,CAAA"}

package/dist/elements/FieldSelect/index.js

@@ -1,13 +1,14 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { Fragment, useState } from 'react';
-import { FieldLabel } from '../../forms/FieldLabel/index.js';
+import { FieldLabel } from '../../fields/FieldLabel/index.js';
 import { useForm } from '../../forms/Form/context.js';
 import { createNestedClientFieldPath } from '../../forms/Form/createNestedFieldPath.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { ReactSelect } from '../ReactSelect/index.js';
+import './index.scss';
 const baseClass = 'field-select';
-const combineLabel = ({ customLabel, field, prefix })=>{
+export const combineLabel = ({ customLabel, field, prefix })=>{
     const CustomLabelToRender = field && 'CustomLabel' in field.fieldComponentProps && field.fieldComponentProps.CustomLabel !== undefined ? field.fieldComponentProps.CustomLabel : null;
     const DefaultLabelToRender = field && 'label' in field.fieldComponentProps && field.fieldComponentProps.label ? /*#__PURE__*/ _jsx(FieldLabel, {
         label: field.fieldComponentProps.label,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/FieldSelect/index.tsx"],"sourcesContent":["'use client'\nimport type { FieldWithPath } from 'payload/types'\n\nimport React, { Fragment, type JSX, useState } from 'react'\n\nimport type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'\n\nimport { FieldLabel } from '../../forms/FieldLabel/index.js'\nimport { useForm } from '../../forms/Form/context.js'\nimport { createNestedClientFieldPath } from '../../forms/Form/createNestedFieldPath.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport './index.scss'\n\nconst baseClass = 'field-select'\n\nexport type FieldSelectProps = {\n  fieldMap: FieldMap\n  setSelected: (fields: FieldWithPath[]) => void\n}\n\nconst combineLabel = ({\n  customLabel,\n  field,\n  prefix,\n}: {\n  customLabel?: string\n  field?: MappedField\n  prefix?: JSX.Element | string\n}): JSX.Element => {\n  const CustomLabelToRender =\n    field &&\n    'CustomLabel' in field.fieldComponentProps &&\n    field.fieldComponentProps.CustomLabel !== undefined\n      ? field.fieldComponentProps.CustomLabel\n      : null\n  const DefaultLabelToRender =\n    field && 'label' in field.fieldComponentProps && field.fieldComponentProps.label ? (\n      <FieldLabel\n        label={field.fieldComponentProps.label}\n        {...(field.fieldComponentProps.labelProps || {})}\n      />\n    ) : null\n\n  const LabelToRender = CustomLabelToRender || DefaultLabelToRender || customLabel\n\n  if (!LabelToRender) return null\n\n  return (\n    <Fragment>\n      {prefix && (\n        <Fragment>\n          <span style={{ display: 'inline-block' }}>{prefix}</span>\n          {' > '}\n        </Fragment>\n      )}\n      <span style={{ display: 'inline-block' }}>{LabelToRender}</span>\n    </Fragment>\n  )\n}\n\nconst reduceFields = ({\n  fieldMap,\n  labelPrefix = null,\n  path = '',\n}: {\n  fieldMap: FieldMap\n  labelPrefix?: JSX.Element | string\n  path?: string\n}): { Label: JSX.Element; value: FieldWithPath }[] => {\n  if (!fieldMap) {\n    return []\n  }\n\n  return fieldMap?.reduce((fieldsToUse, field) => {\n    const { isFieldAffectingData } = field\n    // escape for a variety of reasons\n    if (\n      isFieldAffectingData &&\n      (field.disableBulkEdit ||\n        field.unique ||\n        field.isHidden ||\n        ('readOnly' in field.fieldComponentProps && field.fieldComponentProps.readOnly))\n    ) {\n      return fieldsToUse\n    }\n\n    if (\n      !(field.type === 'array' || field.type === 'blocks') &&\n      'fieldMap' in field.fieldComponentProps\n    ) {\n      return [\n        ...fieldsToUse,\n        ...reduceFields({\n          fieldMap: field.fieldComponentProps.fieldMap,\n          labelPrefix: combineLabel({ field, prefix: labelPrefix }),\n          path: createNestedClientFieldPath(path, field),\n        }),\n      ]\n    }\n\n    if (field.type === 'tabs' && 'tabs' in field.fieldComponentProps) {\n      return [\n        ...fieldsToUse,\n        ...field.fieldComponentProps.tabs.reduce((tabFields, tab) => {\n          if ('fieldMap' in tab) {\n            const isNamedTab = 'name' in tab && tab.name\n            return [\n              ...tabFields,\n              ...reduceFields({\n                fieldMap: tab.fieldMap,\n                labelPrefix,\n                path: isNamedTab ? createNestedClientFieldPath(path, field) : path,\n              }),\n            ]\n          }\n        }, []),\n      ]\n    }\n\n    const formattedField = {\n      label: combineLabel({ field, prefix: labelPrefix }),\n      value: {\n        ...field,\n        path: createNestedClientFieldPath(path, field),\n      },\n    }\n\n    return [...fieldsToUse, formattedField]\n  }, [])\n}\n\nexport const FieldSelect: React.FC<FieldSelectProps> = ({ fieldMap, setSelected }) => {\n  const { t } = useTranslation()\n  const [options] = useState(() => reduceFields({ fieldMap }))\n\n  const { dispatchFields, getFields } = useForm()\n\n  const handleChange = (selected) => {\n    const activeFields = getFields()\n    if (selected === null) {\n      setSelected([])\n    } else {\n      setSelected(selected.map(({ value }) => value))\n    }\n\n    // remove deselected values from form state\n    if (selected === null || Object.keys(activeFields || []).length > selected.length) {\n      Object.keys(activeFields).forEach((path) => {\n        if (\n          selected === null ||\n          !selected.find((field) => {\n            return field.value.path === path\n          })\n        ) {\n          dispatchFields({\n            type: 'REMOVE',\n            path,\n          })\n        }\n      })\n    }\n  }\n\n  return (\n    <div className={baseClass}>\n      <FieldLabel label={t('fields:selectFieldsToEdit')} />\n      <ReactSelect\n        getOptionValue={(option) => {\n          if (typeof option.value === 'object' && 'path' in option.value) {\n            return String(option.value.path)\n          }\n          return String(option.value)\n        }}\n        isMulti\n        onChange={handleChange}\n        options={options}\n      />\n    </div>\n  )\n}\n"],"names":["React","Fragment","useState","FieldLabel","useForm","createNestedClientFieldPath","useTranslation","ReactSelect","baseClass","combineLabel","customLabel","field","prefix","CustomLabelToRender","fieldComponentProps","CustomLabel","undefined","DefaultLabelToRender","label","labelProps","LabelToRender","span","style","display","reduceFields","fieldMap","labelPrefix","path","reduce","fieldsToUse","isFieldAffectingData","disableBulkEdit","unique","isHidden","readOnly","type","tabs","tabFields","tab","isNamedTab","name","formattedField","value","FieldSelect","setSelected","t","options","dispatchFields","getFields","handleChange","selected","activeFields","map","Object","keys","length","forEach","find","div","className","getOptionValue","option","String","isMulti","onChange"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../src/elements/FieldSelect/index.tsx"],"sourcesContent":["'use client'\nimport type { FieldWithPath } from 'payload'\n\nimport React, { Fragment, type JSX, useState } from 'react'\n\nimport type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useForm } from '../../forms/Form/context.js'\nimport { createNestedClientFieldPath } from '../../forms/Form/createNestedFieldPath.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport './index.scss'\n\nconst baseClass = 'field-select'\n\nexport type FieldSelectProps = {\n  fieldMap: FieldMap\n  setSelected: (fields: FieldWithPath[]) => void\n}\n\nexport const combineLabel = ({\n  customLabel,\n  field,\n  prefix,\n}: {\n  customLabel?: string\n  field?: MappedField\n  prefix?: JSX.Element | string\n}): JSX.Element => {\n  const CustomLabelToRender =\n    field &&\n    'CustomLabel' in field.fieldComponentProps &&\n    field.fieldComponentProps.CustomLabel !== undefined\n      ? field.fieldComponentProps.CustomLabel\n      : null\n  const DefaultLabelToRender =\n    field && 'label' in field.fieldComponentProps && field.fieldComponentProps.label ? (\n      <FieldLabel\n        label={field.fieldComponentProps.label}\n        {...(field.fieldComponentProps.labelProps || {})}\n      />\n    ) : null\n\n  const LabelToRender = CustomLabelToRender || DefaultLabelToRender || customLabel\n\n  if (!LabelToRender) return null\n\n  return (\n    <Fragment>\n      {prefix && (\n        <Fragment>\n          <span style={{ display: 'inline-block' }}>{prefix}</span>\n          {' > '}\n        </Fragment>\n      )}\n      <span style={{ display: 'inline-block' }}>{LabelToRender}</span>\n    </Fragment>\n  )\n}\n\nconst reduceFields = ({\n  fieldMap,\n  labelPrefix = null,\n  path = '',\n}: {\n  fieldMap: FieldMap\n  labelPrefix?: JSX.Element | string\n  path?: string\n}): { Label: JSX.Element; value: FieldWithPath }[] => {\n  if (!fieldMap) {\n    return []\n  }\n\n  return fieldMap?.reduce((fieldsToUse, field) => {\n    const { isFieldAffectingData } = field\n    // escape for a variety of reasons\n    if (\n      isFieldAffectingData &&\n      (field.disableBulkEdit ||\n        field.unique ||\n        field.isHidden ||\n        ('readOnly' in field.fieldComponentProps && field.fieldComponentProps.readOnly))\n    ) {\n      return fieldsToUse\n    }\n\n    if (\n      !(field.type === 'array' || field.type === 'blocks') &&\n      'fieldMap' in field.fieldComponentProps\n    ) {\n      return [\n        ...fieldsToUse,\n        ...reduceFields({\n          fieldMap: field.fieldComponentProps.fieldMap,\n          labelPrefix: combineLabel({ field, prefix: labelPrefix }),\n          path: createNestedClientFieldPath(path, field),\n        }),\n      ]\n    }\n\n    if (field.type === 'tabs' && 'tabs' in field.fieldComponentProps) {\n      return [\n        ...fieldsToUse,\n        ...field.fieldComponentProps.tabs.reduce((tabFields, tab) => {\n          if ('fieldMap' in tab) {\n            const isNamedTab = 'name' in tab && tab.name\n            return [\n              ...tabFields,\n              ...reduceFields({\n                fieldMap: tab.fieldMap,\n                labelPrefix,\n                path: isNamedTab ? createNestedClientFieldPath(path, field) : path,\n              }),\n            ]\n          }\n        }, []),\n      ]\n    }\n\n    const formattedField = {\n      label: combineLabel({ field, prefix: labelPrefix }),\n      value: {\n        ...field,\n        path: createNestedClientFieldPath(path, field),\n      },\n    }\n\n    return [...fieldsToUse, formattedField]\n  }, [])\n}\n\nexport const FieldSelect: React.FC<FieldSelectProps> = ({ fieldMap, setSelected }) => {\n  const { t } = useTranslation()\n  const [options] = useState(() => reduceFields({ fieldMap }))\n\n  const { dispatchFields, getFields } = useForm()\n\n  const handleChange = (selected) => {\n    const activeFields = getFields()\n    if (selected === null) {\n      setSelected([])\n    } else {\n      setSelected(selected.map(({ value }) => value))\n    }\n\n    // remove deselected values from form state\n    if (selected === null || Object.keys(activeFields || []).length > selected.length) {\n      Object.keys(activeFields).forEach((path) => {\n        if (\n          selected === null ||\n          !selected.find((field) => {\n            return field.value.path === path\n          })\n        ) {\n          dispatchFields({\n            type: 'REMOVE',\n            path,\n          })\n        }\n      })\n    }\n  }\n\n  return (\n    <div className={baseClass}>\n      <FieldLabel label={t('fields:selectFieldsToEdit')} />\n      <ReactSelect\n        getOptionValue={(option) => {\n          if (typeof option.value === 'object' && 'path' in option.value) {\n            return String(option.value.path)\n          }\n          return String(option.value)\n        }}\n        isMulti\n        onChange={handleChange}\n        options={options}\n      />\n    </div>\n  )\n}\n"],"names":["React","Fragment","useState","FieldLabel","useForm","createNestedClientFieldPath","useTranslation","ReactSelect","baseClass","combineLabel","customLabel","field","prefix","CustomLabelToRender","fieldComponentProps","CustomLabel","undefined","DefaultLabelToRender","label","labelProps","LabelToRender","span","style","display","reduceFields","fieldMap","labelPrefix","path","reduce","fieldsToUse","isFieldAffectingData","disableBulkEdit","unique","isHidden","readOnly","type","tabs","tabFields","tab","isNamedTab","name","formattedField","value","FieldSelect","setSelected","t","options","dispatchFields","getFields","handleChange","selected","activeFields","map","Object","keys","length","forEach","find","div","className","getOptionValue","option","String","isMulti","onChange"],"mappings":"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"}

package/dist/elements/FileDetails/FileMeta/index.js

@@ -1,11 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { formatFilesize } from 'payload/utilities';
+import { formatFilesize } from 'payload/shared';
 import React, { useState } from 'react';
-import { Edit } from '../../../icons/Edit/index.js';
+import { EditIcon } from '../../../icons/Edit/index.js';
 import { CopyToClipboard } from '../../CopyToClipboard/index.js';
 import { useDocumentDrawer } from '../../DocumentDrawer/index.js';
 import { Tooltip } from '../../Tooltip/index.js';
+import './index.scss';
 const baseClass = 'file-meta';
 export const FileMeta = (props)=>{
     const { id, collection, filename, filesize, height, mimeType, url: fileURL, width } = props;
@@ -37,7 +38,7 @@ export const FileMeta = (props)=>{
                         onMouseEnter: ()=>setHovered(true),
                         onMouseLeave: ()=>setHovered(false),
                         children: [
-                            /*#__PURE__*/ _jsx(Edit, {}),
+                            /*#__PURE__*/ _jsx(EditIcon, {}),
                             /*#__PURE__*/ _jsx(Tooltip, {
                                 show: hovered,
                                 children: "Edit"

package/dist/elements/FileDetails/FileMeta/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/FileDetails/FileMeta/index.tsx"],"sourcesContent":["'use client'\nimport { formatFilesize } from 'payload/utilities'\nimport React, { useState } from 'react'\n\nexport type FileMetaProps = {\n  collection?: string\n  filename: string\n  filesize: number\n  height?: number\n  id?: string\n  mimeType: string\n  sizes?: unknown\n  url: string\n  width?: number\n}\n\nimport { Edit } from '../../../icons/Edit/index.js'\nimport { CopyToClipboard } from '../../CopyToClipboard/index.js'\nimport { useDocumentDrawer } from '../../DocumentDrawer/index.js'\nimport { Tooltip } from '../../Tooltip/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-meta'\n\nexport const FileMeta: React.FC<FileMetaProps> = (props) => {\n  const { id, collection, filename, filesize, height, mimeType, url: fileURL, width } = props\n\n  const [hovered, setHovered] = useState(false)\n  const openInDrawer = Boolean(id && collection)\n\n  const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer({\n    id,\n    collectionSlug: collection,\n  })\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__url`}>\n        {openInDrawer && <DocumentDrawer />}\n        <a href={fileURL} rel=\"noopener noreferrer\" target=\"_blank\">\n          {filename}\n        </a>\n        <CopyToClipboard defaultMessage=\"Copy URL\" value={fileURL} />\n        {openInDrawer && (\n          <DocumentDrawerToggler\n            className={`${baseClass}__edit`}\n            onMouseEnter={() => setHovered(true)}\n            onMouseLeave={() => setHovered(false)}\n          >\n            <Edit />\n            <Tooltip show={hovered}>Edit</Tooltip>\n          </DocumentDrawerToggler>\n        )}\n      </div>\n      <div className={`${baseClass}__size-type`}>\n        {formatFilesize(filesize)}\n        {width && height && (\n          <React.Fragment>\n            &nbsp;-&nbsp;\n            {width}x{height}\n          </React.Fragment>\n        )}\n        {mimeType && (\n          <React.Fragment>\n            &nbsp;-&nbsp;\n            {mimeType}\n          </React.Fragment>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":["formatFilesize","React","useState","Edit","CopyToClipboard","useDocumentDrawer","Tooltip","baseClass","FileMeta","props","id","collection","filename","filesize","height","mimeType","url","fileURL","width","hovered","setHovered","openInDrawer","Boolean","DocumentDrawer","DocumentDrawerToggler","collectionSlug","div","className","a","href","rel","target","defaultMessage","value","onMouseEnter","onMouseLeave","show","Fragment"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,cAAc,QAAQ,oBAAmB;AAClD,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAcvC,SAASC,IAAI,QAAQ,+BAA8B;AACnD,SAASC,eAAe,QAAQ,iCAAgC;AAChE,SAASC,iBAAiB,QAAQ,gCAA+B;AACjE,SAASC,OAAO,QAAQ,yBAAwB;AAGhD,MAAMC,YAAY;AAElB,OAAO,MAAMC,WAAoC,CAACC;IAChD,MAAM,EAAEC,EAAE,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,KAAKC,OAAO,EAAEC,KAAK,EAAE,GAAGT;IAEtF,MAAM,CAACU,SAASC,WAAW,GAAGlB,SAAS;IACvC,MAAMmB,eAAeC,QAAQZ,MAAMC;IAEnC,MAAM,CAACY,gBAAgBC,sBAAsB,GAAGnB,kBAAkB;QAChEK;QACAe,gBAAgBd;IAClB;IAEA,qBACE,MAACe;QAAIC,WAAWpB;;0BACd,MAACmB;gBAAIC,WAAW,CAAC,EAAEpB,UAAU,KAAK,CAAC;;oBAChCc,8BAAgB,KAACE;kCAClB,KAACK;wBAAEC,MAAMZ;wBAASa,KAAI;wBAAsBC,QAAO;kCAChDnB;;kCAEH,KAACR;wBAAgB4B,gBAAe;wBAAWC,OAAOhB;;oBACjDI,8BACC,MAACG;wBACCG,WAAW,CAAC,EAAEpB,UAAU,MAAM,CAAC;wBAC/B2B,cAAc,IAAMd,WAAW;wBAC/Be,cAAc,IAAMf,WAAW;;0CAE/B,KAACjB;0CACD,KAACG;gCAAQ8B,MAAMjB;0CAAS;;;;;;0BAI9B,MAACO;gBAAIC,WAAW,CAAC,EAAEpB,UAAU,WAAW,CAAC;;oBACtCP,eAAea;oBACfK,SAASJ,wBACR,MAACb,MAAMoC,QAAQ;;4BAAC;4BAEbnB;4BAAM;4BAAEJ;;;oBAGZC,0BACC,MAACd,MAAMoC,QAAQ;;4BAAC;4BAEbtB;;;;;;;AAMb,EAAC"}
+{"version":3,"sources":["../../../../src/elements/FileDetails/FileMeta/index.tsx"],"sourcesContent":["'use client'\nimport { formatFilesize } from 'payload/shared'\nimport React, { useState } from 'react'\n\nexport type FileMetaProps = {\n  collection?: string\n  filename: string\n  filesize: number\n  height?: number\n  id?: string\n  mimeType: string\n  sizes?: unknown\n  url: string\n  width?: number\n}\n\nimport { EditIcon } from '../../../icons/Edit/index.js'\nimport { CopyToClipboard } from '../../CopyToClipboard/index.js'\nimport { useDocumentDrawer } from '../../DocumentDrawer/index.js'\nimport { Tooltip } from '../../Tooltip/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-meta'\n\nexport const FileMeta: React.FC<FileMetaProps> = (props) => {\n  const { id, collection, filename, filesize, height, mimeType, url: fileURL, width } = props\n\n  const [hovered, setHovered] = useState(false)\n  const openInDrawer = Boolean(id && collection)\n\n  const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer({\n    id,\n    collectionSlug: collection,\n  })\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__url`}>\n        {openInDrawer && <DocumentDrawer />}\n        <a href={fileURL} rel=\"noopener noreferrer\" target=\"_blank\">\n          {filename}\n        </a>\n        <CopyToClipboard defaultMessage=\"Copy URL\" value={fileURL} />\n        {openInDrawer && (\n          <DocumentDrawerToggler\n            className={`${baseClass}__edit`}\n            onMouseEnter={() => setHovered(true)}\n            onMouseLeave={() => setHovered(false)}\n          >\n            <EditIcon />\n            <Tooltip show={hovered}>Edit</Tooltip>\n          </DocumentDrawerToggler>\n        )}\n      </div>\n      <div className={`${baseClass}__size-type`}>\n        {formatFilesize(filesize)}\n        {width && height && (\n          <React.Fragment>\n            &nbsp;-&nbsp;\n            {width}x{height}\n          </React.Fragment>\n        )}\n        {mimeType && (\n          <React.Fragment>\n            &nbsp;-&nbsp;\n            {mimeType}\n          </React.Fragment>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":["formatFilesize","React","useState","EditIcon","CopyToClipboard","useDocumentDrawer","Tooltip","baseClass","FileMeta","props","id","collection","filename","filesize","height","mimeType","url","fileURL","width","hovered","setHovered","openInDrawer","Boolean","DocumentDrawer","DocumentDrawerToggler","collectionSlug","div","className","a","href","rel","target","defaultMessage","value","onMouseEnter","onMouseLeave","show","Fragment"],"mappings":"AAAA;;AACA,SAASA,cAAc,QAAQ,iBAAgB;AAC/C,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAcvC,SAASC,QAAQ,QAAQ,+BAA8B;AACvD,SAASC,eAAe,QAAQ,iCAAgC;AAChE,SAASC,iBAAiB,QAAQ,gCAA+B;AACjE,SAASC,OAAO,QAAQ,yBAAwB;AAChD,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,WAAoC,CAACC;IAChD,MAAM,EAAEC,EAAE,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,KAAKC,OAAO,EAAEC,KAAK,EAAE,GAAGT;IAEtF,MAAM,CAACU,SAASC,WAAW,GAAGlB,SAAS;IACvC,MAAMmB,eAAeC,QAAQZ,MAAMC;IAEnC,MAAM,CAACY,gBAAgBC,sBAAsB,GAAGnB,kBAAkB;QAChEK;QACAe,gBAAgBd;IAClB;IAEA,qBACE,MAACe;QAAIC,WAAWpB;;0BACd,MAACmB;gBAAIC,WAAW,CAAC,EAAEpB,UAAU,KAAK,CAAC;;oBAChCc,8BAAgB,KAACE;kCAClB,KAACK;wBAAEC,MAAMZ;wBAASa,KAAI;wBAAsBC,QAAO;kCAChDnB;;kCAEH,KAACR;wBAAgB4B,gBAAe;wBAAWC,OAAOhB;;oBACjDI,8BACC,MAACG;wBACCG,WAAW,CAAC,EAAEpB,UAAU,MAAM,CAAC;wBAC/B2B,cAAc,IAAMd,WAAW;wBAC/Be,cAAc,IAAMf,WAAW;;0CAE/B,KAACjB;0CACD,KAACG;gCAAQ8B,MAAMjB;0CAAS;;;;;;0BAI9B,MAACO;gBAAIC,WAAW,CAAC,EAAEpB,UAAU,WAAW,CAAC;;oBACtCP,eAAea;oBACfK,SAASJ,wBACR,MAACb,MAAMoC,QAAQ;;4BAAC;4BAEbnB;4BAAM;4BAAEJ;;;oBAGZC,0BACC,MAACd,MAAMoC,QAAQ;;4BAAC;4BAEbtB;;;;;;;AAMb,EAAC"}

package/dist/elements/FileDetails/index.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
 import './index.scss';
-import type { Data, FileSizes, SanitizedCollectionConfig } from 'payload/types';
+import type { Data, FileSizes, SanitizedCollectionConfig } from 'payload';
 export type FileDetailsProps = {
-    canEdit?: boolean;
     collectionSlug: string;
-    doc: Data & {
+    customUploadActions?: React.ReactNode[];
+    doc: {
         sizes?: FileSizes;
-    };
+    } & Data;
+    enableAdjustments?: boolean;
     handleRemove?: () => void;
     hasImageSizes?: boolean;
     imageCacheTag?: string;

package/dist/elements/FileDetails/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FileDetails/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;AAE/E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,EAAE,MAAM,CAAA;IACtB,GAAG,EAAE,IAAI,GAAG;QACV,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,CAAA;IACD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA6ClD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FileDetails/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAEzE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,cAAc,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACvC,GAAG,EAAE;QACH,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,GAAG,IAAI,CAAA;IACR,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAwDlD,CAAA"}

package/dist/elements/FileDetails/index.js

@@ -1,14 +1,14 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isImage } from 'payload/utilities';
 import React from 'react';
 import { UploadActions } from '../../elements/Upload/index.js';
 import { Button } from '../Button/index.js';
 import { Thumbnail } from '../Thumbnail/index.js';
 import { FileMeta } from './FileMeta/index.js';
+import './index.scss';
 const baseClass = 'file-details';
 export const FileDetails = (props)=>{
-    const { canEdit, collectionSlug, doc, handleRemove, hasImageSizes, imageCacheTag, uploadConfig } = props;
+    const { collectionSlug, customUploadActions, doc, enableAdjustments, handleRemove, hasImageSizes, imageCacheTag, uploadConfig } = props;
     const { id, filename, filesize, height, mimeType, thumbnailURL, url, width } = doc;
     return /*#__PURE__*/ _jsx("div", {
         className: baseClass,
@@ -34,9 +34,11 @@ export const FileDetails = (props)=>{
                             url: url,
                             width: width
                         }),
-                        isImage(mimeType) && mimeType !== 'image/svg+xml' && /*#__PURE__*/ _jsx(UploadActions, {
-                            canEdit: canEdit,
-                            showSizePreviews: hasImageSizes && doc.filename
+                        /*#__PURE__*/ _jsx(UploadActions, {
+                            customActions: customUploadActions,
+                            enableAdjustments: enableAdjustments,
+                            enablePreviewSizes: hasImageSizes && doc.filename,
+                            mimeType: mimeType
                         })
                     ]
                 }),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/FileDetails/index.tsx"],"sourcesContent":["'use client'\nimport { isImage } from 'payload/utilities'\nimport React from 'react'\n\nimport { UploadActions } from '../../elements/Upload/index.js'\nimport { Button } from '../Button/index.js'\nimport { Thumbnail } from '../Thumbnail/index.js'\nimport { FileMeta } from './FileMeta/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-details'\n\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload/types'\n\nexport type FileDetailsProps = {\n  canEdit?: boolean\n  collectionSlug: string\n  doc: Data & {\n    sizes?: FileSizes\n  }\n  handleRemove?: () => void\n  hasImageSizes?: boolean\n  imageCacheTag?: string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const FileDetails: React.FC<FileDetailsProps> = (props) => {\n  const { canEdit, collectionSlug, doc, handleRemove, hasImageSizes, imageCacheTag, uploadConfig } =\n    props\n\n  const { id, filename, filesize, height, mimeType, thumbnailURL, url, width } = doc\n\n  return (\n    <div className={baseClass}>\n      <header>\n        <Thumbnail\n          collectionSlug={collectionSlug}\n          doc={doc}\n          fileSrc={thumbnailURL || url}\n          imageCacheTag={imageCacheTag}\n          uploadConfig={uploadConfig}\n        />\n        <div className={`${baseClass}__main-detail`}>\n          <FileMeta\n            collection={collectionSlug}\n            filename={filename as string}\n            filesize={filesize as number}\n            height={height as number}\n            id={id as string}\n            mimeType={mimeType as string}\n            url={url as string}\n            width={width as number}\n          />\n\n          {isImage(mimeType as string) && mimeType !== 'image/svg+xml' && (\n            <UploadActions canEdit={canEdit} showSizePreviews={hasImageSizes && doc.filename} />\n          )}\n        </div>\n        {handleRemove && (\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__remove`}\n            icon=\"x\"\n            iconStyle=\"with-border\"\n            onClick={handleRemove}\n            round\n          />\n        )}\n      </header>\n    </div>\n  )\n}\n"],"names":["isImage","React","UploadActions","Button","Thumbnail","FileMeta","baseClass","FileDetails","props","canEdit","collectionSlug","doc","handleRemove","hasImageSizes","imageCacheTag","uploadConfig","id","filename","filesize","height","mimeType","thumbnailURL","url","width","div","className","header","fileSrc","collection","showSizePreviews","buttonStyle","icon","iconStyle","onClick","round"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,OAAO,QAAQ,oBAAmB;AAC3C,OAAOC,WAAW,QAAO;AAEzB,SAASC,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,SAAS,QAAQ,wBAAuB;AACjD,SAASC,QAAQ,QAAQ,sBAAqB;AAG9C,MAAMC,YAAY;AAgBlB,OAAO,MAAMC,cAA0C,CAACC;IACtD,MAAM,EAAEC,OAAO,EAAEC,cAAc,EAAEC,GAAG,EAAEC,YAAY,EAAEC,aAAa,EAAEC,aAAa,EAAEC,YAAY,EAAE,GAC9FP;IAEF,MAAM,EAAEQ,EAAE,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,GAAG,EAAEC,KAAK,EAAE,GAAGZ;IAE/E,qBACE,KAACa;QAAIC,WAAWnB;kBACd,cAAA,MAACoB;;8BACC,KAACtB;oBACCM,gBAAgBA;oBAChBC,KAAKA;oBACLgB,SAASN,gBAAgBC;oBACzBR,eAAeA;oBACfC,cAAcA;;8BAEhB,MAACS;oBAAIC,WAAW,CAAC,EAAEnB,UAAU,aAAa,CAAC;;sCACzC,KAACD;4BACCuB,YAAYlB;4BACZO,UAAUA;4BACVC,UAAUA;4BACVC,QAAQA;4BACRH,IAAIA;4BACJI,UAAUA;4BACVE,KAAKA;4BACLC,OAAOA;;wBAGRvB,QAAQoB,aAAuBA,aAAa,iCAC3C,KAAClB;4BAAcO,SAASA;4BAASoB,kBAAkBhB,iBAAiBF,IAAIM,QAAQ;;;;gBAGnFL,8BACC,KAACT;oBACC2B,aAAY;oBACZL,WAAW,CAAC,EAAEnB,UAAU,QAAQ,CAAC;oBACjCyB,MAAK;oBACLC,WAAU;oBACVC,SAASrB;oBACTsB,KAAK;;;;;AAMjB,EAAC"}
+{"version":3,"sources":["../../../src/elements/FileDetails/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { UploadActions } from '../../elements/Upload/index.js'\nimport { Button } from '../Button/index.js'\nimport { Thumbnail } from '../Thumbnail/index.js'\nimport { FileMeta } from './FileMeta/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-details'\n\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'\n\nexport type FileDetailsProps = {\n  collectionSlug: string\n  customUploadActions?: React.ReactNode[]\n  doc: {\n    sizes?: FileSizes\n  } & Data\n  enableAdjustments?: boolean\n  handleRemove?: () => void\n  hasImageSizes?: boolean\n  imageCacheTag?: string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const FileDetails: React.FC<FileDetailsProps> = (props) => {\n  const {\n    collectionSlug,\n    customUploadActions,\n    doc,\n    enableAdjustments,\n    handleRemove,\n    hasImageSizes,\n    imageCacheTag,\n    uploadConfig,\n  } = props\n\n  const { id, filename, filesize, height, mimeType, thumbnailURL, url, width } = doc\n\n  return (\n    <div className={baseClass}>\n      <header>\n        <Thumbnail\n          collectionSlug={collectionSlug}\n          doc={doc}\n          fileSrc={thumbnailURL || url}\n          imageCacheTag={imageCacheTag}\n          uploadConfig={uploadConfig}\n        />\n        <div className={`${baseClass}__main-detail`}>\n          <FileMeta\n            collection={collectionSlug}\n            filename={filename as string}\n            filesize={filesize as number}\n            height={height as number}\n            id={id as string}\n            mimeType={mimeType as string}\n            url={url as string}\n            width={width as number}\n          />\n\n          <UploadActions\n            customActions={customUploadActions}\n            enableAdjustments={enableAdjustments}\n            enablePreviewSizes={hasImageSizes && doc.filename}\n            mimeType={mimeType}\n          />\n        </div>\n        {handleRemove && (\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__remove`}\n            icon=\"x\"\n            iconStyle=\"with-border\"\n            onClick={handleRemove}\n            round\n          />\n        )}\n      </header>\n    </div>\n  )\n}\n"],"names":["React","UploadActions","Button","Thumbnail","FileMeta","baseClass","FileDetails","props","collectionSlug","customUploadActions","doc","enableAdjustments","handleRemove","hasImageSizes","imageCacheTag","uploadConfig","id","filename","filesize","height","mimeType","thumbnailURL","url","width","div","className","header","fileSrc","collection","customActions","enablePreviewSizes","buttonStyle","icon","iconStyle","onClick","round"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,SAAS,QAAQ,wBAAuB;AACjD,SAASC,QAAQ,QAAQ,sBAAqB;AAC9C,OAAO,eAAc;AAErB,MAAMC,YAAY;AAiBlB,OAAO,MAAMC,cAA0C,CAACC;IACtD,MAAM,EACJC,cAAc,EACdC,mBAAmB,EACnBC,GAAG,EACHC,iBAAiB,EACjBC,YAAY,EACZC,aAAa,EACbC,aAAa,EACbC,YAAY,EACb,GAAGR;IAEJ,MAAM,EAAES,EAAE,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,GAAG,EAAEC,KAAK,EAAE,GAAGb;IAE/E,qBACE,KAACc;QAAIC,WAAWpB;kBACd,cAAA,MAACqB;;8BACC,KAACvB;oBACCK,gBAAgBA;oBAChBE,KAAKA;oBACLiB,SAASN,gBAAgBC;oBACzBR,eAAeA;oBACfC,cAAcA;;8BAEhB,MAACS;oBAAIC,WAAW,CAAC,EAAEpB,UAAU,aAAa,CAAC;;sCACzC,KAACD;4BACCwB,YAAYpB;4BACZS,UAAUA;4BACVC,UAAUA;4BACVC,QAAQA;4BACRH,IAAIA;4BACJI,UAAUA;4BACVE,KAAKA;4BACLC,OAAOA;;sCAGT,KAACtB;4BACC4B,eAAepB;4BACfE,mBAAmBA;4BACnBmB,oBAAoBjB,iBAAiBH,IAAIO,QAAQ;4BACjDG,UAAUA;;;;gBAGbR,8BACC,KAACV;oBACC6B,aAAY;oBACZN,WAAW,CAAC,EAAEpB,UAAU,QAAQ,CAAC;oBACjC2B,MAAK;oBACLC,WAAU;oBACVC,SAAStB;oBACTuB,KAAK;;;;;AAMjB,EAAC"}

package/dist/elements/GenerateConfirmation/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/GenerateConfirmation/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,yBAAyB,GAAG;IACtC,cAAc,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAA;IACjC,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAwDpE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/GenerateConfirmation/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,yBAAyB,GAAG;IACtC,cAAc,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAA;IACjC,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAsDpE,CAAA"}

package/dist/elements/GenerateConfirmation/index.js

@@ -1,16 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as facelessUIImport from '@faceless-ui/modal';
+import { Modal, useModal } from '@faceless-ui/modal';
 import React from 'react';
-import { toast } from 'react-toastify';
+import { toast } from 'sonner';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import { MinimalTemplate } from '../../templates/Minimal/index.js';
 import { Button } from '../Button/index.js';
 import { Translation } from '../Translation/index.js';
+import './index.scss';
 const baseClass = 'generate-confirmation';
 export const GenerateConfirmation = (props)=>{
-    const { Modal, useModal } = facelessUIImport;
     const { highlightField, setKey } = props;
     const { id } = useDocumentInfo();
     const { toggleModal } = useModal();
@@ -19,9 +18,7 @@ export const GenerateConfirmation = (props)=>{
     const handleGenerate = ()=>{
         setKey();
         toggleModal(modalSlug);
-        toast.success(t('authentication:newAPIKeyGenerated'), {
-            autoClose: 3000
-        });
+        toast.success(t('authentication:newAPIKeyGenerated'));
         highlightField(true);
     };
     return /*#__PURE__*/ _jsxs(React.Fragment, {
@@ -37,7 +34,7 @@ export const GenerateConfirmation = (props)=>{
             /*#__PURE__*/ _jsx(Modal, {
                 className: baseClass,
                 slug: modalSlug,
-                children: /*#__PURE__*/ _jsxs(MinimalTemplate, {
+                children: /*#__PURE__*/ _jsxs("div", {
                     className: `${baseClass}__template`,
                     children: [
                         /*#__PURE__*/ _jsx("h1", {