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

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

package/dist/elements/EditUpload/index.scss

@@ -111,6 +111,9 @@ $header-height: base(5);
   &__crop,
   &__focalOnly {
     padding: base(1.5) base(1.5) base(1.5) 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
   }
 
   &__crop {
@@ -181,7 +184,7 @@ $header-height: base(5);
     height: fit-content;
     border-radius: var(--style-radius-s);
     background-color: var(--theme-elevation-150);
-    padding: 0 base(0.25);
+    padding: 0 base(0.4);
   }
 
   &__input {

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

@@ -1,10 +1,10 @@
-import type { I18n } from '@payloadcms/translations';
+import type { I18nClient } from '@payloadcms/translations';
 import React from 'react';
 import './index.scss';
 export type ErrorPillProps = {
     className?: string;
     count: number;
-    i18n: I18n;
+    i18n: I18nClient;
     withMessage?: boolean;
 };
 export declare const ErrorPill: React.FC<ErrorPillProps>;

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":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAEpD,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,IAAI,CAAA;IACV,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAkB9C,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,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,CAkB9C,CAAA"}

package/dist/elements/ErrorPill/index.js

@@ -1,21 +1,28 @@
+'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;
-    const lessThan3Chars = !withMessage && count < 99;
-    const classes = [
-        baseClass,
-        lessThan3Chars && `${baseClass}--fixed-width`,
-        className && className
-    ].filter(Boolean).join(' ');
-    if (count === 0) return null;
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classes
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__content`
-    }, /*#__PURE__*/ React.createElement("span", {
-        className: `${baseClass}__count`
-    }, count), withMessage && ` ${count > 1 ? i18n.t('general:errors') : i18n.t('general:error')}`));
+export const ErrorPill = props => {
+  const {
+    className,
+    count,
+    i18n,
+    withMessage
+  } = props;
+  const lessThan3Chars = !withMessage && count < 99;
+  const classes = [baseClass, lessThan3Chars && `${baseClass}--fixed-width`, className && className].filter(Boolean).join(' ');
+  if (count === 0) return null;
+  return /*#__PURE__*/_jsx("div", {
+    className: classes,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__content`,
+      children: [/*#__PURE__*/_jsx("span", {
+        className: `${baseClass}__count`,
+        children: count
+      }), withMessage && ` ${count > 1 ? i18n.t('general:errors') : i18n.t('general:error')}`]
+    })
+  });
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ErrorPill/index.tsx"],"sourcesContent":["import type { I18n } 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: I18n\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":"AAEA,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,oBAACQ;QAAIT,WAAWK;qBACd,oBAACI;QAAIT,WAAW,CAAC,EAAEH,UAAU,SAAS,CAAC;qBACrC,oBAACa;QAAKV,WAAW,CAAC,EAAEH,UAAU,OAAO,CAAC;OAAGI,QACxCE,eAAe,CAAC,CAAC,EAAEF,QAAQ,IAAIC,KAAKS,CAAC,CAAC,oBAAoBT,KAAKS,CAAC,CAAC,iBAAiB,CAAC;AAI5F,EAAC"}
+{"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) 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"],"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,OAAO;EAExB,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":[]}

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,14 @@
-import type { FieldWithPath } from 'payload/types';
-import React from 'react';
-import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js';
+import type { ClientField, FieldWithPath } from 'payload';
+import React, { type JSX } from 'react';
 import './index.scss';
 export type FieldSelectProps = {
-    fieldMap: FieldMap;
-    setSelected: (fields: FieldWithPath[]) => void;
+    readonly fields: ClientField[];
+    readonly setSelected: (fields: FieldWithPath[]) => void;
 };
+export declare const combineLabel: ({ customLabel, field, prefix, }: {
+    customLabel?: string;
+    field?: ClientField;
+    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":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,KAA6B,MAAM,OAAO,CAAA;AAEjD,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;AA8GD,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,WAAW,EAAE,aAAa,EAAmB,MAAM,SAAS,CAAA;AAG1E,OAAO,KAAK,EAAE,EAAY,KAAK,GAAG,EAAY,MAAM,OAAO,CAAA;AAQ3D,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,IAAI,CAAA;CACxD,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,OA6CP,CAAA;AAqED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgDlD,CAAA"}

package/dist/elements/FieldSelect/index.js

@@ -1,124 +1,187 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fieldAffectsData, fieldHasSubFields } from 'payload/shared';
 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 { createNestedClientFieldPath } from '../../forms/Form/createNestedClientFieldPath.js';
