@payloadcms/ui 3.0.0-canary.95fcd13 → 3.0.0-canary.96477cf

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

@@ -1 +1 @@
-{"version":3,"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"],"names":["useModal","React","forwardRef","useRef","useState","ReactCrop","editDrawerSlug","PlusIcon","useTranslation","Button","baseClass","Input","props","ref","name","onChange","value","div","className","input","e","target","type","defaultCrop","height","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","h2","title","aria-label","buttonStyle","onClick","disabled","style","aspectRatio","_","c","onComplete","renderSelectionAddon","img","alt","onLoad","src","DraggableElement","boundsRef","containerRef","initialPosition","h3","span","toFixed","children","position","setPosition","isDragging","setIsDragging","dragRef","getCoordinates","mouseXArg","mouseYArg","recenter","mouseX","mouseY","xOutOfBounds","right","yOutOfBounds","bottom","handleMouseDown","event","preventDefault","handleMouseMove","clientX","clientY","onDrop","useEffect","filter","Boolean","join","onMouseMove","button","onMouseDown","onMouseUp"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["useModal","React","forwardRef","useRef","useState","ReactCrop","editDrawerSlug","PlusIcon","useTranslation","Button","baseClass","Input","props","ref","name","onChange","value","_jsxs","className","_jsx","e","target","type","defaultCrop","height","unit","width","x","y","EditUpload","fileName","fileSrc","imageCacheTag","initialCrop","initialFocalPoint","onSave","showCrop","showFocalPoint","closeModal","t","crop","setCrop","defaultFocalPosition","focalPosition","setFocalPosition","checkBounds","setCheckBounds","uncroppedPixelHeight","setUncroppedPixelHeight","uncroppedPixelWidth","setUncroppedPixelWidth","focalWrapRef","undefined","imageRef","cropRef","heightInputRef","widthInputRef","imageLoaded","setImageLoaded","onImageLoad","currentTarget","naturalHeight","naturalWidth","fineTuneCrop","dimension","intValue","parseInt","percentage","fineTuneFocalPosition","coordinate","prevPosition","saveEdits","focalPoint","heightInPixels","Number","current","widthInPixels","onDragEnd","useCallback","centerFocalPoint","containerRect","getBoundingClientRect","boundsRect","xCenter","left","yCenter","top","fileSrcToUse","title","buttonStyle","onClick","disabled","style","aspectRatio","_","c","onComplete","renderSelectionAddon","alt","onLoad","src","DraggableElement","boundsRef","containerRef","initialPosition","toFixed","children","position","setPosition","isDragging","setIsDragging","dragRef","getCoordinates","mouseXArg","mouseYArg","recenter","mouseX","mouseY","xOutOfBounds","right","yOutOfBounds","bottom","handleMouseDown","event","preventDefault","handleMouseMove","clientX","clientY","onDrop","useEffect","filter","Boolean","join","onMouseMove","onMouseDown","onMouseUp"],"sources":["../../../src/elements/EditUpload/index.tsx"],"sourcesContent":["'use client'\n\nimport type { UploadEdits } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport React, { forwardRef, useRef, useState } from 'react'\nimport ReactCrop from 'react-image-crop'\nimport 'react-image-crop/dist/ReactCrop.css'\n\nimport { editDrawerSlug } from '../../elements/Upload/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nconst baseClass = 'edit-upload'\n\ntype Props = {\n  name: string\n  onChange: (value: string) => void\n  value: string\n}\n\nconst Input = forwardRef<HTMLInputElement, Props>((props, ref) => {\n  const { name, onChange, value } = props\n\n  return (\n    <div className={`${baseClass}__input`}>\n      {name}\n      <input\n        name={name}\n        onChange={(e) => onChange(e.target.value)}\n        ref={ref}\n        type=\"number\"\n        value={value}\n      />\n    </div>\n  )\n})\n\ntype FocalPosition = {\n  x: number\n  y: number\n}\n\nexport type EditUploadProps = {\n  fileName: string\n  fileSrc: string\n  imageCacheTag?: string\n  initialCrop?: UploadEdits['crop']\n  initialFocalPoint?: FocalPosition\n  onSave?: (uploadEdits: UploadEdits) => void\n  showCrop?: boolean\n  showFocalPoint?: boolean\n}\n\nconst defaultCrop: UploadEdits['crop'] = {\n  height: 100,\n  unit: '%',\n  width: 100,\n  x: 0,\n  y: 0,\n}\n\nexport const EditUpload: React.FC<EditUploadProps> = ({\n  fileName,\n  fileSrc,\n  imageCacheTag,\n  initialCrop,\n  initialFocalPoint,\n  onSave,\n  showCrop,\n  showFocalPoint,\n}) => {\n  const { closeModal } = useModal()\n  const { t } = useTranslation()\n\n  const [crop, setCrop] = useState<UploadEdits['crop']>(() => ({\n    ...defaultCrop,\n    ...(initialCrop || {}),\n  }))\n\n  const defaultFocalPosition: FocalPosition = {\n    x: 50,\n    y: 50,\n  }\n\n  const [focalPosition, setFocalPosition] = useState<FocalPosition>(() => ({\n    ...defaultFocalPosition,\n    ...initialFocalPoint,\n  }))\n\n  const [checkBounds, setCheckBounds] = useState<boolean>(false)\n  const [uncroppedPixelHeight, setUncroppedPixelHeight] = useState<number>(0)\n  const [uncroppedPixelWidth, setUncroppedPixelWidth] = useState<number>(0)\n\n  const focalWrapRef = useRef<HTMLDivElement | undefined>(undefined)\n  const imageRef = useRef<HTMLImageElement | undefined>(undefined)\n  const cropRef = useRef<HTMLDivElement | undefined>(undefined)\n\n  const heightInputRef = useRef<HTMLInputElement | null>(null)\n  const widthInputRef = useRef<HTMLInputElement | null>(null)\n\n  const [imageLoaded, setImageLoaded] = useState<boolean>(false)\n\n  const onImageLoad = (e) => {\n    // set the default image height/width on load\n    setUncroppedPixelHeight(e.currentTarget.naturalHeight)\n    setUncroppedPixelWidth(e.currentTarget.naturalWidth)\n    setImageLoaded(true)\n  }\n\n  const fineTuneCrop = ({ dimension, value }: { dimension: 'height' | 'width'; value: string }) => {\n    const intValue = parseInt(value)\n    if (dimension === 'width' && intValue >= uncroppedPixelWidth) {\n      return null\n    }\n    if (dimension === 'height' && intValue >= uncroppedPixelHeight) {\n      return null\n    }\n\n    const percentage =\n      100 * (intValue / (dimension === 'width' ? uncroppedPixelWidth : uncroppedPixelHeight))\n\n    if (percentage === 100 || percentage === 0) {\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 = 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) {\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/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,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,CAoB9C,CAAA"}

package/dist/elements/ErrorPill/index.js

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

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

@@ -1,13 +1,13 @@
-import type { FieldMap, FieldWithPath, MappedField } from 'payload';
+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?: MappedField;
+    field?: ClientField;
     prefix?: JSX.Element | string;
 }) => JSX.Element;
 export declare const FieldSelect: React.FC<FieldSelectProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldSelect/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,KAAK,EAAE,EAAY,KAAK,GAAG,EAAY,MAAM,OAAO,CAAA;AAO3D,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,QAAQ,CAAA;IAClB,WAAW,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,IAAI,CAAA;CAC/C,CAAA;AAED,eAAO,MAAM,YAAY,oCAItB;IACD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAA;CAC9B,KAAG,GAAG,CAAC,OA8BP,CAAA;AAyED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgDlD,CAAA"}
