@payloadcms/ui 4.0.0-internal.d28e9fb → 4.0.0-internal.d3909a9

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useModal","React","useRef","useState","ReactCrop","editDrawerSlug","PlusIcon","useTranslation","appendCacheTag","Button","baseClass","Input","props","name","disabled","onChange","ref","value","_jsxs","className","_jsx","e","target","type","defaultCrop","height","unit","width","x","y","EditUpload","fileName","fileSrc","imageCacheTag","initialCrop","initialFocalPoint","onSave","showCrop","showFocalPoint","closeModal","t","crop","setCrop","defaultFocalPosition","focalPosition","setFocalPosition","checkBounds","setCheckBounds","uncroppedPixelHeight","setUncroppedPixelHeight","uncroppedPixelWidth","setUncroppedPixelWidth","focalWrapRef","undefined","imageRef","cropRef","heightInputRef","widthInputRef","imageLoaded","setImageLoaded","onImageLoad","currentTarget","naturalHeight","naturalWidth","fineTuneCrop","dimension","intValue","parseInt","percentage","prev","fineTuneFocalPosition","coordinate","prevPosition","saveEdits","focalPoint","heightInPixels","Number","current","widthInPixels","onDragEnd","useCallback","centerFocalPoint","containerRect","getBoundingClientRect","boundsRect","xCenter","left","yCenter","top","fileSrcToUse","title","buttonStyle","onClick","style","aspectRatio","_","c","onComplete","renderSelectionAddon","alt","onLoad","src","DraggableElement","boundsRef","containerRef","initialPosition","toFixed","children","position","setPosition","isDragging","setIsDragging","dragRef","getCoordinates","mouseXArg","mouseYArg","recenter","mouseX","mouseY","xOutOfBounds","right","yOutOfBounds","bottom","handleMouseDown","event","preventDefault","handleMouseMove","clientX","clientY","onDrop","useEffect","filter","Boolean","join","onMouseMove","onMouseDown","onMouseUp"],"sources":["../../../src/elements/EditUpload/index.tsx"],"sourcesContent":["'use client'\n\nimport type { UploadEdits } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport React, { useRef, useState } from 'react'\nimport ReactCrop from 'react-image-crop'\n\nimport { editDrawerSlug } from '../../elements/Upload/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { appendCacheTag } from '../../utilities/appendCacheTag.js'\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nconst baseClass = 'edit-upload'\n\ntype Props = {\n  disabled?: boolean\n  name: string\n  onChange: (value: string) => void\n  ref?: React.RefObject<HTMLInputElement>\n  value: string\n}\n\nconst Input: React.FC<Props> = (props) => {\n  const { name, disabled, onChange, ref, value } = props\n\n  return (\n    <div className={`${baseClass}__input`}>\n      {name}\n      <input\n        disabled={disabled}\n        name={name}\n        onChange={(e) => onChange(e.target.value)}\n        ref={ref}\n        type=\"number\"\n        value={value}\n      />\n    </div>\n  )\n}\n\ntype FocalPosition = {\n  x: number\n  y: number\n}\n\nexport type EditUploadProps = {\n  fileName: string\n  fileSrc: string\n  imageCacheTag?: string\n  initialCrop?: UploadEdits['crop']\n  initialFocalPoint?: FocalPosition\n  onSave?: (uploadEdits: UploadEdits) => void\n  showCrop?: boolean\n  showFocalPoint?: boolean\n}\n\nconst defaultCrop: UploadEdits['crop'] = {\n  height: 100,\n  unit: '%',\n  width: 100,\n  x: 0,\n  y: 0,\n}\n\nexport const EditUpload: React.FC<EditUploadProps> = ({\n  fileName,\n  fileSrc,\n  imageCacheTag,\n  initialCrop,\n  initialFocalPoint,\n  onSave,\n  showCrop,\n  showFocalPoint,\n}) => {\n  const { closeModal } = useModal()\n  const { t } = useTranslation()\n\n  const [crop, setCrop] = useState<UploadEdits['crop']>(() => ({\n    ...defaultCrop,\n    ...(initialCrop || {}),\n  }))\n\n  const defaultFocalPosition: FocalPosition = {\n    x: 50,\n    y: 50,\n  }\n\n  const [focalPosition, setFocalPosition] = useState<FocalPosition>(() => ({\n    ...defaultFocalPosition,\n    ...initialFocalPoint,\n  }))\n\n  const [checkBounds, setCheckBounds] = useState<boolean>(false)\n  const [uncroppedPixelHeight, setUncroppedPixelHeight] = useState<number>(0)\n  const [uncroppedPixelWidth, setUncroppedPixelWidth] = useState<number>(0)\n\n  const focalWrapRef = useRef<HTMLDivElement | undefined>(undefined)\n  const imageRef = useRef<HTMLImageElement | undefined>(undefined)\n  const cropRef = useRef<HTMLDivElement | undefined>(undefined)\n\n  const heightInputRef = useRef<HTMLInputElement | null>(null)\n  const widthInputRef = useRef<HTMLInputElement | null>(null)\n\n  const [imageLoaded, setImageLoaded] = useState<boolean>(false)\n\n  const onImageLoad = (e) => {\n    // set the default image height/width on load\n    setUncroppedPixelHeight(e.currentTarget.naturalHeight)\n    setUncroppedPixelWidth(e.currentTarget.naturalWidth)\n    setImageLoaded(true)\n  }\n\n  const fineTuneCrop = ({ dimension, value }: { dimension: 'height' | 'width'; value: string }) => {\n    const intValue = parseInt(value)\n\n    const percentage =\n      100 * (intValue / (dimension === 'width' ? uncroppedPixelWidth : uncroppedPixelHeight))\n\n    if (percentage <= 0 || percentage > 100) {\n      return null\n    }\n\n    setCrop((prev) => ({\n      ...prev,\n      [dimension]: percentage,\n    }))\n  }\n\n  const fineTuneFocalPosition = ({\n    coordinate,\n    value,\n  }: {\n    coordinate: 'x' | 'y'\n    value: string\n  }) => {\n    const intValue = parseInt(value)\n    if (intValue >= 0 && intValue <= 100) {\n      setFocalPosition((prevPosition) => ({ ...prevPosition, [coordinate]: intValue }))\n    }\n  }\n\n  const saveEdits = () => {\n    if (typeof onSave === 'function') {\n      onSave({\n        crop: crop ? crop : undefined,\n        focalPoint: focalPosition,\n        heightInPixels: Number(heightInputRef?.current?.value ?? uncroppedPixelHeight),\n        widthInPixels: Number(widthInputRef?.current?.value ?? uncroppedPixelWidth),\n      })\n    }\n    closeModal(editDrawerSlug)\n  }\n\n  const onDragEnd = React.useCallback(({ x, y }) => {\n    setFocalPosition({ x, y })\n    setCheckBounds(false)\n  }, [])\n\n  const centerFocalPoint = () => {\n    const containerRect = focalWrapRef.current.getBoundingClientRect()\n    const boundsRect = showCrop\n      ? cropRef.current.getBoundingClientRect()\n      : imageRef.current.getBoundingClientRect()\n    const xCenter =\n      ((boundsRect.left - containerRect.left + boundsRect.width / 2) / containerRect.width) * 100\n    const yCenter =\n      ((boundsRect.top - containerRect.top + boundsRect.height / 2) / containerRect.height) * 100\n    setFocalPosition({ x: xCenter, y: yCenter })\n  }\n\n  const fileSrcToUse = fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : fileSrc\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__header`}>\n        <h2 title={`${t('general:editing')} ${fileName}`}>\n          {t('general:editing')} {fileName}\n        </h2>\n        <div className={`${baseClass}__actions`}>\n          <Button\n            aria-label={t('general:cancel')}\n            buttonStyle=\"secondary\"\n            className={`${baseClass}__cancel`}\n            onClick={() => closeModal(editDrawerSlug)}\n          >\n            {t('general:cancel')}\n          </Button>\n          <Button\n            aria-label={t('general:applyChanges')}\n            buttonStyle=\"primary\"\n            className={`${baseClass}__save`}\n            disabled={!imageLoaded}\n            onClick={saveEdits}\n          >\n            {t('general:applyChanges')}\n          </Button>\n        </div>\n      </div>\n      <div className={`${baseClass}__toolWrap`}>\n        <div className={`${baseClass}__crop`}>\n          <div\n            className={`${baseClass}__focal-wrapper`}\n            ref={focalWrapRef}\n            style={{\n              aspectRatio: `${uncroppedPixelWidth / uncroppedPixelHeight}`,\n            }}\n          >\n            {showCrop ? (\n              <ReactCrop\n                className={`${baseClass}__reactCrop`}\n                crop={crop}\n                onChange={(_, c) => setCrop(c)}\n                onComplete={() => setCheckBounds(true)}\n                renderSelectionAddon={() => {\n                  return <div className={`${baseClass}__crop-window`} ref={cropRef} />\n                }}\n              >\n                <img\n                  alt={t('upload:setCropArea')}\n                  onLoad={onImageLoad}\n                  ref={imageRef}\n                  src={fileSrcToUse}\n                />\n              </ReactCrop>\n            ) : (\n              <img\n                alt={t('upload:setFocalPoint')}\n                onLoad={onImageLoad}\n                ref={imageRef}\n                src={fileSrcToUse}\n              />\n            )}\n            {showFocalPoint && (\n              <DraggableElement\n                boundsRef={showCrop ? cropRef : imageRef}\n                checkBounds={showCrop ? checkBounds : false}\n                className={`${baseClass}__focalPoint`}\n                containerRef={focalWrapRef}\n                initialPosition={focalPosition}\n                onDragEnd={onDragEnd}\n                setCheckBounds={showCrop ? setCheckBounds : false}\n              >\n                <PlusIcon />\n              </DraggableElement>\n            )}\n          </div>\n        </div>\n        {(showCrop || showFocalPoint) && (\n          <div className={`${baseClass}__sidebar`}>\n            {showCrop && (\n              <div className={`${baseClass}__groupWrap`}>\n                <div>\n                  <div className={`${baseClass}__titleWrap`}>\n                    <h3>{t('upload:crop')}</h3>\n                    <Button\n                      buttonStyle=\"none\"\n                      className={`${baseClass}__reset`}\n                      onClick={() =>\n                        setCrop({\n                          height: 100,\n                          unit: '%',\n                          width: 100,\n                          x: 0,\n                          y: 0,\n                        })\n                      }\n                    >\n                      {t('general:reset')}\n                    </Button>\n                  </div>\n                </div>\n                <span className={`${baseClass}__description`}>\n                  {t('upload:cropToolDescription')}\n                </span>\n                <div className={`${baseClass}__inputsWrap`}>\n                  <Input\n                    disabled={!imageLoaded}\n                    name={`${t('upload:width')} (px)`}\n                    onChange={(value) => fineTuneCrop({ dimension: 'width', value })}\n                    ref={widthInputRef}\n                    value={((crop.width / 100) * uncroppedPixelWidth).toFixed(0)}\n                  />\n                  <Input\n                    disabled={!imageLoaded}\n                    name={`${t('upload:height')} (px)`}\n                    onChange={(value) => fineTuneCrop({ dimension: 'height', value })}\n                    ref={heightInputRef}\n                    value={((crop.height / 100) * uncroppedPixelHeight).toFixed(0)}\n                  />\n                </div>\n              </div>\n            )}\n\n            {showFocalPoint && (\n              <div className={`${baseClass}__groupWrap`}>\n                <div>\n                  <div className={`${baseClass}__titleWrap`}>\n                    <h3>{t('upload:focalPoint')}</h3>\n                    <Button\n                      buttonStyle=\"none\"\n                      className={`${baseClass}__reset`}\n                      onClick={centerFocalPoint}\n                    >\n                      {t('general:reset')}\n                    </Button>\n                  </div>\n                </div>\n                <span className={`${baseClass}__description`}>\n                  {t('upload:focalPointDescription')}\n                </span>\n                <div className={`${baseClass}__inputsWrap`}>\n                  <Input\n                    name=\"X %\"\n                    onChange={(value) => fineTuneFocalPosition({ coordinate: 'x', value })}\n                    value={focalPosition.x.toFixed(0)}\n                  />\n                  <Input\n                    name=\"Y %\"\n                    onChange={(value) => fineTuneFocalPosition({ coordinate: 'y', value })}\n                    value={focalPosition.y.toFixed(0)}\n                  />\n                </div>\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst DraggableElement = ({\n  boundsRef,\n  checkBounds,\n  children,\n  className,\n  containerRef,\n  initialPosition = { x: 50, y: 50 },\n  onDragEnd,\n  setCheckBounds,\n}) => {\n  const [position, setPosition] = useState({ x: initialPosition.x, y: initialPosition.y })\n  const [isDragging, setIsDragging] = useState(false)\n  const dragRef = useRef<HTMLButtonElement | undefined>(undefined)\n\n  const getCoordinates = React.useCallback(\n    (mouseXArg?: number, mouseYArg?: number, recenter?: boolean) => {\n      const containerRect = containerRef.current.getBoundingClientRect()\n      const boundsRect = boundsRef.current.getBoundingClientRect()\n      const mouseX = mouseXArg ?? boundsRect.left\n      const mouseY = mouseYArg ?? boundsRect.top\n\n      const xOutOfBounds = mouseX < boundsRect.left || mouseX > boundsRect.right\n      const yOutOfBounds = mouseY < boundsRect.top || mouseY > boundsRect.bottom\n\n      let x = ((mouseX - containerRect.left) / containerRect.width) * 100\n      let y = ((mouseY - containerRect.top) / containerRect.height) * 100\n      const xCenter =\n        ((boundsRect.left - containerRect.left + boundsRect.width / 2) / containerRect.width) * 100\n      const yCenter =\n        ((boundsRect.top - containerRect.top + boundsRect.height / 2) / containerRect.height) * 100\n      if (xOutOfBounds || yOutOfBounds) {\n        setIsDragging(false)\n        if (mouseX < boundsRect.left) {\n          x = ((boundsRect.left - containerRect.left) / containerRect.width) * 100\n        } else if (mouseX > boundsRect.right) {\n          x =\n            ((containerRect.width - (containerRect.right - boundsRect.right)) /\n              containerRect.width) *\n            100\n        }\n\n        if (mouseY < boundsRect.top) {\n          y = ((boundsRect.top - containerRect.top) / containerRect.height) * 100\n        } else if (mouseY > boundsRect.bottom) {\n          y =\n            ((containerRect.height - (containerRect.bottom - boundsRect.bottom)) /\n              containerRect.height) *\n            100\n        }\n\n        if (recenter) {\n          x = xOutOfBounds ? xCenter : x\n          y = yOutOfBounds ? yCenter : y\n        }\n      }\n\n      return { x, y }\n    },\n    [boundsRef, containerRef],\n  )\n\n  const handleMouseDown = (event) => {\n    event.preventDefault()\n    setIsDragging(true)\n  }\n\n  const handleMouseMove = (event) => {\n    if (!isDragging) {\n      return null\n    }\n    const { x, y } = getCoordinates(event.clientX, event.clientY)\n\n    setPosition({ x, y })\n  }\n\n  const onDrop = () => {\n    setIsDragging(false)\n    onDragEnd(position)\n  }\n\n  React.useEffect(() => {\n    if (isDragging || !dragRef.current) {\n      return\n    }\n    if (checkBounds) {\n      const { height, left, top, width } = dragRef.current.getBoundingClientRect()\n      const { x, y } = getCoordinates(left + width / 2, top + height / 2, true)\n      onDragEnd({ x, y })\n      setPosition({ x, y })\n      setCheckBounds(false)\n      return\n    }\n  }, [getCoordinates, isDragging, checkBounds, setCheckBounds, position.x, position.y, onDragEnd])\n\n  React.useEffect(() => {\n    setPosition({ x: initialPosition.x, y: initialPosition.y })\n  }, [initialPosition.x, initialPosition.y])\n\n  return (\n    <div\n      className={[\n        `${baseClass}__draggable-container`,\n        isDragging && `${baseClass}__draggable-container--dragging`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onMouseMove={handleMouseMove}\n    >\n      <button\n        className={[`${baseClass}__draggable`, className].filter(Boolean).join(' ')}\n        onMouseDown={handleMouseDown}\n        onMouseUp={onDrop}\n        ref={dragRef}\n        style={{ left: `${position.x}%`, top: `${position.y}%` }}\n        type=\"button\"\n      >\n        {children}\n      </button>\n      <div />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useModal","React","useRef","useState","ReactCrop","editDrawerSlug","NumberInput","PlusIcon","ResetIcon","useTranslation","appendCacheTag","Button","DialogFooter","DialogHeader","DialogModal","baseClass","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","imageLoaded","setImageLoaded","onImageLoad","e","currentTarget","naturalHeight","naturalWidth","fineTuneCrop","dimension","value","intValue","parseInt","Number","isNaN","percentage","prev","fineTuneFocalPosition","coordinate","prevPosition","saveEdits","focalPoint","heightInPixels","Math","round","widthInPixels","onDragEnd","useCallback","centerFocalPoint","fileSrcToUse","cropWidthPx","toFixed","cropHeightPx","_jsxs","className","closeOnBlur","size","slug","_jsx","showClose","title","ref","style","aspectRatio","ariaLabels","cropArea","eDragHandle","nDragHandle","neDragHandle","nwDragHandle","sDragHandle","seDragHandle","swDragHandle","wDragHandle","onChange","_","c","onComplete","renderSelectionAddon","alt","onLoad","src","DraggableElement","boundsRef","containerRef","initialPosition","onClick","type","ariaLabel","target","path","prefix","readOnly","max","min","suffix","buttonStyle","disabled","children","position","setPosition","isDragging","setIsDragging","dragRef","positionRef","current","getCoordinates","mouseX","mouseY","containerRect","getBoundingClientRect","left","top","handleMouseDown","event","preventDefault","handleKeyDown","altKey","ctrlKey","metaKey","step","shiftKey","key","stopPropagation","nextPosition","useEffect","handleMove","clientX","clientY","handleUp","document","addEventListener","removeEventListener","filter","Boolean","join","onKeyDown","onMouseDown"],"sources":["../../../src/elements/EditUpload/index.tsx"],"sourcesContent":["'use client'\n\nimport type { UploadEdits } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport React, { useRef, useState } from 'react'\nimport ReactCrop from 'react-image-crop'\n\nimport { editDrawerSlug } from '../../elements/Upload/index.js'\nimport { NumberInput } from '../../fields/Number/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { ResetIcon } from '../../icons/Reset/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { appendCacheTag } from '../../utilities/appendCacheTag.js'\nimport { Button } from '../Button/index.js'\nimport { DialogFooter, DialogHeader, DialogModal } from '../Dialog/index.js'\nimport './index.css'\nimport './library.css'\n\nconst baseClass = 'edit-upload'\n\ntype FocalPosition = {\n  x: number\n  y: number\n}\n\nexport type EditUploadProps = {\n  fileName: string\n  fileSrc: string\n  imageCacheTag?: false | 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 = { x: 50, y: 50 }\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 [imageLoaded, setImageLoaded] = useState<boolean>(false)\n\n  const onImageLoad = (e) => {\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 (Number.isNaN(intValue)) {\n      return null\n    }\n    const percentage =\n      100 * (intValue / (dimension === 'width' ? uncroppedPixelWidth : uncroppedPixelHeight))\n    if (percentage <= 0 || percentage > 100) {\n      return null\n    }\n    setCrop((prev) => ({ ...prev, [dimension]: percentage }))\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: Math.round((crop.height / 100) * uncroppedPixelHeight),\n        widthInPixels: Math.round((crop.width / 100) * 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    setFocalPosition({ x: 50, y: 50 })\n  }\n\n  const fileSrcToUse = fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : undefined\n\n  const cropWidthPx = ((crop.width / 100) * uncroppedPixelWidth).toFixed(0)\n  const cropHeightPx = ((crop.height / 100) * uncroppedPixelHeight).toFixed(0)\n\n  return (\n    <DialogModal\n      className={`${baseClass}__dialog`}\n      closeOnBlur={false}\n      size=\"large\"\n      slug={editDrawerSlug}\n    >\n      <DialogHeader showClose title={`${t('general:editing')} ${fileName}`} />\n      <div className={`${baseClass}__body`}>\n        <div className={`${baseClass}__content`}>\n          {/* Canvas area */}\n          <div className={`${baseClass}__crop`}>\n            <div\n              className={`${baseClass}__focal-wrapper`}\n              ref={focalWrapRef}\n              style={{ aspectRatio: `${uncroppedPixelWidth / uncroppedPixelHeight}` }}\n            >\n              {showCrop ? (\n                <ReactCrop\n                  ariaLabels={{\n                    cropArea: t('upload:setCropArea'),\n                    eDragHandle: t('upload:cropRight'),\n                    nDragHandle: t('upload:cropTop'),\n                    neDragHandle: t('upload:cropTopRight'),\n                    nwDragHandle: t('upload:cropTopLeft'),\n                    sDragHandle: t('upload:cropBottom'),\n                    seDragHandle: t('upload:cropBottomRight'),\n                    swDragHandle: t('upload:cropBottomLeft'),\n                    wDragHandle: t('upload:cropLeft'),\n                  }}\n                  className={`${baseClass}__reactCrop`}\n                  crop={crop}\n                  onChange={(_, c) => setCrop(c)}\n                  onComplete={() => setCheckBounds(true)}\n                  renderSelectionAddon={() => (\n                    <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\n          {/* Sidebar */}\n          {(showCrop || showFocalPoint) && (\n            <div className={`${baseClass}__sidebar`}>\n              {showCrop && (\n                <div className={`${baseClass}__section`}>\n                  <div className={`${baseClass}__section-header`}>\n                    <h3 className={`${baseClass}__section-title`}>{t('upload:crop')}</h3>\n                    <button\n                      aria-label={`${t('general:reset')}: ${t('upload:crop')}`}\n                      className={`${baseClass}__reset`}\n                      onClick={() => setCrop({ height: 100, unit: '%', width: 100, x: 0, y: 0 })}\n                      type=\"button\"\n                    >\n                      <ResetIcon />\n                    </button>\n                  </div>\n                  <div className={`${baseClass}__fieldset`}>\n                    <NumberInput\n                      ariaLabel={t('upload:width')}\n                      onChange={(e) => fineTuneCrop({ dimension: 'width', value: e.target.value })}\n                      path=\"cropWidth\"\n                      prefix=\"W\"\n                      readOnly={!imageLoaded}\n                      size=\"medium\"\n                      value={Number(cropWidthPx)}\n                    />\n                    <NumberInput\n                      ariaLabel={t('upload:height')}\n                      onChange={(e) => fineTuneCrop({ dimension: 'height', value: e.target.value })}\n                      path=\"cropHeight\"\n                      prefix=\"H\"\n                      readOnly={!imageLoaded}\n                      size=\"medium\"\n                      value={Number(cropHeightPx)}\n                    />\n                  </div>\n                </div>\n              )}\n\n              {showFocalPoint && (\n                <div className={`${baseClass}__section`}>\n                  <div className={`${baseClass}__section-header`}>\n                    <h3 className={`${baseClass}__section-title`}>{t('upload:focalPoint')}</h3>\n                    <button\n                      aria-label={`${t('general:reset')}: ${t('upload:focalPoint')}`}\n                      className={`${baseClass}__reset`}\n                      onClick={centerFocalPoint}\n                      type=\"button\"\n                    >\n                      <ResetIcon />\n                    </button>\n                  </div>\n                  <div className={`${baseClass}__fieldset`}>\n                    <NumberInput\n                      ariaLabel={`${t('upload:focalPoint')} X`}\n                      max={100}\n                      min={0}\n                      onChange={(e) =>\n                        fineTuneFocalPosition({ coordinate: 'x', value: e.target.value })\n                      }\n                      path=\"focalX\"\n                      prefix=\"X\"\n                      size=\"medium\"\n                      suffix=\"%\"\n                      value={Math.round(focalPosition.x)}\n                    />\n                    <NumberInput\n                      ariaLabel={`${t('upload:focalPoint')} Y`}\n                      max={100}\n                      min={0}\n                      onChange={(e) =>\n                        fineTuneFocalPosition({ coordinate: 'y', value: e.target.value })\n                      }\n                      path=\"focalY\"\n                      prefix=\"Y\"\n                      size=\"medium\"\n                      suffix=\"%\"\n                      value={Math.round(focalPosition.y)}\n                    />\n                  </div>\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n      <DialogFooter>\n        <Button\n          aria-label={t('general:cancel')}\n          buttonStyle=\"secondary\"\n          onClick={() => closeModal(editDrawerSlug)}\n        >\n          {t('general:cancel')}\n        </Button>\n        <Button\n          aria-label={t('general:applyChanges')}\n          buttonStyle=\"primary\"\n          disabled={!imageLoaded}\n          onClick={saveEdits}\n        >\n          {t('general:applyChanges')}\n        </Button>\n      </DialogFooter>\n    </DialogModal>\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 { t } = useTranslation()\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  // Keep a ref to the latest position so global mouseup handler can read it without a stale closure\n  const positionRef = useRef(position)\n  positionRef.current = position\n\n  const getCoordinates = React.useCallback(\n    (mouseX: number, mouseY: number) => {\n      const containerRect = containerRef.current.getBoundingClientRect()\n      const x = ((mouseX - containerRect.left) / containerRect.width) * 100\n      const y = ((mouseY - containerRect.top) / containerRect.height) * 100\n      return { x: Math.max(0, Math.min(100, x)), y: Math.max(0, Math.min(100, y)) }\n    },\n    [containerRef],\n  )\n\n  const handleMouseDown = (event) => {\n    event.preventDefault()\n    setIsDragging(true)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    if (event.altKey || event.ctrlKey || event.metaKey || isDragging) {\n      return\n    }\n    const step = event.shiftKey ? 10 : 1\n    let { x, y } = positionRef.current\n\n    switch (event.key) {\n      case 'ArrowDown':\n        y += step\n        break\n      case 'ArrowLeft':\n        x -= step\n        break\n      case 'ArrowRight':\n        x += step\n        break\n      case 'ArrowUp':\n        y -= step\n        break\n      default:\n        return\n    }\n\n    event.preventDefault()\n    event.stopPropagation()\n    const nextPosition = {\n      x: Math.max(0, Math.min(100, x)),\n      y: Math.max(0, Math.min(100, y)),\n    }\n\n    positionRef.current = nextPosition\n    setPosition(nextPosition)\n    onDragEnd(nextPosition)\n  }\n\n  // Attach global listeners while dragging — this ensures events fire even when\n  // the cursor leaves the focal wrapper area during a fast drag\n  React.useEffect(() => {\n    if (!isDragging) {\n      return\n    }\n\n    const handleMove = (e: MouseEvent) => {\n      if (!containerRef.current) {\n        return\n      }\n      const { x, y } = getCoordinates(e.clientX, e.clientY)\n      setPosition({ x, y })\n    }\n\n    const handleUp = () => {\n      setIsDragging(false)\n      onDragEnd(positionRef.current)\n    }\n\n    document.addEventListener('mousemove', handleMove)\n    document.addEventListener('mouseup', handleUp)\n\n    return () => {\n      document.removeEventListener('mousemove', handleMove)\n      document.removeEventListener('mouseup', handleUp)\n    }\n  }, [isDragging, getCoordinates, onDragEnd, containerRef])\n\n  // Re-check position when crop changes (the crop window may have moved)\n  React.useEffect(() => {\n    if (isDragging || !checkBounds || !dragRef.current) {\n      return\n    }\n    const { height, left, top, width } = dragRef.current.getBoundingClientRect()\n    const { x, y } = getCoordinates(left + width / 2, top + height / 2)\n    onDragEnd({ x, y })\n    setPosition({ x, y })\n    setCheckBounds(false)\n  }, [getCoordinates, isDragging, checkBounds, setCheckBounds, onDragEnd])\n\n  React.useEffect(() => {\n    setPosition({ x: initialPosition.x, y: initialPosition.y })\n  }, [initialPosition.x, initialPosition.y])\n\n  return (\n    <div className={`${baseClass}__draggable-container`}>\n      <button\n        aria-keyshortcuts=\"ArrowLeft ArrowRight ArrowUp ArrowDown Shift+ArrowLeft Shift+ArrowRight Shift+ArrowUp Shift+ArrowDown\"\n        aria-label={t('upload:setFocalPoint')}\n        className={[`${baseClass}__draggable`, className].filter(Boolean).join(' ')}\n        onKeyDown={handleKeyDown}\n        onMouseDown={handleMouseDown}\n        ref={dragRef}\n        style={{ left: `${position.x}%`, top: `${position.y}%` }}\n        type=\"button\"\n      >\n        {children}\n      </button>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/EditUpload/library.css