+import { RenderComponent } from '../../providers/Config/RenderComponent.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 })=>{
-    const CustomLabelToRender = field && 'CustomLabel' in field.fieldComponentProps && field.fieldComponentProps.CustomLabel !== undefined ? field.fieldComponentProps.CustomLabel : null;
-    const DefaultLabelToRender = field && 'labelProps' in field.fieldComponentProps && field.fieldComponentProps.labelProps ? /*#__PURE__*/ React.createElement(FieldLabel, field.fieldComponentProps.labelProps) : null;
-    const LabelToRender = CustomLabelToRender || DefaultLabelToRender || customLabel;
-    if (!LabelToRender) return null;
-    return /*#__PURE__*/ React.createElement(Fragment, null, prefix && /*#__PURE__*/ React.createElement(Fragment, null, /*#__PURE__*/ React.createElement("span", {
-        style: {
-            display: 'inline-block'
-        }
-    }, prefix), ' > '), /*#__PURE__*/ React.createElement("span", {
+export const combineLabel = ({
+  customLabel,
+  field,
+  prefix
+}) => {
+  const CustomLabelToRender = field?.admin?.components && 'Label' in field.admin.components && field?.admin?.components?.Label !== undefined ? field.admin.components.Label : null;
+  const DefaultLabelToRender = field && 'label' in field && field.label ? {
+    type: 'client',
+    Component: FieldLabel,
+    props: {
+      Label: field.admin?.components && 'Label' in field.admin.components ? field.admin?.components?.Label : null,
+      label: field.label
+    }
+  } : null;
+  const LabelToRender = CustomLabelToRender || DefaultLabelToRender || {
+    type: 'client',
+    Component: null,
+    RenderedComponent: customLabel
+  };
+  if (!LabelToRender) return null;
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [prefix && /*#__PURE__*/_jsxs(Fragment, {
+      children: [/*#__PURE__*/_jsx("span", {
         style: {
-            display: 'inline-block'
-        }
-    }, LabelToRender));
+          display: 'inline-block'
+        },
+        children: prefix
+      }), ' > ']
+    }), /*#__PURE__*/_jsx("span", {
+      style: {
+        display: 'inline-block'
+      },
+      children: /*#__PURE__*/_jsx(RenderComponent, {
+        mappedComponent: LabelToRender
+      })
+    })]
+  });
 };