+{"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,OA+CP,CAAA;AAqED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgDlD,CAAA"}

package/dist/elements/FieldSelect/index.js

@@ -1,146 +1,189 @@
 '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 '../../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';
-export const combineLabel = ({ customLabel, field, prefix })=>{
-    const CustomLabelToRender = field && 'CustomLabel' in field.fieldComponentProps && field.fieldComponentProps.CustomLabel !== undefined ? field.fieldComponentProps.CustomLabel : null;
-    const DefaultLabelToRender = field && 'label' in field.fieldComponentProps && field.fieldComponentProps.label ? /*#__PURE__*/ _jsx(FieldLabel, {
-        label: field.fieldComponentProps.label,
-        ...field.fieldComponentProps.labelProps || {}
-    }) : null;
-    const LabelToRender = CustomLabelToRender || DefaultLabelToRender || customLabel;
-    if (!LabelToRender) return null;
-    return /*#__PURE__*/ _jsxs(Fragment, {
-        children: [
-            prefix && /*#__PURE__*/ _jsxs(Fragment, {
-                children: [
-                    /*#__PURE__*/ _jsx("span", {
-                        style: {
-                            display: 'inline-block'
-                        },
-                        children: prefix
-                    }),
-                    ' > '
-                ]
-            }),
-            /*#__PURE__*/ _jsx("span", {
-                style: {
-                    display: 'inline-block'
-                },
-                children: LabelToRender
-            })
-        ]
-    });
+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'
+        },
+        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, include ui fields as they have `name`.
+    if ((fieldAffectsData(field) || field.type === 'ui') && (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__*/ _jsxs("div", {
-        className: baseClass,
-        children: [
-            /*#__PURE__*/ _jsx(FieldLabel, {
-                label: t('fields:selectFieldsToEdit')
-            }),
-            /*#__PURE__*/ _jsx(ReactSelect, {
-                getOptionValue: (option)=>{
-                    if (typeof option.value === 'object' && 'path' in option.value) {
-                        return String(option.value.path);
-                    }
-                    return String(option.value);
-                },
-                isMulti: true,
-                onChange: handleChange,
-                options: options
-            })
-        ]
+    $[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
+      })]
     });
