@payloadcms/ui 3.84.0 → 4.0.0-internal.38b7f1d

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useModal","React","useRef","useState","ReactCrop","editDrawerSlug","PlusIcon","useTranslation","appendCacheTag","Button","baseClass","Input","props","name","onChange","ref","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, { 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 { appendCacheTag } from '../../utilities/appendCacheTag.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  ref?: React.RefObject<HTMLInputElement>\n  value: string\n}\n\nconst Input: React.FC<Props> = (props) => {\n  const { name, onChange, ref, 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\n    const percentage =\n      100 * (intValue / (dimension === 'width' ? uncroppedPixelWidth : uncroppedPixelHeight))\n\n    if (percentage <= 0 || percentage > 100) {\n      return null\n    }\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    }\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 = fileSrc ? appendCacheTag(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) {\n      return null\n    }\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) {\n      return\n    }\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","useRef","useState","ReactCrop","editDrawerSlug","PlusIcon","useTranslation","appendCacheTag","Button","baseClass","Input","props","name","disabled","onChange","ref","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","prev","fineTuneFocalPosition","coordinate","prevPosition","saveEdits","focalPoint","heightInPixels","Number","current","widthInPixels","onDragEnd","useCallback","centerFocalPoint","containerRect","getBoundingClientRect","boundsRect","xCenter","left","yCenter","top","fileSrcToUse","title","buttonStyle","onClick","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, { useRef, useState } from 'react'\nimport ReactCrop from 'react-image-crop'\n\nimport { editDrawerSlug } from '../../elements/Upload/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { appendCacheTag } from '../../utilities/appendCacheTag.js'\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nconst baseClass = 'edit-upload'\n\ntype Props = {\n  disabled?: boolean\n  name: string\n  onChange: (value: string) => void\n  ref?: React.RefObject<HTMLInputElement>\n  value: string\n}\n\nconst Input: React.FC<Props> = (props) => {\n  const { name, disabled, onChange, ref, value } = props\n\n  return (\n    <div className={`${baseClass}__input`}>\n      {name}\n      <input\n        disabled={disabled}\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\n    const percentage =\n      100 * (intValue / (dimension === 'width' ? uncroppedPixelWidth : uncroppedPixelHeight))\n\n    if (percentage <= 0 || percentage > 100) {\n      return null\n    }\n\n    setCrop((prev) => ({\n      ...prev,\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    }\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 = fileSrc ? appendCacheTag(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                    disabled={!imageLoaded}\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                    disabled={!imageLoaded}\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) {\n      return null\n    }\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) {\n      return\n    }\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":[]}

package/dist/elements/EditUpload/index.scss

@@ -1,4 +1,5 @@
 @import '../../scss/styles.scss';
+@import './library.scss';
 
 $header-height: base(5);
 
@@ -77,7 +78,6 @@ $header-height: base(5);
     }
 
     &__draggable {
-      @include btn-reset;
       position: absolute;
     }
 

package/dist/elements/EditUpload/library.scss

@@ -0,0 +1,320 @@
+// CSS manually copied into the payload-default layer from the react-image-crop library
+// see: /node_modules/react-image-crop/dist/ReactCrop.css
+
+@layer payload-default {
+  .ReactCrop {
+    position: relative;
+    display: inline-block;
+    cursor: crosshair;
+    overflow: hidden;
+    max-width: 100%;
+  }
+
+  .ReactCrop *,
+  .ReactCrop *:before,
+  .ReactCrop *:after {
+    box-sizing: border-box;
+  }
+
+  .ReactCrop--disabled,
+  .ReactCrop--locked {
+    cursor: inherit;
+  }
+
+  .ReactCrop__child-wrapper {
+    max-height: inherit;
+  }
+
+  .ReactCrop__child-wrapper > img,
+  .ReactCrop__child-wrapper > video {
+    display: block;
+    max-width: 100%;
+    max-height: inherit;
+  }
+
+  .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > img,
+  .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > video {
+    touch-action: none;
+  }
+
+  .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection {
+    touch-action: none;
+  }
+
+  .ReactCrop__crop-selection {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translateZ(0);
+    cursor: move;
+    box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.5);
+  }
+
+  .ReactCrop--disabled .ReactCrop__crop-selection {
+    cursor: inherit;
+  }
+
+  .ReactCrop--circular-crop .ReactCrop__crop-selection {
+    border-radius: 50%;
+  }
+
+  .ReactCrop--no-animate .ReactCrop__crop-selection {
+    outline: 1px dashed white;
+  }
+
+  .ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection) {
+    animation: marching-ants 1s;
+    background-image: linear-gradient(to right, #fff 50%, #444 50%),
+      linear-gradient(to right, #fff 50%, #444 50%),
+      linear-gradient(to bottom, #fff 50%, #444 50%),
+      linear-gradient(to bottom, #fff 50%, #444 50%);
+    background-size: 10px 1px, 10px 1px, 1px 10px, 1px 10px;
+    background-position: 0 0, 0 100%, 0 0, 100% 0;
+    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+    color: #fff;
+    animation-play-state: running;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+  }
+
+  @keyframes marching-ants {
+    0% {
+      background-position: 0 0, 0 100%, 0 0, 100% 0;
+    }
+    to {
+      background-position: 20px 0, -20px 100%, 0 -20px, 100% 20px;
+    }
+  }
+
+  .ReactCrop__crop-selection:focus {
+    outline: none;
+    border-color: #00f;
+    border-style: solid;
+  }
+
+  .ReactCrop--invisible-crop .ReactCrop__crop-selection {
+    display: none;
+  }
+
+  .ReactCrop__rule-of-thirds-vt:before,
+  .ReactCrop__rule-of-thirds-vt:after,
+  .ReactCrop__rule-of-thirds-hz:before,
+  .ReactCrop__rule-of-thirds-hz:after {
+    content: '';
+    display: block;
+    position: absolute;
+    background-color: rgba(255, 255, 255, 0.4);
+  }
+
+  .ReactCrop__rule-of-thirds-vt:before,
+  .ReactCrop__rule-of-thirds-vt:after {
+    width: 1px;
+    height: 100%;
+  }
+
+  .ReactCrop__rule-of-thirds-vt:before {
+    left: 33.3333333333%;
+  }
+
+  .ReactCrop__rule-of-thirds-vt:after {
+    left: 66.6666666667%;
+  }
+
+  .ReactCrop__rule-of-thirds-hz:before,
+  .ReactCrop__rule-of-thirds-hz:after {
+    width: 100%;
+    height: 1px;
+  }
+
+  .ReactCrop__rule-of-thirds-hz:before {
+    top: 33.3333333333%;
+  }
+
+  .ReactCrop__rule-of-thirds-hz:after {
+    top: 66.6666666667%;
+  }
+
+  .ReactCrop__drag-handle {
+    position: absolute;
+  }
+
+  .ReactCrop__drag-handle:after {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 10px;
+    height: 10px;
+    background-color: rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.7);
+    outline: 1px solid transparent;
+  }
+
+  .ReactCrop__drag-handle:focus:after {
+    border-color: #00f;
+    background: #2dbfff;
+  }
+
+  .ReactCrop .ord-nw {
+    top: 0;
+    left: 0;
+    margin-top: -5px;
+    margin-left: -5px;
+    cursor: nw-resize;
+  }
+
+  .ReactCrop .ord-nw:after {
+    top: 0;
+    left: 0;
+  }
+
+  .ReactCrop .ord-n {
+    top: 0;
+    left: 50%;
+    margin-top: -5px;
+    margin-left: -5px;
+    cursor: n-resize;
+  }
+
+  .ReactCrop .ord-n:after {
+    top: 0;
+  }
+
+  .ReactCrop .ord-ne {
+    top: 0;
+    right: 0;
+    margin-top: -5px;
+    margin-right: -5px;
+    cursor: ne-resize;
+  }
+
+  .ReactCrop .ord-ne:after {
+    top: 0;
+    right: 0;
+  }
+
+  .ReactCrop .ord-e {
+    top: 50%;
+    right: 0;
+    margin-top: -5px;
+    margin-right: -5px;
+    cursor: e-resize;
+  }
+
+  .ReactCrop .ord-e:after {
+    right: 0;
+  }
+
+  .ReactCrop .ord-se {
+    bottom: 0;
+    right: 0;
+    margin-bottom: -5px;
+    margin-right: -5px;
+    cursor: se-resize;
+  }
+
+  .ReactCrop .ord-se:after {
+    bottom: 0;
+    right: 0;
+  }
+
+  .ReactCrop .ord-s {
+    bottom: 0;
+    left: 50%;
+    margin-bottom: -5px;
+    margin-left: -5px;
+    cursor: s-resize;
+  }
+
+  .ReactCrop .ord-s:after {
+    bottom: 0;
+  }
+
+  .ReactCrop .ord-sw {
+    bottom: 0;
+    left: 0;
+    margin-bottom: -5px;
+    margin-left: -5px;
+    cursor: sw-resize;
+  }
+
+  .ReactCrop .ord-sw:after {
+    bottom: 0;
+    left: 0;
+  }
+
+  .ReactCrop .ord-w {
+    top: 50%;
+    left: 0;
+    margin-top: -5px;
+    margin-left: -5px;
+    cursor: w-resize;
+  }
+
+  .ReactCrop .ord-w:after {
+    left: 0;
+  }
+
+  .ReactCrop__disabled .ReactCrop__drag-handle {
+    cursor: inherit;
+  }
+
+  .ReactCrop__drag-bar {
+    position: absolute;
+  }
+
+  .ReactCrop__drag-bar.ord-n {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 6px;
+    margin-top: -3px;
+  }
+
+  .ReactCrop__drag-bar.ord-e {
+    right: 0;
+    top: 0;
+    width: 6px;
+    height: 100%;
+    margin-right: -3px;
+  }
+
+  .ReactCrop__drag-bar.ord-s {
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 6px;
+    margin-bottom: -3px;
+  }
+
+  .ReactCrop__drag-bar.ord-w {
+    top: 0;
+    left: 0;
+    width: 6px;
+    height: 100%;
+    margin-left: -3px;
+  }
+
+  .ReactCrop--new-crop .ReactCrop__drag-bar,
+  .ReactCrop--new-crop .ReactCrop__drag-handle,
+  .ReactCrop--fixed-aspect .ReactCrop__drag-bar,
+  .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,
+  .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,
+  .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,
+  .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w {
+    display: none;
+  }
+
+  @media (pointer: coarse) {
+    .ReactCrop .ord-n,
+    .ReactCrop .ord-e,
+    .ReactCrop .ord-s,
+    .ReactCrop .ord-w {
+      display: none;
+    }
+
+    .ReactCrop__drag-handle {
+      width: 24px;
+      height: 24px;
+    }
+  }
+}

package/dist/elements/ErrorPill/index.css

@@ -0,0 +1,25 @@
+@layer payload-default {
+  .error-pill {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    padding: 0 var(--spacer-1);
+    border-radius: var(--radius-medium);
+    line-height: var(--text-body-medium-line-height);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    letter-spacing: var(--text-letter-spacing);
+    text-align: center;
+    background: var(--color-bg-danger);
+    color: var(--color-text-ondanger);
+    height: var(--spacer-3);
+  }
+
+  .error-pill--fixed-width {
+    width: var(--spacer-3);
+    padding: 0;
+    position: relative;
+  }
+}

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

@@ -1,6 +1,6 @@
 import type { I18nClient } from '@payloadcms/translations';
 import React from 'react';
-import './index.scss';
+import './index.css';
 export type ErrorPillProps = {
     className?: string;
     count: number;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ErrorPill/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,UAAU,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoB9C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ErrorPill/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,UAAU,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAqB9C,CAAA"}

package/dist/elements/ErrorPill/index.js

@@ -2,7 +2,7 @@
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import './index.scss';
+import './index.css';
 const baseClass = 'error-pill';
 export const ErrorPill = props => {
   const {
@@ -23,7 +23,7 @@ export const ErrorPill = props => {
       children: [/*#__PURE__*/_jsx("span", {
         className: `${baseClass}__count`,
         children: count
-      }), withMessage && ` ${count > 1 ? i18n.t('general:errors') : i18n.t('general:error')}`]
+      }), withMessage && ` ${count > 1 ? i18n.t('general:errors').toLowerCase() : i18n.t('general:error').toLowerCase()}`]
     })
   });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","baseClass","ErrorPill","props","className","count","i18n","withMessage","lessThan3Chars","classes","filter","Boolean","join","_jsx","_jsxs","t"],"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) {\n    return null\n  }\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"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AASlB,OAAO,MAAMC,SAAA,GAAuCC,KAAA;EAClD,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAEC,IAAI;IAAEC;EAAW,CAAE,GAAGJ,KAAA;EAChD,MAAMK,cAAA,GAAiB,CAACD,WAAA,IAAeF,KAAA,GAAQ;EAE/C,MAAMI,OAAA,GAAU,CAACR,SAAA,EAAWO,cAAA,IAAkB,GAAGP,SAAA,eAAwB,EAAEG,SAAA,IAAaA,SAAA,CAAU,CAC/FM,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,IAAIP,KAAA,KAAU,GAAG;IACf,OAAO;EACT;EAEA,oBACEQ,IAAA,CAAC;IAAIT,SAAA,EAAWK,OAAA;cACd,aAAAK,KAAA,CAAC;MAAIV,SAAA,EAAW,GAAGH,SAAA,WAAoB;8BACrCY,IAAA,CAAC;QAAKT,SAAA,EAAW,GAAGH,SAAA,SAAkB;kBAAGI;UACxCE,WAAA,IAAe,IAAIF,KAAA,GAAQ,IAAIC,IAAA,CAAKS,CAAC,CAAC,oBAAoBT,IAAA,CAAKS,CAAC,CAAC,kBAAkB;;;AAI5F","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","baseClass","ErrorPill","props","className","count","i18n","withMessage","lessThan3Chars","classes","filter","Boolean","join","_jsx","_jsxs","t","toLowerCase"],"sources":["../../../src/elements/ErrorPill/index.tsx"],"sourcesContent":["'use client'\nimport type { I18nClient } from '@payloadcms/translations'\n\nimport React from 'react'\n\nimport './index.css'\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) {\n    return null\n  }\n\n  return (\n    <div className={classes}>\n      <div className={`${baseClass}__content`}>\n        <span className={`${baseClass}__count`}>{count}</span>\n        {withMessage &&\n          ` ${count > 1 ? i18n.t('general:errors').toLowerCase() : i18n.t('general:error').toLowerCase()}`}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AASlB,OAAO,MAAMC,SAAA,GAAuCC,KAAA;EAClD,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAEC,IAAI;IAAEC;EAAW,CAAE,GAAGJ,KAAA;EAChD,MAAMK,cAAA,GAAiB,CAACD,WAAA,IAAeF,KAAA,GAAQ;EAE/C,MAAMI,OAAA,GAAU,CAACR,SAAA,EAAWO,cAAA,IAAkB,GAAGP,SAAA,eAAwB,EAAEG,SAAA,IAAaA,SAAA,CAAU,CAC/FM,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,IAAIP,KAAA,KAAU,GAAG;IACf,OAAO;EACT;EAEA,oBACEQ,IAAA,CAAC;IAAIT,SAAA,EAAWK,OAAA;cACd,aAAAK,KAAA,CAAC;MAAIV,SAAA,EAAW,GAAGH,SAAA,WAAoB;8BACrCY,IAAA,CAAC;QAAKT,SAAA,EAAW,GAAGH,SAAA,SAAkB;kBAAGI;UACxCE,WAAA,IACC,IAAIF,KAAA,GAAQ,IAAIC,IAAA,CAAKS,CAAC,CAAC,kBAAkBC,WAAW,KAAKV,IAAA,CAAKS,CAAC,CAAC,iBAAiBC,WAAW,IAAI;;;AAI1G","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"reduceFieldOptions.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldSelect/reduceFieldOptions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAYhF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,WAAW,CAAA;IAClB,gBAAgB,EAAE,yBAAyB,CAAA;IAC3C,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,EAAE,aAAa,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,kBAAkB,UAAW,WAAW,KAAG,OAOrD,CAAA;AAEH,eAAO,MAAM,kBAAkB,uEAO5B;IACD,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAA;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,WAAW,EAChB;QACE,CAAC,SAAS,EAAE,MAAM,GAAG,yBAAyB,CAAA;KAC/C,GACD,yBAAyB,CAAA;CAC9B,KAAG,WAAW,EAkFd,CAAA"}
+{"version":3,"file":"reduceFieldOptions.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldSelect/reduceFieldOptions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAahF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,WAAW,CAAA;IAClB,gBAAgB,EAAE,yBAAyB,CAAA;IAC3C,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,EAAE,aAAa,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,kBAAkB,UAAW,WAAW,KAAG,OAOrD,CAAA;AAEH,eAAO,MAAM,kBAAkB,uEAO5B;IACD,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAA;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,WAAW,EAChB;QACE,CAAC,SAAS,EAAE,MAAM,GAAG,yBAAyB,CAAA;KAC/C,GACD,yBAAyB,CAAA;CAC9B,KAAG,WAAW,EAkFd,CAAA"}

package/dist/elements/FieldSelect/reduceFieldOptions.js

@@ -1,7 +1,7 @@
-import { fieldAffectsData, fieldHasSubFields, fieldIsHiddenOrDisabled, getFieldPermissions } from 'payload/shared';
+import { fieldAffectsData, fieldHasSubFields, fieldIsHiddenOrDisabled, getFieldPermissions, isFieldDisabled } from 'payload/shared';
 import { createNestedClientFieldPath } from '../../forms/Form/createNestedClientFieldPath.js';
 import { combineFieldLabel } from '../../utilities/combineFieldLabel.js';
-export const ignoreFromBulkEdit = field => Boolean((fieldAffectsData(field) || field.type === 'ui') && (field.admin.disableBulkEdit || field.unique || fieldIsHiddenOrDisabled(field) || 'readOnly' in field && field.readOnly));
+export const ignoreFromBulkEdit = field => Boolean((fieldAffectsData(field) || field.type === 'ui') && (isFieldDisabled(field, 'bulkEdit') || field.unique || fieldIsHiddenOrDisabled(field) || 'readOnly' in field && field.readOnly));
 export const reduceFieldOptions = ({
   fields,
   formState,
@@ -26,7 +26,7 @@ export const reduceFieldOptions = ({
       permissions
     });
     // escape for a variety of reasons, include ui fields as they have `name`.
-    if ((fieldAffectsData(field) || field.type === 'ui') && (field.admin?.disableBulkEdit || field.unique || fieldIsHiddenOrDisabled(field) || 'readOnly' in field && field.readOnly || !hasOperationPermission || !hasReadPermission)) {
+    if ((fieldAffectsData(field) || field.type === 'ui') && (isFieldDisabled(field, 'bulkEdit') || field.unique || fieldIsHiddenOrDisabled(field) || 'readOnly' in field && field.readOnly || !hasOperationPermission || !hasReadPermission)) {
       return fieldsToUse;
     }
     if (!(field.type === 'array' || field.type === 'blocks') && fieldHasSubFields(field)) {

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

@@ -1 +1 @@
-{"version":3,"file":"reduceFieldOptions.js","names":["fieldAffectsData","fieldHasSubFields","fieldIsHiddenOrDisabled","getFieldPermissions","createNestedClientFieldPath","combineFieldLabel","ignoreFromBulkEdit","field","Boolean","type","admin","disableBulkEdit","unique","readOnly","reduceFieldOptions","fields","formState","labelPrefix","parentPath","path","permissions","CustomLabel","customComponents","Label","reduce","fieldsToUse","operation","hasOperationPermission","fieldPermissions","read","hasReadPermission","parentName","includes","split","length","fieldHasLabel","label","prefix","tabs","tabFields","tab","isNamedTab","name","formattedField","value"],"sources":["../../../src/elements/FieldSelect/reduceFieldOptions.ts"],"sourcesContent":["import type { ClientField, FormState, SanitizedFieldPermissions } from 'payload'\n\nimport {\n  fieldAffectsData,\n  fieldHasSubFields,\n  fieldIsHiddenOrDisabled,\n  getFieldPermissions,\n} from 'payload/shared'\n\nimport { createNestedClientFieldPath } from '../../forms/Form/createNestedClientFieldPath.js'\nimport { combineFieldLabel } from '../../utilities/combineFieldLabel.js'\n\nexport type SelectedField = {\n  field: ClientField\n  fieldPermissions: SanitizedFieldPermissions\n  path: string\n}\n\nexport type FieldOption = {\n  label: React.ReactNode\n  value: SelectedField\n}\n\nexport const ignoreFromBulkEdit = (field: ClientField): boolean =>\n  Boolean(\n    (fieldAffectsData(field) || field.type === 'ui') &&\n      (field.admin.disableBulkEdit ||\n        field.unique ||\n        fieldIsHiddenOrDisabled(field) ||\n        ('readOnly' in field && field.readOnly)),\n  )\n\nexport const reduceFieldOptions = ({\n  fields,\n  formState,\n  labelPrefix = null,\n  parentPath = '',\n  path = '',\n  permissions,\n}: {\n  readonly fields: ClientField[]\n  readonly formState?: FormState\n  readonly labelPrefix?: React.ReactNode\n  readonly parentPath?: string\n  readonly path?: string\n  readonly permissions:\n    | {\n        [fieldName: string]: SanitizedFieldPermissions\n      }\n    | SanitizedFieldPermissions\n}): FieldOption[] => {\n  if (!fields) {\n    return []\n  }\n\n  const CustomLabel = formState?.[path]?.customComponents?.Label\n\n  return fields?.reduce((fieldsToUse, field) => {\n    const {\n      operation: hasOperationPermission,\n      permissions: fieldPermissions,\n      read: hasReadPermission,\n    } = getFieldPermissions({\n      field,\n      operation: 'update',\n      parentName: parentPath?.includes('.')\n        ? parentPath.split('.')[parentPath.split('.').length - 1]\n        : parentPath,\n      permissions,\n    })\n\n    // escape for a variety of reasons, include ui fields as they have `name`.\n    if (\n      (fieldAffectsData(field) || field.type === 'ui') &&\n      (field.admin?.disableBulkEdit ||\n        field.unique ||\n        fieldIsHiddenOrDisabled(field) ||\n        ('readOnly' in field && field.readOnly) ||\n        !hasOperationPermission ||\n        !hasReadPermission)\n    ) {\n      return fieldsToUse\n    }\n\n    if (!(field.type === 'array' || field.type === 'blocks') && fieldHasSubFields(field)) {\n      const fieldHasLabel = 'label' in field && field.label\n      return [\n        ...fieldsToUse,\n        ...reduceFieldOptions({\n          fields: field.fields,\n          labelPrefix: fieldHasLabel\n            ? combineFieldLabel({ CustomLabel, field, prefix: labelPrefix })\n            : labelPrefix,\n          parentPath: path,\n          path: createNestedClientFieldPath(path, field),\n          permissions: fieldPermissions,\n        }),\n      ]\n    }\n\n    if (field.type === 'tabs' && 'tabs' in field) {\n      return [\n        ...fieldsToUse,\n        ...field.tabs.reduce((tabFields, tab) => {\n          if ('fields' in tab) {\n            const isNamedTab = 'name' in tab && tab.name\n            return [\n              ...tabFields,\n              ...reduceFieldOptions({\n                fields: tab.fields,\n                labelPrefix,\n                parentPath: path,\n                path: isNamedTab ? createNestedClientFieldPath(path, tab as ClientField) : path,\n                permissions: fieldPermissions,\n              }),\n            ]\n          }\n        }, []),\n      ]\n    }\n\n    const formattedField: FieldOption = {\n      label: combineFieldLabel({ CustomLabel, field, prefix: labelPrefix }),\n      value: {\n        field,\n        fieldPermissions: fieldPermissions as SanitizedFieldPermissions,\n        path: createNestedClientFieldPath(path, field),\n      },\n    }\n\n    return [...fieldsToUse, formattedField]\n  }, [])\n}\n"],"mappings":"AAEA,SACEA,gBAAgB,EAChBC,iBAAiB,EACjBC,uBAAuB,EACvBC,mBAAmB,QACd;AAEP,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,iBAAiB,QAAQ;AAalC,OAAO,MAAMC,kBAAA,GAAsBC,KAAA,IACjCC,OAAA,CACE,CAACR,gBAAA,CAAiBO,KAAA,KAAUA,KAAA,CAAME,IAAI,KAAK,IAAG,MAC3CF,KAAA,CAAMG,KAAK,CAACC,eAAe,IAC1BJ,KAAA,CAAMK,MAAM,IACZV,uBAAA,CAAwBK,KAAA,KACvB,cAAcA,KAAA,IAASA,KAAA,CAAMM,QAAQ;AAG9C,OAAO,MAAMC,kBAAA,GAAqBA,CAAC;EACjCC,MAAM;EACNC,SAAS;EACTC,WAAA,GAAc,IAAI;EAClBC,UAAA,GAAa,EAAE;EACfC,IAAA,GAAO,EAAE;EACTC;AAAW,CAYZ;EACC,IAAI,CAACL,MAAA,EAAQ;IACX,OAAO,EAAE;EACX;EAEA,MAAMM,WAAA,GAAcL,SAAA,GAAYG,IAAA,CAAK,EAAEG,gBAAA,EAAkBC,KAAA;EAEzD,OAAOR,MAAA,EAAQS,MAAA,CAAO,CAACC,WAAA,EAAalB,KAAA;IAClC,MAAM;MACJmB,SAAA,EAAWC,sBAAsB;MACjCP,WAAA,EAAaQ,gBAAgB;MAC7BC,IAAA,EAAMC;IAAiB,CACxB,GAAG3B,mBAAA,CAAoB;MACtBI,KAAA;MACAmB,SAAA,EAAW;MACXK,UAAA,EAAYb,UAAA,EAAYc,QAAA,CAAS,OAC7Bd,UAAA,CAAWe,KAAK,CAAC,IAAI,CAACf,UAAA,CAAWe,KAAK,CAAC,KAAKC,MAAM,GAAG,EAAE,GACvDhB,UAAA;MACJE;IACF;IAEA;IACA,IACE,CAACpB,gBAAA,CAAiBO,KAAA,KAAUA,KAAA,CAAME,IAAI,KAAK,IAAG,MAC7CF,KAAA,CAAMG,KAAK,EAAEC,eAAA,IACZJ,KAAA,CAAMK,MAAM,IACZV,uBAAA,CAAwBK,KAAA,KACvB,cAAcA,KAAA,IAASA,KAAA,CAAMM,QAAQ,IACtC,CAACc,sBAAA,IACD,CAACG,iBAAgB,GACnB;MACA,OAAOL,WAAA;IACT;IAEA,IAAI,EAAElB,KAAA,CAAME,IAAI,KAAK,WAAWF,KAAA,CAAME,IAAI,KAAK,QAAO,KAAMR,iBAAA,CAAkBM,KAAA,GAAQ;MACpF,MAAM4B,aAAA,GAAgB,WAAW5B,KAAA,IAASA,KAAA,CAAM6B,KAAK;MACrD,OAAO,C,GACFX,WAAA,E,GACAX,kBAAA,CAAmB;QACpBC,MAAA,EAAQR,KAAA,CAAMQ,MAAM;QACpBE,WAAA,EAAakB,aAAA,GACT9B,iBAAA,CAAkB;UAAEgB,WAAA;UAAad,KAAA;UAAO8B,MAAA,EAAQpB;QAAY,KAC5DA,WAAA;QACJC,UAAA,EAAYC,IAAA;QACZA,IAAA,EAAMf,2BAAA,CAA4Be,IAAA,EAAMZ,KAAA;QACxCa,WAAA,EAAaQ;MACf,GACD;IACH;IAEA,IAAIrB,KAAA,CAAME,IAAI,KAAK,UAAU,UAAUF,KAAA,EAAO;MAC5C,OAAO,C,GACFkB,WAAA,E,GACAlB,KAAA,CAAM+B,IAAI,CAACd,MAAM,CAAC,CAACe,SAAA,EAAWC,GAAA;QAC/B,IAAI,YAAYA,GAAA,EAAK;UACnB,MAAMC,UAAA,GAAa,UAAUD,GAAA,IAAOA,GAAA,CAAIE,IAAI;UAC5C,OAAO,C,GACFH,SAAA,E,GACAzB,kBAAA,CAAmB;YACpBC,MAAA,EAAQyB,GAAA,CAAIzB,MAAM;YAClBE,WAAA;YACAC,UAAA,EAAYC,IAAA;YACZA,IAAA,EAAMsB,UAAA,GAAarC,2BAAA,CAA4Be,IAAA,EAAMqB,GAAA,IAAsBrB,IAAA;YAC3EC,WAAA,EAAaQ;UACf,GACD;QACH;MACF,GAAG,EAAE,EACN;IACH;IAEA,MAAMe,cAAA,GAA8B;MAClCP,KAAA,EAAO/B,iBAAA,CAAkB;QAAEgB,WAAA;QAAad,KAAA;QAAO8B,MAAA,EAAQpB;MAAY;MACnE2B,KAAA,EAAO;QACLrC,KAAA;QACAqB,gBAAA,EAAkBA,gBAAA;QAClBT,IAAA,EAAMf,2BAAA,CAA4Be,IAAA,EAAMZ,KAAA;MAC1C;IACF;IAEA,OAAO,C,GAAIkB,WAAA,EAAakB,cAAA,CAAe;EACzC,GAAG,EAAE;AACP","ignoreList":[]}
+{"version":3,"file":"reduceFieldOptions.js","names":["fieldAffectsData","fieldHasSubFields","fieldIsHiddenOrDisabled","getFieldPermissions","isFieldDisabled","createNestedClientFieldPath","combineFieldLabel","ignoreFromBulkEdit","field","Boolean","type","unique","readOnly","reduceFieldOptions","fields","formState","labelPrefix","parentPath","path","permissions","CustomLabel","customComponents","Label","reduce","fieldsToUse","operation","hasOperationPermission","fieldPermissions","read","hasReadPermission","parentName","includes","split","length","fieldHasLabel","label","prefix","tabs","tabFields","tab","isNamedTab","name","formattedField","value"],"sources":["../../../src/elements/FieldSelect/reduceFieldOptions.ts"],"sourcesContent":["import type { ClientField, FormState, SanitizedFieldPermissions } from 'payload'\n\nimport {\n  fieldAffectsData,\n  fieldHasSubFields,\n  fieldIsHiddenOrDisabled,\n  getFieldPermissions,\n  isFieldDisabled,\n} from 'payload/shared'\n\nimport { createNestedClientFieldPath } from '../../forms/Form/createNestedClientFieldPath.js'\nimport { combineFieldLabel } from '../../utilities/combineFieldLabel.js'\n\nexport type SelectedField = {\n  field: ClientField\n  fieldPermissions: SanitizedFieldPermissions\n  path: string\n}\n\nexport type FieldOption = {\n  label: React.ReactNode\n  value: SelectedField\n}\n\nexport const ignoreFromBulkEdit = (field: ClientField): boolean =>\n  Boolean(\n    (fieldAffectsData(field) || field.type === 'ui') &&\n      (isFieldDisabled(field, 'bulkEdit') ||\n        field.unique ||\n        fieldIsHiddenOrDisabled(field) ||\n        ('readOnly' in field && field.readOnly)),\n  )\n\nexport const reduceFieldOptions = ({\n  fields,\n  formState,\n  labelPrefix = null,\n  parentPath = '',\n  path = '',\n  permissions,\n}: {\n  readonly fields: ClientField[]\n  readonly formState?: FormState\n  readonly labelPrefix?: React.ReactNode\n  readonly parentPath?: string\n  readonly path?: string\n  readonly permissions:\n    | {\n        [fieldName: string]: SanitizedFieldPermissions\n      }\n    | SanitizedFieldPermissions\n}): FieldOption[] => {\n  if (!fields) {\n    return []\n  }\n\n  const CustomLabel = formState?.[path]?.customComponents?.Label\n\n  return fields?.reduce((fieldsToUse, field) => {\n    const {\n      operation: hasOperationPermission,\n      permissions: fieldPermissions,\n      read: hasReadPermission,\n    } = getFieldPermissions({\n      field,\n      operation: 'update',\n      parentName: parentPath?.includes('.')\n        ? parentPath.split('.')[parentPath.split('.').length - 1]\n        : parentPath,\n      permissions,\n    })\n\n    // escape for a variety of reasons, include ui fields as they have `name`.\n    if (\n      (fieldAffectsData(field) || field.type === 'ui') &&\n      (isFieldDisabled(field, 'bulkEdit') ||\n        field.unique ||\n        fieldIsHiddenOrDisabled(field) ||\n        ('readOnly' in field && field.readOnly) ||\n        !hasOperationPermission ||\n        !hasReadPermission)\n    ) {\n      return fieldsToUse\n    }\n\n    if (!(field.type === 'array' || field.type === 'blocks') && fieldHasSubFields(field)) {\n      const fieldHasLabel = 'label' in field && field.label\n      return [\n        ...fieldsToUse,\n        ...reduceFieldOptions({\n          fields: field.fields,\n          labelPrefix: fieldHasLabel\n            ? combineFieldLabel({ CustomLabel, field, prefix: labelPrefix })\n            : labelPrefix,\n          parentPath: path,\n          path: createNestedClientFieldPath(path, field),\n          permissions: fieldPermissions,\n        }),\n      ]\n    }\n\n    if (field.type === 'tabs' && 'tabs' in field) {\n      return [\n        ...fieldsToUse,\n        ...field.tabs.reduce((tabFields, tab) => {\n          if ('fields' in tab) {\n            const isNamedTab = 'name' in tab && tab.name\n            return [\n              ...tabFields,\n              ...reduceFieldOptions({\n                fields: tab.fields,\n                labelPrefix,\n                parentPath: path,\n                path: isNamedTab ? createNestedClientFieldPath(path, tab as ClientField) : path,\n                permissions: fieldPermissions,\n              }),\n            ]\n          }\n        }, []),\n      ]\n    }\n\n    const formattedField: FieldOption = {\n      label: combineFieldLabel({ CustomLabel, field, prefix: labelPrefix }),\n      value: {\n        field,\n        fieldPermissions: fieldPermissions as SanitizedFieldPermissions,\n        path: createNestedClientFieldPath(path, field),\n      },\n    }\n\n    return [...fieldsToUse, formattedField]\n  }, [])\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -8,7 +8,7 @@ import { Thumbnail } from '../../Thumbnail/index.js';
 import './index.scss';
 const baseClass = 'file-details-draggable';
 import { DraggableSortableItem } from '../../../elements/DraggableSortable/DraggableSortableItem/index.js';
-import { DragHandleIcon } from '../../../icons/DragHandle/index.js';
+import { AlignJustifiedIcon } from '../../../icons/AlignJustified/index.js';
 import { EditIcon } from '../../../icons/Edit/index.js';
 import { useDocumentDrawer } from '../../DocumentDrawer/index.js';
 export const DraggableFileDetails = props => {
@@ -58,7 +58,7 @@ export const DraggableFileDetails = props => {
           className: `${baseClass}__drag`,
           ...draggableSortableItemProps.attributes,
           ...draggableSortableItemProps.listeners,
-          children: _jsx(DragHandleIcon, {})
+          children: _jsx(AlignJustifiedIcon, {})
         }), _jsx(Thumbnail, {
           className: `${baseClass}__thumbnail`,
           collectionSlug,