@@ -0,0 +1,390 @@
+/* CSS manually copied into the payload-default layer from the react-image-crop library */
+/* see: /node_modules/react-image-crop/dist/ReactCrop.css */
+
+@layer payload-default {
+  .ReactCrop {
+    /* Thickness of the corner brackets and edge grab handles. */
+    --crop-handle-thickness: 5px;
+    position: relative;
+    display: inline-block;
+    cursor: crosshair;
+    overflow: hidden;
+    max-width: 100%;
+  }
+
+  .ReactCrop *,
+  .ReactCrop *:before,
+  .ReactCrop *:after {
+    box-sizing: border-box;
+  }
+
+  .ReactCrop--disabled,
+  .ReactCrop--locked {
+    cursor: inherit;
+  }
+
+  .ReactCrop__child-wrapper {
+    max-height: inherit;
+  }
+
+  .ReactCrop__child-wrapper > img,
+  .ReactCrop__child-wrapper > video {
+    display: block;
+    max-width: 100%;
+    max-height: inherit;
+  }
+
+  .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > img,
+  .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > video {
+    touch-action: none;
+  }
+
+  .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection {
+    touch-action: none;
+  }
+
+  .ReactCrop__crop-selection {
+    --crop-ants-speed: 0s;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translateZ(0);
+    cursor: move;
+    box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.5);
+    animation: marching-ants var(--crop-ants-speed) linear infinite;
+    background-image:
+      linear-gradient(to right, transparent 50%, var(--color-border-selected) 50%),
+      linear-gradient(to right, transparent 50%, var(--color-border-selected) 50%),
+      linear-gradient(to bottom, transparent 50%, var(--color-border-selected) 50%),
+      linear-gradient(to bottom, transparent 50%, var(--color-border-selected) 50%);
+    background-size:
+      var(--spacer-2) var(--stroke-width-small),
+      var(--spacer-2) var(--stroke-width-small),
+      var(--stroke-width-small) var(--spacer-2),
+      var(--stroke-width-small) var(--spacer-2);
+    background-position:
+      0 0,
+      0 100%,
+      0 0,
+      100% 0;
+    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+  }
+
+  @keyframes marching-ants {
+    to {
+      background-position:
+        10px 0,
+        -10px 100%,
+        0 -10px,
+        100% 10px;
+    }
+  }
+
+  .ReactCrop--disabled .ReactCrop__crop-selection {
+    cursor: inherit;
+  }
+
+  .ReactCrop--circular-crop .ReactCrop__crop-selection {
+    border-radius: 50%;
+  }
+
+  .ReactCrop__crop-selection:focus-visible {
+    outline: var(--stroke-width-medium) solid var(--color-border-selected);
+    outline-offset: calc(var(--stroke-width-medium) * -1);
+  }
+
+  .ReactCrop--invisible-crop .ReactCrop__crop-selection {
+    display: none;
+  }
+
+  .ReactCrop__rule-of-thirds-vt:before,
+  .ReactCrop__rule-of-thirds-vt:after,
+  .ReactCrop__rule-of-thirds-hz:before,
+  .ReactCrop__rule-of-thirds-hz:after {
+    content: '';
+    display: block;
+    position: absolute;
+    background-color: rgba(255, 255, 255, 0.4);
+  }
+
+  .ReactCrop__rule-of-thirds-vt:before,
+  .ReactCrop__rule-of-thirds-vt:after {
+    width: 1px;
+    height: 100%;
+  }
+
+  .ReactCrop__rule-of-thirds-vt:before {
+    left: 33.3333333333%;
+  }
+
+  .ReactCrop__rule-of-thirds-vt:after {
+    left: 66.6666666667%;
+  }
+
+  .ReactCrop__rule-of-thirds-hz:before,
+  .ReactCrop__rule-of-thirds-hz:after {
+    width: 100%;
+    height: 1px;
+  }
+
+  .ReactCrop__rule-of-thirds-hz:before {
+    top: 33.3333333333%;
+  }
+
+  .ReactCrop__rule-of-thirds-hz:after {
+    top: 66.6666666667%;
+  }
+
+  .ReactCrop__drag-handle {
+    position: absolute;
+  }
+
+  .ReactCrop__drag-handle:after {
+    position: absolute;
+    content: '';
+    display: block;
+    background-color: var(--color-border-selected);
+    outline: 1px solid transparent;
+  }
+
+  .ReactCrop .ReactCrop__drag-handle:focus-visible:after {
+    outline: var(--stroke-width-medium) solid var(--color-border-selected-strong);
+    outline-offset: var(--stroke-width-small);
+  }
+
+  .ReactCrop .ord-nw {
+    top: 0;
+    left: 0;
+    margin-top: -5px;
+    margin-left: -5px;
+    cursor: nw-resize;
+  }
+
+  .ReactCrop .ord-nw:after {
+    top: 0;
+    left: 0;
+  }
+
+  .ReactCrop .ord-n {
+    top: 0;
+    left: 50%;
+    margin-top: -5px;
+    margin-left: -5px;
+    cursor: n-resize;
+  }
+
+  .ReactCrop .ord-n:after {
+    top: 0;
+  }
+
+  .ReactCrop .ord-ne {
+    top: 0;
+    right: 0;
+    margin-top: -5px;
+    margin-right: -5px;
+    cursor: ne-resize;
+  }
+
+  .ReactCrop .ord-ne:after {
+    top: 0;
+    right: 0;
+  }
+
+  .ReactCrop .ord-e {
+    top: 50%;
+    right: 0;
+    margin-top: -5px;
+    margin-right: -5px;
+    cursor: e-resize;
+  }
+
+  .ReactCrop .ord-e:after {
+    right: 0;
+  }
+
+  .ReactCrop .ord-se {
+    bottom: 0;
+    right: 0;
+    margin-bottom: -5px;
+    margin-right: -5px;
+    cursor: se-resize;
+  }
+
+  .ReactCrop .ord-se:after {
+    bottom: 0;
+    right: 0;
+  }
+
+  .ReactCrop .ord-s {
+    bottom: 0;
+    left: 50%;
+    margin-bottom: -5px;
+    margin-left: -5px;
+    cursor: s-resize;
+  }
+
+  .ReactCrop .ord-s:after {
+    bottom: 0;
+  }
+
+  .ReactCrop .ord-sw {
+    bottom: 0;
+    left: 0;
+    margin-bottom: -5px;
+    margin-left: -5px;
+    cursor: sw-resize;
+  }
+
+  .ReactCrop .ord-sw:after {
+    bottom: 0;
+    left: 0;
+  }
+
+  .ReactCrop .ord-w {
+    top: 50%;
+    left: 0;
+    margin-top: -5px;
+    margin-left: -5px;
+    cursor: w-resize;
+  }
+
+  .ReactCrop .ord-w:after {
+    left: 0;
+  }
+
+  /* L-shaped corner handles (matches Figma "Crop handle") */
+  .ReactCrop .ord-nw:after,
+  .ReactCrop .ord-ne:after,
+  .ReactCrop .ord-se:after,
+  .ReactCrop .ord-sw:after {
+    width: 12px;
+    height: 12px;
+    background-color: transparent;
+    border: 0;
+  }
+
+  .ReactCrop .ord-nw:after {
+    top: 5px;
+    left: 5px;
+    border-top: var(--crop-handle-thickness) solid var(--color-border-selected);
+    border-left: var(--crop-handle-thickness) solid var(--color-border-selected);
+  }
+
+  .ReactCrop .ord-ne:after {
+    top: 5px;
+    right: 5px;
+    border-top: var(--crop-handle-thickness) solid var(--color-border-selected);
+    border-right: var(--crop-handle-thickness) solid var(--color-border-selected);
+  }
+
+  .ReactCrop .ord-se:after {
+    bottom: 5px;
+    right: 5px;
+    border-bottom: var(--crop-handle-thickness) solid var(--color-border-selected);
+    border-right: var(--crop-handle-thickness) solid var(--color-border-selected);
+  }
+
+  .ReactCrop .ord-sw:after {
+    bottom: 5px;
+    left: 5px;
+    border-bottom: var(--crop-handle-thickness) solid var(--color-border-selected);
+    border-left: var(--crop-handle-thickness) solid var(--color-border-selected);
+  }
+
+  /* Edge midpoint handles (slim bars) */
+  .ReactCrop .ord-n:after,
+  .ReactCrop .ord-s:after {
+    width: 12px;
+    height: var(--crop-handle-thickness);
+    left: -1px;
+    border-radius: 1px;
+  }
+
+  .ReactCrop .ord-n:after {
+    top: 5px;
+  }
+
+  .ReactCrop .ord-s:after {
+    bottom: 5px;
+  }
+
+  .ReactCrop .ord-e:after,
+  .ReactCrop .ord-w:after {
+    width: var(--crop-handle-thickness);
+    height: 12px;
+    top: -1px;
+    border-radius: 1px;
+  }
+
+  .ReactCrop .ord-e:after {
+    right: 5px;
+  }
+
+  .ReactCrop .ord-w:after {
+    left: 5px;
+  }
+
+  .ReactCrop__disabled .ReactCrop__drag-handle {
+    cursor: inherit;
+  }
+
+  .ReactCrop__drag-bar {
+    position: absolute;
+  }
+
+  .ReactCrop__drag-bar.ord-n {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 6px;
+    margin-top: -3px;
+  }
+
+  .ReactCrop__drag-bar.ord-e {
+    right: 0;
+    top: 0;
+    width: 6px;
+    height: 100%;
+    margin-right: -3px;
+  }
+
+  .ReactCrop__drag-bar.ord-s {
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 6px;
+    margin-bottom: -3px;
+  }
+
+  .ReactCrop__drag-bar.ord-w {
+    top: 0;
+    left: 0;
+    width: 6px;
+    height: 100%;
+    margin-left: -3px;
+  }
+
+  .ReactCrop--new-crop .ReactCrop__drag-bar,
+  .ReactCrop--new-crop .ReactCrop__drag-handle,
+  .ReactCrop--fixed-aspect .ReactCrop__drag-bar,
+  .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,
+  .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,
+  .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,
+  .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w {
+    display: none;
+  }
+
+  @media (pointer: coarse) {
+    .ReactCrop .ord-n,
+    .ReactCrop .ord-e,
+    .ReactCrop .ord-s,
+    .ReactCrop .ord-w {
+      display: none;
+    }
+
+    .ReactCrop__drag-handle {
+      width: 24px;
+      height: 24px;
+    }
+  }
+}

