@payloadcms/ui 3.68.0-internal-debug.591ab42 → 3.68.0-internal-debug.e9b66ee

package/dist/fields/Upload/HasMany/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/fields/Upload/HasMany/index.tsx"],"sourcesContent":["'use client'\nimport type { JsonObject } from 'payload'\n\nimport React from 'react'\n\nimport { DraggableSortableItem } from '../../../elements/DraggableSortable/DraggableSortableItem/index.js'\nimport { DraggableSortable } from '../../../elements/DraggableSortable/index.js'\nimport { DragHandleIcon } from '../../../icons/DragHandle/index.js'\nimport { RelationshipContent } from '../RelationshipContent/index.js'\nimport { UploadCard } from '../UploadCard/index.js'\n\nconst baseClass = 'upload upload--has-many'\n\nimport { getBestFitFromSizes, isImage } from 'payload/shared'\n\nimport './index.scss'\n\nimport type { ReloadDoc } from '../types.js'\n\ntype Props = {\n  readonly className?: string\n  readonly displayPreview?: boolean\n  readonly fileDocs: {\n    relationTo: string\n    value: JsonObject\n  }[]\n  readonly isSortable?: boolean\n  readonly onRemove?: (value) => void\n  readonly onReorder?: (value) => void\n  readonly readonly?: boolean\n  readonly reloadDoc: ReloadDoc\n  readonly serverURL: string\n  readonly showCollectionSlug?: boolean\n}\n\nexport function UploadComponentHasMany(props: Props) {\n  const {\n    className,\n    displayPreview,\n    fileDocs,\n    isSortable,\n    onRemove,\n    onReorder,\n    readonly,\n    reloadDoc,\n    serverURL,\n    showCollectionSlug = false,\n  } = props\n\n  const moveRow = React.useCallback(\n    (moveFromIndex: number, moveToIndex: number) => {\n      if (moveFromIndex === moveToIndex) {\n        return\n      }\n\n      const updatedArray = [...fileDocs]\n      const [item] = updatedArray.splice(moveFromIndex, 1)\n\n      updatedArray.splice(moveToIndex, 0, item)\n\n      onReorder(updatedArray)\n    },\n    [fileDocs, onReorder],\n  )\n\n  const removeItem = React.useCallback(\n    (index: number) => {\n      const updatedArray = [...(fileDocs || [])]\n      updatedArray.splice(index, 1)\n      onRemove(updatedArray.length === 0 ? [] : updatedArray)\n    },\n    [fileDocs, onRemove],\n  )\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')}>\n      <DraggableSortable\n        className={`${baseClass}__draggable-rows`}\n        ids={fileDocs?.map(({ value }) => String(value.id))}\n        onDragEnd={({ moveFromIndex, moveToIndex }) => moveRow(moveFromIndex, moveToIndex)}\n      >\n        {fileDocs.map(({ relationTo, value }, index) => {\n          const id = String(value.id)\n          let src: string\n          let thumbnailSrc: string\n\n          if (value.url) {\n            try {\n              src = new URL(value.url, serverURL).toString()\n            } catch {\n              src = `${serverURL}${value.url}`\n            }\n          }\n\n          if (value.thumbnailURL) {\n            try {\n              thumbnailSrc = new URL(value.thumbnailURL, serverURL).toString()\n            } catch {\n              thumbnailSrc = `${serverURL}${value.thumbnailURL}`\n            }\n          }\n\n          if (isImage(value.mimeType)) {\n            thumbnailSrc = getBestFitFromSizes({\n              sizes: value.sizes,\n              thumbnailURL: thumbnailSrc,\n              url: src,\n              width: value.width,\n            })\n          }\n\n          return (\n            <DraggableSortableItem disabled={!isSortable || readonly} id={id} key={id}>\n              {(draggableSortableItemProps) => (\n                <div\n                  className={[\n                    `${baseClass}__dragItem`,\n                    draggableSortableItemProps && isSortable && `${baseClass}--has-drag-handle`,\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                  ref={draggableSortableItemProps.setNodeRef}\n                  style={{\n                    transform: draggableSortableItemProps.transform,\n                    transition: draggableSortableItemProps.transition,\n                    zIndex: draggableSortableItemProps.isDragging ? 1 : undefined,\n                  }}\n                >\n                  <UploadCard size=\"small\">\n                    {draggableSortableItemProps && (\n                      <div\n                        className={`${baseClass}__drag`}\n                        {...draggableSortableItemProps.attributes}\n                        {...draggableSortableItemProps.listeners}\n                      >\n                        <DragHandleIcon />\n                      </div>\n                    )}\n\n                    <RelationshipContent\n                      allowEdit={!readonly}\n                      allowRemove={!readonly}\n                      alt={(value?.alt || value?.filename) as string}\n                      byteSize={value.filesize as number}\n                      collectionSlug={relationTo}\n                      displayPreview={displayPreview}\n                      filename={value.filename as string}\n                      id={id}\n                      mimeType={value?.mimeType as string}\n                      onRemove={() => removeItem(index)}\n                      reloadDoc={reloadDoc}\n                      showCollectionSlug={showCollectionSlug}\n                      src={src}\n                      thumbnailSrc={thumbnailSrc}\n                      withMeta={false}\n                      x={value?.width as number}\n                      y={value?.height as number}\n                    />\n                  </UploadCard>\n                </div>\n              )}\n            </DraggableSortableItem>\n          )\n        })}\n      </DraggableSortable>\n    </div>\n  )\n}\n"],"names":["React","DraggableSortableItem","DraggableSortable","DragHandleIcon","RelationshipContent","UploadCard","baseClass","getBestFitFromSizes","isImage","UploadComponentHasMany","props","className","displayPreview","fileDocs","isSortable","onRemove","onReorder","readonly","reloadDoc","serverURL","showCollectionSlug","moveRow","useCallback","moveFromIndex","moveToIndex","updatedArray","item","splice","removeItem","index","length","div","filter","Boolean","join","ids","map","value","String","id","onDragEnd","relationTo","src","thumbnailSrc","url","URL","toString","thumbnailURL","mimeType","sizes","width","disabled","draggableSortableItemProps","ref","setNodeRef","style","transform","transition","zIndex","isDragging","undefined","size","attributes","listeners","allowEdit","allowRemove","alt","filename","byteSize","filesize","collectionSlug","withMeta","x","y","height"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/fields/Upload/HasMany/index.tsx"],"sourcesContent":["'use client'\nimport type { JsonObject } from 'payload'\n\nimport React from 'react'\n\nimport { DraggableSortableItem } from '../../../elements/DraggableSortable/DraggableSortableItem/index.js'\nimport { DraggableSortable } from '../../../elements/DraggableSortable/index.js'\nimport { DragHandleIcon } from '../../../icons/DragHandle/index.js'\nimport { RelationshipContent } from '../RelationshipContent/index.js'\nimport { UploadCard } from '../UploadCard/index.js'\n\nconst baseClass = 'upload upload--has-many'\n\nimport { getBestFitFromSizes, isImage } from 'payload/shared'\n\nimport './index.scss'\n\nimport type { ReloadDoc } from '../types.js'\n\ntype Props = {\n  readonly className?: string\n  readonly displayPreview?: boolean\n  readonly fileDocs: {\n    relationTo: string\n    value: JsonObject\n  }[]\n  readonly isSortable?: boolean\n  readonly onRemove?: (value) => void\n  readonly onReorder?: (value) => void\n  readonly readonly?: boolean\n  readonly reloadDoc: ReloadDoc\n  readonly serverURL: string\n  readonly showCollectionSlug?: boolean\n}\n\nexport function UploadComponentHasMany(props: Props) {\n  const {\n    className,\n    displayPreview,\n    fileDocs,\n    isSortable,\n    onRemove,\n    onReorder,\n    readonly,\n    reloadDoc,\n    serverURL,\n    showCollectionSlug = false,\n  } = props\n\n  const moveRow = React.useCallback(\n    (moveFromIndex: number, moveToIndex: number) => {\n      if (moveFromIndex === moveToIndex) {\n        return\n      }\n\n      const updatedArray = [...fileDocs]\n      const [item] = updatedArray.splice(moveFromIndex, 1)\n\n      updatedArray.splice(moveToIndex, 0, item)\n\n      onReorder(updatedArray)\n    },\n    [fileDocs, onReorder],\n  )\n\n  const removeItem = React.useCallback(\n    (index: number) => {\n      const updatedArray = [...(fileDocs || [])]\n      updatedArray.splice(index, 1)\n      onRemove(updatedArray.length === 0 ? [] : updatedArray)\n    },\n    [fileDocs, onRemove],\n  )\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')}>\n      <DraggableSortable\n        className={`${baseClass}__draggable-rows`}\n        ids={fileDocs?.map(({ value }) => String(value.id))}\n        onDragEnd={({ moveFromIndex, moveToIndex }) => moveRow(moveFromIndex, moveToIndex)}\n      >\n        {fileDocs.map(({ relationTo, value }, index) => {\n          const id = String(value.id)\n          let src: string\n          let thumbnailSrc: string\n\n          if (value.url) {\n            try {\n              src = new URL(value.url, serverURL).toString()\n            } catch {\n              src = `${serverURL}${value.url}`\n            }\n          }\n\n          if (value.thumbnailURL) {\n            try {\n              thumbnailSrc = new URL(value.thumbnailURL, serverURL).toString()\n            } catch {\n              thumbnailSrc = `${serverURL}${value.thumbnailURL}`\n            }\n          }\n\n          if (isImage(value.mimeType)) {\n            thumbnailSrc = getBestFitFromSizes({\n              sizes: value.sizes,\n              thumbnailURL: thumbnailSrc,\n              url: src,\n              width: value.width,\n            })\n          }\n\n          return (\n            <DraggableSortableItem disabled={!isSortable || readonly} id={id} key={id}>\n              {(draggableSortableItemProps) => (\n                <div\n                  className={[\n                    `${baseClass}__dragItem`,\n                    draggableSortableItemProps && isSortable && `${baseClass}--has-drag-handle`,\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                  ref={draggableSortableItemProps.setNodeRef}\n                  style={{\n                    transform: draggableSortableItemProps.transform,\n                    transition: draggableSortableItemProps.transition,\n                    zIndex: draggableSortableItemProps.isDragging ? 1 : undefined,\n                  }}\n                >\n                  <UploadCard size=\"small\">\n                    {draggableSortableItemProps && (\n                      <div\n                        className={`${baseClass}__drag`}\n                        {...draggableSortableItemProps.attributes}\n                        {...draggableSortableItemProps.listeners}\n                      >\n                        <DragHandleIcon />\n                      </div>\n                    )}\n\n                    <RelationshipContent\n                      allowEdit={!readonly}\n                      allowRemove={!readonly}\n                      alt={(value?.alt || value?.filename) as string}\n                      byteSize={value.filesize as number}\n                      collectionSlug={relationTo}\n                      displayPreview={displayPreview}\n                      filename={value.filename as string}\n                      id={id}\n                      mimeType={value?.mimeType as string}\n                      onRemove={() => removeItem(index)}\n                      reloadDoc={reloadDoc}\n                      showCollectionSlug={showCollectionSlug}\n                      src={src}\n                      thumbnailSrc={thumbnailSrc}\n                      withMeta={false}\n                      x={value?.width as number}\n                      y={value?.height as number}\n                    />\n                  </UploadCard>\n                </div>\n              )}\n            </DraggableSortableItem>\n          )\n        })}\n      </DraggableSortable>\n    </div>\n  )\n}\n"],"names":["React","DraggableSortableItem","DraggableSortable","DragHandleIcon","RelationshipContent","UploadCard","baseClass","getBestFitFromSizes","isImage","UploadComponentHasMany","props","className","displayPreview","fileDocs","isSortable","onRemove","onReorder","readonly","reloadDoc","serverURL","showCollectionSlug","moveRow","useCallback","moveFromIndex","moveToIndex","updatedArray","item","splice","removeItem","index","length","div","filter","Boolean","join","ids","map","value","String","id","onDragEnd","relationTo","src","thumbnailSrc","url","URL","toString","thumbnailURL","mimeType","sizes","width","disabled","key","draggableSortableItemProps","ref","setNodeRef","style","transform","transition","zIndex","isDragging","undefined","size","attributes","listeners","allowEdit","allowRemove","alt","filename","byteSize","filesize","collectionSlug","withMeta","x","y","height"],"mappings":"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"}

package/dist/fields/Upload/HasOne/index.js

@@ -1,7 +1,5 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { getBestFitFromSizes, isImage } from 'payload/shared';
-import React from 'react';
 import './index.scss';
 import { RelationshipContent } from '../RelationshipContent/index.js';
 import { UploadCard } from '../UploadCard/index.js';
@@ -34,38 +32,12 @@ export function UploadComponentHasOne(props) {
             width: value.width
         });
     }
-    return /*#__PURE__*/ _jsxDEV(UploadCard, {
-        className: [
-            baseClass,
-            className
-        ].filter(Boolean).join(' '),
-        children: /*#__PURE__*/ _jsxDEV(RelationshipContent, {
-            allowEdit: !readonly,
-            allowRemove: !readonly,
-            alt: value?.alt || value?.filename,
-            byteSize: value.filesize,
-            collectionSlug: relationTo,
-            displayPreview: displayPreview,
-            filename: value.filename,
-            id: id,
-            mimeType: value?.mimeType,
-            onRemove: onRemove,
-            reloadDoc: reloadDoc,
-            showCollectionSlug: showCollectionSlug,
-            src: src,
-            thumbnailSrc: thumbnailSrc,
-            x: value?.width,
-            y: value?.height
-        }, void 0, false, {
-            fileName: "src/fields/Upload/HasOne/index.tsx",
-            lineNumber: 74,
-            columnNumber: 7
-        }, this)
-    }, void 0, false, {
-        fileName: "src/fields/Upload/HasOne/index.tsx",
-        lineNumber: 73,
-        columnNumber: 5
-    }, this);
+    return <UploadCard className={[
+        baseClass,
+        className
+    ].filter(Boolean).join(' ')}>
+      <RelationshipContent allowEdit={!readonly} allowRemove={!readonly} alt={value?.alt || value?.filename} byteSize={value.filesize} collectionSlug={relationTo} displayPreview={displayPreview} filename={value.filename} id={id} mimeType={value?.mimeType} onRemove={onRemove} reloadDoc={reloadDoc} showCollectionSlug={showCollectionSlug} src={src} thumbnailSrc={thumbnailSrc} x={value?.width} y={value?.height}/>
+    </UploadCard>;
 }
 
 //# sourceMappingURL=index.js.map

package/dist/fields/Upload/HasOne/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/fields/Upload/HasOne/index.tsx"],"sourcesContent":["'use client'\n\nimport type { JsonObject } from 'payload'\n\nimport { getBestFitFromSizes, isImage } from 'payload/shared'\nimport React from 'react'\n\nimport type { ReloadDoc } from '../types.js'\n\nimport './index.scss'\nimport { RelationshipContent } from '../RelationshipContent/index.js'\nimport { UploadCard } from '../UploadCard/index.js'\n\nconst baseClass = 'upload upload--has-one'\n\ntype Props = {\n  readonly className?: string\n  readonly displayPreview?: boolean\n  readonly fileDoc: {\n    relationTo: string\n    value: JsonObject\n  }\n  readonly onRemove?: () => void\n  readonly readonly?: boolean\n  readonly reloadDoc: ReloadDoc\n  readonly serverURL: string\n  readonly showCollectionSlug?: boolean\n}\n\nexport function UploadComponentHasOne(props: Props) {\n  const {\n    className,\n    displayPreview,\n    fileDoc,\n    onRemove,\n    readonly,\n    reloadDoc,\n    serverURL,\n    showCollectionSlug = false,\n  } = props\n  const { relationTo, value } = fileDoc\n  const id = String(value?.id)\n\n  let src: string\n  let thumbnailSrc: string\n\n  if (value.url) {\n    try {\n      src = new URL(value.url, serverURL).toString()\n    } catch {\n      src = `${serverURL}${value.url}`\n    }\n  }\n\n  if (value.thumbnailURL) {\n    try {\n      thumbnailSrc = new URL(value.thumbnailURL, serverURL).toString()\n    } catch {\n      thumbnailSrc = `${serverURL}${value.thumbnailURL}`\n    }\n  }\n\n  if (isImage(value.mimeType)) {\n    thumbnailSrc = getBestFitFromSizes({\n      sizes: value.sizes,\n      thumbnailURL: thumbnailSrc,\n      url: src,\n      width: value.width,\n    })\n  }\n\n  return (\n    <UploadCard className={[baseClass, className].filter(Boolean).join(' ')}>\n      <RelationshipContent\n        allowEdit={!readonly}\n        allowRemove={!readonly}\n        alt={(value?.alt || value?.filename) as string}\n        byteSize={value.filesize as number}\n        collectionSlug={relationTo}\n        displayPreview={displayPreview}\n        filename={value.filename as string}\n        id={id}\n        mimeType={value?.mimeType as string}\n        onRemove={onRemove}\n        reloadDoc={reloadDoc}\n        showCollectionSlug={showCollectionSlug}\n        src={src}\n        thumbnailSrc={thumbnailSrc}\n        x={value?.width as number}\n        y={value?.height as number}\n      />\n    </UploadCard>\n  )\n}\n"],"names":["getBestFitFromSizes","isImage","React","RelationshipContent","UploadCard","baseClass","UploadComponentHasOne","props","className","displayPreview","fileDoc","onRemove","readonly","reloadDoc","serverURL","showCollectionSlug","relationTo","value","id","String","src","thumbnailSrc","url","URL","toString","thumbnailURL","mimeType","sizes","width","filter","Boolean","join","allowEdit","allowRemove","alt","filename","byteSize","filesize","collectionSlug","x","y","height"],"mappings":"AAAA;;AAIA,SAASA,mBAAmB,EAAEC,OAAO,QAAQ,iBAAgB;AAC7D,OAAOC,WAAW,QAAO;AAIzB,OAAO,eAAc;AACrB,SAASC,mBAAmB,QAAQ,kCAAiC;AACrE,SAASC,UAAU,QAAQ,yBAAwB;AAEnD,MAAMC,YAAY;AAgBlB,OAAO,SAASC,sBAAsBC,KAAY;IAChD,MAAM,EACJC,SAAS,EACTC,cAAc,EACdC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,SAAS,EACTC,qBAAqB,KAAK,EAC3B,GAAGR;IACJ,MAAM,EAAES,UAAU,EAAEC,KAAK,EAAE,GAAGP;IAC9B,MAAMQ,KAAKC,OAAOF,OAAOC;IAEzB,IAAIE;IACJ,IAAIC;IAEJ,IAAIJ,MAAMK,GAAG,EAAE;QACb,IAAI;YACFF,MAAM,IAAIG,IAAIN,MAAMK,GAAG,EAAER,WAAWU,QAAQ;QAC9C,EAAE,OAAM;YACNJ,MAAM,GAAGN,YAAYG,MAAMK,GAAG,EAAE;QAClC;IACF;IAEA,IAAIL,MAAMQ,YAAY,EAAE;QACtB,IAAI;YACFJ,eAAe,IAAIE,IAAIN,MAAMQ,YAAY,EAAEX,WAAWU,QAAQ;QAChE,EAAE,OAAM;YACNH,eAAe,GAAGP,YAAYG,MAAMQ,YAAY,EAAE;QACpD;IACF;IAEA,IAAIxB,QAAQgB,MAAMS,QAAQ,GAAG;QAC3BL,eAAerB,oBAAoB;YACjC2B,OAAOV,MAAMU,KAAK;YAClBF,cAAcJ;YACdC,KAAKF;YACLQ,OAAOX,MAAMW,KAAK;QACpB;IACF;IAEA,qBACE,QAACxB;QAAWI,WAAW;YAACH;YAAWG;SAAU,CAACqB,MAAM,CAACC,SAASC,IAAI,CAAC;kBACjE,cAAA,QAAC5B;YACC6B,WAAW,CAACpB;YACZqB,aAAa,CAACrB;YACdsB,KAAMjB,OAAOiB,OAAOjB,OAAOkB;YAC3BC,UAAUnB,MAAMoB,QAAQ;YACxBC,gBAAgBtB;YAChBP,gBAAgBA;YAChB0B,UAAUlB,MAAMkB,QAAQ;YACxBjB,IAAIA;YACJQ,UAAUT,OAAOS;YACjBf,UAAUA;YACVE,WAAWA;YACXE,oBAAoBA;YACpBK,KAAKA;YACLC,cAAcA;YACdkB,GAAGtB,OAAOW;YACVY,GAAGvB,OAAOwB;;;;;;;;;;;AAIlB"}
+{"version":3,"sources":["../../../../src/fields/Upload/HasOne/index.tsx"],"sourcesContent":["'use client'\n\nimport type { JsonObject } from 'payload'\n\nimport { getBestFitFromSizes, isImage } from 'payload/shared'\nimport React from 'react'\n\nimport type { ReloadDoc } from '../types.js'\n\nimport './index.scss'\nimport { RelationshipContent } from '../RelationshipContent/index.js'\nimport { UploadCard } from '../UploadCard/index.js'\n\nconst baseClass = 'upload upload--has-one'\n\ntype Props = {\n  readonly className?: string\n  readonly displayPreview?: boolean\n  readonly fileDoc: {\n    relationTo: string\n    value: JsonObject\n  }\n  readonly onRemove?: () => void\n  readonly readonly?: boolean\n  readonly reloadDoc: ReloadDoc\n  readonly serverURL: string\n  readonly showCollectionSlug?: boolean\n}\n\nexport function UploadComponentHasOne(props: Props) {\n  const {\n    className,\n    displayPreview,\n    fileDoc,\n    onRemove,\n    readonly,\n    reloadDoc,\n    serverURL,\n    showCollectionSlug = false,\n  } = props\n  const { relationTo, value } = fileDoc\n  const id = String(value?.id)\n\n  let src: string\n  let thumbnailSrc: string\n\n  if (value.url) {\n    try {\n      src = new URL(value.url, serverURL).toString()\n    } catch {\n      src = `${serverURL}${value.url}`\n    }\n  }\n\n  if (value.thumbnailURL) {\n    try {\n      thumbnailSrc = new URL(value.thumbnailURL, serverURL).toString()\n    } catch {\n      thumbnailSrc = `${serverURL}${value.thumbnailURL}`\n    }\n  }\n\n  if (isImage(value.mimeType)) {\n    thumbnailSrc = getBestFitFromSizes({\n      sizes: value.sizes,\n      thumbnailURL: thumbnailSrc,\n      url: src,\n      width: value.width,\n    })\n  }\n\n  return (\n    <UploadCard className={[baseClass, className].filter(Boolean).join(' ')}>\n      <RelationshipContent\n        allowEdit={!readonly}\n        allowRemove={!readonly}\n        alt={(value?.alt || value?.filename) as string}\n        byteSize={value.filesize as number}\n        collectionSlug={relationTo}\n        displayPreview={displayPreview}\n        filename={value.filename as string}\n        id={id}\n        mimeType={value?.mimeType as string}\n        onRemove={onRemove}\n        reloadDoc={reloadDoc}\n        showCollectionSlug={showCollectionSlug}\n        src={src}\n        thumbnailSrc={thumbnailSrc}\n        x={value?.width as number}\n        y={value?.height as number}\n      />\n    </UploadCard>\n  )\n}\n"],"names":["getBestFitFromSizes","isImage","RelationshipContent","UploadCard","baseClass","UploadComponentHasOne","props","className","displayPreview","fileDoc","onRemove","readonly","reloadDoc","serverURL","showCollectionSlug","relationTo","value","id","String","src","thumbnailSrc","url","URL","toString","thumbnailURL","mimeType","sizes","width","filter","Boolean","join","allowEdit","allowRemove","alt","filename","byteSize","filesize","collectionSlug","x","y","height"],"mappings":"AAAA;AAIA,SAASA,mBAAmB,EAAEC,OAAO,QAAQ,iBAAgB;AAK7D,OAAO,eAAc;AACrB,SAASC,mBAAmB,QAAQ,kCAAiC;AACrE,SAASC,UAAU,QAAQ,yBAAwB;AAEnD,MAAMC,YAAY;AAgBlB,OAAO,SAASC,sBAAsBC,KAAY;IAChD,MAAM,EACJC,SAAS,EACTC,cAAc,EACdC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,SAAS,EACTC,qBAAqB,KAAK,EAC3B,GAAGR;IACJ,MAAM,EAAES,UAAU,EAAEC,KAAK,EAAE,GAAGP;IAC9B,MAAMQ,KAAKC,OAAOF,OAAOC;IAEzB,IAAIE;IACJ,IAAIC;IAEJ,IAAIJ,MAAMK,GAAG,EAAE;QACb,IAAI;YACFF,MAAM,IAAIG,IAAIN,MAAMK,GAAG,EAAER,WAAWU,QAAQ;QAC9C,EAAE,OAAM;YACNJ,MAAM,GAAGN,YAAYG,MAAMK,GAAG,EAAE;QAClC;IACF;IAEA,IAAIL,MAAMQ,YAAY,EAAE;QACtB,IAAI;YACFJ,eAAe,IAAIE,IAAIN,MAAMQ,YAAY,EAAEX,WAAWU,QAAQ;QAChE,EAAE,OAAM;YACNH,eAAe,GAAGP,YAAYG,MAAMQ,YAAY,EAAE;QACpD;IACF;IAEA,IAAIvB,QAAQe,MAAMS,QAAQ,GAAG;QAC3BL,eAAepB,oBAAoB;YACjC0B,OAAOV,MAAMU,KAAK;YAClBF,cAAcJ;YACdC,KAAKF;YACLQ,OAAOX,MAAMW,KAAK;QACpB;IACF;IAEA,QACGxB,WAAWI,WAAW;QAACH;QAAWG;KAAU,CAACqB,MAAM,CAACC,SAASC,IAAI,CAAC,MAAM;MACvE,CAAC5B,oBACC6B,WAAW,CAACpB,UACZqB,aAAa,CAACrB,UACdsB,KAAMjB,OAAOiB,OAAOjB,OAAOkB,UAC3BC,UAAUnB,MAAMoB,QAAQ,EACxBC,gBAAgBtB,YAChBP,gBAAgBA,gBAChB0B,UAAUlB,MAAMkB,QAAQ,EACxBjB,IAAIA,IACJQ,UAAUT,OAAOS,UACjBf,UAAUA,UACVE,WAAWA,WACXE,oBAAoBA,oBACpBK,KAAKA,KACLC,cAAcA,cACdkB,GAAGtB,OAAOW,OACVY,GAAGvB,OAAOwB,SACV;IACJ,EAAErC;AAEN"}

package/dist/fields/Upload/Input.js

@@ -1,5 +1,4 @@
 'use client';
-import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
 import { useModal } from '@faceless-ui/modal';
 import * as qs from 'qs-esm';
 import React, { useCallback, useEffect, useMemo } from 'react';
@@ -543,253 +542,66 @@ export const baseClass = 'upload';
         setOnSuccess
     ]);
     const showDropzone = !value || hasMany && Array.isArray(value) && (typeof maxRows !== 'number' || value.length < maxRows) || !hasMany && populatedDocs?.[0] && typeof populatedDocs[0].value === 'undefined';
-    return /*#__PURE__*/ _jsxDEV("div", {
-        className: [
-            fieldBaseClass,
-            baseClass,
-            className,
-            showError && 'error',
-            readOnly && 'read-only'
-        ].filter(Boolean).join(' '),
-        id: `field-${path?.replace(/\./g, '__')}`,
-        style: style,
-        children: [
-            /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
-                CustomComponent: Label,
-                Fallback: /*#__PURE__*/ _jsxDEV(FieldLabel, {
-                    label: label,
-                    localized: localized,
-                    path: path,
-                    required: required
-                }, void 0, false, {
-                    fileName: "src/fields/Upload/Input.tsx",
-                    lineNumber: 657,
-                    columnNumber: 11
-                }, void 0)
-            }, void 0, false, {
-                fileName: "src/fields/Upload/Input.tsx",
-                lineNumber: 654,
-                columnNumber: 7
-            }, this),
-            /*#__PURE__*/ _jsxDEV("div", {
-                className: `${baseClass}__wrap`,
-                children: /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
-                    CustomComponent: Error,
-                    Fallback: /*#__PURE__*/ _jsxDEV(FieldError, {
-                        path: path,
-                        showError: showError
-                    }, void 0, false, {
-                        fileName: "src/fields/Upload/Input.tsx",
-                        lineNumber: 663,
-                        columnNumber: 21
-                    }, void 0)
-                }, void 0, false, {
-                    fileName: "src/fields/Upload/Input.tsx",
-                    lineNumber: 661,
-                    columnNumber: 9
-                }, this)
-            }, void 0, false, {
-                fileName: "src/fields/Upload/Input.tsx",
-                lineNumber: 660,
-                columnNumber: 7
-            }, this),
-            BeforeInput,
-            /*#__PURE__*/ _jsxDEV("div", {
-                className: `${baseClass}__dropzoneAndUpload`,
-                children: [
-                    hasMany && Array.isArray(value) && value.length > 0 ? /*#__PURE__*/ _jsxDEV(_Fragment, {
-                        children: populatedDocs && populatedDocs?.length > 0 ? /*#__PURE__*/ _jsxDEV(UploadComponentHasMany, {
-                            displayPreview: displayPreview,
-                            fileDocs: populatedDocs,
-                            isSortable: isSortable && !readOnly,
-                            onRemove: onRemove,
-                            onReorder: onReorder,
-                            readonly: readOnly,
-                            reloadDoc: reloadDoc,
-                            serverURL: serverURL,
-                            showCollectionSlug: Array.isArray(relationTo)
-                        }, void 0, false, {
-                            fileName: "src/fields/Upload/Input.tsx",
-                            lineNumber: 671,
-                            columnNumber: 15
-                        }, this) : /*#__PURE__*/ _jsxDEV("div", {
-                            className: `${baseClass}__loadingRows`,
-                            children: value.map((id)=>/*#__PURE__*/ _jsxDEV(ShimmerEffect, {
-                                    height: "40px"
-                                }, typeof id === 'object' ? id.value : id, false, {
-                                    fileName: "src/fields/Upload/Input.tsx",
-                                    lineNumber: 685,
-                                    columnNumber: 19
-                                }, this))
-                        }, void 0, false, {
-                            fileName: "src/fields/Upload/Input.tsx",
-                            lineNumber: 683,
-                            columnNumber: 15
-                        }, this)
-                    }, void 0, false) : null,
-                    !hasMany && value ? /*#__PURE__*/ _jsxDEV(_Fragment, {
-                        children: populatedDocs && populatedDocs?.length > 0 && populatedDocs[0].value ? /*#__PURE__*/ _jsxDEV(UploadComponentHasOne, {
-                            displayPreview: displayPreview,
-                            fileDoc: populatedDocs[0],
-                            onRemove: onRemove,
-                            readonly: readOnly,
-                            reloadDoc: reloadDoc,
-                            serverURL: serverURL,
-                            showCollectionSlug: Array.isArray(relationTo)
-                        }, void 0, false, {
-                            fileName: "src/fields/Upload/Input.tsx",
-                            lineNumber: 694,
-                            columnNumber: 15
-                        }, this) : populatedDocs && value && !populatedDocs?.[0]?.value ? /*#__PURE__*/ _jsxDEV(_Fragment, {
-                            children: [
-                                t('general:untitled'),
-                                " - ID: ",
-                                value
-                            ]
-                        }, void 0, true) : /*#__PURE__*/ _jsxDEV(ShimmerEffect, {
-                            height: "62px"
-                        }, void 0, false, {
-                            fileName: "src/fields/Upload/Input.tsx",
-                            lineNumber: 708,
-                            columnNumber: 15
-                        }, this)
-                    }, void 0, false) : null,
-                    showDropzone ? /*#__PURE__*/ _jsxDEV(Dropzone, {
-                        disabled: readOnly || !canCreate,
-                        multipleFiles: hasMany,
-                        onChange: onLocalFileSelection,
-                        children: /*#__PURE__*/ _jsxDEV("div", {
-                            className: `${baseClass}__dropzoneContent`,
-                            children: [
-                                /*#__PURE__*/ _jsxDEV("div", {
-                                    className: `${baseClass}__dropzoneContent__buttons`,
-                                    children: [
-                                        canCreate && /*#__PURE__*/ _jsxDEV(_Fragment, {
-                                            children: [
-                                                /*#__PURE__*/ _jsxDEV(Button, {
-                                                    buttonStyle: "pill",
-                                                    className: `${baseClass}__createNewToggler`,
-                                                    disabled: readOnly || !canCreate,
-                                                    onClick: ()=>{
-                                                        if (!readOnly) {
-                                                            if (hasMany) {
-                                                                onLocalFileSelection();
-                                                            } else {
-                                                                openCreateDocDrawer();
-                                                            }
-                                                        }
-                                                    },
-                                                    size: "small",
-                                                    children: t('general:createNew')
-                                                }, void 0, false, {
-                                                    fileName: "src/fields/Upload/Input.tsx",
-                                                    lineNumber: 722,
-                                                    columnNumber: 21
-                                                }, this),
-                                                /*#__PURE__*/ _jsxDEV("span", {
-                                                    className: `${baseClass}__dropzoneContent__orText`,
-                                                    children: t('general:or')
-                                                }, void 0, false, {
-                                                    fileName: "src/fields/Upload/Input.tsx",
-                                                    lineNumber: 739,
-                                                    columnNumber: 21
-                                                }, this)
-                                            ]
-                                        }, void 0, true),
-                                        /*#__PURE__*/ _jsxDEV(Button, {
-                                            buttonStyle: "pill",
-                                            className: `${baseClass}__listToggler`,
-                                            disabled: readOnly,
-                                            onClick: openListDrawer,
-                                            size: "small",
-                                            children: t('fields:chooseFromExisting')
-                                        }, void 0, false, {
-                                            fileName: "src/fields/Upload/Input.tsx",
-                                            lineNumber: 744,
-                                            columnNumber: 17
-                                        }, this),
-                                        /*#__PURE__*/ _jsxDEV(CreateDocDrawer, {
-                                            onSave: onDocCreate
-                                        }, void 0, false, {
-                                            fileName: "src/fields/Upload/Input.tsx",
-                                            lineNumber: 753,
-                                            columnNumber: 17
-                                        }, this),
-                                        /*#__PURE__*/ _jsxDEV(ListDrawer, {
-                                            allowCreate: canCreate,
-                                            enableRowSelections: hasMany,
-                                            onBulkSelect: onListBulkSelect,
-                                            onSelect: onListSelect
-                                        }, void 0, false, {
-                                            fileName: "src/fields/Upload/Input.tsx",
-                                            lineNumber: 754,
-                                            columnNumber: 17
-                                        }, this)
-                                    ]
-                                }, void 0, true, {
-                                    fileName: "src/fields/Upload/Input.tsx",
-                                    lineNumber: 719,
-                                    columnNumber: 15
-                                }, this),
-                                canCreate && !readOnly && /*#__PURE__*/ _jsxDEV("p", {
-                                    className: `${baseClass}__dragAndDropText`,
-                                    children: [
-                                        t('general:or'),
-                                        " ",
-                                        t('upload:dragAndDrop')
-                                    ]
-                                }, void 0, true, {
-                                    fileName: "src/fields/Upload/Input.tsx",
-                                    lineNumber: 763,
-                                    columnNumber: 17
-                                }, this)
-                            ]
-                        }, void 0, true, {
-                            fileName: "src/fields/Upload/Input.tsx",
-                            lineNumber: 718,
-                            columnNumber: 13
-                        }, this)
-                    }, void 0, false, {
-                        fileName: "src/fields/Upload/Input.tsx",
-                        lineNumber: 713,
-                        columnNumber: 11
-                    }, this) : /*#__PURE__*/ _jsxDEV(_Fragment, {
-                        children: !readOnly && !populatedDocs && (!value || typeof maxRows !== 'number' || Array.isArray(value) && value.length < maxRows) ? /*#__PURE__*/ _jsxDEV(ShimmerEffect, {
-                            height: "40px"
-                        }, void 0, false, {
-                            fileName: "src/fields/Upload/Input.tsx",
-                            lineNumber: 776,
-                            columnNumber: 15
-                        }, this) : null
-                    }, void 0, false)
-                ]
-            }, void 0, true, {
-                fileName: "src/fields/Upload/Input.tsx",
-                lineNumber: 667,
-                columnNumber: 7
-            }, this),
-            AfterInput,
-            /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
-                CustomComponent: Description,
-                Fallback: /*#__PURE__*/ _jsxDEV(FieldDescription, {
-                    description: description,
-                    path: path
-                }, void 0, false, {
-                    fileName: "src/fields/Upload/Input.tsx",
-                    lineNumber: 784,
-                    columnNumber: 19
-                }, void 0)
-            }, void 0, false, {
-                fileName: "src/fields/Upload/Input.tsx",
-                lineNumber: 782,
-                columnNumber: 7
-            }, this)
-        ]
-    }, void 0, true, {
-        fileName: "src/fields/Upload/Input.tsx",
-        lineNumber: 641,
-        columnNumber: 5
-    }, this);
+    return <div className={[
+        fieldBaseClass,
+        baseClass,
+        className,
+        showError && 'error',
+        readOnly && 'read-only'
+    ].filter(Boolean).join(' ')} id={`field-${path?.replace(/\./g, '__')}`} style={style}>
+      <RenderCustomComponent CustomComponent={Label} Fallback={<FieldLabel label={label} localized={localized} path={path} required={required}/>}/>
+      <div className={`${baseClass}__wrap`}>
+        <RenderCustomComponent CustomComponent={Error} Fallback={<FieldError path={path} showError={showError}/>}/>
+      </div>
+      {BeforeInput}
+      <div className={`${baseClass}__dropzoneAndUpload`}>
+        {hasMany && Array.isArray(value) && value.length > 0 ? <>
+            {populatedDocs && populatedDocs?.length > 0 ? <UploadComponentHasMany displayPreview={displayPreview} fileDocs={populatedDocs} isSortable={isSortable && !readOnly} onRemove={onRemove} onReorder={onReorder} readonly={readOnly} reloadDoc={reloadDoc} serverURL={serverURL} showCollectionSlug={Array.isArray(relationTo)}/> : <div className={`${baseClass}__loadingRows`}>
+                {value.map((id)=><ShimmerEffect height="40px" key={typeof id === 'object' ? id.value : id}/>)}
+              </div>}
+          </> : null}
+        {!hasMany && value ? <>
+            {populatedDocs && populatedDocs?.length > 0 && populatedDocs[0].value ? <UploadComponentHasOne displayPreview={displayPreview} fileDoc={populatedDocs[0]} onRemove={onRemove} readonly={readOnly} reloadDoc={reloadDoc} serverURL={serverURL} showCollectionSlug={Array.isArray(relationTo)}/> : populatedDocs && value && !populatedDocs?.[0]?.value ? <>
+                {t('general:untitled')} - ID: {value}
+              </> : <ShimmerEffect height="62px"/>}
+          </> : null}
+        {showDropzone ? <Dropzone disabled={readOnly || !canCreate} multipleFiles={hasMany} onChange={onLocalFileSelection}>
+            <div className={`${baseClass}__dropzoneContent`}>
+              <div className={`${baseClass}__dropzoneContent__buttons`}>
+                {canCreate && <>
+                    <Button buttonStyle="pill" className={`${baseClass}__createNewToggler`} disabled={readOnly || !canCreate} onClick={()=>{
+        if (!readOnly) {
+            if (hasMany) {
+                onLocalFileSelection();
+            } else {
+                openCreateDocDrawer();
+            }
+        }
+    }} size="small">
+                      {t('general:createNew')}
+                    </Button>
+                    <span className={`${baseClass}__dropzoneContent__orText`}>
+                      {t('general:or')}
+                    </span>
+                  </>}
+                <Button buttonStyle="pill" className={`${baseClass}__listToggler`} disabled={readOnly} onClick={openListDrawer} size="small">
+                  {t('fields:chooseFromExisting')}
+                </Button>
+                <CreateDocDrawer onSave={onDocCreate}/>
+                <ListDrawer allowCreate={canCreate} enableRowSelections={hasMany} onBulkSelect={onListBulkSelect} onSelect={onListSelect}/>
+              </div>
+
+              {canCreate && !readOnly && <p className={`${baseClass}__dragAndDropText`}>
+                  {t('general:or')} {t('upload:dragAndDrop')}
+                </p>}
+            </div>
+          </Dropzone> : <>
+            {!readOnly && !populatedDocs && (!value || typeof maxRows !== 'number' || Array.isArray(value) && value.length < maxRows) ? <ShimmerEffect height="40px"/> : null}
+          </>}
+      </div>
+      {AfterInput}
+      <RenderCustomComponent CustomComponent={Description} Fallback={<FieldDescription description={description} path={path}/>}/>
+    </div>;
 }
 
 //# sourceMappingURL=Input.js.map