-const reduceFields = ({ fieldMap, labelPrefix = null, path = '' })=>{
-    if (!fieldMap) {
-        return [];
+const reduceFields = ({
+  fields,
+  labelPrefix = null,
+  path = ''
+}) => {
+  if (!fields) {
+    return [];
+  }
+  return fields?.reduce((fieldsToUse, field) => {
+    // escape for a variety of reasons
+    if (fieldAffectsData(field) && (field.admin.disableBulkEdit || field.unique || field.admin.hidden || 'readOnly' in field && field.readOnly)) {
+      return fieldsToUse;
     }
-    return fieldMap?.reduce((fieldsToUse, field)=>{
-        const { isFieldAffectingData } = field;
-        // escape for a variety of reasons
-        if (isFieldAffectingData && (field.disableBulkEdit || field.unique || field.isHidden || 'readOnly' in field.fieldComponentProps && field.fieldComponentProps.readOnly)) {
-            return fieldsToUse;
-        }
-        if (!(field.type === 'array' || field.type === 'blocks') && 'fieldMap' in field.fieldComponentProps) {
-            return [
-                ...fieldsToUse,
-                ...reduceFields({
-                    fieldMap: field.fieldComponentProps.fieldMap,
-                    labelPrefix: combineLabel({
-                        field,
-                        prefix: labelPrefix
-                    }),
-                    path: createNestedClientFieldPath(path, field)
-                })
-            ];
-        }
-        if (field.type === 'tabs' && 'tabs' in field.fieldComponentProps) {
-            return [
-                ...fieldsToUse,
-                ...field.fieldComponentProps.tabs.reduce((tabFields, tab)=>{
-                    if ('fieldMap' in tab) {
-                        const isNamedTab = 'name' in tab && tab.name;
-                        return [
-                            ...tabFields,
-                            ...reduceFields({
-                                fieldMap: tab.fieldMap,
-                                labelPrefix,
-                                path: isNamedTab ? createNestedClientFieldPath(path, field) : path
-                            })
-                        ];
-                    }
-                }, [])
-            ];
+    if (!(field.type === 'array' || field.type === 'blocks') && fieldHasSubFields(field)) {
+      return [...fieldsToUse, ...reduceFields({
+        fields: field.fields,
+        labelPrefix: combineLabel({
+          field,
+          prefix: labelPrefix
+        }),
+        path: createNestedClientFieldPath(path, field)
+      })];
+    }
+    if (field.type === 'tabs' && 'tabs' in field) {
+      return [...fieldsToUse, ...field.tabs.reduce((tabFields, tab) => {
+        if ('fields' in tab) {
+          const isNamedTab = 'name' in tab && tab.name;
+          return [...tabFields, ...reduceFields({
+            fields: tab.fields,
+            labelPrefix,
+            path: isNamedTab ? createNestedClientFieldPath(path, field) : path
+          })];
         }
-        const formattedField = {
-            label: combineLabel({
-                field,
-                prefix: labelPrefix
-            }),
-            value: {
-                ...field,
-                path: createNestedClientFieldPath(path, field)
-            }
-        };
-        return [
-            ...fieldsToUse,
-            formattedField
-        ];
-    }, []);
+      }, [])];
+    }
+    const formattedField = {
+      label: combineLabel({
+        field,
+        prefix: labelPrefix
+      }),
+      value: {
+        ...field,
+        path: createNestedClientFieldPath(path, field)
+      }
+    };
+    return [...fieldsToUse, formattedField];
+  }, []);
 };
-export const FieldSelect = ({ fieldMap, setSelected })=>{
-    const { t } = useTranslation();
-    const [options] = useState(()=>reduceFields({
-            fieldMap
+export const FieldSelect = t0 => {
+  const $ = _c(10);
+  const {
+    fields,
+    setSelected
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  let t1;
+  if ($[0] !== fields) {
+    t1 = () => reduceFields({
+      fields
+    });
+    $[0] = fields;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const [options] = useState(t1);
+  const {
+    dispatchFields,
+    getFields
+  } = useForm();
+  let t2;
+  if ($[2] !== getFields || $[3] !== setSelected || $[4] !== dispatchFields) {
+    t2 = selected => {
+      const activeFields = getFields();
+      if (selected === null) {
+        setSelected([]);
+      } else {
+        setSelected(selected.map(t3 => {
+          const {
+            value
+          } = t3;
+          return value;
         }));
-    const { dispatchFields, getFields } = useForm();
-    const handleChange = (selected)=>{
-        const activeFields = getFields();
-        if (selected === null) {
-            setSelected([]);
-        } else {
-            setSelected(selected.map(({ value })=>value));
-        }
-        // remove deselected values from form state
-        if (selected === null || Object.keys(activeFields || []).length > selected.length) {
-            Object.keys(activeFields).forEach((path)=>{
-                if (selected === null || !selected.find((field)=>{
-                    return field.value.path === path;
-                })) {
-                    dispatchFields({
-                        type: 'REMOVE',
-                        path
-                    });
-                }
+      }
+      if (selected === null || Object.keys(activeFields || []).length > selected.length) {
+        Object.keys(activeFields).forEach(path => {
+          if (selected === null || !selected.find(field => field.value.path === path)) {
+            dispatchFields({
+              type: "REMOVE",
+              path
             });
-        }
+          }
+        });
+      }
     };
-    return /*#__PURE__*/ React.createElement("div", {
-        className: baseClass
-    }, /*#__PURE__*/ React.createElement(FieldLabel, {
-        label: t('fields:selectFieldsToEdit')
-    }), /*#__PURE__*/ React.createElement(ReactSelect, {
-        getOptionValue: (option)=>{
-            if (typeof option.value === 'object' && 'path' in option.value) {
-                return String(option.value.path);
-            }
-            return String(option.value);
-        },
+    $[2] = getFields;
+    $[3] = setSelected;
+    $[4] = dispatchFields;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const handleChange = t2;
+  let t3;
+  if ($[6] !== t || $[7] !== handleChange || $[8] !== options) {
+    t3 = _jsxs("div", {
+      className: baseClass,
+      children: [_jsx(FieldLabel, {
+        field: null,
+        label: t("fields:selectFieldsToEdit")
+      }), _jsx(ReactSelect, {
+        getOptionValue: _temp,
         isMulti: true,
         onChange: handleChange,
-        options: options
-    }));
+        options
+      })]
+    });
+    $[6] = t;
+    $[7] = handleChange;
+    $[8] = options;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  return t3;
 };
-
+function _temp(option) {
+  if (typeof option.value === "object" && "path" in option.value) {
+    return String(option.value.path);
+  }
+  return String(option.value);
+}
 //# sourceMappingURL=index.js.map