package/dist/elements/EmailAndUsername/index.css

@@ -0,0 +1,7 @@
+@layer payload-default {
+  .login-fields {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-3);
+  }
+}

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

@@ -1,7 +1,7 @@
 import type { TFunction } from '@payloadcms/translations';
 import type { LoginWithUsernameOptions, SanitizedFieldPermissions } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 type RenderEmailAndUsernameFieldsProps = {
     className?: string;
     loginWithUsername?: false | LoginWithUsernameOptions;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/EmailAndUsername/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACzD,OAAO,KAAK,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAGlF,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAIrB,KAAK,iCAAiC,GAAG;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iBAAiB,CAAC,EAAE,KAAK,GAAG,wBAAwB,CAAA;IACpD,SAAS,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC/B,WAAW,CAAC,EACR;QACE,CAAC,SAAS,EAAE,MAAM,GAAG,yBAAyB,CAAA;KAC/C,GACD,IAAI,CAAA;IACR,QAAQ,EAAE,OAAO,CAAA;IACjB,CAAC,EAAE,SAAS,CAAA;CACb,CAAA;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,iCAAiC,qBA8F9E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/EmailAndUsername/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACzD,OAAO,KAAK,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAGlF,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,aAAa,CAAA;AAGpB,KAAK,iCAAiC,GAAG;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iBAAiB,CAAC,EAAE,KAAK,GAAG,wBAAwB,CAAA;IACpD,SAAS,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC/B,WAAW,CAAC,EACR;QACE,CAAC,SAAS,EAAE,MAAM,GAAG,yBAAyB,CAAA;KAC/C,GACD,IAAI,CAAA;IACR,QAAQ,EAAE,OAAO,CAAA;IACjB,CAAC,EAAE,SAAS,CAAA;CACb,CAAA;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,iCAAiC,qBA8F9E"}

package/dist/elements/EmailAndUsername/index.js

@@ -5,8 +5,8 @@ import { email, getFieldPermissions, username } from 'payload/shared';
 import React from 'react';
 import { EmailField } from '../../fields/Email/index.js';
 import { TextField } from '../../fields/Text/index.js';
-import './index.scss';
 import { FieldPathContext } from '../../forms/RenderFields/context.js';
+import './index.css';
 const baseClass = 'login-fields';
 export function EmailAndUsernameFields(props) {
   const {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["email","getFieldPermissions","username","React","EmailField","TextField","FieldPathContext","baseClass","EmailAndUsernameFields","props","className","loginWithUsername","operation","operationFromProps","permissions","readOnly","t","getAuthFieldPermission","fieldName","permissionsResult","field","name","type","parentName","hasEmailFieldOverride","hasUsernameFieldOverride","emailPermissions","read","update","usernamePermissions","showEmailField","requireEmail","allowEmailLogin","showUsernameField","Boolean","_jsxs","filter","join","_jsx","value","admin","autoComplete","label","required","path","schemaPath","validate","requireUsername"],"sources":["../../../src/elements/EmailAndUsername/index.tsx"],"sourcesContent":["'use client'\n\nimport type { TFunction } from '@payloadcms/translations'\nimport type { LoginWithUsernameOptions, SanitizedFieldPermissions } from 'payload'\n\nimport { email, getFieldPermissions, username } from 'payload/shared'\nimport React from 'react'\n\nimport { EmailField } from '../../fields/Email/index.js'\nimport { TextField } from '../../fields/Text/index.js'\nimport './index.scss'\nimport { FieldPathContext } from '../../forms/RenderFields/context.js'\n\nconst baseClass = 'login-fields'\ntype RenderEmailAndUsernameFieldsProps = {\n  className?: string\n  loginWithUsername?: false | LoginWithUsernameOptions\n  operation?: 'create' | 'update'\n  permissions?:\n    | {\n        [fieldName: string]: SanitizedFieldPermissions\n      }\n    | true\n  readOnly: boolean\n  t: TFunction\n}\n\nexport function EmailAndUsernameFields(props: RenderEmailAndUsernameFieldsProps) {\n  const {\n    className,\n    loginWithUsername,\n    operation: operationFromProps,\n    permissions,\n    readOnly,\n    t,\n  } = props\n\n  function getAuthFieldPermission(fieldName: string, operation: 'read' | 'update') {\n    const permissionsResult = getFieldPermissions({\n      field: { name: fieldName, type: 'text' },\n      operation: operationFromProps === 'create' ? 'create' : operation,\n      parentName: '',\n      permissions,\n    })\n    return permissionsResult.operation\n  }\n\n  const hasEmailFieldOverride =\n    typeof permissions === 'object' && 'email' in permissions && permissions.email\n  const hasUsernameFieldOverride =\n    typeof permissions === 'object' && 'username' in permissions && permissions.username\n\n  const emailPermissions = hasEmailFieldOverride\n    ? {\n        read: getAuthFieldPermission('email', 'read'),\n        update: getAuthFieldPermission('email', 'update'),\n      }\n    : {\n        read: true,\n        update: true,\n      }\n\n  const usernamePermissions = hasUsernameFieldOverride\n    ? {\n        read: getAuthFieldPermission('username', 'read'),\n        update: getAuthFieldPermission('username', 'update'),\n      }\n    : {\n        read: true,\n        update: true,\n      }\n\n  const showEmailField =\n    (!loginWithUsername || loginWithUsername?.requireEmail || loginWithUsername?.allowEmailLogin) &&\n    emailPermissions.read\n\n  const showUsernameField = Boolean(loginWithUsername) && usernamePermissions.read\n\n  if (showEmailField || showUsernameField) {\n    return (\n      <div className={[baseClass, className && className].filter(Boolean).join(' ')}>\n        {showEmailField ? (\n          <FieldPathContext value=\"email\">\n            <EmailField\n              field={{\n                name: 'email',\n                admin: {\n                  autoComplete: 'off',\n                },\n                label: t('general:email'),\n                required:\n                  !loginWithUsername || (loginWithUsername && loginWithUsername.requireEmail),\n              }}\n              path=\"email\"\n              readOnly={readOnly || !emailPermissions.update}\n              schemaPath=\"email\"\n              validate={email}\n            />\n          </FieldPathContext>\n        ) : null}\n        {showUsernameField && (\n          <FieldPathContext value=\"username\">\n            <TextField\n              field={{\n                name: 'username',\n                admin: {\n                  autoComplete: 'off',\n                },\n                label: t('authentication:username'),\n                required: loginWithUsername && loginWithUsername.requireUsername,\n              }}\n              path=\"username\"\n              readOnly={readOnly || !usernamePermissions.update}\n              schemaPath=\"username\"\n              validate={username}\n            />\n          </FieldPathContext>\n        )}\n      </div>\n    )\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["email","getFieldPermissions","username","React","EmailField","TextField","FieldPathContext","baseClass","EmailAndUsernameFields","props","className","loginWithUsername","operation","operationFromProps","permissions","readOnly","t","getAuthFieldPermission","fieldName","permissionsResult","field","name","type","parentName","hasEmailFieldOverride","hasUsernameFieldOverride","emailPermissions","read","update","usernamePermissions","showEmailField","requireEmail","allowEmailLogin","showUsernameField","Boolean","_jsxs","filter","join","_jsx","value","admin","autoComplete","label","required","path","schemaPath","validate","requireUsername"],"sources":["../../../src/elements/EmailAndUsername/index.tsx"],"sourcesContent":["'use client'\n\nimport type { TFunction } from '@payloadcms/translations'\nimport type { LoginWithUsernameOptions, SanitizedFieldPermissions } from 'payload'\n\nimport { email, getFieldPermissions, username } from 'payload/shared'\nimport React from 'react'\n\nimport { EmailField } from '../../fields/Email/index.js'\nimport { TextField } from '../../fields/Text/index.js'\nimport { FieldPathContext } from '../../forms/RenderFields/context.js'\nimport './index.css'\n\nconst baseClass = 'login-fields'\ntype RenderEmailAndUsernameFieldsProps = {\n  className?: string\n  loginWithUsername?: false | LoginWithUsernameOptions\n  operation?: 'create' | 'update'\n  permissions?:\n    | {\n        [fieldName: string]: SanitizedFieldPermissions\n      }\n    | true\n  readOnly: boolean\n  t: TFunction\n}\n\nexport function EmailAndUsernameFields(props: RenderEmailAndUsernameFieldsProps) {\n  const {\n    className,\n    loginWithUsername,\n    operation: operationFromProps,\n    permissions,\n    readOnly,\n    t,\n  } = props\n\n  function getAuthFieldPermission(fieldName: string, operation: 'read' | 'update') {\n    const permissionsResult = getFieldPermissions({\n      field: { name: fieldName, type: 'text' },\n      operation: operationFromProps === 'create' ? 'create' : operation,\n      parentName: '',\n      permissions,\n    })\n    return permissionsResult.operation\n  }\n\n  const hasEmailFieldOverride =\n    typeof permissions === 'object' && 'email' in permissions && permissions.email\n  const hasUsernameFieldOverride =\n    typeof permissions === 'object' && 'username' in permissions && permissions.username\n\n  const emailPermissions = hasEmailFieldOverride\n    ? {\n        read: getAuthFieldPermission('email', 'read'),\n        update: getAuthFieldPermission('email', 'update'),\n      }\n    : {\n        read: true,\n        update: true,\n      }\n\n  const usernamePermissions = hasUsernameFieldOverride\n    ? {\n        read: getAuthFieldPermission('username', 'read'),\n        update: getAuthFieldPermission('username', 'update'),\n      }\n    : {\n        read: true,\n        update: true,\n      }\n\n  const showEmailField =\n    (!loginWithUsername || loginWithUsername?.requireEmail || loginWithUsername?.allowEmailLogin) &&\n    emailPermissions.read\n\n  const showUsernameField = Boolean(loginWithUsername) && usernamePermissions.read\n\n  if (showEmailField || showUsernameField) {\n    return (\n      <div className={[baseClass, className && className].filter(Boolean).join(' ')}>\n        {showEmailField ? (\n          <FieldPathContext value=\"email\">\n            <EmailField\n              field={{\n                name: 'email',\n                admin: {\n                  autoComplete: 'off',\n                },\n                label: t('general:email'),\n                required:\n                  !loginWithUsername || (loginWithUsername && loginWithUsername.requireEmail),\n              }}\n              path=\"email\"\n              readOnly={readOnly || !emailPermissions.update}\n              schemaPath=\"email\"\n              validate={email}\n            />\n          </FieldPathContext>\n        ) : null}\n        {showUsernameField && (\n          <FieldPathContext value=\"username\">\n            <TextField\n              field={{\n                name: 'username',\n                admin: {\n                  autoComplete: 'off',\n                },\n                label: t('authentication:username'),\n                required: loginWithUsername && loginWithUsername.requireUsername,\n              }}\n              path=\"username\"\n              readOnly={readOnly || !usernamePermissions.update}\n              schemaPath=\"username\"\n              validate={username}\n            />\n          </FieldPathContext>\n        )}\n      </div>\n    )\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/ErrorPill/index.css

@@ -7,13 +7,12 @@
     padding: 0 var(--spacer-1);
     border-radius: var(--radius-medium);
     line-height: var(--text-body-medium-line-height);
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     letter-spacing: var(--text-letter-spacing);
     text-align: center;
-    background: var(--bg-danger-default);
-    color: var(--text-danger-ondanger);
+    background: var(--color-bg-danger);
+    color: var(--color-text-ondanger);
     height: var(--spacer-3);
   }