+    $[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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/FieldSelect/index.tsx"],"sourcesContent":["'use client'\nimport type { FieldMap, FieldWithPath, MappedField } from 'payload'\n\nimport React, { Fragment, type JSX, useState } from 'react'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useForm } from '../../forms/Form/context.js'\nimport { createNestedClientFieldPath } from '../../forms/Form/createNestedFieldPath.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport './index.scss'\n\nconst baseClass = 'field-select'\n\nexport type FieldSelectProps = {\n  fieldMap: FieldMap\n  setSelected: (fields: FieldWithPath[]) => void\n}\n\nexport const combineLabel = ({\n  customLabel,\n  field,\n  prefix,\n}: {\n  customLabel?: string\n  field?: MappedField\n  prefix?: JSX.Element | string\n}): JSX.Element => {\n  const CustomLabelToRender =\n    field &&\n    'CustomLabel' in field.fieldComponentProps &&\n    field.fieldComponentProps.CustomLabel !== undefined\n      ? field.fieldComponentProps.CustomLabel\n      : null\n  const DefaultLabelToRender =\n    field && 'label' in field.fieldComponentProps && field.fieldComponentProps.label ? (\n      <FieldLabel\n        label={field.fieldComponentProps.label}\n        {...(field.fieldComponentProps.labelProps || {})}\n      />\n    ) : null\n\n  const LabelToRender = CustomLabelToRender || DefaultLabelToRender || customLabel\n\n  if (!LabelToRender) return null\n\n  return (\n    <Fragment>\n      {prefix && (\n        <Fragment>\n          <span style={{ display: 'inline-block' }}>{prefix}</span>\n          {' > '}\n        </Fragment>\n      )}\n      <span style={{ display: 'inline-block' }}>{LabelToRender}</span>\n    </Fragment>\n  )\n}\n\nconst reduceFields = ({\n  fieldMap,\n  labelPrefix = null,\n  path = '',\n}: {\n  fieldMap: FieldMap\n  labelPrefix?: JSX.Element | string\n  path?: string\n}): { Label: JSX.Element; value: FieldWithPath }[] => {\n  if (!fieldMap) {\n    return []\n  }\n\n  return fieldMap?.reduce((fieldsToUse, field) => {\n    const { isFieldAffectingData } = field\n    // escape for a variety of reasons\n    if (\n      isFieldAffectingData &&\n      (field.disableBulkEdit ||\n        field.unique ||\n        field.isHidden ||\n        ('readOnly' in field.fieldComponentProps && field.fieldComponentProps.readOnly))\n    ) {\n      return fieldsToUse\n    }\n\n    if (\n      !(field.type === 'array' || field.type === 'blocks') &&\n      'fieldMap' in field.fieldComponentProps\n    ) {\n      return [\n        ...fieldsToUse,\n        ...reduceFields({\n          fieldMap: field.fieldComponentProps.fieldMap,\n          labelPrefix: combineLabel({ field, prefix: labelPrefix }),\n          path: createNestedClientFieldPath(path, field),\n        }),\n      ]\n    }\n\n    if (field.type === 'tabs' && 'tabs' in field.fieldComponentProps) {\n      return [\n        ...fieldsToUse,\n        ...field.fieldComponentProps.tabs.reduce((tabFields, tab) => {\n          if ('fieldMap' in tab) {\n            const isNamedTab = 'name' in tab && tab.name\n            return [\n              ...tabFields,\n              ...reduceFields({\n                fieldMap: tab.fieldMap,\n                labelPrefix,\n                path: isNamedTab ? createNestedClientFieldPath(path, field) : path,\n              }),\n            ]\n          }\n        }, []),\n      ]\n    }\n\n    const formattedField = {\n      label: combineLabel({ field, prefix: labelPrefix }),\n      value: {\n        ...field,\n        path: createNestedClientFieldPath(path, field),\n      },\n    }\n\n    return [...fieldsToUse, formattedField]\n  }, [])\n}\n\nexport const FieldSelect: React.FC<FieldSelectProps> = ({ fieldMap, setSelected }) => {\n  const { t } = useTranslation()\n  const [options] = useState(() => reduceFields({ fieldMap }))\n\n  const { dispatchFields, getFields } = useForm()\n\n  const handleChange = (selected) => {\n    const activeFields = getFields()\n    if (selected === null) {\n      setSelected([])\n    } else {\n      setSelected(selected.map(({ value }) => value))\n    }\n\n    // remove deselected values from form state\n    if (selected === null || Object.keys(activeFields || []).length > selected.length) {\n      Object.keys(activeFields).forEach((path) => {\n        if (\n          selected === null ||\n          !selected.find((field) => {\n            return field.value.path === path\n          })\n        ) {\n          dispatchFields({\n            type: 'REMOVE',\n            path,\n          })\n        }\n      })\n    }\n  }\n\n  return (\n    <div className={baseClass}>\n      <FieldLabel label={t('fields:selectFieldsToEdit')} />\n      <ReactSelect\n        getOptionValue={(option) => {\n          if (typeof option.value === 'object' && 'path' in option.value) {\n            return String(option.value.path)\n          }\n          return String(option.value)\n        }}\n        isMulti\n        onChange={handleChange}\n        options={options}\n      />\n    </div>\n  )\n}\n"],"names":["React","Fragment","useState","FieldLabel","useForm","createNestedClientFieldPath","useTranslation","ReactSelect","baseClass","combineLabel","customLabel","field","prefix","CustomLabelToRender","fieldComponentProps","CustomLabel","undefined","DefaultLabelToRender","label","labelProps","LabelToRender","span","style","display","reduceFields","fieldMap","labelPrefix","path","reduce","fieldsToUse","isFieldAffectingData","disableBulkEdit","unique","isHidden","readOnly","type","tabs","tabFields","tab","isNamedTab","name","formattedField","value","FieldSelect","setSelected","t","options","dispatchFields","getFields","handleChange","selected","activeFields","map","Object","keys","length","forEach","find","div","className","getOptionValue","option","String","isMulti","onChange"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","fieldAffectsData","fieldHasSubFields","React","Fragment","useState","FieldLabel","useForm","createNestedClientFieldPath","RenderComponent","useTranslation","ReactSelect","baseClass","combineLabel","customLabel","field","prefix","CustomLabelToRender","admin","components","Label","undefined","DefaultLabelToRender","label","type","Component","props","LabelToRender","RenderedComponent","_jsxs","_jsx","style","display","mappedComponent","reduceFields","fields","labelPrefix","path","reduce","fieldsToUse","disableBulkEdit","unique","hidden","readOnly","tabs","tabFields","tab","isNamedTab","name","formattedField","value","FieldSelect","t0","$","setSelected","t","t1","options","dispatchFields","getFields","t2","selected","activeFields","map","t3","Object","keys","length","forEach","find","handleChange","className","children","getOptionValue","_temp","isMulti","onChange","option","String"],"sources":["../../../src/elements/FieldSelect/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, FieldWithPath, MappedComponent } from 'payload'\n\nimport { fieldAffectsData, fieldHasSubFields } from 'payload/shared'\nimport React, { Fragment, type JSX, useState } from 'react'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useForm } from '../../forms/Form/context.js'\nimport { createNestedClientFieldPath } from '../../forms/Form/createNestedClientFieldPath.js'\nimport { RenderComponent } from '../../providers/Config/RenderComponent.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport './index.scss'\n\nconst baseClass = 'field-select'\n\nexport type FieldSelectProps = {\n  readonly fields: ClientField[]\n  readonly setSelected: (fields: FieldWithPath[]) => void\n}\n\nexport const combineLabel = ({\n  customLabel,\n  field,\n  prefix,\n}: {\n  customLabel?: string\n  field?: ClientField\n  prefix?: JSX.Element | string\n}): JSX.Element => {\n  const CustomLabelToRender: MappedComponent =\n    field?.admin?.components &&\n    'Label' in field.admin.components &&\n    field?.admin?.components?.Label !== undefined\n      ? field.admin.components.Label\n      : null\n\n  const DefaultLabelToRender: MappedComponent =\n    field && 'label' in field && field.label\n      ? {\n          type: 'client',\n          Component: FieldLabel,\n          props: {\n            Label:\n              field.admin?.components && 'Label' in field.admin.components\n                ? field.admin?.components?.Label\n                : null,\n            label: field.label,\n          },\n        }\n      : null\n\n  const LabelToRender: MappedComponent = CustomLabelToRender ||\n    DefaultLabelToRender || {\n      type: 'client',\n      Component: null,\n      RenderedComponent: customLabel,\n    }\n\n  if (!LabelToRender) {\n    return null\n  }\n\n  return (\n    <Fragment>\n      {prefix && (\n        <Fragment>\n          <span style={{ display: 'inline-block' }}>{prefix}</span>\n          {' > '}\n        </Fragment>\n      )}\n      <span style={{ display: 'inline-block' }}>\n        <RenderComponent mappedComponent={LabelToRender} />\n      </span>\n    </Fragment>\n  )\n}\n\nconst reduceFields = ({\n  fields,\n  labelPrefix = null,\n  path = '',\n}: {\n  fields: ClientField[]\n  labelPrefix?: JSX.Element | string\n  path?: string\n}): { Label: JSX.Element; value: FieldWithPath }[] => {\n  if (!fields) {\n    return []\n  }\n\n  return fields?.reduce((fieldsToUse, field) => {\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        field.admin.hidden ||\n        ('readOnly' in field && field.readOnly))\n    ) {\n      return fieldsToUse\n    }\n\n    if (!(field.type === 'array' || field.type === 'blocks') && fieldHasSubFields(field)) {\n      return [\n        ...fieldsToUse,\n        ...reduceFields({\n          fields: field.fields,\n          labelPrefix: combineLabel({ field, prefix: labelPrefix }),\n          path: createNestedClientFieldPath(path, field),\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              ...reduceFields({\n                fields: tab.fields,\n                labelPrefix,\n                path: isNamedTab ? createNestedClientFieldPath(path, field) : path,\n              }),\n            ]\n          }\n        }, []),\n      ]\n    }\n\n    const formattedField = {\n      label: combineLabel({ field, prefix: labelPrefix }),\n      value: {\n        ...field,\n        path: createNestedClientFieldPath(path, field),\n      },\n    }\n\n    return [...fieldsToUse, formattedField]\n  }, [])\n}\n\nexport const FieldSelect: React.FC<FieldSelectProps> = ({ fields, setSelected }) => {\n  const { t } = useTranslation()\n  const [options] = useState(() => reduceFields({ fields }))\n\n  const { dispatchFields, getFields } = useForm()\n\n  const handleChange = (selected) => {\n    const activeFields = getFields()\n    if (selected === null) {\n      setSelected([])\n    } else {\n      setSelected(selected.map(({ value }) => value))\n    }\n\n    // remove deselected values from form state\n    if (selected === null || Object.keys(activeFields || []).length > selected.length) {\n      Object.keys(activeFields).forEach((path) => {\n        if (\n          selected === null ||\n          !selected.find((field) => {\n            return field.value.path === path\n          })\n        ) {\n          dispatchFields({\n            type: 'REMOVE',\n            path,\n          })\n        }\n      })\n    }\n  }\n\n  return (\n    <div className={baseClass}>\n      <FieldLabel field={null} label={t('fields:selectFieldsToEdit')} />\n      <ReactSelect\n        getOptionValue={(option) => {\n          if (typeof option.value === 'object' && 'path' in option.value) {\n            return String(option.value.path)\n          }\n          return String(option.value)\n        }}\n        isMulti\n        onChange={handleChange}\n        options={options}\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,gBAAgB,EAAEC,iBAAiB,QAAQ;AACpD,OAAOC,KAAA,IAASC,QAAQ,EAAYC,QAAQ,QAAQ;AAEpD,SAASC,UAAU,QAAQ;AAC3B,SAASC,OAAO,QAAQ;AACxB,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,eAAe,QAAQ;AAChC,SAASC,cAAc,QAAQ;AAC/B,SAASC,WAAW,QAAQ;AAC5B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAOlB,OAAO,MAAMC,YAAA,GAAeA,CAAC;EAC3BC,WAAW;EACXC,KAAK;EACLC;AAAM,CAKP;EACC,MAAMC,mBAAA,GACJF,KAAA,EAAOG,KAAA,EAAOC,UAAA,IACd,WAAWJ,KAAA,CAAMG,KAAK,CAACC,UAAU,IACjCJ,KAAA,EAAOG,KAAA,EAAOC,UAAA,EAAYC,KAAA,KAAUC,SAAA,GAChCN,KAAA,CAAMG,KAAK,CAACC,UAAU,CAACC,KAAK,GAC5B;EAEN,MAAME,oBAAA,GACJP,KAAA,IAAS,WAAWA,KAAA,IAASA,KAAA,CAAMQ,KAAK,GACpC;IACEC,IAAA,EAAM;IACNC,SAAA,EAAWnB,UAAA;IACXoB,KAAA,EAAO;MACLN,KAAA,EACEL,KAAA,CAAMG,KAAK,EAAEC,UAAA,IAAc,WAAWJ,KAAA,CAAMG,KAAK,CAACC,UAAU,GACxDJ,KAAA,CAAMG,KAAK,EAAEC,UAAA,EAAYC,KAAA,GACzB;MACNG,KAAA,EAAOR,KAAA,CAAMQ;IACf;EACF,IACA;EAEN,MAAMI,aAAA,GAAiCV,mBAAA,IACrCK,oBAAA,IAAwB;IACtBE,IAAA,EAAM;IACNC,SAAA,EAAW;IACXG,iBAAA,EAAmBd;EACrB;EAEF,IAAI,CAACa,aAAA,EAAe;IAClB,OAAO;EACT;EAEA,oBACEE,KAAA,CAACzB,QAAA;eACEY,MAAA,iBACCa,KAAA,CAACzB,QAAA;8BACC0B,IAAA,CAAC;QAAKC,KAAA,EAAO;UAAEC,OAAA,EAAS;QAAe;kBAAIhB;UAC1C;qBAGLc,IAAA,CAAC;MAAKC,KAAA,EAAO;QAAEC,OAAA,EAAS;MAAe;gBACrC,aAAAF,IAAA,CAACrB,eAAA;QAAgBwB,eAAA,EAAiBN;;;;AAI1C;AAEA,MAAMO,YAAA,GAAeA,CAAC;EACpBC,MAAM;EACNC,WAAA,GAAc,IAAI;EAClBC,IAAA,GAAO;AAAE,CAKV;EACC,IAAI,CAACF,MAAA,EAAQ;IACX,OAAO,EAAE;EACX;EAEA,OAAOA,MAAA,EAAQG,MAAA,CAAO,CAACC,WAAA,EAAaxB,KAAA;IAClC;IACA,IACE,CAACd,gBAAA,CAAiBc,KAAA,KAAUA,KAAA,CAAMS,IAAI,KAAK,IAAG,MAC7CT,KAAA,CAAMG,KAAK,CAACsB,eAAe,IAC1BzB,KAAA,CAAM0B,MAAM,IACZ1B,KAAA,CAAMG,KAAK,CAACwB,MAAM,IACjB,cAAc3B,KAAA,IAASA,KAAA,CAAM4B,QAAQ,GACxC;MACA,OAAOJ,WAAA;IACT;IAEA,IAAI,EAAExB,KAAA,CAAMS,IAAI,KAAK,WAAWT,KAAA,CAAMS,IAAI,KAAK,QAAO,KAAMtB,iBAAA,CAAkBa,KAAA,GAAQ;MACpF,OAAO,C,GACFwB,WAAA,E,GACAL,YAAA,CAAa;QACdC,MAAA,EAAQpB,KAAA,CAAMoB,MAAM;QACpBC,WAAA,EAAavB,YAAA,CAAa;UAAEE,KAAA;UAAOC,MAAA,EAAQoB;QAAY;QACvDC,IAAA,EAAM7B,2BAAA,CAA4B6B,IAAA,EAAMtB,KAAA;MAC1C,GACD;IACH;IAEA,IAAIA,KAAA,CAAMS,IAAI,KAAK,UAAU,UAAUT,KAAA,EAAO;MAC5C,OAAO,C,GACFwB,WAAA,E,GACAxB,KAAA,CAAM6B,IAAI,CAACN,MAAM,CAAC,CAACO,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,GACAX,YAAA,CAAa;YACdC,MAAA,EAAQW,GAAA,CAAIX,MAAM;YAClBC,WAAA;YACAC,IAAA,EAAMU,UAAA,GAAavC,2BAAA,CAA4B6B,IAAA,EAAMtB,KAAA,IAASsB;UAChE,GACD;QACH;MACF,GAAG,EAAE,EACN;IACH;IAEA,MAAMY,cAAA,GAAiB;MACrB1B,KAAA,EAAOV,YAAA,CAAa;QAAEE,KAAA;QAAOC,MAAA,EAAQoB;MAAY;MACjDc,KAAA,EAAO;QACL,GAAGnC,KAAK;QACRsB,IAAA,EAAM7B,2BAAA,CAA4B6B,IAAA,EAAMtB,KAAA;MAC1C;IACF;IAEA,OAAO,C,GAAIwB,WAAA,EAAaU,cAAA,CAAe;EACzC,GAAG,EAAE;AACP;AAEA,OAAO,MAAME,WAAA,GAA0CC,EAAA;EAAA,MAAAC,CAAA,GAAArD,EAAA;EAAC;IAAAmC,MAAA;IAAAmB;EAAA,IAAAF,EAAuB;EAC7E;IAAAG;EAAA,IAAc7C,cAAA;EAAA,IAAA8C,EAAA;EAAA,IAAAH,CAAA,QAAAlB,MAAA;IACaqB,EAAA,GAAAA,CAAA,KAAMtB,YAAA;MAAAC;IAAA,CAAsB;IAAAkB,CAAA,MAAAlB,MAAA;IAAAkB,CAAA,MAAAG,EAAA;EAAA;IAAAA,EAAA,GAAAH,CAAA;EAAA;EAAvD,OAAAI,OAAA,IAAkBpD,QAAA,CAASmD,EAA4B;EAEvD;IAAAE,cAAA;IAAAC;EAAA,IAAsCpD,OAAA;EAAA,IAAAqD,EAAA;EAAA,IAAAP,CAAA,QAAAM,SAAA,IAAAN,CAAA,QAAAC,WAAA,IAAAD,CAAA,QAAAK,cAAA;IAEjBE,EAAA,GAAAC,QAAA;MACnB,MAAAC,YAAA,GAAqBH,SAAA;MAAA,IACjBE,QAAA,SAAa;QACfP,WAAA,GAAc;MAAA;QAEdA,WAAA,CAAYO,QAAA,CAAAE,GAAA,CAAAC,EAAA;UAAc;YAAAd;UAAA,IAAAc,EAAS;UAAA,OAAKd,KAAA;QAAA;MAAA;MAAA,IAItCW,QAAA,SAAa,IAAQI,MAAA,CAAAC,IAAA,CAAYJ,YAAA,MAAkB,EAAAK,MAAA,GAAWN,QAAA,CAAAM,MAAe;QAC/EF,MAAA,CAAAC,IAAA,CAAYJ,YAAA,EAAAM,OAAA,CAAA/B,IAAA;UAAA,IAERwB,QAAA,SAAa,KACZA,QAAA,CAAAQ,IAAA,CAAAtD,KAAA,IACQA,KAAA,CAAAmC,KAAA,CAAAb,IAAA,KAAqBA,IAC9B;YAEAqB,cAAA;cAAAlC,IAAA,EACQ;cAAAa;YAAA,CAER;UAAA;QAAA,CAEJ;MAAA;IAAA;IAEJgB,CAAA,MAAAM,SAAA;IAAAN,CAAA,MAAAC,WAAA;IAAAD,CAAA,MAAAK,cAAA;IAAAL,CAAA,MAAAO,EAAA;EAAA;IAAAA,EAAA,GAAAP,CAAA;EAAA;EAxBA,MAAAiB,YAAA,GAAqBV,EAwBrB;EAAA,IAAAI,EAAA;EAAA,IAAAX,CAAA,QAAAE,CAAA,IAAAF,CAAA,QAAAiB,YAAA,IAAAjB,CAAA,QAAAI,OAAA;IAGEO,EAAA,GAAAnC,KAAA,CAAC;MAAA0C,SAAA,EAAA3D,SAAA;MAAA4D,QAAA,GACC1C,IAAA,CAAAxB,UAAA;QAAAS,KAAA;QAAAQ,KAAA,EAAgCgC,CAAA,CAAE;MAAA,C,GAClCzB,IAAA,CAAAnB,WAAA;QAAA8D,cAAA,EAAAC,KAAA;QAAAC,OAAA;QAAAC,QAAA,EAQYN,YAAA;QAAAb;MAAA,C;;;;;;;;;SAVdO,E;CAeJ;AAhDuD,SAAAU,MAAAG,MAAA;EAAA,IAqCzC,OAAOA,MAAA,CAAA3B,KAAA,KAAiB,YAAY,UAAU2B,MAAA,CAAA3B,KAAY;IAAA,OACrD4B,MAAA,CAAOD,MAAA,CAAA3B,KAAA,CAAAb,IAAiB;EAAA;EAAA,OAE1ByC,MAAA,CAAOD,MAAA,CAAA3B,KAAY;AAAA","ignoreList":[]}